/* Denty Stock by SocrateX — the whole UI in one stylesheet.
   Tokens from the SocrateX Brand Book v1 / docs/design/tokens.css. Rules (docs/design/DESIGN_SYSTEM.md):
   one typeface, sentence case, navy shell + white content on Cloud, at most one primary button per screen,
   status = icon + text, Teal focus ring. Colour values live only in :root; components use the tokens. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin.a6b899943e31.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-ext.a3a0917757d7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* core */
  --c-navy: #172647; --c-navy-deep: #0F1A33; --c-sea-green: #A6DFD6; --c-deep-sea: #2F8F82;
  --c-cloud: #F5F7F9; --c-white: #FFFFFF;
  /* signal, sparingly */
  --c-aqua: #2BE6D3; --c-aqua-hover: #5FF0E2; --c-teal: #14B7C0; --c-lagoon: #1689AE;
  /* neutrals on light */
  --c-ink: #172647; --c-ink-2: #4A5775; --c-ink-3: #8A94AD; --c-line: #DCE2EA;
  /* on navy */
  --c-on-navy: #FFFFFF; --c-on-navy-2: rgba(255, 255, 255, .72); --c-on-navy-3: rgba(255, 255, 255, .48);
  --c-navy-card: rgba(255, 255, 255, .06); --c-navy-line: rgba(255, 255, 255, .10); --c-navy-active: rgba(255, 255, 255, .10);
  /* semantic [extension] */
  --c-success: #2F8F82; --c-warning: #D98E1F; --c-error: #D64545; --c-info: #1689AE;
  --c-success-bg: color-mix(in srgb, var(--c-success) 12%, white);
  --c-warning-bg: color-mix(in srgb, var(--c-warning) 12%, white);
  --c-error-bg: color-mix(in srgb, var(--c-error) 12%, white);
  --c-info-bg: color-mix(in srgb, var(--c-info) 12%, white);
  --c-error-row: color-mix(in srgb, var(--c-error) 5%, white);

  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-chip: 8px; --r-nav: 10px; --r-button: 14px; --r-ai: 16px; --r-card: 22px; --r-pill: 999px;
  --h-input: 48px; --h-input-compact: 40px; --h-button: 44px; --w-rail: 240px; --content-max: 1280px;
  --shadow-1: 0 1px 2px rgba(23, 38, 71, .06);
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 180ms;

  /* line icons (Lucide shapes, 1.75 stroke) for chips and notices: status is never colour alone */
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

/* ---- base ------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font: 400 16px/24px var(--font); color: var(--c-ink); background: var(--c-cloud); }
h1 { font: 700 32px/35px var(--font); margin: 0 0 var(--s-4); }
h2 { font: 700 20px/28px var(--font); margin: var(--s-6) 0 var(--s-3); }      /* [extension] section title in the app */
h3 { font: 700 17px/24px var(--font); margin: var(--s-5) 0 var(--s-2); }
p { margin: 0 0 var(--s-3); max-width: 70ch; }
a { color: var(--c-lagoon); text-underline-offset: 3px; }
a:hover { color: var(--c-navy); }
strong { font-weight: 700; }
code { font: 500 13px/20px var(--font-mono); background: var(--c-cloud); padding: 2px 6px; border-radius: 6px; }
ul, ol { padding-left: 1.25rem; margin: 0 0 var(--s-3); }
li { margin-bottom: var(--s-1); }
.muted { color: var(--c-ink-2); }
.caption { font: 700 12px/18px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-2); }
.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 2px; border-radius: var(--r-chip); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation: none !important; } }

/* ---- app shell: navy rail, Cloud content ------------------------------------------------------------------ */
.shell { display: grid; grid-template-columns: var(--w-rail) minmax(0, 1fr); min-height: 100vh; }  /* minmax: a wide table must not widen the page */
.rail { background: var(--c-navy); color: var(--c-on-navy); display: flex; flex-direction: column; gap: var(--s-5);
        padding: var(--s-5) var(--s-3); position: sticky; top: 0; height: 100vh; }
.brand { display: grid; gap: var(--s-2); justify-items: start; padding: 0 var(--s-3); color: var(--c-on-navy); text-decoration: none; }
.brand img { display: block; width: 168px; height: auto; }  /* the official lockup: never recolour or redraw it */
.brand-product { font: 600 12px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--c-aqua); }
.rail nav { display: grid; gap: 2px; }
.rail nav a { display: flex; align-items: center; gap: var(--s-3); height: 40px; padding: 0 var(--s-3); border-radius: var(--r-nav);
              color: var(--c-on-navy-2); text-decoration: none; font: 600 14px/21px var(--font); transition: background var(--dur) var(--ease); }
.rail nav a:hover { background: var(--c-navy-card); color: var(--c-on-navy); }
.rail nav a[aria-current="page"] { background: var(--c-navy-active); color: var(--c-on-navy); }
.rail nav a[aria-current="page"] svg { color: var(--c-aqua); }
.rail svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rail-foot { margin-top: auto; display: grid; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--c-navy-line); }
.rail-foot .practice { font: 600 14px/21px var(--font); color: var(--c-on-navy); }
.rail-foot .who { font: 400 12px/18px var(--font); color: var(--c-on-navy-3); overflow-wrap: anywhere; }
.rail-foot button { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); height: auto; padding: 0;
                    background: none; border: 0; color: var(--c-on-navy-2); font: 600 14px/21px var(--font); }
.rail-foot button:hover { color: var(--c-aqua); background: none; }
.rail :focus-visible { outline-color: var(--c-aqua); }

.content { display: flex; flex-direction: column; min-width: 0; }
main { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s-6); }
main > .page { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--s-6); box-shadow: var(--shadow-1); }
main > .page > :first-child { margin-top: 0; }
.content > footer { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 0 var(--s-6) var(--s-6); font: 400 12px/18px var(--font); color: var(--c-ink-2); }

/* signed out: a centred card on navy, no rail navigation */
.shell.public { grid-template-columns: minmax(0, 1fr); background: var(--c-navy); }
.shell.public .rail { position: static; height: auto; background: none; padding: var(--s-6) var(--s-6) 0; }
.shell.public main { max-width: 560px; padding-top: var(--s-5); }
.shell.public .content > footer { max-width: 560px; color: var(--c-on-navy-3); }

@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .rail nav { display: flex; overflow-x: auto; gap: var(--s-1); order: 3; width: 100%; padding-bottom: var(--s-1); }
  .rail nav a { flex: none; }
  .rail-foot { margin: 0 0 0 auto; border: 0; padding: 0; grid-auto-flow: column; align-items: center; }
  .rail-foot .who { display: none; }
  main { padding: var(--s-4); }
  main > .page { padding: var(--s-4); border-radius: var(--r-ai); }
  .content > footer { padding: 0 var(--s-4) var(--s-4); }
}

/* ---- buttons: secondary by default, one .primary per screen ------------------------------------------------- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--h-button); padding: 0 var(--s-4);
         font: 600 14px/21px var(--font); color: var(--c-navy); background: var(--c-white); border: 1px solid var(--c-navy); border-radius: var(--r-button);
         cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
button:hover, .button:hover { background: var(--c-cloud); color: var(--c-navy); }
button.primary, .button.primary { background: var(--c-navy); color: var(--c-white); }
button.primary:hover, .button.primary:hover { background: var(--c-navy-deep); }
button.danger { color: var(--c-error); border-color: var(--c-error); }
button.danger:hover { background: var(--c-error-bg); }
button.link { min-height: auto; padding: 0; background: none; border: 0; color: var(--c-lagoon); }
button.link:hover { background: none; color: var(--c-navy); text-decoration: underline; }
button:disabled, button:disabled:hover { background: var(--c-line); border-color: var(--c-line); color: var(--c-ink-3); cursor: not-allowed; }
button.secondary { /* the default; kept for templates that say so */ }

/* ---- forms ------------------------------------------------------------------------------------------------- */
label { font: 600 14px/21px var(--font); }
input, select, textarea { font: 400 16px/24px var(--font); color: var(--c-ink); background: var(--c-white); border: 1px solid var(--c-line);
       border-radius: var(--r-button); padding: 0 var(--s-3); min-height: var(--h-input); width: 100%; max-width: 100%; }
textarea { padding: var(--s-3); }
input::placeholder, textarea::placeholder { color: var(--c-ink-3); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-teal); outline-offset: 0; border-color: var(--c-teal); }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--c-teal); }
input[type="file"] { padding: var(--s-2); }
input[type="file"]::file-selector-button { font: 600 14px/21px var(--font); color: var(--c-navy); background: var(--c-white); border: 1px solid var(--c-navy);
  border-radius: var(--r-chip); padding: var(--s-1) var(--s-3); margin-right: var(--s-3); cursor: pointer; }
.stack { display: grid; gap: var(--s-4); max-width: 30rem; margin-bottom: var(--s-4); }
.stack label, .stack div { display: grid; gap: var(--s-2); }
.stack > button { justify-self: start; }
.stack.wide { max-width: none; }
.stack.compact { gap: var(--s-3); margin: var(--s-3) 0 var(--s-4); max-width: 20rem; }
form.inline { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
form.inline input { width: auto; min-height: var(--h-input-compact); }
form.inline button { min-height: var(--h-input-compact); }
label.check { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 400; }
.stack label.check { display: flex; }
.helptext, .stack .helptext { font: 400 14px/20px var(--font); color: var(--c-ink-2); }
.errorlist { color: var(--c-error); margin: 0; padding-left: 0; list-style: none; font: 400 14px/20px var(--font); }
fieldset { border: 1px solid var(--c-line); border-radius: var(--r-button); display: grid; gap: var(--s-3); padding: var(--s-4); }
details { margin-top: var(--s-2); }
summary { cursor: pointer; color: var(--c-lagoon); font: 600 14px/21px var(--font); }
summary:hover { color: var(--c-navy); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---- notices, messages, chips: icon + text, 12% tint ------------------------------------------------------- */
.notice, .message { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4);
                    border-radius: var(--r-button); margin: 0 0 var(--s-4); max-width: none; background: var(--c-info-bg); color: var(--c-ink); }
.notice::before, .message::before { content: ""; width: 20px; height: 20px; margin-top: 2px; background: var(--c-info); -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat; grid-row: 1 / span 9; }
.notice > *, .message > * { grid-column: 2; }
.notice p { margin: 0 0 var(--s-1); }
.notice.success, .message.success { background: var(--c-success-bg); }
.notice.success::before, .message.success::before { background: var(--c-success); -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
.notice.error, .message.error { background: var(--c-error-bg); }
.notice.error::before, .message.error::before { background: var(--c-error); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.notice.warning, .message.warning { background: var(--c-warning-bg); }
.notice.warning::before, .message.warning::before { background: var(--c-warning); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }

.tag { display: inline-flex; align-items: center; gap: var(--s-1); height: 24px; padding: 0 var(--s-2); border-radius: var(--r-chip); vertical-align: middle;
       font: 600 12px/18px var(--font); white-space: nowrap; background: var(--c-cloud); color: var(--c-ink-2); }
.tag::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-clock) center / contain no-repeat; mask: var(--i-clock) center / contain no-repeat; }
.tag.danger { background: var(--c-error-bg); color: var(--c-error); }
.tag.danger::before { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.tag.ok { background: var(--c-success-bg); color: var(--c-success); }
.tag.ok::before { -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }

/* ---- tables [extension] ----------------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-button); }
table { width: 100%; border-collapse: collapse; background: var(--c-white); font: 400 14px/20px var(--font); font-variant-numeric: tabular-nums; }
.table-scroll > table { border: 0; }
th.num { text-align: right; }
th { text-align: left; font: 700 12px/18px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink-2);
     background: var(--c-cloud); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--c-cloud); }
tr.late td { background: var(--c-error-row); }

/* ---- stat tiles [extension: DESIGN_SYSTEM StatTile] ------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-5); }
.tile { border: 1px solid var(--c-line); border-radius: var(--r-ai); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); }
.tile .value { font: 700 32px/35px var(--font); font-variant-numeric: tabular-nums; }
.tile .sub { font: 400 14px/20px var(--font); color: var(--c-ink-2); }
.tile.alert { border-color: color-mix(in srgb, var(--c-error) 35%, white); }
.tile.alert .value { color: var(--c-error); }
.page-head { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.page-head h1 { margin: 0; }

/* ---- the rest --------------------------------------------------------------------------------------------- */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-4); }
.facts dt { color: var(--c-ink-2); font: 600 14px/24px var(--font); }
.facts dd { margin: 0; }
@media (max-width: 30rem) { .facts { grid-template-columns: 1fr; gap: 0; } .facts dd { margin-bottom: var(--s-2); } }
.qr svg { width: 12rem; height: 12rem; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-button); padding: var(--s-2); }
.dropzone { display: grid; gap: var(--s-1); place-items: center; padding: var(--s-7) var(--s-4); border: 2px dashed var(--c-line); border-radius: var(--r-card);
            background: var(--c-cloud); cursor: pointer; text-align: center; transition: border-color var(--dur) var(--ease); }
.dropzone.over, .dropzone:hover { border-color: var(--c-teal); background: var(--c-white); }
.suggestion { background: var(--c-navy); color: var(--c-on-navy); border-radius: var(--r-ai); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5); }
.suggestion .caption { color: var(--c-sea-green); display: block; margin-bottom: var(--s-1); }
.suggestion strong { color: var(--c-on-navy); }
.suggestion a { color: var(--c-aqua); }