/* Layout classes own grid/structure; Tachyons owns skin.
   One DOM tree, two arrangements: the default rules are the wide
   (desktop) layout; the 30em max-width block below restacks the
   same elements for phones. See spec 03. */
.app-shell { display: grid;
             grid-template-columns: auto minmax(0, 1fr);
             grid-template-rows: auto minmax(0, 1fr) auto auto;
             gap: 0.5rem; height: 100vh; padding: 0.5rem;
             box-sizing: border-box; }
.topbar    { grid-column: 1 / -1; display: flex; align-items: baseline;
             cursor: default; }
/* diamond marker: in the DOM permanently, shown only for
   beyond-human dives so the bar's layout never jumps */
.topbar-diamond { visibility: hidden; color: #888;
                  font-size: 0.6rem; margin-left: 0.25rem; }
.topbar-diamond.shown { visibility: visible; }
.topbar-burger { display: none; margin-left: auto; }
.picker    { grid-row: 2; width: 10rem; min-height: 0;
             display: flex; flex-direction: column;
             background: white; }
.picker-tabs { display: flex; border-bottom: 1px solid #ddd;
               flex-shrink: 0; }
.picker-tab  { flex: 1; padding: 0.5rem 0; background: white;
               color: #555; border-bottom: 2px solid transparent; }
.picker-tab-on { color: #357edd; font-weight: 700;
                 border-bottom-color: #357edd; }
/* position: relative makes section offsetTop relative to this
   scroller (scroll-to-height! depends on it) */
.picker-scroll { flex: 1; overflow-y: auto; position: relative;
                 padding: 0 0.25rem; }
.height-header { position: sticky; top: 0; background: white;
                 z-index: 1; padding: 0.5rem 0.25rem 0.25rem; }
.group-head { padding: 0.5rem 0.25rem 0; }
.pos-heads, .pos-grid { display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 0.25rem; }
.pos-grid { padding-bottom: 0.25rem; }
.chip { min-height: 2rem; background: white;
        border: 1px solid #ddd; border-radius: 0.25rem;
        position: relative; }
.chip-hole { visibility: hidden; }
.chip-flagged { background: #f4f4f4; color: #666; }
.chip-flagged::after { content: "◆"; position: absolute;
                       top: 1px; right: 3px; font-size: 0.45rem;
                       color: #888; }
.chip-sel { background: #357edd; color: white;
            border-color: #357edd; }
/* a selected flagged chip: selection wins the background, the
   diamond stays legible */
.chip-sel.chip-flagged { background: #357edd; color: white; }
.chip-sel.chip-flagged::after { color: #cdecff; }
.picker-foot { flex-shrink: 0; background: #fafafa; }
/* position: relative anchors the plausibility/failure banner, which
   is absolutely positioned over the scene (app.cljs render-banner!).
   grid-column is pinned to 2 (not left to auto-placement) because
   auto-placement re-flows .scene into column 1 the moment .picker is
   display:none (rail-collapsed, below): with .picker gone, column 1
   is the first empty cell in row 2, so the auto-placement algorithm
   drops .scene there instead of column 2 - and column 1 is the
   content-sized "auto" track, not the "1fr" track, so .scene would
   SHRINK instead of gaining the reclaimed width. Pinning the column
   keeps .scene anchored to the 1fr track regardless of .picker's
   visibility. (Found via the Task 5 rail-collapse e2e test: without
   this, sceneW2 came back smaller than sceneW, not larger.) */
.scene     { grid-row: 2; grid-column: 2; min-height: 0;
             position: relative; }
.scene svg { width: 100%; height: 100%; display: block; }
.transport { grid-row: 3; grid-column: 1 / -1;
             display: flex; align-items: center; gap: 0.75rem; }
.transport-main { display: flex; flex: 1; align-items: center;
                  gap: 0.75rem; }
.transport-speeds { display: flex; gap: 0.5rem; }
.transport input[type=range] { flex: 1; accent-color: #357edd; }
/* Page-bottom identity line (specs/04): version + about link. Its
   own explicit row in both arrangements; skin (f7 gray tc) stays
   on the element as Tachyons atomics. */
.footline  { grid-row: 4; grid-column: 1 / -1; }
.scrim     { display: none; }
/* Collapse handle: a slim always-visible button riding the
   rail/scene seam. Positioned against the shell (the picker's
   width sets the seam's x) rather than inside .scene, which
   play-tape! wipes on every dive load. */
.rail-handle { position: absolute; left: 10.5rem; top: 50%;
               transform: translateY(-50%); z-index: 1;
               width: 1.1rem; height: 3rem;
               background: #fafafa; border: 1px solid #ddd;
               border-left: 0; border-radius: 0 0.4rem 0.4rem 0;
               color: #888; font-size: 0.6rem; }
.app-shell { position: relative; }  /* anchors .rail-handle */
.app-shell.rail-collapsed .picker { display: none; }
.app-shell.rail-collapsed .rail-handle { left: 0; }

/* Chip hover tooltip: CSS-only (native title has a ~1s delay and
   unstylable text), fed by data-label. Hover-capable devices only —
   touch has no hover; the top bar carries the description there.
   Wraps within the rail width; the column-edge rules keep it from
   poking outside the scroller (overflow-y: auto would clip or grow
   a horizontal scrollbar). */
@media (hover: hover) {
  .chip:hover::before { content: attr(data-label);
                        position: absolute; bottom: 105%; left: 0;
                        z-index: 4; width: 8.5rem;
                        background: #333; color: white;
                        padding: 0.2rem 0.4rem;
                        border-radius: 0.25rem;
                        font-size: 0.7rem; white-space: normal;
                        text-align: left; pointer-events: none; }
  /* right-column chips right-align the tooltip instead */
  .pos-grid .chip:nth-child(3n):hover::before { left: auto; right: 0; }
}

/* ---- narrow (phone) arrangement -------------------------------- */
@media (max-width: 30em) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { cursor: pointer; }
  .topbar-burger { display: inline; }
  /* The picker becomes an off-canvas drawer over the scene. It
     slides in when the shell has .drawer-open (Task 4 wires the
     class; the scrim dims and catches taps). */
  .picker { position: fixed; left: 0; top: 0; bottom: 0;
            width: 84vw; max-width: 22rem; z-index: 3;
            transform: translateX(-105%);
            transition: transform 0.2s ease;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2); }
  .app-shell.drawer-open .picker { transform: translateX(0); }
  .app-shell.drawer-open .scrim { display: block; position: fixed;
            inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.35); }
  /* Only one explicit column exists at this width (see
     grid-template-columns above), so re-pin .scene back to it -
     otherwise the desktop rule's grid-column: 2 would ask for a
     second column that doesn't exist here, and the grid would grow
     an extra implicit (empty) one to satisfy it. */
  .scene { grid-row: 2; grid-column: 1; }
  .transport { grid-row: 3; }
  /* Two-row transport: play/scrub stay side by side, but speeds get
     their own full-width row so all four buttons can be touch-sized
     (2.75rem ~ 44px) without cramming into the play/scrub row. */
  .transport { flex-direction: column; align-items: stretch;
               gap: 0.5rem; }
  .transport-main > button { min-height: 2.75rem; }
  .transport input[type=range] { height: 2.75rem; }
  .transport-speeds > button { flex: 1; min-height: 2.75rem; }
  .chip { min-height: 2.75rem; }
  /* The rail handle is a desktop affordance for reclaiming picker
     width; phones already get the picker as an off-canvas drawer
     (above), so the handle would just be redundant chrome. */
  .rail-handle { display: none; }
}