/* Class boundary: portrait screens 600px and wider use the tablet chrome. One boundary with the opening's phone layout and the
   widget's full screen sheet (11 Nov 2026; it was 520 from 23 Sep, which put a tablet's top bar over a phone's opening at 520 to 599).
   Shell chrome: top bar and dock (composer + attribution) sized per screen class with one unit, --st, so the chrome keeps its
   proportion to the screen from 320px phones to 4K monitors. Phones keep the composer text at 16px or more (iOS zooms into
   smaller inputs) and 44px touch targets.

   Sizes follow the screen; arrangement follows the space AiOS is given (docs/sizing/REPORT.md). The screen's class and its scale
   number come from sizing.js, which measures the browser window at 100 percent zoom (data-aios-screen, data-aios-tight and
   --aios-k on the root): the visitor's zoom magnifies these sizes instead of being cancelled, and the widget gets the full page's
   sizes for the same screen. What depends on the room AiOS has (the content column's width, a short panel's layout) stays a
   container query on #stage. */
#aiosShell{
  --st:calc(var(--aios-k,1) * 1px);
  --tb-h:72;--tb-logo:32;--tb-logo-w:240;--pill-hh:30;--pill-f:11;--menu:44;--menu-i:26;
  /* The answer bar and attribution line (Ryan, 16 Oct 2026: "I want the input bar to be this proportionally sized on every screen"):
     one slim row with 15px type, times the bar scale, on every screen. Its recipe is the --ds-bar-* tokens (FOUNDATIONS section 2,
     R3 to R5), one component on the full page and in the widget (owner, 16 Oct and 4 Nov 2026): drawn 48 under answers and 52
     under the welcome line, round controls 34, the speak pill 35 (owner, 10 Nov 2026: "a little too fat across all screens").
     --cmp-h is the field's line, the drawn height less its frame (the border and the row padding). */
  --bar-h:var(--ds-bar-h);--bar-h-greeting:var(--ds-bar-h-greeting);--talk-h:var(--ds-bar-pill);
  --dk-pt:8;--dk-pb:9;--cmp-h:calc(var(--bar-h) - var(--ds-bar-frame));--cmp-f:15;--cmp-px:16;--btn:var(--ds-bar-control);--btn-i:16;--mic-f:12;--attr-f:10.5;--attr-mt:5;
  /* The content column (welcome, composer, conversation) scales with the screen instead of stopping at 1520px, so 2K/4K monitors
     keep desktop proportions rather than a narrow strip in the middle. */
  --composer-font:max(14px,calc(var(--cmp-f) * var(--st)));
  --col-w:min(calc(100cqw - 2 * var(--edge)),calc(1040 * var(--st)));
}
/* Sizes, by the screen's class (sizing.js, from the browser window at 100 percent zoom). */
:root[data-aios-screen=tablet] #aiosShell{--tb-h:64;--tb-logo:34;--tb-logo-w:220}
/* A phone's header logo may run to 260 wide (220 on short screens): a long lockup such as TBF's hammer and wordmark (10.5:1) was
   capped at 176 and read at 17px tall (owner, 20 Oct 2026). Logos that are not that wide stop at their height first, so unchanged. */
:root[data-aios-screen=phone] #aiosShell{--tb-h:54;--tb-logo:28;--tb-logo-w:260;--menu:44;--menu-i:24;--dk-pt:8;--dk-pb:8;--cmp-px:14;--attr-f:9.5;--attr-mt:5}
/* The answer bar on a phone, upright or on its side, full page and widget alike (owner, 10 Nov 2026: "All of the question bars on
   the phone are so fat... It's okay to use a smaller font size in the question bar and slightly shrink the speak icon"): drawn 40
   under answers and 44 under the welcome line, the round controls and the speak pill 30, the speak words 12px and the placeholder
   14px. Typed words stay 16px (below that a phone's browser zooms the page into the field). The bar scale on a phone is the
   smaller of 1 and the screen scale (scale.js --dk-st), so it never grows past its 390 size on a wider phone. */
:root:is([data-aios-screen=phone],[data-aios-screen=short]) #aiosShell{--bar-h:var(--ds-bar-h-phone);--bar-h-greeting:var(--ds-bar-h-phone-greeting);--btn:var(--ds-bar-control-phone);--btn-i:14;--talk-h:var(--ds-bar-pill-phone)}
:root[data-aios-screen=short] #aiosShell{--tb-h:46;--tb-logo:24;--tb-logo-w:220;--pill-hh:26;--pill-f:10.5;--menu:40;--menu-i:22;--dk-pt:6;--dk-pb:8}
/* Arrangement, by the space AiOS is given. */
@container (orientation:portrait){
  #aiosShell{--col-w:calc(100cqw - 2 * var(--edge))}
}
@container (orientation:landscape) and (max-height:559px){
  #aiosShell{--col-w:min(calc(100cqw - 2 * var(--edge)),calc(800 * var(--st)))}
  #aiosShell .mic-copy{display:none}
}
/* Top bar */
#aiosShell .topbar{min-height:calc(var(--tb-h) * var(--st));padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
#aiosShell .topbar-logo{height:calc(var(--tb-logo) * var(--st));max-width:calc(var(--tb-logo-w) * var(--st));object-fit:contain;object-position:left center}
/* The step tracker never covers the logo (owner, 10 Nov 2026: "should NEVER HAPPEN"), on the full page and in the widget (rule R4;
   it was built in the widget first). The logo keeps its full width; the tracker takes only the room left between it and the
   buttons, scrolling sideways inside its own pill when its steps are longer. A wide wordmark is held by its box and drawn whole. */
#aiosShell .topbar-brand{flex:0 0 auto}
#aiosShell .topbar-controls{flex:1 1 auto;min-width:0;justify-content:flex-end}
#aiosShell .topbar-controls > :not(.trail){flex-shrink:0}
#aiosShell .trail{flex:0 1 auto;min-width:0}
/* The version mark and the step tracker are labels: never under 10px, however small the screen's scale (check G10; design call,
   11 Nov 2026: the label floor holds in every component). */
#aiosShell .version,#aiosShell .trail{height:max(calc(var(--ds-space-24) + 2px),calc(var(--pill-hh) * var(--st)));padding:0 calc(11 * var(--st));font-size:max(var(--ds-fs-10),calc(var(--pill-f) * var(--st)))}
#aiosShell .trail svg{width:calc(13 * var(--st));height:calc(13 * var(--st))}
#aiosShell .menu{width:max(40px,calc(var(--menu) * var(--st)));height:max(40px,calc(var(--menu) * var(--st)))}
/* The menu button is a thin line with no casing; on hover a light fill of the accent (owner, 4 Nov 2026, the lab's "Menu, expand and
   close", A). */
#aiosShell .menu{border-radius:var(--ds-radius-8)}
#aiosShell .menu:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
#aiosShell .menu svg{width:calc(var(--menu-i) * var(--st))!important;height:calc(var(--menu-i) * var(--st))!important}
/* Dock: the answer bar and attribution line take the room's measure (--dk-st, scale.js measureStage; Ryan, 16 Oct 2026): their
   1440 size up to a room of 1,440, in proportion above, so on the full page and in the widget's panel alike they stay in
   proportion with the opening above them. Phones and rooms on their side keep the screen's own unit. */
#aiosShell .dock{--st:var(--dk-st,calc(var(--aios-k,1) * 1px));--composer-font:max(14px,calc(var(--cmp-f) * var(--st)))}
:root[data-aios-screen=phone] #aiosShell .dock{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}
@media (hover:none) and (pointer:coarse){#aiosShell .dock{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}}
/* Dock */
#aiosShell .dock{padding-top:calc(var(--dk-pt) * var(--st));padding-bottom:calc(var(--dk-pb) * var(--st) + env(safe-area-inset-bottom,0px))}
/* The keyboard on the opening (owner, 20 Oct 2026): the opening keeps its shape and the bar alone rises above the keyboard, over the
   lower boxes, which the keyboard covers (scale.js syncViewport sets --aios-kb and data-aios-kb). */
:root[data-aios-kb] #aiosShell .dock{position:relative;z-index:var(--ds-z-dock);transform:translateY(calc(-1 * var(--aios-kb,0px)));padding-bottom:calc(var(--dk-pb) * var(--st))}
#aiosShell .composer-wrap,#aiosShell .voice-stage{padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
#inputBar .composer-row{padding:calc(4 * var(--st)) calc(var(--cmp-px) * var(--st)) 0}
/* One row on every screen (Ryan, 16 Oct 2026: "I don't want two lines anymore"): a long question wraps inside the field and the bar
   grows taller, the buttons staying on the right, at the bottom. --one-line is the field's height for one line of text; the
   buttons sit centred on that line, so a one-line question and the placeholder line up with them. */
#inputBar{--one-line:max(calc(var(--cmp-h) * var(--st) * var(--bar-k,1)),var(--bar-min));--bar-min:calc(max(32px,calc(var(--btn) * var(--st))) + 8px);--row-pad:max(1px,calc(1 * var(--st)))}
:root:is([data-aios-screen=phone],[data-aios-screen=short]) #inputBar{--bar-min:calc(var(--btn) * var(--st) + 6px)}
#inputBar.single .composer-row{padding:var(--row-pad) 0 var(--row-pad) calc(var(--cmp-px) * var(--st))}
#inputBar.single{padding-right:calc(8 * var(--st))}
#inputBar .composer-field,#inputBar textarea.composer-field{min-height:calc(var(--cmp-h) * var(--st));padding:calc(12 * var(--st)) 0 calc(8 * var(--st));font-size:var(--composer-font)}
#inputBar.single .composer-field,#inputBar.single textarea.composer-field{padding:calc((var(--one-line) - 1.5em) / 2) 0}
/* The placeholder is the bar's own size, 15 times the bar scale (14px at least), on a touch screen too, where the typed words are
   16px (FOUNDATIONS section 2, R3); a phone's is 14 (below). */
#inputBar textarea.composer-field::placeholder{font-size:max(var(--ds-fs-14),calc(var(--cmp-f) * var(--st)));letter-spacing:0}
/* A placeholder that does not fit steps down in size to a 12px floor (owner, 28 Sep 2026); app.js sets the size. */
#inputBar textarea.composer-field.placeholder-fit::placeholder{font-size:var(--placeholder-fit-size);line-height:var(--placeholder-fit-line,normal)}
#inputBar.single textarea.composer-field{white-space:pre-wrap;overflow-x:hidden}
#inputBar .composer-rail{padding:0 calc(6 * var(--st)) calc(6 * var(--st)) calc(var(--cmp-px) * var(--st));gap:calc(6 * var(--st))}
#inputBar.single .composer-rail{padding:0}
#inputBar .mic,#inputBar .send,#inputBar .ctl{width:max(32px,calc(var(--btn) * var(--st)));height:max(32px,calc(var(--btn) * var(--st)))}
:root:is([data-aios-screen=phone],[data-aios-screen=short]) #inputBar :is(.mic,.send,.ctl){width:calc(var(--btn) * var(--st));height:calc(var(--btn) * var(--st));min-width:0;min-height:0}
/* A phone's placeholder is a fixed 14px at every phone width, like its typed words: 14px, as built in the widget on 10 Nov 2026 after
   the owner allowed a smaller size in the question bar (the --ds-bar-placeholder-phone token); a long one still steps down to the
   12px floor (owner, 28 Sep 2026). */
:root:is([data-aios-screen=phone],[data-aios-screen=short]) #inputBar textarea.composer-field:not(.placeholder-fit)::placeholder{font-size:var(--ds-fs-14)}
#inputBar .mic svg,#inputBar .send svg{width:calc(var(--btn-i) * var(--st));height:calc(var(--btn-i) * var(--st))}
#inputBar .mic-copy{font-size:calc(var(--mic-f) * var(--st))}
#dockAttribution{margin-top:calc(var(--attr-mt) * var(--st));font-size:calc(var(--attr-f) * var(--st))}
:root[data-aios-screen=phone] #aiosShell{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}
/* Any touch screen, not only an upright phone: iOS zooms the whole page into a field typed in at under 16px and leaves it zoomed
   (go-live sweep, 15 Oct 2026: 12 to 14.9px on phones on their side, iPads and iPad minis). */
@media (hover:none) and (pointer:coarse){#aiosShell{--composer-font:max(16px,calc(var(--cmp-f) * var(--st)))}}
/* A touch screen draws the same controls as any other screen of its group; the area that takes a tap is extended to 44 by 44
   (the tap areas rule, below), not the drawn control. */

/* Short screens give chrome height back to the welcome first: short phones portrait (≤700px tall) and very short landscape (≤360px tall). */
:root[data-aios-tight~=phone-short] #aiosShell{--tb-h:46;--tb-logo:24;--dk-pt:6;--dk-pb:6;--attr-mt:4}
:root[data-aios-tight~=very-short] #aiosShell{--tb-h:40;--tb-logo:22;--pill-hh:24;--menu:36;--dk-pt:4;--dk-pb:5;--attr-mt:3}

/* Composer controls sit inside the border. The widget sizing spec's numbers of 10 Nov 2026 (a 48px bar with 34px controls, a
   phone's 40px bar with 30px controls) leave 7px above and below a control, 5 on a phone; the 8px clear of 23 Sep 2026 holds at
   the bar's end, set here. The two cannot both hold above and below: docs/design-system/FOUNDATIONS.md lists it as conflict 15.
   The single-line field is never shorter than the control plus its row padding. */
#inputBar.single{padding:0 max(8px,calc(8 * var(--st))) 0 0}
#inputBar.single .composer-rail{align-self:flex-end;align-items:center;padding:0;min-height:calc(var(--one-line) + 2 * var(--row-pad))}
#inputBar.single .composer-field,#inputBar.single textarea.composer-field{min-height:var(--one-line)}
#inputBar.expanded .composer-rail,#inputBar:not(.single) .composer-rail{padding:0 max(8px,calc(8 * var(--st))) max(8px,calc(8 * var(--st))) calc(var(--cmp-px) * var(--st))}

/* Short landscape (phones on their side): the expanded composer keeps its controls on the field's row, so its two-line stretch costs
   one line of height instead of a whole extra rail and the prompts above stay visible. */
@container (orientation:landscape) and (max-height:559px){
  #inputBar.expanded{flex-direction:row;align-items:flex-end;padding-right:max(8px,calc(8 * var(--st)))}
  #inputBar.expanded .composer-row{flex:1 1 auto;min-width:0;padding:calc(4 * var(--st)) 0 calc(4 * var(--st)) calc(var(--cmp-px) * var(--st))}
  #inputBar.expanded textarea.composer-field{min-height:calc(3em + 12px);padding:6px 0}
  #inputBar.expanded .composer-rail{flex:0 0 auto;padding:0 0 max(6px,calc(6 * var(--st))) 0}
}

/* iPhone SE 1st gen: a slimmer top bar gives the welcome the height its descriptions need. */
:root[data-aios-tight~=se] #aiosShell{--tb-h:42;--tb-logo:22;--dk-pt:5;--dk-pb:5;--attr-mt:3}

/* A long current record title stays fully available in a bounded horizontal trail. */
#aiosShell .trail{max-width:100%;min-width:0;overflow-x:auto;flex-shrink:1}
#aiosShell .aios-trail-step,#aiosShell .trail > span:not(.trail-sep){max-width:none;flex-shrink:0;overflow:visible;text-overflow:clip}
/* The tap floor (check G5F; design call, 11 Nov 2026: tap sizes as built, never under 24 by 24). The step tracker's steps and its home
   mark take the tap over the pill's full inner height, which never falls under 24 (the pill holds 26 with its border on a small
   laptop, where the top bar's 0.9 would make it 23.4), and the home mark reaches 4px past each side into the room around it. Nothing
   drawn moves: a button centres its words, and the home mark's reach is taken back by its margins. */
#aiosShell .trail .aios-trail-step,#aiosShell .trail .trail-home{align-self:stretch}
#aiosShell .trail .trail-home{padding-inline:var(--ds-space-4);margin-inline:calc(-1 * var(--ds-space-4))}

/* Tap areas (FOUNDATIONS section 11, check G5): every control takes a tap over at least 24 by 24 with a pointer and 44 by 44 on a
   touch screen. Nothing that is drawn changes: the drawn size, position and spacing of every control are exactly as on develop
   (several sizes are ruled: the phone bar's 30px controls, owner 10 Nov 2026; the 40px menu button). Only the area that takes the
   tap grows, through a transparent layer under each control that takes no room in layout: min(0px, 50% less half the area) is how
   far it reaches past the control on each side, nothing where the control is already that large. Where two controls sit close the
   layers reach away from each other. Inline links inside a sentence are exempt. */
#aiosShell{--tap-base:24px;--tap:var(--tap-base)}
@media (pointer:coarse){#aiosShell{--tap-base:44px}}
/* Where a region is magnified (the answers by --ui-z, the side menu and its pages by --pz), the area is the target over the
   magnification, so it takes 44 (or 24) as drawn. */
#aiosShell :is(#chatScroll .messages){--tap:calc(var(--tap-base) / var(--ui-z,1))}
#aiosShell :is(.side-panel > *,.content-overlay-inner,.chrome-overlay-head > *,.chrome-overlay-body){--tap:calc(var(--tap-base) / var(--pz,1))}
:where(#aiosShell) :where(#micButton,#sendButton,#menuButton,#conversationEnd,#closePanel,#openPlate,#homeButton,.pc-back,.frm-back,.dt-x,.hcount,.history-pill,.side-panel-legal button,.side-panel-nav-item,.check,.lb-close,.lb-nav,.tb,.tabnav,.st-dd-box,.sel,.page-num,.aios-next-btn,.chrome-overlay-close,.content-overlay-close){position:relative}
:where(#aiosShell) :where(#micButton,#sendButton,#menuButton,#conversationEnd,#closePanel,#openPlate,#homeButton,.pc-back,.frm-back,.dt-x,.hcount,.history-pill,.side-panel-legal button,.side-panel-nav-item,.check,.lb-close,.lb-nav,.tb,.tabnav,.st-dd-box,.sel,.page-num,.aios-next-btn,.chrome-overlay-close,.content-overlay-close)::before{content:"";position:absolute;inset:min(0px,calc(50% - var(--tap) / 2));background:none;pointer-events:auto}
/* Back sits right under the top bar, which lies over anything reaching above it: its layer reaches down, away from it. */
:where(#aiosShell) :is(.pc-back,.frm-back)::before{top:0;bottom:min(0px,calc(100% - var(--tap)));z-index:var(--ds-z-top)}
/* A check box inside its words' label: the label's layer lies under the box, so the box itself still takes the tap at its centre. */
:where(#aiosShell) .check > .chk{position:relative;z-index:var(--ds-z-lift)}
@media (pointer:coarse){
  /* The answer bar on a touch screen: its controls sit where develop drew them; the microphone's area reaches left, away from the
     speak control, and the speak control's right, and the bar lets their areas reach past its edge. */
  :where(#aiosShell) #inputBar #micButton::before{left:min(0px,calc(100% - var(--tap)));right:0}
  :where(#aiosShell) #inputBar #sendButton::before{left:0;right:min(0px,calc(100% - var(--tap)))}
  #inputBar.composer{overflow:visible}
  /* The app's menu button sits beside the widget panel's own buttons (the close button's box overlaps its last pixels): its area
     reaches left, away from them, by what it needs and the overlap. */
  :where(#aiosShell) #menuButton::before{right:0;left:calc(min(0px,calc(100% - var(--tap))) - var(--ds-space-4))}
  /* A row that scrolls sideways clips what reaches past it: the history filters' row gets room inside it for their areas, the row
     and the filters staying exactly where they were (the padding and the margin cancel). */
  #aiosShell #historyPills{padding-block:var(--ds-space-4);margin-block:calc(-1 * var(--ds-space-4))}
  /* The plate link and the legal links below it are close: the plate's area reaches up, away from them. */
  :where(#aiosShell) #openPlate::before{top:min(0px,calc(100% - var(--tap)));bottom:0}
}
/* The tab band's arrows sit at the card's edge in their own column, on the band's colour (answers.css, .screen .tabnav). Each takes
   the tap over its own column only: reaching inward would cover a tab cut at the row's faded end (check G4), and the card clips
   anything reaching outward. */
:where(#aiosShell) .tabnav.next::before,:where(#aiosShell) .tabnav.prev::before{left:0;right:0}