/* Base: the page itself, the elements before anyone styles them, the motion,
   and the layout frames the rooms are hung in.

   Moved out of index.html's <style> block byte for byte — same rules, same
   order, same cascade. A move is not a design change (STYLES-PLAN.md), and the
   only edit made on the way across was this comment.

   What is still here that does not belong here: the room-shaped blocks below
   (the Lounge grid, the Council, the Director, the workbench) leave for their
   own sheets in Steps 3 onward, and the seven selectors that match on style
   strings die with the rooms that still need them. Both are named in the plan.
   Nothing new joins this file. */
html,body{margin:0;padding:0;background:var(--surround);-webkit-font-smoothing:antialiased;}
*{box-sizing:border-box;}
/* The Pathary working face (Mark, 2026-08-15): native system UI across the
   products. House titles and authored section heads ask for --font-trajan
   through the shared role classes. */
body{color:var(--text);font-family:var(--font-ui);}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--text);}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:center;}
input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;}
input{width:100%;}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.6;font-style:italic;}
::-webkit-scrollbar{width:0;height:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bar{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes doorWipe{0%{opacity:0;transform:scaleY(0);transform-origin:bottom}22%{opacity:1;transform:scaleY(1);transform-origin:bottom}55%{opacity:1;transform:scaleY(1);transform-origin:top}100%{opacity:0;transform:scaleY(0);transform-origin:top}}

/* the page frame. public/lib/render.js hung these eight attributes on every
   screen; they belong here with the rest of the layout the rooms hang in. */
.app-root{display:block;}
.app-frame{position:relative; width:100%; max-width:none; margin:0;
  min-height:100vh; height:100vh; background:var(--bg); color:var(--text); transition:background .8s ease;}
/* the reading glasses (Settings → Zoom): the HBP counter-scale pattern
   (homebidpros public/pro-textsize.js). The frame lays out in a box 1/f the
   size, then scales back up by f from the top-left, so the enlarged app
   fills its own frame edge to edge instead of spilling past it into a
   horizontal scroll. data-zoom rides the document root like data-theme,
   one block per step of the rack — no branch, no JS-written style. */
[data-zoom="115"] .app-frame{width:calc(100% / 1.15); height:calc(100vh / 1.15); min-height:0;
  transform:scale(1.15); transform-origin:top left;}
[data-zoom="130"] .app-frame{width:calc(100% / 1.3); height:calc(100vh / 1.3); min-height:0;
  transform:scale(1.3); transform-origin:top left;}
[data-zoom="145"] .app-frame{width:calc(100% / 1.45); height:calc(100vh / 1.45); min-height:0;
  transform:scale(1.45); transform-origin:top left;}
.app-stage{position:fixed; inset:0; z-index:-1; background:var(--bg); transition:background .8s ease;}
.app-glow{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.app-glow-wash{position:absolute; inset:-18%;
  background:radial-gradient(56% 40% at 24% 12%, var(--setA) 0%, transparent 62%),
    radial-gradient(66% 46% at 84% 6%, var(--setA) 0%, transparent 55%),
    radial-gradient(96% 70% at 50% 98%, var(--setB) 0%, transparent 72%);
  filter:blur(48px); opacity:.92;}
.app-glow-veil{position:absolute; inset:0;
  background:radial-gradient(120% 82% at 50% 38%, transparent 28%, var(--scrim) 100%);}
.app-body{position:relative; z-index:1;}
.app-wipe{position:fixed; inset:0; z-index:99; pointer-events:none;
  background:linear-gradient(180deg,var(--accent),var(--setA) 60%,var(--bg));
  animation:doorWipe .95s ease both;}
@keyframes hum{0%,100%{box-shadow:0 0 12px var(--glow)}50%{box-shadow:0 0 26px var(--glow)}}
[data-lz="grid"]{display:grid;gap:16px;grid-template-columns:1fr;padding:0 18px;}
[data-lz="wall"]{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--wallop,.2);}
[data-lz="wall"] img{width:100%;height:100%;object-fit:cover;}
[data-lz="chat"]{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;min-width:0;}
[data-lz="art"]{position:relative;z-index:1;display:flex;gap:7px;align-items:stretch;}
[data-lz="artcard"]{position:relative;flex:1;min-width:0;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;border:var(--bd) solid var(--edge);box-shadow:var(--sh-card);}
[data-lz="handle"]{display:none;}
[data-mc="grid"]{display:grid;gap:20px;grid-template-columns:1fr;}
[data-mc="side"]{padding:0 18px;}
[data-mc="main"]{display:flex;flex-direction:column;gap:24px;min-width:0;}
@media (min-width:900px){
  [data-mc="grid"]{grid-template-columns:352px minmax(0,1fr);align-items:start;}
  [data-mc="side"]{position:sticky;top:104px;}
}
@media (min-width:860px){
  [data-lz="grid"]{grid-template-columns:var(--artw,340px) minmax(0,1fr);align-items:start;}
  [data-lz="art"]{position:sticky;top:104px;}
  [data-lz="artcard"]{aspect-ratio:3/4;}
  [data-lz="handle"]{display:block;width:7px;flex:none;cursor:col-resize;border-radius:4px;background:var(--edge);transition:background .2s ease;}
  [data-lz="handle"]:hover{background:var(--accent);}
}
/* The Director: the work is the canvas, the assistant is a rail beside it.
   Main first in the DOM and first in the grid, so the plate gets the room. */
[data-dir]{display:grid;gap:20px;grid-template-columns:1fr;}
[data-dir-side]{display:flex;flex-direction:column;gap:11px;}
[data-council-tabs]{max-width:100%;}
/* The Council uses the Lounge cascade. The assistant is a different object:
   a contained console whose history scrolls behind a composer docked below. */
[data-council-assistant]{min-height:0;}
[data-council-assistant]>div:first-child{order:1;flex:none;}
[data-council-assistant]>[data-assistant-log]{order:2;flex:1 1 0;height:0;min-height:0;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-gutter:stable;padding:2px 3px 36px 0;mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 34px),transparent 100%);}
[data-council-assistant]>textarea{order:3;flex:none;}
[data-council-assistant]>textarea+div{order:4;flex:none;}
[data-council] #scilog{max-height:none!important;overflow:visible!important;}
[data-mobile-assistant]>[data-mobile-assistant-toggle]{display:none;}
[data-mobile-assistant]>[data-council-assistant]{display:flex!important;}
[data-council-feed]{min-width:0;}
[data-render-phase="update"] [data-council],[data-render-phase="update"] [data-council-feed]{animation:none!important;}
[data-council-cast]>div{flex:none;}
[data-council-cast]>div>span{white-space:normal;overflow:visible;text-overflow:clip;}
[data-council-composer]{position:relative;z-index:2;}
[data-council-turn]{max-width:72ch;padding-bottom:4px;}
[data-council-turn strong]{font-weight:700;}
/* `[data-council-turn]>div:last-child{font-size:var(--t-sub)!important;
   line-height:1.62!important;}` stood here and is DELETED. It was one of the
   room's two style-string-era rules: it reached past the markup to size a turn's
   body because the body wrote its own 15px inline and had to be overridden.
   The body is `.council-turn-body` now and states both outright. */
/* Council type trial: readable at normal browser scale, with the mono face
   reserved for labels instead of carrying the interface. */
[data-council]{
  --muted:var(--c-muted);--edge:var(--c-edge);--panel:var(--c-panel);--inset:var(--c-inset);
  font-size:var(--t-body);line-height:1.5;min-width:0;width:min(100%,100vw);max-width:100vw;overflow:hidden;
}
[data-council]>*{min-width:0;max-width:100%;}
[data-council]>div:first-child>div:first-child{min-width:0;flex:1 1 320px;}
[data-council]>div:first-child>div:first-child>div:last-child{overflow-wrap:anywhere;}
/* THE ROOM'S TYPE SCALE IS GONE FROM HERE, and that is the point. Six sizes
   (--c-meta and friends) and five band rules used to live in this block, and
   they were the app's SECOND type scale: the same markup read 13px in the
   Lounge and 15px in the Council, and a room converted onto classes fell off
   the big scale onto the small one without anything being able to see it.
   There is one scale now, in tokens.css, applied to every page by the block at
   the foot of components.css. The Council's sizes ARE the standard.

   What is left here is the part that really is this room's own business.

   The Text size setting still belongs to the Council, because the Council is
   the room you sit and read in and nowhere else offers the lever. It resizes
   by moving the STANDARD inside this room rather than by owning a private
   scale, so everything that follows the standard follows the setting for free.
   The steps are the standard multiplied and rounded to the whole pixel.
   Headings are deliberately not listed: they never rescaled with this setting
   and they still do not. */
[data-council][data-council-scale="112"]{--t-label:12px;--t-tiny:15px;--t-small:16px;--t-body:17px;--t-lead:18px;--t-sub:20px;}
[data-council][data-council-scale="125"]{--t-label:14px;--t-tiny:16px;--t-small:18px;--t-body:19px;--t-lead:20px;--t-sub:23px;}
[data-council][data-council-contrast="high"]{--muted:var(--c-muted-hi);--edge:var(--c-edge-hi);--panel:var(--c-panel-hi);--ink2:var(--c-ink2-hi);}
/* A label's SIZE now comes from the standard like everything else. Its
   letterspacing does not: the Council evens every label to one tracking so a
   column of them reads as a column, which is a reading decision about this
   room and has nothing to do with how big the type is. */
[data-council] .monotype{letter-spacing:.065em!important;line-height:1.45;}
/* THE LAST STYLE-STRING SELECTOR IN THIS ROOM IS GONE.
   `[data-council] textarea[style*="Georgia"],[data-council] div[style*=
   "font-family:Georgia"]{font-size:var(--t-sub)!important;max-width:70ch;}`
   stood here. An advisor speaking in Georgia is a paragraph, not a label, and
   it reads at the top of the scale with a measure to match — that is still
   true, and it is now said by `.council-read`, `.council-doc-body` and
   `.council-turn-body` in council.css rather than by matching on the text of a
   style attribute. Nothing in the Council writes Georgia inline any more.
   (The Cellar still writes five, and never matched this rule: it is scoped to
   [data-council].) */
[data-council] input::placeholder,[data-council] textarea::placeholder{color:var(--muted);opacity:.82;font-style:normal;}
[data-council-scene]{position:relative;min-height:300px;aspect-ratio:16/7;overflow:hidden;border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--sh-panel);}
[data-council-scene] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 2.6s cubic-bezier(.45,0,.2,1);}
[data-council-scene] .council-scene-chrome{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:38px 18px 15px;background:linear-gradient(transparent,rgba(8,7,6,.88));}
.creative-assistant-card{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border:var(--bd) solid var(--edge);border-radius:var(--r-lg);background:var(--inset);overflow:hidden;}
.creative-assistant-card[aria-current="true"]::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);opacity:.8;}
.assistant-status{display:inline-flex;align-items:center;padding:4px 7px;border:var(--bd) solid var(--edge);border-radius:var(--r-pill);font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);letter-spacing:.08em;color:var(--muted);}
.assistant-status.current{border-color:color-mix(in srgb,var(--accent) 55%,var(--edge));color:var(--accent);}
.council-scene-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.council-scene-choice{position:relative;aspect-ratio:16/8;border:var(--bd) solid var(--edge);border-radius:var(--r-md);overflow:hidden;background:var(--inset);}
.council-scene-choice img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;}
.council-scene-choice[aria-pressed="true"]{border-color:var(--accent);}
.council-scene-choice span{position:absolute;left:7px;right:7px;bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:var(--t-tiny);font-weight:600;text-shadow:0 1px 5px #000;}
@media (min-width:900px){
  [data-dir]{grid-template-columns:minmax(0,1fr) 300px;align-items:start;}
  [data-dir-side]{position:sticky;top:104px;}
  [data-dir]:has(>[data-assistant-only]){position:relative;align-items:start;}
  [data-dir-side][data-assistant-only]{position:absolute;inset:0 0 0 auto;width:300px;min-height:0;overflow:hidden;}
  [data-dir-side][data-assistant-only]>[data-council-assistant]{height:100%;min-height:0;overflow:hidden;}
  [data-dir-side][data-assistant-only] [data-assistant-log]{flex:1 1 0;height:0;max-height:none!important;min-height:0;overflow-y:scroll!important;overscroll-behavior:contain;scrollbar-gutter:stable;}
  /* Council reverses the Director arrangement: the personal assistant is the
     left rail and the Council conversation owns the larger right canvas. */
  [data-council] [data-dir]{grid-template-columns:300px minmax(0,1fr);align-items:start;}
  /* AND ONE COLUMN WHEN THERE IS NO SIDE (2026-08-25). The Council's
     projects, documents and clipboard moved into the house's own panels, so
     the side column is only built when it holds the advisors. Without this
     the grid still reserved its 300px for a column that was not there, and
     the canvas kept a blank third: the art could not reach full width and
     the advisor cards were squeezed into two thin lanes. rooms/council.js
     omits the element entirely, which is what :has can see. */
  [data-council] [data-dir]:not(:has(> [data-dir-side])){grid-template-columns:minmax(0,1fr);}
  /* AND THE CANVAS HAS TO COME BACK TO COLUMN ONE. The rule below pins the
     first child to grid-column 2, because the Council reverses the Director
     and puts its side rail on the left. With the side gone that placement
     is still obeyed: the canvas sits in an IMPLICIT second track and track
     one stays empty, which looked exactly like the 300px column the line
     above was meant to remove. Collapsing the template was half a fix and
     the blank strip survived it. */
  [data-council] [data-dir]:not(:has(> [data-dir-side]))>div:first-child{grid-column:1;}
  [data-council] [data-dir]>div:first-child{grid-column:2;grid-row:1;}
  [data-council] [data-dir]>[data-dir-side]{grid-column:1;grid-row:1;position:sticky;top:104px;height:calc(100dvh - 124px);min-height:520px;overflow:hidden;}
  [data-council] [data-dir]:has(>[data-assistant-only]){position:static;}
  [data-council] [data-dir]>[data-dir-side][data-assistant-only]{position:sticky;inset:auto;top:104px;width:auto;min-height:520px;overflow:hidden;}
  [data-council] [data-dir]>[data-dir-side]>[data-mobile-assistant]{flex:1 1 0;height:auto;min-height:0;overflow:hidden;}
  [data-council] [data-dir]>[data-dir-side]>[data-mobile-assistant]>[data-council-assistant]{position:relative;height:100%;min-height:0;overflow:hidden;}
}
@media (max-width:899px){
  [data-dir],[data-dir]>*{min-width:0;max-width:100%;}
  [data-dir] input,[data-dir] textarea{min-width:0;max-width:100%;}
  [data-council-tabs]{width:100%;overflow-x:auto;flex-wrap:nowrap!important;}
  [data-council-tabs]>button{flex:none;}
  .creative-assistant-card{align-items:flex-start;flex-wrap:wrap;}
  [data-assistant-portrait]{grid-template-columns:1fr!important;}
  [data-assistant-portrait]>div:first-child{width:min(260px,100%);}
  .council-scene-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  [data-council-scene]{min-height:230px;aspect-ratio:4/3;}
  /* Mobile keeps the Council primary. The assistant follows as one compact
     full-width conversation until its dedicated drawer treatment is settled. */
  [data-mobile-assistant]{display:block;border:0;}
  [data-mobile-assistant]>[data-mobile-assistant-toggle]{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:var(--bd) solid var(--edge);border-radius:var(--r-lg);background:var(--panel);cursor:pointer;text-align:left;}
  [data-mobile-assistant]>[data-mobile-assistant-toggle]::after{content:'OPEN';margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:var(--t-label);letter-spacing:.1em;color:var(--accent);}
  [data-mobile-assistant][data-open="true"]>[data-mobile-assistant-toggle]{margin-bottom:9px;}
  [data-mobile-assistant][data-open="true"]>[data-mobile-assistant-toggle]::after{content:'CLOSE';}
  [data-mobile-assistant]:not([data-open="true"])>[data-council-assistant]{display:none!important;}
  [data-council] [data-dir]>[data-dir-side][data-assistant-only]{margin-top:2px;}
}
@media (max-width:560px){
  [data-council]{padding-left:14px!important;padding-right:14px!important;}
  [data-assistant-modal]{width:340px!important;max-width:calc(100vw - 28px)!important;padding:16px!important;}
  .creative-assistant-card>button:first-child{flex:1 1 100%!important;}
  .creative-assistant-card>div:last-child{width:100%;justify-content:flex-start!important;padding-left:76px;}
  [data-council-scene] .council-scene-chrome button span{display:none;}
  [data-council-scene] .council-scene-chrome button{width:40px;padding:9px!important;justify-content:center;}
}
[data-wb]{display:grid;gap:18px;grid-template-columns:1fr;padding:0 18px;}
@media (min-width:880px){
  [data-wb]{grid-template-columns:360px minmax(0,1fr);align-items:start;}
  [data-wb-stage]{position:sticky;top:104px;}
}
.slot{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(158deg,var(--edge),var(--panel));}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;}
[data-expert-portrait] .slot img{transform:scale(1.14);}
.slot .init{font-weight:600;color:var(--ink5);}