/* Agency OS — screen styles. Loads after tokens-v2.css.
   Component implementations lifted from dashboard-handoff/v2-reference/ref.css.
   Direction: light, white, minimal. Colour marks exceptions only.

   VENDORED from docs/design/handoff/os.css (PRD-011). Exactly the cleanup
   DIRECTION.md §2 prescribes was applied at port time, and nothing else:
     - dropped the .frame / .cap canvas-scaffold rules — they existed only to
       lay the nine reference screens out side by side on a pannable canvas;
     - replaced the stray hard-coded hex with tokens (#fff on navy chrome stays,
       per the same note).
   Tokens the design needs that tokens-v2.css does not carry are declared in the
   "app additions" block at the foot of this file. tokens-v2.css is vendored
   verbatim and is never edited. */

*{box-sizing:border-box;margin:0;padding:0}
html{font-family:var(--font-sans);color:var(--color-body);-webkit-font-smoothing:antialiased}
/* was #eceef0 — the canvas backdrop. --color-surface-grey is the token for
   "app background, cool neutral", which is the role it was playing. */
body{line-height:1.5;background:var(--color-surface-grey)}
a{color:var(--color-link);text-decoration:none}
a:hover{color:var(--color-primary-dark);text-decoration:underline}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100%}
.side{background:var(--sidebar-bg);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
.side .brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:600;font-size:14.5px;padding:4px 10px 22px}
.side .brand i{width:22px;height:22px;border-radius:6px;background:var(--color-primary);display:block;flex:none}
.side a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:6px;color:var(--sidebar-item);font-size:13.5px}
.side a:hover{color:var(--sidebar-item-hover);background:rgba(255,255,255,.06);text-decoration:none}
.side a.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-fg);font-weight:500}
.side a .ic{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.side .foot{margin-top:auto;padding:10px;border-top:1px solid var(--sidebar-border);color:var(--sidebar-label);font-size:11.5px;display:flex;align-items:center;gap:8px}
.side .foot b{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-weight:600;font-size:10.5px;display:grid;place-items:center}

.main{min-width:0;background:var(--color-bg);display:flex;flex-direction:column}
.top{height:var(--topbar-height);flex:none;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:14px;padding:0 var(--content-pad)}
.top h1{font-size:15px;font-weight:600;color:var(--color-text)}
.top .ctx{font-size:var(--font-size-xs);color:var(--color-muted);font-family:var(--font-mono)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.syncline{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-size-xs);color:var(--color-muted)}
.syncline .d{width:6px;height:6px;border-radius:50%;background:var(--color-success)}
.syncline.stale .d{background:var(--color-warning)}
.body{padding:var(--content-pad);display:flex;flex-direction:column;gap:26px}

/* ---- primitives ---- */
.label{font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color)}
.sechead{display:flex;align-items:baseline;gap:12px}
.sechead h2{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}
.sechead .n{font-size:var(--font-size-xs);color:var(--color-faint)}
.sechead .act{margin-left:auto;font-size:var(--font-size-xs);color:var(--color-link);font-weight:500}
.card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius)}
.card>header{display:flex;align-items:baseline;gap:10px;padding:14px 16px 12px}
.card>header h3{font-size:13.5px;font-weight:600;color:var(--color-text)}
.card>header .m{margin-left:auto;font-size:var(--font-size-xs);color:var(--color-faint);font-family:var(--font-mono)}
.card>footer{padding:10px 16px;border-top:1px solid var(--color-border-subtle);font-size:var(--font-size-xs);color:var(--color-muted)}
.pad{padding:0 16px 16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}

.btn{display:inline-flex;align-items:center;gap:7px;font:600 var(--font-size-sm)/1 var(--font-sans);border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;border:1px solid transparent}
.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}
.btn-sec{background:var(--color-bg);color:var(--color-text);border-color:var(--color-border)}
.btn-xs{padding:5px 10px;font-size:var(--font-size-xs)}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-xs);font-weight:600;padding:2px 9px;border-radius:var(--radius-full);line-height:1.55;white-space:nowrap}
.b-neutral{background:var(--color-surface);color:var(--color-muted);border:1px solid var(--color-border)}
.b-success{background:var(--color-success-bg);color:var(--status-success-fg)}
.b-warning{background:var(--color-warning-bg);color:var(--status-warning-fg)}
.b-danger{background:var(--color-danger-bg);color:var(--status-danger-fg)}
.b-info{background:var(--color-info-bg);color:var(--status-info-fg)}
.b-primary{background:var(--color-primary-bg);color:var(--status-primary-fg)}

.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.d-red{background:var(--rag-red)}.d-amber{background:var(--rag-amber)}.d-green{background:var(--rag-green)}.d-grey{background:var(--color-faint)}
.rag{display:inline-flex;align-items:center;gap:7px;font-size:var(--font-size-xs);font-weight:600}
.r-red{color:var(--status-danger-fg)}.r-amber{color:var(--status-warning-fg)}.r-green{color:var(--status-success-fg)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--color-muted)}.faint{color:var(--color-faint)}
.trend{font-family:var(--font-mono);font-size:var(--font-size-xs)}
.up{color:var(--status-success-fg)}.down{color:var(--status-danger-fg)}

/* ---- tables ---- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.tbl thead th{text-align:left;padding:9px var(--cell-pad-x);border-bottom:1px solid var(--color-border);color:var(--color-muted);font-size:var(--font-size-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.tbl tbody td{padding:var(--cell-pad-y) var(--cell-pad-x);border-bottom:1px solid var(--color-border-subtle);color:var(--color-body);height:var(--row-h);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--color-surface)}
.tbl .num{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.tbl .lead{color:var(--color-text);font-weight:500}
.tbl tfoot td{padding:11px var(--cell-pad-x);border-top:1px solid var(--color-border);font-family:var(--font-mono);text-align:right;font-weight:600;color:var(--color-text);background:var(--color-surface)}
.tbl tfoot td:first-child{font-family:var(--font-sans);text-align:left;text-transform:uppercase;font-size:var(--font-size-xs);letter-spacing:.05em;color:var(--color-muted)}
.tbl .grp td{background:var(--color-surface);height:34px;padding-top:6px;padding-bottom:6px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted);border-bottom:1px solid var(--color-border)}
.tbl .grp td .t{float:right;font-family:var(--font-mono);letter-spacing:0;text-transform:none;color:var(--color-body)}
.tight td{height:auto;padding-top:8px;padding-bottom:8px}
.card>.tbl thead th:first-child,.card>.tbl tbody td:first-child,.card>.tbl tfoot td:first-child{padding-left:16px}
.card>.tbl thead th:last-child,.card>.tbl tbody td:last-child,.card>.tbl tfoot td:last-child{padding-right:16px}
.hcell{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.hcell.over{background:var(--status-danger-subtle);color:var(--status-danger-fg);font-weight:600}
.hcell.under{background:var(--status-warning-subtle);color:var(--status-warning-fg);font-weight:600}
.hcell.out{color:var(--color-faint)}
.hcell .mk{margin-left:5px;font-size:9px;vertical-align:1px}
.drag{color:var(--color-border);font-size:12px;letter-spacing:-1px;cursor:grab}
tr:hover .drag{color:var(--color-faint)}

/* ---- stats ---- */
.stat-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--color-bg);padding:16px 18px}
.stat .k{font-size:var(--font-size-xs);color:var(--color-muted);font-weight:500}
.stat .v{font-family:var(--font-mono);font-weight:700;color:var(--color-text);letter-spacing:-.02em;margin-top:6px;line-height:1;font-size:var(--font-size-2xl);font-variant-numeric:tabular-nums}
.stat.lead{background:var(--color-surface)}
.stat.lead .v{font-size:var(--font-size-4xl)}
.stat .sub{font-size:var(--font-size-xs);color:var(--color-muted);margin-top:7px}
.stat .rags{display:flex;gap:16px;margin-top:8px;align-items:baseline}
.stat .rags b{font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:700}
.stat .rags i{font-style:normal;font-size:var(--font-size-xs);color:var(--color-muted);margin-left:5px}

/* mini freshness boxes */
.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.mini div{background:var(--color-bg);padding:13px 16px}
.mini .k{font-size:var(--font-size-xs);color:var(--color-muted);display:flex;align-items:center;gap:7px}
.mini .v{font-family:var(--font-mono);font-size:var(--font-size-lg);color:var(--color-text);margin-top:5px;font-weight:500}
.mini .s{font-size:var(--font-size-xs);color:var(--color-faint);margin-top:3px}

/* ---- chart ---- */
.bars{display:flex;align-items:flex-end;gap:22px;height:180px}
.bars .col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-bottom:29px}
.bars .xl{position:absolute;left:0;right:0;bottom:0}
.bars .stack>span{display:block}
.bars .stack>span:first-child{border-radius:4px 4px 0 0}
.s-r{background:var(--chart-rag-red)}.s-a{background:var(--chart-rag-amber)}.s-g{background:var(--chart-rag-green)}
.bars .xl{text-align:center;font-size:var(--font-size-xs);color:var(--color-muted);line-height:1.4}
.bars .col.now .xl{color:var(--color-text);font-weight:600}
.legend{display:flex;gap:16px;margin-top:14px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:var(--font-size-xs);color:var(--color-body)}
.legend i{width:9px;height:9px;border-radius:2px}
.spark{width:100%;height:52px;display:block;overflow:visible}

/* ---- attention / decision list ---- */
.attn{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.attn .it{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--color-border-subtle)}
.attn .it:last-child{border-bottom:none}
.attn .it .txt{font-size:var(--font-size-sm)}
.attn .it .txt b{color:var(--color-text);font-weight:600}
.attn .it .meta{font-size:var(--font-size-xs);color:var(--color-muted);font-family:var(--font-mono)}
.attn .more{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--color-surface);font-size:var(--font-size-xs);color:var(--color-muted);border-top:1px solid var(--color-border-subtle)}
.list{display:flex;flex-direction:column}
.list .row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--color-border-subtle);font-size:var(--font-size-sm)}
.list .row:last-child{border-bottom:none}
.list .row .src{margin-left:auto}

/* ---- toolbar / filters ---- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px}
.seg button{border:0;background:transparent;font:500 var(--font-size-sm)/1 var(--font-sans);color:var(--color-muted);padding:7px 13px;border-radius:5px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--color-dark);color:#fff}
.search{min-width:220px;font-size:var(--font-size-sm);color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 12px}
.pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pills .pl{font-size:var(--font-size-xs);font-weight:500;color:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:4px 11px;background:var(--color-bg);cursor:pointer;min-width:30px;text-align:center}
.pills .pl[aria-pressed="true"]{background:var(--color-dark);border-color:var(--color-dark);color:#fff}
.pills .pl.done{color:var(--color-faint)}
.pl-lab{font-size:var(--font-size-xs);color:var(--color-faint);width:44px;flex:none}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--color-border)}
.tabs button{border:0;background:transparent;font:500 var(--font-size-sm)/1 var(--font-sans);color:var(--color-muted);padding:11px 15px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--color-text);border-bottom-color:var(--color-primary);font-weight:600}
.readiness{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--font-size-xs);color:var(--color-muted);align-items:center}
.readiness span{display:inline-flex;align-items:center;gap:6px}
.readiness .ok{color:var(--status-success-fg)}.readiness .no{color:var(--color-faint)}
.readiness .warn{color:var(--status-warning-fg);font-weight:600}

/* ---- kanban ---- */
.board{display:grid;gap:12px;align-items:start}
.lane{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);min-height:190px;display:flex;flex-direction:column}
.lane>header{padding:10px 11px 8px;display:flex;align-items:center;gap:6px}
.lane>header .n{font-size:11.5px;font-weight:600;color:var(--color-text);letter-spacing:.01em}
.lane>header .c{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--color-faint)}
.lane .owner{width:14px;height:14px;flex:none;stroke:var(--color-faint);fill:none;stroke-width:1.7}
.lane .items{padding:0 8px 8px;display:flex;flex-direction:column;gap:8px}
.tcard{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.tcard .n{font-size:12.5px;color:var(--color-text);font-weight:500;line-height:1.35}
.tcard .m{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--color-muted);font-family:var(--font-mono)}
.tcard .who{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:10.5px}
.tcard .who b{width:16px;height:16px;border-radius:50%;background:var(--color-surface-grey);border:1px solid var(--color-border);display:grid;place-items:center;font-size:8.5px;font-weight:600;color:var(--color-muted)}
.tcard.running{border-color:var(--agent-border)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--color-primary);flex:none;animation:pl 1.6s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(41,207,168,.45)}50%{opacity:.75;box-shadow:0 0 0 4px rgba(41,207,168,0)}}
.rail{display:flex;flex-direction:column;gap:12px}
.rail .lane{min-height:60px}

/* ---- v2: top navigation (replaces left rail) ---- */
.topnav{position:sticky;top:0;z-index:10;background:var(--sidebar-bg);height:var(--topbar-height);display:flex;align-items:center;padding:0 var(--content-pad)}
.topnav .brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:600;font-size:14.5px}
.topnav .brand i{width:22px;height:22px;border-radius:6px;background:var(--color-primary);display:block;flex:none}
.topnav nav{display:flex;gap:2px;margin-left:28px}
.topnav nav a{display:flex;align-items:center;gap:8px;color:var(--sidebar-item);font-size:13.5px;padding:8px 13px;border-radius:6px}
.topnav nav a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.topnav nav a.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-fg);font-weight:500}
.topnav nav .ic{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.topnav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.topnav .syncline{color:rgba(255,255,255,.58)}
.topnav .syncline a{color:rgba(255,255,255,.82)}
.topnav .av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.13);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center;flex:none}
.page-head{display:flex;align-items:baseline;gap:12px}
.page-head h1{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text);letter-spacing:-.01em}
.page-head .ctx{font-size:var(--font-size-xs);color:var(--color-muted);font-family:var(--font-mono)}
.page-head .right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---- v2: uniform stat cards (one type scale across all four) ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.stats .stat{background:var(--color-bg);padding:16px 18px;display:flex;flex-direction:column}
.stats .k{font-size:var(--font-size-xs);color:var(--color-muted);font-weight:500}
.stats .v{font-family:var(--font-mono);font-size:var(--font-size-3xl);font-weight:700;color:var(--color-text);letter-spacing:-.02em;line-height:1;margin-top:10px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:14px}
.stats .v i{font-style:normal;font-family:var(--font-sans);font-size:var(--font-size-xs);font-weight:500;color:var(--color-muted);margin-left:5px}
.stats .sub{font-size:var(--font-size-xs);color:var(--color-muted);margin-top:10px;line-height:1.45}

/* ---- v2: quiet link style inside tables ---- */
.tbl a.plain{color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-border);text-underline-offset:3px}
.tbl a.plain:hover{color:var(--color-text);text-decoration-color:var(--color-faint)}

/* ---- v2: activity log ---- */
.actlog .r{display:grid;grid-template-columns:64px 96px 1fr 150px;gap:14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--color-border-subtle);font-size:var(--font-size-sm)}
.actlog .r:last-child{border-bottom:none}
.actlog .r:hover{background:var(--color-surface)}
.actlog .when{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-faint)}
.actlog .who{font-size:var(--font-size-xs);color:var(--color-muted);text-align:right}
.actlog .day{background:var(--color-surface);border-bottom:1px solid var(--color-border);border-top:1px solid var(--color-border-subtle);padding:7px 16px;font-size:var(--font-size-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.actlog .day:first-child{border-top:none}

/* ---- detail card (task modal) ---- */
.detail{width:100%;display:flex;flex-direction:column}
.detail .r{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:9px 16px;border-bottom:1px solid var(--color-border-subtle);font-size:var(--font-size-sm);align-items:center}
.detail .r:last-child{border-bottom:none}
.detail .r .k{font-size:var(--font-size-xs);color:var(--color-muted)}
.detail .r .v{color:var(--color-text)}
.notebox{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--font-size-sm);color:var(--color-faint);background:var(--color-surface)}

/* ============================================================
   ADDITIVE · v2-auth (Agency OS - Auth screens.html)
   Nothing above this line is modified. Tokens-only values.
   ============================================================ */
.auth-page{min-height:100%;background:var(--color-surface-grey);display:grid;place-items:center;padding:var(--space-6)}
.auth-card{width:400px;max-width:100%;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:28px 28px 24px}
.auth-card.wide{width:440px}
.auth-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:var(--color-text);margin-bottom:20px}
.auth-brand i{width:20px;height:20px;border-radius:5px;background:var(--color-primary);display:block;flex:none}
.auth-card h2{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);letter-spacing:-.01em}
.auth-sub{font-size:var(--font-size-sm);color:var(--color-muted);margin-top:6px;line-height:1.5;text-wrap:pretty}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.auth-mid{margin-top:16px;text-align:center}
.auth-foot{margin-top:20px;padding-top:15px;border-top:1px solid var(--color-border-subtle);text-align:center;font-size:var(--font-size-xs);color:var(--color-muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color)}
.field .hint{font-size:var(--font-size-xs);color:var(--color-faint)}
.inp{font:400 var(--font-size-sm)/1.4 var(--font-sans);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px 12px;width:100%}
.inp::placeholder{color:var(--color-faint)}
.inp:focus,.inp.is-focus{outline:none;border-color:var(--color-primary);box-shadow:var(--focus-ring)}
.inp[aria-invalid="true"]{border-color:var(--color-danger)}
.inp[disabled]{background:var(--color-surface);color:var(--color-faint);cursor:not-allowed}
.code-inp{font-family:var(--font-mono);font-size:var(--font-size-2xl);font-weight:500;letter-spacing:.28em;text-indent:.28em;text-align:center;padding:13px 12px;font-variant-numeric:tabular-nums}
.rec-inp{font-family:var(--font-mono);font-size:var(--font-size-base);letter-spacing:.08em;text-align:center;padding:12px}
.btn-block{width:100%;justify-content:center;padding:11px 14px}
.btn:focus-visible,.quiet-link:focus-visible,a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.btn-primary[disabled]{background:var(--color-border-subtle);border-color:var(--color-border);color:var(--color-faint);cursor:not-allowed}
.quiet-link{font-size:var(--font-size-sm);color:var(--color-muted);text-decoration:underline;text-decoration-color:var(--color-border);text-underline-offset:3px}
.quiet-link:hover{color:var(--color-text);text-decoration-color:var(--color-faint)}
.notice{display:flex;gap:9px;align-items:flex-start;font-size:var(--font-size-sm);line-height:1.45;border-radius:var(--radius-sm);padding:10px 12px}
.notice .ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;margin-top:2px}
.notice-danger{background:var(--status-danger-subtle);border:1px solid var(--color-danger-bg);color:var(--status-danger-fg)}
.notice-warning{background:var(--status-warning-subtle);border:1px solid var(--color-warning-bg);color:var(--status-warning-fg)}
.qr{width:150px;height:150px;margin:20px auto 0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);padding:10px}
.qr-cap{text-align:center;font-size:var(--font-size-xs);color:var(--color-faint);margin-top:7px;font-family:var(--font-mono)}
.secret{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 8px 8px 12px;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);letter-spacing:.04em}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.codes span{background:var(--color-bg);padding:10px 12px;font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);letter-spacing:.05em;text-align:center}
.warnline{display:flex;gap:8px;align-items:flex-start;font-size:var(--font-size-xs);line-height:1.5;color:var(--status-warning-fg);margin-top:14px}
.warnline .ic{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;margin-top:2px}
.act-row{display:flex;gap:10px;margin-top:18px}
.act-row .btn{flex:1;justify-content:center}
@media (max-width:520px){.auth-card,.auth-card.wide{width:100%;padding:22px 18px}.auth-page{padding:var(--space-4)}}

/* ============================================================
   APP ADDITIONS · agency-os (PRD-011)
   Everything above this line is the vendored design CSS. Below is what the
   Rails app needs and the handoff did not carry: the four tokens the port-time
   hex cleanup required (DIRECTION.md §2), the page shell the canvas replaced
   with absolutely-positioned .frame boxes, and the two component states the
   handoff README names but never wrote (.empty, .skel).
   Rule: token-only values, no new hex except the four promoted literals here.
   ============================================================ */
:root {
  --color-on-primary: #08312a;  /* was inline in .btn-primary — text on the green fill */
  --status-info-fg:   #1f5590;  /* was inline in .b-info — AA text on --color-info-bg */
  --status-primary-fg:#0e7d63;  /* was inline in .b-primary — AA text on --color-primary-bg */
  --agent-border:     #bfe9dc;  /* was inline in .tcard.running — card border while an agent runs */
}

/* ---- page shell ---- */
html,body{height:100%}
/* The navy bar is full-bleed; its row aligns to the same --content-max column
   as the page body so the brand sits over the h1. */
.topnav-inner{flex:1;display:flex;align-items:center;height:100%;width:100%;max-width:var(--content-max);margin:0 auto}
.app-main{background:var(--color-bg);min-height:calc(100% - var(--topbar-height))}
/* README "Chrome": the page head is 22px 28px at the top of the body, and the
   content column is capped at --content-max INSIDE the --content-pad gutter —
   so the cap plus both gutters is what the box is allowed to grow to. That
   makes the h1 land on the same x as the brand in the bar above it. */
.app-main>.body{max-width:calc(var(--content-max) + var(--content-pad) * 2);margin:0 auto;padding:22px var(--content-pad) var(--content-pad)}

/* ---- empty state — centred muted line + one action ---- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:56px var(--content-pad)}
.empty p{font-size:var(--font-size-sm);color:var(--color-muted);max-width:46ch;line-height:1.5}

/* ---- loading — skeleton blocks, never spinners ---- */
.skel{display:block;height:14px;border-radius:var(--radius-xs);color:transparent;background:linear-gradient(90deg,var(--color-border-subtle) 25%,var(--color-surface) 37%,var(--color-border-subtle) 63%);background-size:400% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel,.pulse{animation:none}}

/* ---- focus — visible everywhere, never removed (non-negotiable 7) ---- */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.tbl tbody tr:focus-visible{outline:none;box-shadow:var(--focus-ring);background:var(--color-surface)}

/* ---- flash — the success tier the auth notices block does not carry ---- */
.notice-success{background:var(--status-success-subtle);border:1px solid var(--color-success-bg);color:var(--status-success-fg)}
.flashes{display:flex;flex-direction:column;gap:10px}

/* The design's .qr is a framed container; the app puts the generated QR svg
   inside it as an <img>, which is inline by default and so ignores the auto
   margins that centre it. */
.qr img{display:block;width:100%;height:100%}

/* ---- screen-reader-only label ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The brand links home and the avatar links to the account in the app; neither
   may pick up the generic a:hover underline over the navy. */
.topnav .brand:hover,.topnav .av:hover{color:#fff;text-decoration:none}
.topnav .av:hover{background:rgba(255,255,255,.20)}