/* Full screen for a session (fill.js): the panel takes the whole screen and its head goes, all but one small icon of four corners that
   brings it back (Chris, 21 Oct: no big buttons over the reading). */
.detail.fill, .detail.fill.wide { width: 100vw; max-width: 100vw; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); margin: 0; inset: auto auto var(--kb, 0px) 0; border: 0; border-radius: 0; padding-inline: 12px; }
.detail.fill .sheet-head { height: 0; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
.detail.fill .head > :not(#detail-full), .detail.fill .panel-tabs, .detail.fill .grab { display: none; }
.detail.fill .panel-work, .detail.fill .panel-cols { padding-top: 0; }
#detail-full { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 8px; color: var(--muted); }
#detail-full svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#detail-full:hover, #detail-full:focus-visible { color: var(--gold); }
.detail.fill #detail-full { position: fixed; z-index: 5; top: max(6px, env(safe-area-inset-top)); right: 8px; background: none; border: 0; opacity: 0.55; }
#detail-full[hidden] { display: none; }

/* The work's buttons float with no ground of their own: only their words and rings, over the session itself. */
.work-dock::before { display: none; }
.detail .work-bar .work-pill, .detail .work-bar .work-chip select, .detail .work-bar .work-status, .detail .work-bar .work-context {
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.detail .work-bar .work-pill.go { background: none; color: var(--pot-papyrus); border-color: var(--pot-gold); }

/* The microphone is a button in the bubble's own row, between the box and Send, the size of Send (Chris, 25 Oct: it was a floating
   bubble that pushed the box and sat off its line). */
.work-bubble { position: relative; }
.work-bubble > .voice-btn { align-self: flex-end; width: 38px; height: 38px; }

/* A picture a session looked at, under its step in the thread (mine.js picture): small, and the whole width when tapped. */
.work-step { display: block; }
.mine-img { display: block; width: 100%; max-width: 320px; margin: 6px 0 2px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); color: var(--muted); font-size: 12.5px; text-align: left; cursor: zoom-in; }
.mine-img img { display: block; width: 100%; height: auto; }
.mine-img.big { max-width: 100%; cursor: zoom-out; }

/* Over a full-screen session nothing of the desk shows: not the Desk and Yacht switch, nor the side drawer's edge. */
body:has(#detail.fill[open]) #tabs, body:has(#detail.fill[open]) .nav-edge, body:has(#detail.fill[open]) .nav-handle, body:has(#detail.fill[open]) .mine-open { display: none !important; }
.detail.fill { z-index: 100; }
/* Nor is it drawn or restyled: the browser skips it (it keeps its scroll and state). In the browser's own full screen the screen stays black
   until the page draws its next frame, and each keyboard or bars change restyled the whole desk behind the session first (Chris, 26 Oct). */
body:has(#detail.fill[open]:not(.dragging):not(.leaving):not(.stack-moving)) #main, body:has(#detail.fill[open]:not(.dragging):not(.leaving):not(.stack-moving)) #page-head,
body:has(#detail.fill[open]:not(.dragging):not(.leaving):not(.stack-moving)) #foot { content-visibility: hidden; }
/* (A full-screen window being swiped down, sliding away, or going back into its coin over Your sessions (panel-stack.js) shows the desk
   under it again: coin-head.css dims it.) */
/* Skipped, each keeps the size it last had, so the page's scroll stays where it was; the browser records that size only while this is set. */
#main, #page-head, #foot { contain-intrinsic-size: auto 1px auto 1px; }

/* The pills read over the thread through a veil, not a dark ground: the words behind them are dimmed, never seen through. */
.detail .work-bar .work-pill, .detail .work-bar .work-chip select, .detail .work-bar .work-status, .detail .work-bar .work-context {
  background: var(--panel); background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--text);
}
.detail .work-bar .work-pill.go { background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--text); }
/* More, Less and the controls after them (Chris, 24 Oct: transparent, and unreadable in light mode): the words were the dark theme's cream
   over a pale veil. The words follow the theme and the veil is nearly solid. */
.detail .work-bar .work-chip, .detail .work-bar .work-chip select { color: var(--text); }

/* A word while he looks at the desk (chime.js soft): a small friendly card sliding in at the top, never a banner over the screen. */
.soft-note { position: fixed; z-index: 120; left: 50%; top: max(10px, env(safe-area-inset-top)); width: min(360px, calc(100vw - 32px)); display: grid; gap: 2px; margin: 0; padding: 10px 14px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--text); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3); opacity: 0; transform: translate(-50%, -16px); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; cursor: pointer; }
.soft-note.in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.soft-note strong { font-size: 13.5px; }
.soft-note span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .soft-note { transition: opacity 0.2s; transform: translate(-50%, 0); } }

/* A box he types in is never see-through: the rename box in the menu and the bubble for his next words are solid. */
.work-menu, .work-menu-edit input { background: var(--panel-2); }
.work-menu-edit input { border: 1px solid var(--line); color: var(--text); opacity: 1; }
.work-bubble, .pane-talk .chat-form { background: var(--panel-2); }

/* The quick start at the top of Sessions. */
.mine-quick { display: block; width: 100%; margin: 0 0 12px; }

/* Full screen over a window of tabs: the tabbed window's own height and width (92% of the screen on a phone) gave way to it, and the desk
   with its Desk and Yacht switch showed in the strip above. */
.detail.tabbed.fill[open], .detail.tabbed.fill.wide[open] { width: 100vw; max-width: 100vw; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); top: auto; bottom: var(--kb, 0px); }
.detail.tabbed.fill #detail-body { margin: 0; }
.detail.tabbed.fill .panel-pane { padding-top: max(34px, env(safe-area-inset-top)); }

/* On a touch screen a window's height and position no longer animate with the keyboard (that moved the window and, for a moment, showed the
   backdrop: a dark flash, Chris, 22 Oct). The backdrop is a plain dim again: the solid panel colour made the whole yacht, and the desk
   behind it, go brown whenever a window opened (Chris, 22 Oct). */
@media (pointer: coarse) {
  .detail::backdrop { background: rgba(16, 14, 12, 0.55); }
  .detail, .detail.leaving { transition-property: transform, opacity; }
  /* Full screen covers the whole screen, so its backdrop is the panel's own colour: while the keyboard slides in and the window shortens
     a moment ahead of it, nothing dark can show (Chris, 22 Oct: the screen flashed dark each time the keyboard came or went). */
  .detail.fill::backdrop { background: var(--panel); }
}

/* What a session spends while it works and after its turn (Chris, 22 Oct: "the thinking part, and the tokens spent; VS Code does it"):
   one small quiet line under the thread, never over his box. */
.work-live { margin: 2px 0 6px; font: 12.5px/1.35 var(--mono); color: var(--muted); }
/* The mark beside the status line is Claude Code's own creature, the real icon (Chris, 26 Oct: "exactly what Claude has ... don't rebuild them"; the path is the
   Claude Code icon of the Lobe Icons set, MIT, the mark itself Anthropic's). It bobs in two steps while the session works; it is drawn only while the line is going. */
.work-live.going::before { content: ''; display: inline-block; width: 1.5em; height: 1em; margin-right: 6px; vertical-align: -0.12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4.5 24 16'%3E%3Cpath fill='%23D97757' fill-rule='evenodd' clip-rule='evenodd' d='M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z'/%3E%3C/svg%3E") center / contain no-repeat; animation: work-creature .8s steps(1, end) infinite; }
@keyframes work-creature { 0% { transform: none; } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .work-live.going::before { animation: none; } }

/* The Sessions tab's first cards: the allowance, where to start, and the tools shelf (Chris, 22 Oct). */
.mine-usage, .mine-tools { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.mine-usage h3, .mine-tools h3 { margin: 0; font-size: 14px; }
.mine-gauge { display: grid; gap: 4px; }
.mine-gauge-head { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; }
.mine-gauge-bar { position: relative; height: 9px; border-radius: 5px; background: var(--line); overflow: visible; }
.mine-gauge-fill { display: block; height: 100%; border-radius: 5px; background: var(--gold); }
.mine-gauge-bar.warm .mine-gauge-fill { background: var(--warn, #e0a33f); }
.mine-gauge-bar.hot .mine-gauge-fill { background: #d9573f; }
.mine-gauge-pace { position: absolute; top: -3px; width: 2px; height: 15px; margin-left: -1px; background: var(--text); opacity: .7; }
.mine-tip { margin: 0; font-size: 13px; line-height: 1.4; }
.mine-startin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.mine-startin-label { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.mine-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* The lane of cards fades out completely once the thread rests at its foot, and returns with a move to bring it back (Chris, 22 Oct). */
.work-strip { transition: opacity .45s ease; }
.work-strip.calm { opacity: 0; pointer-events: none; }
.work-strip.calm.collapsed { display: none; }
@media (prefers-reduced-motion: reduce) { .work-strip { transition: none; } }

/* The quiet scroller on a session's right edge: no look of its own, only a thumb (Zeus's bolt, edge-marks.css) while it is used or the
   thread moves. Only the thumb takes a touch, through a hit area wider than its drawing. */
.work-rail { position: absolute; right: 0; width: 22px; z-index: 4; touch-action: none; cursor: default; pointer-events: none; }
/* Out by the screen's edge (Chris, 1 Nov: "more right"): the rail runs into the pane's side padding until the thumb's box ends 2 px inside
   the window (the bolt is drawn 3 px in from that, so about 5 px from the glass), and in from any notch. Window: 1 px border + 16 px pane;
   full screen: 2 px window padding + 16 px, or + 8 px with tabs. Measured in a harness render at 390 px: the thumb's right edge at 388. */
.work-rail { right: calc(-15px + env(safe-area-inset-right, 0px)); }
.detail.fill .work-rail { right: calc(-16px + env(safe-area-inset-right, 0px)); }
.detail.tabbed.fill .work-rail { right: calc(-8px + env(safe-area-inset-right, 0px)); }
.work-rail-thumb { position: absolute; right: 0; top: 0; width: 22px; height: 52px; opacity: 0; transition: opacity .3s ease; will-change: transform, opacity; }
.work-rail-thumb::before { content: ''; position: absolute; right: 0; top: -8px; bottom: -8px; width: 36px; }
.work-rail.on .work-rail-thumb { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .work-rail-thumb { transition: none; } }

/* Full screen is the whole screen (Chris, 22 Oct): the top bar sits at the very edge with no status-bar room above it (the yacht has none), the
   one small icon floats in the corner with the bar kept clear of it by its width, and the box sits at the very bottom. */
.detail.tabbed.fill .panel-pane { padding-top: 0; }
.detail.fill #detail-full { top: 2px; right: 4px; width: 30px; height: 30px; }
.detail.fill .work-sum, .detail.fill .work-sum-handle, .detail.fill .work-strip { margin-right: 32px; }
.detail.tabbed.fill .panel-pane { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* The Sessions list in full screen (Chris, 29 Oct): its first line starts below the corner icon. */
.detail.tabbed.fill #pane-sessions { padding-top: 34px; }
/* Work and Talk do not scroll as a pane: their thread runs under the nav bar and only the box keeps clear of it. */
.detail.tabbed.fill .pane-work, .detail.tabbed.fill .pane-talk { padding-bottom: 0; }
.detail.tabbed.fill .work-dock, .detail.tabbed.fill .pane-talk .chat-form { bottom: env(safe-area-inset-bottom, 0px); }
.detail.fill .work-sum, .detail.fill .work-strip { margin-top: 0; }
.detail.fill .work-sum-handle { margin-top: 0; }

/* Full screen runs nearer the edges (Chris, 24 Oct: the left and right had too much room). */
.detail.fill, .detail.fill.wide { padding-inline: 2px; }
.detail.tabbed.fill .panel-pane { padding-left: 8px; padding-right: 8px; }

/* The lane runs to the window's edges in full screen too: the pane keeps 8 px here, not 16, and the corner icon floats over the lane. */
.detail.tabbed.fill .work-strip, .detail.tabbed.fill .work-strip.pinned { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
.detail.tabbed.fill.fill .pane-new .work-scroll, .detail.tabbed.fill.fill .pane-crew .work-scroll { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
/* Full screen never sits shifted: whatever drag or spring set a transform on it, it is ignored here (Chris, 24 Oct: the view dropped
   slightly down, a gap at the top, the box behind the keyboard and the 3-button nav bar). */
/* A new session full screen (coin-hero, fill.js) is the exception: a swipe down moves it and it slides away (Chris, 1 Nov). */
.detail.fill:not(.coin-hero), .detail.fill.wide:not(.coin-hero) { transform: none !important; }

/* Full screen keeps the tabs (Chris, 30 Oct: he could not go from the full screen of Sessions to the full screen of New without leaving
   it): one slim row at the top, the corner icon at its end, so a tap moves between them and the window stays full. */
.detail.tabbed.fill .sheet-head { height: auto; }
.detail.tabbed.fill .panel-tabs { display: flex; margin: 0 34px 0 0; }
.detail.tabbed.fill .panel-tabs[hidden] { display: none; }
.detail.tabbed.fill .panel-tab { min-height: 30px; padding: 5px 6px 6px; font-size: 13px; }
.detail.tabbed.fill #pane-sessions { padding-top: 0; }
/* A button that cannot be undone asks once more (work.js sureTap): its question in the stop colour. */
.sure { color: var(--stop) !important; border-color: var(--stop) !important; }

/* Full screen on Your sessions (Chris, 30 Oct): the coin is the one thing of the head that stays, the same size as the corner button and
   as far from the left edge as that is from the right, so the tabs between them sit evenly. Its ring and dot say whether sessions are
   going, it moves as it does in the window, and a tap starts a new session. */
html .detail.fill .head > #detail-pic.starts { display: block; position: fixed; z-index: 5; top: max(6px, env(safe-area-inset-top)); left: 6px; width: 44px; height: 44px; }
html .detail.tabbed.fill:has(#detail-pic.starts) .panel-tabs { margin: 0 54px; }
.detail.tabbed.fill .panel-tab { flex: 1 1 0; min-width: 0; }

/* The category tabs' rail (pane-rod.js) sits in the tab set itself, not inside a pane's padding: the same place, 16 px less out. */
.panel-panes { position: relative; }
.pane-rail { right: calc(1px + env(safe-area-inset-right, 0px)); }
.detail.fill .pane-rail { right: calc(0px + env(safe-area-inset-right, 0px)); }
.detail.tabbed.fill .pane-rail { right: calc(8px + env(safe-area-inset-right, 0px)); }

/* The iPad's Home Screen app (Chris, 5 Nov: in a crew member's window full screen "even the header tabs are unclickable"): the window's top
   row sat under the status bar, its tabs among the clock and the battery, where the iPad keeps a tap for itself. The row starts below the
   status bar, and the corner icon with it; env(safe-area-inset-top) is 0 wherever nothing lies over the page (Android, a computer). */
html .detail.fill .sheet-head { padding-top: env(safe-area-inset-top, 0px); }
html .detail.fill #detail-full { top: max(2px, env(safe-area-inset-top, 0px)); }
/* With no keyboard up, a full-screen window stands from the screen's top, the screen's height (keyboard.js --vvh, in the Home Screen app the
   screen's own): held by its foot to a frame that keeps changing by the status bar's 20 px, it ended short of the screen's foot. With the
   keyboard up it is held above the keyboard by its foot, as before. */
html:not(.kb-open) .detail.fill[open], html:not(.kb-open) .detail.fill.wide[open], html:not(.kb-open) .detail.tabbed.fill[open],
html:not(.kb-open) .detail.ot-big.wide[open] { top: 0; bottom: auto; }
/* Back by a swipe in from the left edge (panel-swipe.js, 5 Nov): the window goes with the finger, though full screen holds it still to
   anything else, and the desk, or Your sessions under a crew window opened from them, shows under it (the desk dimmed). */
.detail.edge-back, .detail.fill.edge-back:not(.coin-hero), .detail.fill.wide.edge-back:not(.coin-hero) {
  transform: translateX(var(--back-x, 0px)) !important; transition: none !important;
}
.detail.edge-back.edge-settle, .detail.fill.edge-back.edge-settle:not(.coin-hero), .detail.fill.wide.edge-back.edge-settle:not(.coin-hero) {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
}
.detail.edge-back:not(.stacked)::backdrop { background: rgba(16, 14, 12, 0.55) !important; }