/* Chrome and shared components */
.appbar{position:sticky;top:0;z-index:30;background:var(--page);border-bottom:1px solid var(--rule)}
.appbar-in{max-width:calc(var(--container) + 2*var(--inset));margin-inline:auto;height:60px;display:flex;align-items:stretch;gap:var(--s5);padding-inline:var(--inset)}
.lockup{display:flex;align-items:center;gap:8px;direction:ltr;text-decoration:none;flex:none}
.lockup img{height:16px;width:auto;display:block}
.lockup span{font:500 16px/1 var(--latin);position:relative;top:-1px}
.nav{display:flex;gap:var(--s5);align-items:stretch;margin-inline-start:auto}
.nav a:not(.pcg-button){display:flex;align-items:center;font:17px var(--display);color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;padding-top:2px}
.nav a:not(.pcg-button)[aria-current="page"]{color:var(--ink);border-bottom-color:var(--action)}
.nav a:not(.pcg-button):hover{color:var(--ink)}

/* Switcher */
.switch{position:relative;display:flex;align-items:center}
.switch-btn{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper);min-width:200px;text-align:start}
.switch-btn .chev{margin-inline-start:auto;color:var(--ink-3)}
.switch-pop{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:260px;background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--r2);box-shadow:var(--pcg-elevation);padding:6px;z-index:40}
.switch-pop li a{display:grid;grid-template-columns:24px 1fr auto;gap:2px 10px;align-items:center;padding:8px;border-radius:var(--r1);text-decoration:none}
.switch-pop li a:hover,.switch-pop li a:focus-visible{background:var(--raised)}
.switch-pop .nm{font-size:14px;line-height:1.3}
.switch-pop .sub{grid-column:2;font-size:12px;color:var(--ink-3);line-height:1.3}
.switch-pop kbd{grid-row:1/3;grid-column:3}
.switch-pop .new{border-top:1px solid var(--rule);margin-top:6px;padding-top:6px}
.switch-pop .new a{grid-template-columns:24px 1fr;font-weight:700}

/* Monogram logo (stand-in for the entity logo) */
.mono{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r1);background:var(--ink);color:var(--paper);font:13px/1 var(--display);flex:none}
.mono.lg{width:56px;height:56px;border-radius:var(--r2);font-size:26px}
.mono.md{width:40px;height:40px;font-size:19px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper);font-size:14px;line-height:1.3;white-space:nowrap;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--on-accent);font-weight:700}
.btn.primary:hover{border-color:var(--ink)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{color:var(--ink);border-color:var(--rule-2)}
.btn.sm{min-height:32px;padding:4px 12px;font-size:13px}
.btn.lg{min-height:48px;padding:10px 28px;font-size:16px}
.linkbtn{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rule-2);font-size:14px}
.linkbtn:hover{text-decoration-color:var(--action)}

/* Page frame */
.page{max-width:calc(var(--container) + 2*var(--inset));margin-inline:auto;padding:var(--s6) var(--inset) var(--s8)}
.head{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.head h1{font:32px/1.25 var(--display)}
.head .lede{color:var(--ink-2);font-size:14px;width:100%;margin-top:-12px}
.head .act{margin-inline-start:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:var(--s2);display:flex;gap:6px}
.crumb a{color:var(--ink-2);text-decoration:none}.crumb a:hover{color:var(--ink)}
.h2{font:22px/1.3 var(--display);margin-bottom:var(--s3)}
.h3{font:700 14px/1.4 var(--ui)}
.block{background:var(--paper);border-radius:var(--r2);padding:var(--s5)}
.stack>*+*{margin-top:var(--s5)}
.narrow{max-width:720px}

/* Fields */
.field{display:grid;gap:6px}
.field label,.label{font-size:13px;color:var(--ink-2)}
.input,.textarea,.select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper)}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
.textarea{resize:vertical;line-height:1.7}
.input.xl{font:26px/1.3 var(--display);min-height:64px;padding:12px 16px}

/* Choice: adjacent short options, selected = full red outline (PCG rule) */
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice button{min-height:36px;padding:6px 12px;border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--paper);font-size:14px;color:var(--ink-2)}
.choice button[aria-pressed="true"]{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action);color:var(--ink);font-weight:700}
.choice button:hover{color:var(--ink)}

/* Tabs: underline only */
.tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--rule);margin-bottom:var(--s5);overflow-x:auto}
.tabs a,.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 0;font:17px var(--display);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tabs [aria-selected="true"],.tabs [aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* Status words (not pills: plain text with a small square) */
.state{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.state::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--rule-2)}
.state.ok{color:var(--ok)}.state.ok::before{background:var(--ok)}
.state.wait{color:var(--wait)}.state.wait::before{background:var(--wait)}
.state.draft::before{background:var(--ink-3)}

/* Decision line: the alarm text on the library error role (no side rail, task-112) */
.decide{display:flex;gap:8px;align-items:baseline;color:var(--decision);font-size:14px}
.decide a,.decide button{color:var(--decision);font-weight:700;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:4px;font-size:14px}


/* Toast */
@keyframes vp-toast-fade{0%,75%{opacity:1}100%{opacity:0}} /* task-174 (A4): the light save toast fades */
.toast{animation:vp-toast-fade 2.6s ease-in forwards;position:fixed;inset-block-end:64px;inset-inline-start:50%;transform:translateX(50%);background:var(--pcg-ink);color:var(--pcg-canvas);padding:10px 16px;border-radius:var(--r2);font-size:14px;z-index:60}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* Tables (admin) */
.table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:var(--r2);overflow:hidden;font-size:14px}
.table th{font-weight:400;color:var(--ink-3);font-size:12px;text-align:start;padding:12px 16px;border-bottom:1px solid var(--rule)}
.table td{padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr.open td{background:var(--raised)}
.who{display:flex;align-items:center;gap:10px}

@media (max-width:720px){
  .appbar-in{height:auto;flex-wrap:wrap;gap:0 var(--s3);padding-block:8px 0}
  .lockup{height:44px}
  .switch{margin-inline-start:auto}
  .switch-btn{min-width:0;max-width:200px}
  .switch-btn .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .switch-pop{inset-inline-start:auto;inset-inline-end:0}
  .nav{order:3;width:100%;margin:0;gap:var(--s5);height:44px}
  .head h1{font-size:26px}
  .page{padding-top:var(--s5)}
  .block{padding:var(--s4)}
  .table th:nth-child(n+3),.table td:nth-child(n+3){display:none}
  .table td,.table th{padding:12px}
}

/* Utilities that replaced inline styles */
.mt4{margin-top:var(--s4)}
.approve-bar.top{margin:0 0 var(--s4)}
.mono.add{background:var(--action)}
.page{padding-bottom:112px}
.decide{display:block}
@media (max-width:720px){
}