/* Dine Check design system — core (shared by dinecheck.in, the Audit Field Kit and the client portal).
   Security print: navy intaglio ink, emerald for verified, the brand teal for actions. Archivo is
   self-hosted, so no page asks a third party for fonts. Tokens follow DESIGN.md; each app adds its
   own layer below the core and keeps its own colourway (public blue, kit violet, portal teal).
   Built by design/build.py — edit the sources there, not the copies in each app. */

@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-normal.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+20B9,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-ext-wdth-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ds-paper:#EDF3F1; --ds-paper-2:#E3ECE9; --ds-sheet:#F8FBFA; --ds-field:#FFFFFF;
  --ds-ink:#0E1A2B; --ds-ink-2:#33445A; --ds-ink-3:#4D5D71;
  --ds-rule:rgba(14,26,43,.14); --ds-rule-2:rgba(14,26,43,.08); --ds-rule-3:rgba(14,26,43,.24);
  --ds-brand:#00635C; --ds-brand-ink:#004A44; --ds-brand-tint:#D3EAE6; --ds-on-brand:#FFFFFF;
  --ds-em:#03704F; --ds-em-tint:#D7F2E6;
  --ds-warn:#8A5300; --ds-warn-tint:#FBEBC8;
  --ds-orange:#A3470C; --ds-orange-tint:#FBE3D2;
  --ds-bad:#B42318; --ds-bad-tint:#FDE2DF; --ds-ko:#7A1610;
  --ds-navy:#0B1527; --ds-navy-2:#111E35; --ds-navy-ink:#E7EEF7; --ds-navy-ink-2:#B6C4D6; --ds-navy-rule:rgba(231,238,247,.16);
  --ds-public:#1E4FD8; --ds-kit:#6A3BD2; --ds-portal:#00635C; --ds-kitchen:#B9480A;
  --ds-shadow-1:0 1px 2px rgba(14,26,43,.06),0 1px 1px rgba(14,26,43,.03);
  --ds-shadow-2:0 1px 2px rgba(14,26,43,.06),0 12px 28px -18px rgba(14,26,43,.35);
  --ds-shadow-3:0 2px 4px rgba(14,26,43,.08),0 30px 60px -30px rgba(14,26,43,.45);
  --ds-sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ds-mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --ds-ease:cubic-bezier(.16,1,.3,1); --ds-ease-in:cubic-bezier(.4,0,1,1);
  --ds-r-control:10px; --ds-r-card:14px; --ds-r-sheet:20px;
  --ds-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cg fill='none' stroke='%23000' stroke-width='.75'%3E%3Cpath d='M0 14C15 4 45 4 60 14S105 24 120 14'/%3E%3Cpath d='M0 14C15 24 45 24 60 14S105 4 120 14'/%3E%3Cpath d='M0 7C15 2 45 2 60 7S105 12 120 7' stroke-width='.45'/%3E%3Cpath d='M0 21C15 26 45 26 60 21S105 16 120 21' stroke-width='.45'/%3E%3C/g%3E%3C/svg%3E");
  --ds-guil-a:.07;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ds-paper:#08101D; --ds-paper-2:#0C1627; --ds-sheet:#0E1A2E; --ds-field:#0A1424;
  --ds-ink:#E6EDF6; --ds-ink-2:#B3C1D3; --ds-ink-3:#95A6BB;
  --ds-rule:rgba(230,237,246,.16); --ds-rule-2:rgba(230,237,246,.08); --ds-rule-3:rgba(230,237,246,.26);
  --ds-brand:#43B9AC; --ds-brand-ink:#8ADBD1; --ds-brand-tint:#0F2F2D; --ds-on-brand:#04201D;
  --ds-em:#3FD9A3; --ds-em-tint:#0D2E23;
  --ds-warn:#F3B748; --ds-warn-tint:#2E230B;
  --ds-orange:#FF9B5E; --ds-orange-tint:#33200F;
  --ds-bad:#FF8A80; --ds-bad-tint:#3A1715; --ds-ko:#FFB3AB;
  --ds-navy:#050C17; --ds-navy-2:#0A1426;
  --ds-public:#7EA6FF; --ds-kit:#B39BFF; --ds-portal:#43B9AC; --ds-kitchen:#FF9B5E;
  --ds-shadow-1:0 1px 2px rgba(0,0,0,.5);
  --ds-shadow-2:0 1px 2px rgba(0,0,0,.5),0 18px 36px -22px rgba(0,0,0,.85);
  --ds-shadow-3:0 2px 6px rgba(0,0,0,.55),0 36px 70px -34px rgba(0,0,0,.95);
  --ds-guil-a:.09;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ds-paper:#08101D; --ds-paper-2:#0C1627; --ds-sheet:#0E1A2E; --ds-field:#0A1424;
  --ds-ink:#E6EDF6; --ds-ink-2:#B3C1D3; --ds-ink-3:#95A6BB;
  --ds-rule:rgba(230,237,246,.16); --ds-rule-2:rgba(230,237,246,.08); --ds-rule-3:rgba(230,237,246,.26);
  --ds-brand:#43B9AC; --ds-brand-ink:#8ADBD1; --ds-brand-tint:#0F2F2D; --ds-on-brand:#04201D;
  --ds-em:#3FD9A3; --ds-em-tint:#0D2E23;
  --ds-warn:#F3B748; --ds-warn-tint:#2E230B;
  --ds-orange:#FF9B5E; --ds-orange-tint:#33200F;
  --ds-bad:#FF8A80; --ds-bad-tint:#3A1715; --ds-ko:#FFB3AB;
  --ds-navy:#050C17; --ds-navy-2:#0A1426;
  --ds-public:#7EA6FF; --ds-kit:#B39BFF; --ds-portal:#43B9AC; --ds-kitchen:#FF9B5E;
  --ds-shadow-1:0 1px 2px rgba(0,0,0,.5);
  --ds-shadow-2:0 1px 2px rgba(0,0,0,.5),0 18px 36px -22px rgba(0,0,0,.85);
  --ds-shadow-3:0 2px 6px rgba(0,0,0,.55),0 36px 70px -34px rgba(0,0,0,.95);
  --ds-guil-a:.09;
  color-scheme:dark;
}

/* ------------------------------------------------------------------ base */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--ds-sans);font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}
::selection{background:var(--ds-brand);color:var(--ds-on-brand)}
:focus-visible{outline:2.5px solid var(--ds-brand);outline-offset:2px}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
.ds-num,.num{font-variant-numeric:tabular-nums lining-nums}
html{scrollbar-color:color-mix(in srgb,var(--ds-ink-3) 55%,transparent) transparent}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* a guilloche ground for any element: class="ds-guil" */
.ds-guil{position:relative;isolation:isolate}
.ds-guil::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--ds-g,var(--ds-brand));opacity:var(--ds-guil-a);
  -webkit-mask:var(--ds-wave) 0 0/120px 28px repeat;mask:var(--ds-wave) 0 0/120px 28px repeat}
.ds-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* skeleton shimmer for loading states */
.ds-skel{background:linear-gradient(90deg,var(--ds-rule-2) 25%,var(--ds-rule) 37%,var(--ds-rule-2) 63%);background-size:400% 100%;
  animation:ds-shimmer 1.3s ease infinite;border-radius:8px;color:transparent!important}
@keyframes ds-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes ds-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ the client portal
   Restaurant owners, managers and staff. Dark unless they choose light (theme.js, v60), so the
   core's tokens follow data-theme here. Maps the portal's token names onto the core and refines
   its components; selectors match the existing markup. */
:root:not(#ds){
  --bg:var(--ds-paper); --surface:var(--ds-sheet); --surface2:color-mix(in srgb,var(--ds-paper-2) 70%,var(--ds-sheet));
  --line:var(--ds-rule-3); --line-soft:var(--ds-rule);
  --ink:var(--ds-ink); --ink2:var(--ds-ink-2); --ink3:var(--ds-ink-3);
  --accent:var(--ds-brand); --accent-on:var(--ds-on-brand); --accent-soft:var(--ds-brand-tint);
  --ok:var(--ds-em); --ok-soft:var(--ds-em-tint); --minor:var(--ds-warn); --minor-soft:var(--ds-warn-tint);
  --partial:var(--ds-orange); --bad:var(--ds-bad); --bad-soft:var(--ds-bad-tint);
}
html,body{font:15.5px/1.55 var(--ds-sans);letter-spacing:.002em}
.mono{font-family:var(--ds-mono)}
h1{font-size:clamp(24px,3.6vw,32px);font-weight:790;font-stretch:114%;letter-spacing:-.02em;line-height:1.08}
h2{font-size:19px;font-weight:740;font-stretch:108%;letter-spacing:-.01em}
h3{font-weight:720;font-stretch:106%}
.tiny{font-weight:650;font-stretch:112%;letter-spacing:.1em;font-size:11px}
.grade,.dial span{font-family:var(--ds-sans);font-weight:800;font-stretch:116%;font-variant-numeric:tabular-nums}

/* ---- the bar: the sheet, with the portal's teal colourway as a rule underneath */
.bar{background:color-mix(in srgb,var(--ds-sheet) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:0;box-shadow:0 1px 0 var(--ds-rule),0 12px 28px -24px rgba(14,26,43,.6)}
.bar::after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--ds-portal),color-mix(in srgb,var(--ds-portal) 50%,var(--ds-em)))}
.bar .in{max-width:1040px;padding:11px 18px}
main,.legalfoot{max-width:1040px}
main{padding-inline:18px}
.brand{font-weight:760;font-stretch:110%;font-size:15.5px;letter-spacing:-.005em}
.brand small{font-weight:500;font-stretch:100%;color:var(--ds-ink-3);padding-left:9px;margin-left:3px;border-left:1px solid var(--ds-rule-3)}
.brand .blogo{border-radius:7px}
.bellbtn{display:grid;place-items:center;width:40px;height:40px;background:transparent;border:1px solid var(--ds-rule-3);color:var(--ds-ink-2);transition:background .15s,color .15s}
.bellbtn:hover{background:var(--ds-rule-2);color:var(--ds-ink)}
.bellbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bellcount{box-shadow:0 0 0 2px var(--ds-sheet)}
.whobtn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--ds-rule-3);padding:6px 12px 6px 6px;min-height:40px;font-weight:650}
.whobtn:hover{background:var(--ds-rule-2)}
.whobtn::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;margin-left:2px}
.whobtn .ini{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ds-brand-tint);color:var(--ds-brand-ink);font-size:12px;font-weight:760}
.menu,.bellpanel{border-color:var(--ds-rule-3);border-radius:14px;box-shadow:var(--ds-shadow-3);animation:ds-pop .18s var(--ds-ease)}
@keyframes ds-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu button{display:flex;align-items:center;gap:10px}
.menu button svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ds-ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu button#btnOut{border-top:1px solid var(--ds-rule);border-radius:0 0 8px 8px;margin-top:4px;color:var(--ds-bad)}
.menu button#btnOut svg{stroke:var(--ds-bad)}

/* ---- surfaces */
.card{border-radius:var(--ds-r-card);border-color:var(--ds-rule);box-shadow:var(--ds-shadow-1);padding:18px}
.gate{max-width:440px;margin:48px auto}
.gate .card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--ds-r-sheet);box-shadow:var(--ds-shadow-2);padding:26px}
.gate .card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ds-brand);opacity:var(--ds-guil-a);
  -webkit-mask:var(--ds-wave) 0 0/96px 22px repeat;mask:var(--ds-wave) 0 0/96px 22px repeat}
.note,.next,div.warn{border-radius:12px;border-left-width:4px}
details.finding{border-radius:12px;border-color:var(--ds-rule);background:var(--ds-sheet);box-shadow:var(--ds-shadow-1)}
details.finding[open]{border-color:var(--ds-rule-3)}

/* ---- controls */
.btn{min-height:40px;border-radius:var(--ds-r-control);border-color:var(--ds-rule-3);font-weight:650;font-stretch:104%;
  transition:background .18s var(--ds-ease),border-color .18s,transform .12s var(--ds-ease),box-shadow .18s}
.btn:hover:not(:disabled){border-color:var(--ds-ink-3)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{border-color:color-mix(in srgb,var(--ds-brand) 72%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px -12px color-mix(in srgb,var(--ds-brand) 85%,#000)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--ds-brand) 86%,#000)}
:root[data-theme="dark"] .btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--ds-brand) 86%,#fff)}
.btn.ghost:hover:not(:disabled){background:var(--ds-rule-2);border-color:transparent}
.btn.small{min-height:34px}
.btn.big{min-height:48px}
@media (pointer:coarse){.btn{min-height:44px}.btn.small{min-height:38px}}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=tel],input[type=month],textarea,select{
  background:var(--ds-field);border-color:var(--ds-rule-3);border-radius:var(--ds-r-control);min-height:44px;
  transition:border-color .15s var(--ds-ease),box-shadow .15s var(--ds-ease)}
input:hover,textarea:hover,select:hover{border-color:var(--ds-ink-3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ds-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--ds-brand) 26%,transparent)}
.pill{font-weight:650;letter-spacing:.01em}
.chip{border-color:var(--ds-rule-3);font-weight:550}
.seg,.themeseg{border-color:var(--ds-rule-3);border-radius:12px}
.linkbtn{color:var(--ds-brand-ink)}
:root[data-theme="dark"] .linkbtn{color:var(--ds-brand)}

/* ---- home: health first, then the tabs */
.homehead h1{font-size:clamp(26px,4vw,36px)}
.tabs{gap:10px}
.tab{border-radius:14px;border-color:var(--ds-rule);background:var(--ds-sheet);box-shadow:var(--ds-shadow-1);padding:12px 14px;
  transition:transform .18s var(--ds-ease),box-shadow .18s var(--ds-ease),border-color .18s}
.tab:hover{transform:translateY(-1px);box-shadow:var(--ds-shadow-2);border-color:var(--ds-rule-3)}
.tab b{font-weight:720;font-stretch:104%;font-size:14.5px}
.tab[aria-selected=true]{background:var(--ds-sheet);border-color:var(--ds-brand);box-shadow:inset 0 -3px 0 var(--ds-brand),var(--ds-shadow-2)}
.tierchip{border-radius:14px;border-color:var(--ds-rule);box-shadow:var(--ds-shadow-1)}
.stc{border-radius:12px;border-color:var(--ds-rule);background:var(--ds-sheet)}
.stc b{font-weight:780;font-stretch:108%;font-variant-numeric:tabular-nums}
.pretype,.addonchip{border-radius:12px}
.pretype{transition:transform .18s var(--ds-ease),box-shadow .18s,border-color .18s}
.pretype:hover{transform:translateY(-1px);box-shadow:var(--ds-shadow-2)}
.tierdlg{border-radius:18px;box-shadow:var(--ds-shadow-3)}
.tierdlg::backdrop{background:rgba(5,12,23,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pbar{border-color:var(--ds-rule)}
.avatar{font-stretch:110%}
.legalfoot{color:var(--ds-ink-3)}
.brand small{white-space:nowrap}
@media (max-width:440px){.brand small{display:none}}
/* the two-factor nudge: a drawn shield instead of the padlock emoji */
.nudge .nico{font-size:0;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--ds-brand-tint)}
.nudge .nico::before{content:"";width:22px;height:22px;background:var(--ds-brand-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.4-4.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6l7-3z'/%3E%3Cpath d='M8.8 12.2l2.2 2.2 4.4-4.6'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-theme="dark"] .nudge .nico::before{background:var(--ds-brand)}