/* FSC design system: shared tokens, controls and the internal app shell. Loaded before page CSS. */
:root{
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --brand:#123e49;--brand-deep:#0d2f38;--brand-line:#1f4c57;--brand-text:#b8cdd0;--accent:#2fb58b;
  --primary:#157357;--primary-hover:#105f47;--primary-soft:#e6f3ed;--primary-ring:#15735733;
  --bg:#f5f7f6;--surface:#fff;--surface-2:#f9fbfa;--border:#e3e8e6;--border-strong:#cfd8d5;
  --text:#14282e;--muted:#5d6f72;--subtle:#8a989a;
  --warn-bg:#fff5dd;--warn:#7d5b14;--danger-bg:#fdebe8;--danger:#a3382d;--info-bg:#eaf2f7;--info:#285a73;
  --radius:8px;--radius-lg:12px;--shadow-sm:0 1px 2px #10282e0f;--shadow:0 1px 3px #10282e14,0 8px 24px #10282e0d;--shadow-lg:0 24px 64px #0b262e33;
  --h-md:36px;--h-sm:30px;
  font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
p{margin:0 0 8px;color:var(--muted);line-height:1.6}
h1,h2,h3,h4{color:var(--text);font-weight:650;letter-spacing:-.01em;line-height:1.25;margin:0}
a{color:var(--primary);text-underline-offset:3px}
[hidden]{display:none!important}

/* Buttons: one height scale, never touching neighbours. */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-md);min-height:var(--h-md);padding:0 14px;border:1px solid transparent;border-radius:var(--radius);background:var(--primary);color:#fff;font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,box-shadow .15s}
button:hover,.button:hover{background:var(--primary-hover);filter:none}
.secondary,button.secondary,.button.secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.secondary:hover,button.secondary:hover,.button.secondary:hover{background:var(--surface-2);border-color:#b9c5c1}
.text-button,button.text-button{background:transparent;color:var(--muted);border-color:transparent;box-shadow:none;font-weight:500;padding:0 10px}
.text-button:hover,button.text-button:hover{background:#eef2f0;color:var(--text)}
button.sm,.button.sm{height:var(--h-sm);min-height:var(--h-sm);padding:0 10px;font-size:13px}
button:disabled,.button[aria-disabled=true]{opacity:.45;cursor:not-allowed;box-shadow:none}
button:disabled:hover{background:var(--primary)}button.secondary:disabled:hover{background:var(--surface)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.actions,.record-actions,.review-actions,.detail-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* Form controls */
label{display:grid;gap:6px;font-size:13px;font-weight:550;color:var(--text);line-height:1.4}
label small,.help-copy,.hint{font-size:12px;font-weight:400;color:var(--subtle);line-height:1.5}
input,select,textarea{width:100%;min-height:var(--h-md);padding:7px 10px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:400;transition:border-color .15s,box-shadow .15s}
textarea{min-height:84px;resize:vertical;line-height:1.55;padding:9px 10px}
input[type=file]{padding:5px;min-height:auto;font-size:13px;background:var(--surface-2)}
input[type=file]::file-selector-button{font:inherit;font-size:13px;font-weight:600;height:28px;padding:0 10px;margin-right:10px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:var(--text);cursor:pointer}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
input::placeholder,textarea::placeholder{color:#9aa6a8}
[aria-invalid=true]{border-color:var(--danger)!important;box-shadow:0 0 0 3px #a3382d22!important}
.check-label{display:flex;align-items:flex-start;gap:10px;font-weight:400;line-height:1.5}
.check-label input{width:16px;height:16px;min-height:0;margin:2px 0 0;flex-shrink:0;accent-color:var(--primary)}

/* Status chips */
.tag,.status,.pill,.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:550;line-height:1;white-space:nowrap;background:#eef2f0;color:var(--muted)}
.tag::before,.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.tag.plain::before,.tag.dark::before{display:none}
.tag.success,.pill.approved,.pill.active{background:var(--primary-soft);color:var(--primary)}
.tag.warning,.pill.draft{background:var(--warn-bg);color:var(--warn)}
.tag.danger,.pill.revoked,.pill.rejected{background:var(--danger-bg);color:var(--danger)}
.tag.dark{background:var(--brand);color:#fff}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);font-size:12px;color:var(--muted);white-space:nowrap}

/* Feedback line shared by both apps */
#feedback{font-size:13px;line-height:1.5}
#feedback:empty{display:none}
#feedback:not(:empty){margin:0 0 16px;padding:10px 14px;border-radius:var(--radius);background:var(--primary-soft);color:var(--primary);border:1px solid #cbe6d9}
#feedback.error:not(:empty){background:var(--danger-bg);color:var(--danger);border-color:#f3cbc4}

/* Internal app shell (administration and evidence) */
.app-nav{position:fixed;inset:0 auto 0 0;width:240px;display:flex;flex-direction:column;gap:4px;padding:18px 12px;background:var(--brand);color:var(--brand-text);z-index:10;overflow:auto}
.app-nav .brand{display:flex;align-items:center;gap:10px;padding:4px 10px 18px;color:#fff;text-decoration:none;font-size:17px;font-weight:700;letter-spacing:-.01em}
.app-nav .brand small{display:block;font-size:9px;font-weight:600;letter-spacing:.24em;color:var(--brand-text);margin-top:2px}
.app-nav .mark{font-size:26px;line-height:1;color:var(--accent)}
.app-nav nav{display:grid;gap:2px}
.nav-label{margin:16px 10px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#86a3a8}
.nav-item,.app-nav nav button,.app-nav nav a{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:34px;min-height:34px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--brand-text);font-size:14px;font-weight:500;text-decoration:none;box-shadow:none;text-align:left}
.app-nav nav button:hover,.app-nav nav a:hover{background:var(--brand-line);color:#fff}
.app-nav nav .selected,.app-nav nav [aria-current=page]{background:#ffffff14;color:#fff;box-shadow:inset 2px 0 var(--accent)}
.app-nav svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nav-footer{margin-top:auto;display:grid;gap:10px;padding:14px 10px 4px;border-top:1px solid var(--brand-line);font-size:12px}
.nav-footer a{color:#dbe7e8;text-decoration:none;display:flex;align-items:center;gap:8px}.nav-footer a:hover{color:#fff}
.env{display:flex;align-items:center;gap:8px;color:#86a3a8}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.app-main{margin-left:240px;min-height:100vh;display:flex;flex-direction:column}
.app-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 32px;background:#ffffffe6;backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--subtle);min-width:0}
.crumbs strong{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:10px}
.demo-info{position:relative}
.demo-info>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600}
.demo-info>summary::-webkit-details-marker{display:none}
.demo-info>div{position:absolute;right:0;top:34px;width:320px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);font-size:13px;color:var(--muted);line-height:1.6;z-index:20}
.app-content{width:100%;max-width:1280px;padding:28px 32px 48px}
.page-header,.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 20px}
.page-header h1,.collection-heading h2{font-size:22px;font-weight:650;margin:0 0 4px}
.page-header p,.collection-heading p{margin:0;font-size:14px}
.app-footer{margin-top:auto;padding:16px 32px;font-size:12px;color:var(--subtle);border-top:1px solid var(--border)}

/* Data lists: rows rendered as a table that collapses on small screens */
.data-list{display:grid;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.data-list .list-head,.data-list .record{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;column-gap:16px;padding:12px 18px}
.data-list .list-head{padding-top:10px;padding-bottom:10px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--subtle)}
.data-list .record{border-bottom:1px solid var(--border);min-height:64px}
.data-list .record:last-child{border-bottom:0}
.data-list .record:hover{background:#fafcfb}
.cell-main{display:flex;align-items:center;gap:12px;min-width:0}
.cell-main>div{min-width:0}
.cell-title{display:block;font-weight:600;color:var(--text);font-size:14px;line-height:1.35}
.cell-sub{display:block;font-size:12px;color:var(--subtle);margin-top:2px;line-height:1.45}
.cell-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cell{font-size:13px;color:var(--muted);min-width:0}
.cell-chips{display:flex;flex-wrap:wrap;gap:4px}
.data-list .record-actions{justify-content:flex-end}
.data-list .empty{grid-column:1/-1;padding:40px 18px;text-align:center;color:var(--subtle);border:0;background:transparent}

/* Dialog base */
dialog{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--text);padding:0;background:var(--surface)}
dialog::backdrop{background:#0b262e66;backdrop-filter:blur(3px)}
.dialog-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}

@media (max-width:860px){
  .app-nav{position:sticky;top:0;inset:auto;width:100%;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;overflow:visible}
  .app-nav .brand{padding:0 6px 0 2px;font-size:15px}.app-nav .brand small{display:none}.app-nav .mark{font-size:22px}
  .app-nav nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1}
  .app-nav nav::-webkit-scrollbar{display:none}
  .nav-label,.nav-footer{display:none}
  .app-nav nav button,.app-nav nav a{width:auto;white-space:nowrap;height:32px;min-height:32px;font-size:13px}
  .app-nav nav .selected{box-shadow:inset 0 -2px var(--accent)}
  .app-main{margin-left:0}
  .app-topbar{top:48px;height:48px;padding:0 16px}
  .app-content{padding:20px 16px 40px}
  .page-header,.collection-heading{flex-direction:column;align-items:stretch}
  .collection-heading>button,.page-header>button{width:100%}
  .data-list .list-head{display:none}
  .data-list{display:block}
  .data-list .record{grid-template-columns:1fr;gap:8px;padding:14px 16px}
  .data-list .record-actions{justify-content:flex-start}
  .demo-info>div{width:min(320px,calc(100vw - 32px))}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
button.danger,.button.danger{background:var(--danger);color:#fff}
button.danger:hover,.button.danger:hover{background:#8a2e25}
button.icon-button{width:var(--h-md);padding:0;font-size:16px;color:var(--muted)}
/* Row actions: visible primary actions + "⋯" menu for secondary/destructive ones */
.row-menu{position:relative}
.row-menu>summary{list-style:none;display:inline-grid;place-items:center;width:var(--h-sm);height:var(--h-sm);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--muted);font-size:16px;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu>summary:hover,.row-menu[open]>summary{background:var(--surface-2);color:var(--text)}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;padding:6px;display:grid;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
button.menu-item{justify-content:flex-start;width:100%;height:32px;min-height:32px;padding:0 10px;background:transparent;color:var(--text);border:0;box-shadow:none;font-weight:500;font-size:13px}
button.menu-item:hover{background:var(--surface-2)}
button.menu-item.destructive{color:var(--danger)}
button.menu-item.destructive:hover{background:var(--danger-bg)}
.row-confirm{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:var(--radius);background:var(--danger-bg)}
.row-confirm p{margin:0;font-size:13px;color:var(--danger)}
.data-list .draft-row{background:#fffdf6}
.data-list .muted-row .cell-title{color:var(--subtle)}
.tag.plain{background:#eef0f0;color:var(--subtle)}
@media (max-width:860px){.menu-list{right:auto;left:0}}
.row-panel{align-items:flex-end}
.row-panel>p{flex:1 1 100%}
.row-panel>label{flex:1 1 220px;font-size:12px}
.row-panel.neutral{background:var(--info-bg)}
.row-panel.neutral>p{color:var(--info)}
button.history-toggle{display:inline-flex;margin-top:4px;height:24px;min-height:24px;padding:0 6px;margin-left:-6px;color:var(--primary);font-size:12px;font-weight:600}
.data-list .history-row{background:var(--surface-2)}
.data-list .history-row .cell-title{color:var(--muted);font-weight:500}
.data-list .cell:has(>.tag+.tag){display:flex;flex-direction:column;align-items:flex-start;gap:4px}
/* Signed-in user in the top bar (web/session.js) */
.session-user{display:flex;align-items:center;gap:10px;font-size:12.5px}
.app-topbar .session-user{color:var(--muted)}
.app-topbar .session-user .text-button{color:var(--text)}
.access-dialog{width:min(480px,calc(100vw - 32px));padding:20px 24px}
.access-dialog .dialog-top{margin-bottom:12px}
.access-body{display:grid;gap:12px}
.access-body .actions{display:flex;flex-wrap:wrap;gap:8px}
.access-link{display:flex;gap:8px;align-items:center}
.access-link input{flex:1;font-size:12px}
.session-user>span{min-width:0;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
