/* ==========================================================================
   PC Solutions Studio — CLIENT PORTAL — shared foundation
   Porthole Press at APP DENSITY (spec: docs/superpowers/specs/2026-08-30-client-portal-design.md, D4/D5)

   Same tokens as the marketing page, smaller scale. The portal must read as the same studio's
   work, not a SaaS template behind a login:
     - bone ground, paper panels, ink type, mono caps labels
     - radius 0, hairline rules instead of shadows
     - ONE dawn-orange element per screen (the CTA or the "your court" line — never both)
     - focus rings are ink, offset 3px, never removed
   Every mockup page loads this file first and adds its own page-specific CSS in its own file.
   Do not edit this file from a page agent; extend it in your own stylesheet.
   ========================================================================== */
:root{
  --bone:#EEEDE8;      /* page ground */
  --paper:#F8F7F3;     /* raised surface / panels */
  --ink:#101418;       /* text, bars, inverted panels */
  --muted:#5A6470;
  --rule:#D3D2CB;
  --orange:#F26A1B;    /* ONE per screen */
  --field:#161B21;     /* inputs on ink only */
  --field-line:#2B3947;
  --on-ink:#EEEDE8;
  --on-ink-muted:#9AA3AC;
  --on-ink-rule:#2A3138;

  /* app-density scale — 8px base, tightened (§11 of the design framework) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --barh:52px;         /* portal bar (the marketing nav is 64) */
  --ctl:36px;          /* control height on a fine pointer; 44 on coarse (below) */
  --maxw:1440px;

  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Archivo",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:500}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible,.inv :focus-visible{outline-color:var(--on-ink)}
*{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}

/* ------------------------------------------------------------ type roles */
.label{                                   /* mono caps — section labels, field labels, meta */
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;color:var(--muted);
}
.label.ink{color:var(--ink)}
.hd{                                      /* panel / section head — condensed caps */
  font-family:var(--disp);font-weight:800;font-stretch:62%;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
}
.big{                                     /* the one large figure in a pane — week, count, round */
  font-family:var(--disp);font-weight:900;font-stretch:62%;line-height:.92;
  letter-spacing:-.01em;text-transform:uppercase;font-size:clamp(28px,3vw,44px);
}
.title{                                   /* page / project title in the bar */
  font-family:var(--disp);font-weight:800;font-stretch:62%;font-size:20px;
  letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.small{font-size:12.5px;line-height:1.45;color:var(--muted)}
.body{font-size:14px;line-height:1.55}
.measure{max-width:60ch}

/* ------------------------------------------------------------ bar */
.pbar{
  position:sticky;top:0;z-index:50;height:var(--barh);
  background:var(--ink);color:var(--on-ink);border-bottom:2px solid var(--bone);
}
.pbar-in{
  height:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);
  display:flex;align-items:center;gap:var(--s5);
}
.pbar .brand svg{height:30px;width:auto;fill:currentColor}
.pbar .sep{width:1px;height:22px;background:var(--on-ink-rule);flex:0 0 auto}
.pbar .label{color:var(--on-ink-muted)}
.pbar .grow{flex:1}
.pbar a:hover{color:var(--on-ink)}

/* -------------------------------------------------------- the calm bar's account menu
   Plan Task 6 (spec §7): the project-name link + page-context label + account button/menu,
   ported from prototypes/portal/room-simple.css. .acct* is scoped under .pbar here -- the mock
   left it bare, but account.php already has an unrelated `<section class="pnl acct">`, and a
   bare `.acct{}` would have reached straight into it. */
.pbar .pname{color:var(--on-ink);min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar .pname:hover{color:var(--on-ink)}
.pbar .ctx{letter-spacing:.14em}
.pbar .acct{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;flex:0 0 auto;
  background:transparent;border:1px solid var(--on-ink-rule);cursor:pointer;color:var(--on-ink);
}
.pbar .acct:hover{border-color:var(--on-ink-muted)}
.pbar .acct svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.pbar .acct .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.7}
.pbar .acct-wrap{position:relative;flex:0 0 auto}
.pbar .acct-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:200px;z-index:60;
  background:var(--ink);border:1px solid var(--on-ink-rule);color:var(--on-ink);
  display:none;flex-direction:column;padding:6px 0;
}
.pbar .acct-wrap.open .acct-menu{display:flex}
/* .acct-who, not .who -- .who already names three unrelated things elsewhere in this codebase
   (the legacy bar's "Signed in as" span, review.js's thread-card author row, brandkit's
   business-card person block); see portal_bar_acct()'s doc in lib.php for the collision this
   avoids. */
.pbar .acct-menu .acct-who{padding:10px 14px 8px;border-bottom:1px solid var(--on-ink-rule)}
.pbar .acct-menu .acct-who b{display:block;font-weight:500;font-size:13.5px;white-space:normal}
.pbar .acct-menu .acct-who .label{margin-top:2px}
.pbar .acct-menu a{padding:9px 14px;font-size:13px}
.pbar .acct-menu a:hover{background:rgba(238,237,232,.08)}
/* The project name never hides (it is the one thing every portal page must carry); its ctx
   label is the one that gives first on a narrow bar, along with the sep that precedes it. */
@media(max-width:480px){
  .pbar .ctx,.pbar .sep:has(+ .ctx){display:none}
}

/* ------------------------------------------------------------ panels */
.pnl{background:var(--paper);border:1px solid var(--rule);padding:var(--s4);min-width:0;min-height:0}
.pnl-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.pnl-h .hd{color:var(--ink)}
.pnl.inv{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.pnl.inv .label{color:var(--on-ink-muted)}
.pnl.inv .hd{color:var(--on-ink)}
.pnl.scroll{overflow:auto;overscroll-behavior:contain}     /* THE one pane that scrolls inside the no-scroll shell */
.rule{height:1px;background:var(--rule);border:0;margin:var(--s3) 0}
.rule.ink{background:var(--ink)}
.inv .rule{background:var(--on-ink-rule)}

/* ------------------------------------------------------------ status + chips (square, never pills) */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
  border:1px solid var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.chip.fill{background:var(--ink);color:var(--on-ink)}
.chip.muted{border-color:var(--rule);color:var(--muted)}
.chip.orange{border-color:var(--orange);color:var(--ink)}      /* orange as a RULE, never as text */
.chip.orange::before{content:"";width:8px;height:8px;background:var(--orange)}
.inv .chip{border-color:var(--on-ink);color:var(--on-ink)}
.inv .chip.fill{background:var(--on-ink);color:var(--ink)}
.dot{display:inline-block;width:8px;height:8px;background:var(--ink);vertical-align:middle}
.dot.orange{background:var(--orange)}
.dot.muted{background:var(--rule)}

/* ------------------------------------------------------------ buttons */
.pb{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ctl);padding:0 var(--s4);border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--on-ink);cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:13px;line-height:1;white-space:nowrap;
  transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out;
}
.pb:hover{background:#2A3138;border-color:#2A3138}
.pb:active{transform:translateY(1px)}
.pb.ghost{background:transparent;color:var(--ink)}
.pb.ghost:hover{background:rgba(16,20,24,.06)}
.pb.quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.pb.quiet:hover{border-color:var(--ink);background:transparent}
.pb.orange{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:500}   /* THE one */
.pb.orange:hover{background:#D95A12;border-color:#D95A12}
.pb.sm{min-height:28px;padding:0 10px;font-size:12px}
.pb.cap{font-family:var(--disp);font-weight:700;font-stretch:62%;letter-spacing:.07em;text-transform:uppercase;font-size:12.5px}
.pb[disabled]{opacity:.45;cursor:not-allowed}
.inv .pb{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.inv .pb:hover{background:var(--paper)}
.inv .pb.ghost{background:transparent;color:var(--on-ink)}
.inv .pb.ghost:hover{background:rgba(238,237,232,.10)}
.inv .pb.orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.link{border-bottom:1px solid var(--rule)}
.link:hover{border-bottom-color:var(--ink)}

/* ------------------------------------------------------------ fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field .label{color:var(--muted)}
.field .hint{font-size:12px;color:var(--muted);line-height:1.45}
.in,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{
  width:100%;height:var(--ctl);padding:0 12px;border-radius:0;
  background:var(--paper);border:1px solid var(--rule);color:var(--ink);
  font-family:var(--sans);font-size:14px;
}
.field textarea,textarea.in{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.5}
.in:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
/* NO outline:none. The ring comes from :focus-visible; the border only darkens. */
.in:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.in:user-invalid,.field input:user-invalid,.field textarea:user-invalid{border-color:var(--orange);border-width:2px}
.field .err{font-size:12px;color:var(--ink);border-left:2px solid var(--orange);padding-left:8px}
.sel{position:relative;display:block}
.sel::after{content:"";position:absolute;right:12px;top:50%;margin-top:-3px;pointer-events:none;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}
.sel select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;line-height:1.4}
.check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;
  border:1px solid var(--ink);background:var(--paper);display:grid;place-content:center;cursor:pointer}
.check input::before{content:"";width:8px;height:8px;background:var(--ink);transform:scale(0);transition:transform .12s ease-out}
.check input:checked::before{transform:scale(1)}
.check input[type=radio]::before{width:8px;height:8px}
.check.done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--rule)}

/* choice tiles: every option is RENDERED, never just named (spec D6) */
.tiles{display:grid;gap:var(--s3)}
.tile{
  position:relative;display:block;border:1px solid var(--rule);background:var(--paper);padding:var(--s3);
  cursor:pointer;min-width:0;transition:border-color .15s ease-out;
}
.tile:hover{border-color:var(--muted)}
.tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tile.on,.tile:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tile:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.tile .tl{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.tile .tl .label{color:var(--muted)}
.tile.on .tl .label,.tile:has(input:checked) .tl .label{color:var(--ink)}

/* ------------------------------------------------------------ lists + tables */
.ledger{border-top:1px solid var(--ink)}
.ledger>li,.ledger>.row{display:grid;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.ledger .label{color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl .r,.tbl td.num{text-align:right}
.tbl tbody tr:hover td{background:rgba(16,20,24,.03)}

/* ------------------------------------------------------------ app shell (spec D5) */
.shell{min-height:100dvh;display:flex;flex-direction:column}
.shell main{flex:1;min-height:0;max-width:var(--maxw);width:100%;margin:0 auto;padding:var(--s4) var(--s5) var(--s5)}
@media(min-width:1000px){
  .shell.noscroll{height:100dvh;overflow:hidden}
  .shell.noscroll main{overflow:hidden;display:grid}
}
@media(max-width:999px){
  .shell main{padding:var(--s4)}
  .pbar-in{padding:0 var(--s4);gap:var(--s4)}
}

/* ------------------------------------------------------------ motion + touch */
@media(pointer:coarse){
  :root{--ctl:44px}
  .pb.sm{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}