/* PBKBD desktop apps: shared look (calm, desktop-first). Borders over shadows; brand navy for primary
   actions, active items and focus; gold only as small highlights; danger only for permanent deletion. */
:root{
  --surface-100:#F3F5F9; --surface-200:#FFFFFF; --surface-300:#E9EDF4;
  --line:#DDE2EB; --line-strong:#C5CCD9;
  --ink:#141A2E; --ink-2:#4A536B; --ink-3:#7B849A;
  --brand:#14265E; --brand-hover:#0E1C48; --brand-soft:#E6EBF7;
  --accent:#D9A21B; --accent-soft:#FBF3DC;
  --danger:#B42318; --danger-soft:#FDECEA;
  --ok:#1E7A46; --ok-soft:#E5F4EB; --warn:#A15C07; --warn-soft:#FEF3E2;
  --radius-md:8px; --radius-lg:14px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;
  --shadow-pop:0 16px 40px rgb(20 26 46 / .18), 0 2px 6px rgb(20 26 46 / .08);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.45;color:var(--ink);background:var(--surface-100)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
.title{font-size:20px;line-height:28px;font-weight:700}
.label{font-size:14px;line-height:20px;font-weight:600}
.caption{font-size:12px;line-height:16px;color:var(--ink-3)}
.muted{color:var(--ink-3)}

/* buttons: verbs, radius-md */
button,input,select,textarea{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-4);border-radius:var(--radius-md);
  border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand-hover)}
.btn.ghost{background:var(--surface-200);color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--surface-300)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.quiet{background:none;border-color:transparent;color:var(--ink-2)}
.btn.quiet:hover{background:var(--surface-300)}
.btn.sm{min-height:30px;padding:0 var(--space-3);font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.btn svg{width:16px;height:16px;flex:none}

/* fields */
.field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.field>span{font-size:12px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=search],input[type=date],input[type=password],input[type=number],select,textarea{
  width:100%;min-height:36px;padding:var(--space-2) var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-200)}
textarea{resize:vertical;min-height:72px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.grid{display:grid;gap:var(--space-3) var(--space-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.checks{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.checks label{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;font-weight:600;font-size:13px}
.checks input{accent-color:var(--brand)}
.checks label:has(input:checked){background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

/* app frame: header + scrolling main; embedded in a desktop window the header is slimmer */
.app{display:flex;flex-direction:column;height:100%}
.app-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--line);background:var(--surface-200)}
.app-head .title{margin-right:auto}
.app-head .crest{width:36px;height:36px}
body.embedded .app-head{padding:var(--space-3) var(--space-4)}
body.embedded .app-head .crest{display:none}
.app-main{flex:1;overflow:auto;padding:var(--space-6)}
body.embedded .app-main{padding:var(--space-4)}
.toolbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}
.toolbar input[type=search]{max-width:280px}
.toolbar .grow{flex:1}

/* cards and tables: surface-200 on surface-100, hairlines */
.card{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)}
.card+.card{margin-top:var(--space-3)}
.table-wrap{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-md);overflow:auto}
table.list{width:100%;border-collapse:collapse}
table.list th{position:sticky;top:0;background:var(--surface-200);text-align:left;font-size:12px;font-weight:600;color:var(--ink-3);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);white-space:nowrap}
table.list td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}
table.list tr:last-child td{border-bottom:0}
table.list tbody tr:hover td{background:var(--surface-100)}
table.list tr.clickable{cursor:pointer}
.empty{padding:var(--space-8);text-align:center;color:var(--ink-3)}

/* status chips */
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-300);color:var(--ink-2);white-space:nowrap}
.chip.brand{background:var(--brand-soft);color:var(--brand)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.gold{background:var(--accent-soft);color:#7A5A06}
.chip.off{background:var(--surface-300);color:var(--ink-3);text-decoration:line-through}

/* modals: radius-lg, the one place with shadow-pop */
dialog.modal{border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;width:min(560px,calc(100vw - 32px));box-shadow:var(--shadow-pop);color:var(--ink)}
dialog.modal::backdrop{background:rgb(20 26 46 / .4)}
.modal-body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);max-height:calc(100vh - 140px);overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-top:1px solid var(--line);background:var(--surface-100);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.modal-foot .left{margin-right:auto}
.err{color:var(--danger);font-weight:600;min-height:1.2em}

/* toast, with Undo for soft actions */
.toast{position:fixed;left:50%;bottom:var(--space-6);transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-4);
  background:var(--ink);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);z-index:100;max-width:calc(100vw - 32px)}
.toast button{background:none;border:0;color:#9DB5FF;font-weight:700;cursor:pointer;padding:0}

/* sign-in card (used when an app page is opened on its own) */
.gate{min-height:100%;display:grid;place-items:center;padding:var(--space-6)}
.gate .card{width:min(360px,100%);padding:var(--space-8) var(--space-6);text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}
.gate img{width:96px;height:96px;margin:0 auto}
.gate .btn{justify-content:center}
.pw{position:relative}
.pw input{padding-right:64px}
.pw button{position:absolute;right:4px;top:4px;bottom:4px;border:0;background:var(--surface-300);border-radius:6px;padding:0 10px;font-size:12px;font-weight:600;cursor:pointer}

@media (max-width:640px){.app-head,.app-main{padding:var(--space-4)}}