/**
 * NIELITian OS — Responsive / device-adaptive layer
 * Desktop and laptop use the existing default styles untouched. This file
 * only adds rules for touch devices (mobile/tablet), the TV/webOS skin, and
 * the keyboard/remote focus ring — layered on top, never replacing, the base
 * window/taskbar/app CSS.
 */

/* ---------- Keyboard / TV-remote focus ring ---------------------------- */
/* Only visible once the person actually starts navigating with arrow keys
   or a remote (see core/input/remote-nav.js toggling this class) — mouse
   and touch users never see a focus ring. */
html:not(.remote-nav-active) *:focus{ outline:none; }
html.remote-nav-active *:focus{
  outline:2.5px solid var(--os-accent,#4f46e5);
  outline-offset:2px;
  border-radius:6px;
}
html.remote-nav-active .tb-btn:focus,
html.remote-nav-active .tb-pin-btn:focus,
html.remote-nav-active .d-icon:focus,
html.remote-nav-active .fg-item:focus{
  outline-offset:3px;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--os-accent,#4f46e5) 30%, transparent);
}

/* ================================================================
   TOUCH DEVICES — phones and tablets (coarse pointer, no hover)
   ================================================================ */
@media (pointer: coarse){
  /* Bigger tap targets everywhere a mouse-era 24-30px control would be
     too small to reliably hit with a finger (WCAG/Apple/Material all
     recommend a ~44px minimum touch target). */
  .tb-btn,.tb-pin-btn,#start-btn,.fa-btn,.am-btn,.mp-tbtn,.wbtn,
  .sp-tab,.fcm-item,.vfsp-item,.d-icon{ min-height:40px; }
  .fg-item{ padding:10px 6px; }
  .fg-row{ padding:9px 10px; }

  /* Window chrome: dragging/resizing tiny title bars and 16px resize
     handles by finger is unreliable — widen both. */
  .win-tb{ height:44px; }
  .win-resize-handle{ width:26px; height:26px; }
}

/* ---------- Phones: windows are effectively the whole screen ---------- */
@media (max-width: 700px){
  /* A floating, draggable, resizable window model doesn't work at phone
     width — every window fills the usable desktop area below the taskbar,
     one at a time, like a real mobile OS. Dragging/resizing are disabled
     rather than just visually hidden, since the handles would otherwise
     still capture touch events meant for the app underneath. */
  .win{
    left:0 !important; top:0 !important;
    width:100% !important; height:100% !important;
    border-radius:0; border:none;
  }
  .win-resize-handle{ display:none; }
  .win-tb{ cursor:default; }

  #pinned-apps{ display:none; }
  #taskbar-osname{ display:none; }
  .fa-sidebar{ display:none; } /* Files app: sidebar shortcuts still reachable via the path bar */
  .mp-playlist-pane{ position:absolute; right:0; top:0; bottom:0; z-index:5; background:rgba(10,10,20,0.98); }

  /* Settings/Start Menu/Calendar popups are anchored to the taskbar on
     desktop; at phone width they take over the screen like a normal
     mobile sheet instead of floating as a small anchored card. */
  #calendar-popup, #start-menu, #notif-center-panel{
    width:100vw !important; max-width:100vw !important;
    left:0 !important; right:0 !important;
    border-radius:16px 16px 0 0 !important;
  }
}

/* ---------- Tablets: keep floating windows, just roomier ---------- */
@media (min-width: 701px) and (max-width: 1100px) and (pointer: coarse){
  .win{ min-width:320px; }
  #calendar-popup{ width:300px; }
}

/* ================================================================
   TV / webOS — 10-foot UI, viewed from a couch, driven by a remote
   ================================================================ */
[data-skin="tv"]{ --base-font-size:16px; }
[data-skin="tv"] #taskbar{ height:56px; }
[data-skin="tv"] .tb-btn,[data-skin="tv"] .tb-pin-btn{ height:42px; }
[data-skin="tv"] #start-btn{ width:44px; height:44px; font-size:20px; }
[data-skin="tv"] #clock-widget{ width:104px; }
[data-skin="tv"] #clock-time{ font-size:15px; }
[data-skin="tv"] #clock-date{ font-size:11px; }

/* Windows always run maximized on TV (see window-manager.js) so the
   title bar only needs to show window controls big enough to click with
   a remote-driven focus ring, not to be dragged/resized. */
[data-skin="tv"] .win-tb{ height:48px; cursor:default; }
[data-skin="tv"] .win-resize-handle{ display:none; }
[data-skin="tv"] .wbtn{ width:16px; height:16px; }

/* Grid/list items get noticeably bigger hit targets and text — legible
   and reliably focusable from a couch, not just technically clickable. */
[data-skin="tv"] .fg-grid{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:14px; padding:16px; }
[data-skin="tv"] .fg-item{ padding:12px 6px; }
[data-skin="tv"] .fg-item-icon{ font-size:34px; }
[data-skin="tv"] .fg-item-name{ font-size:12px; }
[data-skin="tv"] .fg-row{ padding:10px 14px; font-size:13px; }
[data-skin="tv"] .d-icon-img{ width:52px; height:52px; }

/* The remote focus ring needs to read clearly on a TV from several feet
   away — thicker and higher-contrast than the desktop keyboard version. */
[data-skin="tv"].remote-nav-active *:focus,
[data-skin="tv"] html.remote-nav-active *:focus{
  outline-width:3.5px;
  outline-offset:3px;
}