/* 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;}
/* The house's one scroll bar rule (Bug 49's thin, quiet bars; Mark, October 26, 2026: "if I'm not scrolling I don't
   want to see scroll bars"). A scroll area's bar shows only while it scrolls, then fades; a pointer resting over it shows none
   (lib/scroll-bars.js marks it data-bars and fades --bar-show back to 0). The bar keeps its lane at rest, so nothing
   moves when it shows. A page that does not run lib/scroll-bars.js (no data-quiet-bars on its root) keeps its bars
   shown. An area wanting its own thumb color sets --bar-thumb, never scrollbar-color. */
@property --bar-show{syntax:"<number>";inherits:false;initial-value:1;}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--bar-thumb,color-mix(in srgb,var(--muted) 55%,transparent)) calc(var(--bar-show) * 100%),transparent) transparent;}
:where(:root[data-quiet-bars]),:where(:root[data-quiet-bars]) *{--bar-show:0;}
:where(:root[data-quiet-bars] [data-bars],:root[data-quiet-bars][data-bars]){--bar-show:1;}
/* Bug 52: one keyboard focus ring for every control a keyboard can reach. Text fields keep their own look. */
:is(button,a,summary,select,[tabindex],[role="tab"],[role="option"]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mono{font-family:inherit;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 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;}
[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;}

/* ---------- THE OFF-SCREEN BOX THE COPY FALLBACK SELECTS ----------
   packages/platform-ui/clipboard.mjs makes one of these only when the
   browser has no clipboard API at all. It has to be IN the document to be
   selectable, so it is hidden by size rather than by display none. Titan's
   answer and the selection toolbar both copy, so it stands in the app's own
   base rather than in one room's sheet. */
.clip-hidden{position:fixed; top:0; left:0; width:1px; height:1px;
  opacity:0; border:0; padding:0;}