:root{
  --ground:#0E1113;
  --surface:#171B1E;
  --raised:#1F252A;
  --line:#2A3237;
  --ink:#ECF1F3;
  --muted:#8D9AA1;
  --faint:#66737A;
  --accent:#3DD68C;
  --accent-ink:#06120C;
  /* Servatto's own colour. The green above is the kitchen's "go"; this is the
     brand, and it is the same brass the website and the brand kit use. */
  --brand:#D8A657;
  --amber:#E0A33E;
  --red:#E2685F;
  --radius:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground);color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:26px}
h2{font-size:19px}
h3{font-size:15px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.shell{max-width:840px;margin:0 auto;padding-inline:20px;padding-block:28px 80px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.hide{display:none!important}

/* ---------- brand ---------- */
.brandbar{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px}
.mark{width:30px;height:30px;flex:0 0 auto;color:var(--brand);display:block}
.brandname{font-weight:650;letter-spacing:-.01em}
.who{margin-left:auto;color:var(--muted);font-size:13px;display:flex;gap:10px;align-items:center}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.card + .card{margin-top:12px}
.card h2 + p{color:var(--muted);margin:6px 0 0}

/* ---------- forms ---------- */
label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
input[type=text],input[type=email],input[type=password],input[type=number],select{
  width:100%;background:var(--ground);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;outline:none;
}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,214,140,.16)}
.field{margin-bottom:14px}
.fields2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.fields2{grid-template-columns:1fr}}

button{
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;
  padding:10px 16px;font-weight:650;cursor:pointer;
}
button:hover{filter:brightness(1.07)}
button:disabled{opacity:.55;cursor:default;filter:none}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.ghost:hover{border-color:var(--muted);filter:none}
button.danger{background:transparent;color:var(--red);border:1px solid var(--line)}
button.link{background:none;color:var(--accent);padding:0;font-weight:500;text-decoration:underline}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;background:var(--ground);border:1px solid var(--line);border-radius:9px;padding:4px;margin-bottom:18px}
.tabs button{flex:1;background:transparent;color:var(--muted);font-weight:600;padding:8px}
.tabs button[aria-selected=true]{background:var(--raised);color:var(--ink)}

/* ---------- banners ---------- */
.banner{border-radius:var(--radius);padding:12px 16px;font-size:14px;margin-bottom:16px;border:1px solid}
.banner.info{border-color:var(--line);background:var(--surface);color:var(--muted)}
.banner.warn{border-color:var(--amber);background:rgba(224,163,62,.1);color:#F2D9AC}
.banner.bad{border-color:var(--red);background:rgba(226,104,95,.1);color:#F3C3BF}
.banner b{color:var(--ink)}
.msg{font-size:14px;margin-top:10px;min-height:1.2em}
.msg.bad{color:var(--red)}
.msg.good{color:var(--accent)}

/* ---------- venues ---------- */
.venue{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--surface)}
.venue + .venue{margin-top:10px}
.venue .name{font-weight:650}
.venue .meta{color:var(--faint);font-size:13px;margin-top:2px}
.prods{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.prod{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;color:var(--muted);
}
.prod.on{border-color:var(--accent);color:var(--ink)}
.prod input{width:52px;padding:3px 6px;text-align:center;border-radius:6px}
.price{margin-left:auto;text-align:right}
.price .amt{font-weight:650}
.price .per{color:var(--faint);font-size:12px}

.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted)}

/* Connecting an order source — the step that actually makes a board useful. */
.sources{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sources h4{margin:0 0 4px;font-size:13px;font-weight:650;color:var(--ink)}
.sources .why{color:var(--faint);font-size:13px;margin:0 0 12px}
.src{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--ground)}
.src + .src{margin-top:8px}
.src .grow{min-width:190px}
.src .srcname{font-weight:600;font-size:14px}
.src .blurb{color:var(--faint);font-size:12.5px;margin-top:2px;max-width:34rem}
.src .act{display:flex;gap:8px;align-items:center;flex-shrink:0}
.src button{padding:8px 14px;font-size:13px}
.dot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.dot.live{color:var(--accent)}   .dot.live::before{background:var(--accent)}
.dot.warn{color:var(--amber)}    .dot.warn::before{background:var(--amber)}
.dot.bad{color:var(--red)}       .dot.bad::before{background:var(--red)}
.srcform{width:100%;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:none}
.srcform.open{display:block}
.srcform .row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.srcform .row > label{flex:1;min-width:170px;font-size:12.5px;color:var(--muted)}
.srcform .row input{margin-top:4px}
.srcform .note{color:var(--faint);font-size:12px;margin-top:8px}
.openboard{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.openboard a{display:inline-block;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--accent);color:var(--accent-ink);text-decoration:none}
.openboard a.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.foot{margin-top:28px;color:var(--faint);font-size:13px;text-align:center}


/* Workspace foundation: shared tokens also style the existing device panels. */
:root{--ground:#101516;--surface:#192021;--raised:#232d2d;--line:#344141;--ink:#f1f4f0;--muted:#b0bcb8;--faint:#9eaea8;--accent:#D8A657;--accent-ink:#211a0e;--radius:14px}
body{font-size:14px;background:var(--ground)}
button,input,select{min-height:42px}
button{transition:background .15s,border-color .15s}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px #d8a65726}
input[type=checkbox]{min-height:0}
input[type=search]{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--ink);font:inherit}
input[readonly]{background:var(--raised);color:var(--muted)}
label{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
label input,label select{margin-top:7px}
.hide{display:none!important}
.skip-link{position:fixed;top:-70px;left:16px;z-index:20;background:var(--brand);color:var(--accent-ink);padding:12px;border-radius:8px}.skip-link:focus{top:12px}
.shell{max-width:1180px;padding:28px 32px 60px}
.brandbar{border:0;padding-bottom:0;margin-bottom:44px}
.brandname{font-size:22px}.mark{width:37px;height:37px}
.signed-in .shell{margin-left:244px;max-width:none;padding:40px 44px 40px}
.signed-in .brandbar{position:fixed;left:28px;top:35px;width:190px;z-index:3;display:flex;flex-wrap:wrap;gap:10px}
.signed-in .brandbar #tagline{display:none}
.signed-in .who{position:fixed;bottom:24px;left:26px;width:192px;display:flex;flex-wrap:wrap;margin:0;border-top:1px solid var(--line);padding-top:20px;gap:12px}
.signed-in #whoText{display:block;font-size:12px;overflow-wrap:anywhere;width:100%}
.signed-in #reportsLink{display:none}
.signed-in #signOut{width:100%;text-align:left}
.workspace-nav{position:fixed;inset:0 auto 0 0;width:244px;background:#172020;border-right:1px solid var(--line);padding:124px 18px 150px;z-index:2;overflow-y:auto}
.nav-caption{font-size:10px;letter-spacing:.14em;color:var(--faint);padding-left:14px;margin:0 0 16px}
.workspace-nav nav{display:flex;flex-direction:column;gap:6px}
.workspace-nav nav a{display:flex;gap:12px;align-items:center;color:var(--muted);padding:12px 14px;border-radius:9px;text-decoration:none;font-weight:550;min-height:46px}
.workspace-nav nav a>span:first-child{font-size:20px;width:23px;text-align:center;font-weight:400}
.workspace-nav nav a:hover{background:#263030;color:var(--ink)}
.workspace-nav nav a[aria-current=page]{background:#d8a65718;color:#edc88e;box-shadow:inset 3px 0 var(--brand)}
.nav-arrow{margin-left:auto}.nav-help{border:1px solid var(--line);border-radius:12px;padding:16px;margin:42px 7px 0;font-size:12px;color:var(--muted)}
.nav-help b{color:var(--ink);font-weight:550;display:block}.nav-help a{font-weight:600;text-decoration:none}.nav-help p{line-height:1.65}
#workspaceMain{max-width:1240px;margin:auto;outline:none}
.workspace-heading{display:flex;gap:24px;justify-content:space-between;align-items:center;margin-bottom:32px}
.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--brand);text-transform:uppercase;margin:0 0 9px;overflow-wrap:anywhere}
h1{font-size:34px;letter-spacing:-.035em;font-weight:600;line-height:1.2}
.page-description{color:var(--muted);font-size:14px;margin:10px 0 0}
.account-chip{display:flex;align-items:center;gap:10px;max-width:270px;min-width:0}.account-chip b{font-size:13px;display:block;overflow-wrap:anywhere}.account-chip small{color:var(--muted);font-size:12px;display:block;margin-top:3px}
.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#2c3733;color:#dccaac;border:1px solid #455249;flex-shrink:0;font-weight:650;font-size:12px}
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 36px}
.overview-stat{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:linear-gradient(125deg,#202a29,#192121);display:flex;flex-direction:column;gap:9px}
.overview-stat>span{font-size:13px;color:var(--muted)}.overview-stat strong{font-size:34px;line-height:1.2;font-weight:550;letter-spacing:-.03em}.overview-stat small{font-size:11px;color:var(--faint)}.overview-stat .attention{color:var(--brand)}
.section-heading{margin-bottom:20px}.section-heading h2{font-size:20px}.section-heading p{margin:4px 0 0;color:var(--muted);font-size:13px}
.venue-toolbar{display:flex;align-items:flex-end;gap:18px;margin-bottom:18px}.venue-toolbar label{max-width:340px;flex:1;margin:0}.venue-toolbar>span{font-size:12px;color:var(--muted);padding:12px 0}
.venue{padding:22px 24px;border-color:#364341;box-shadow:0 3px 15px #00000012}.venue+.venue{margin-top:0}
.venue-heading{display:flex;gap:13px;align-items:center}.venue-symbol{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border:1px solid #46504a;background:#29322c;border-radius:11px;color:#dcc8a4;font-size:19px;font-weight:500}
.venue .name{font-size:17px;letter-spacing:-.02em}.role-pill{display:inline-block;font-size:11px;color:var(--muted);margin-top:2px}.venue .meta{margin-top:12px;font-size:12px;color:var(--muted)}
.openboard{margin-top:18px}.openboard a{padding:10px 16px;font-size:12px}.openboard a:first-child{background:#304539;border:1px solid #4b7057;color:#c8e5cd}
.dot.live{color:#8adca6}.dot.live::before{background:#8adca6}
.venue-manage{margin-top:20px;border-top:1px solid var(--line);padding-top:6px}
.venue-manage>summary{cursor:pointer;padding:13px 0 6px;font-weight:600;font-size:13px;color:var(--ink)}
.venue-manage>summary span{font-size:12px;color:var(--faint);font-weight:400;margin-left:12px}
.venue-details{padding-top:22px}.venue-details h4{margin:0;font-size:14px}.venue-details .help-text{margin:7px 0 16px}.venue-settings{padding-bottom:22px}.venue-settings>label{max-width:520px}.venue-settings button{margin-top:12px}
.product-settings{border-top:1px solid var(--line);padding-top:20px}.prods{margin:12px 0 0}.prod.on{border-color:#65714f}.prod{padding:5px 9px 5px 13px}.prod input{min-height:30px}.prod input[type=checkbox]{min-height:0}
.sources{margin-top:24px;padding-top:22px}.sources p{color:var(--muted)}.src{padding:15px;background:#141b1c}.src .blurb{line-height:1.65}.src .grow{min-width:150px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.settings-card{padding:26px;min-width:0}.settings-card+.settings-card{margin:0}.settings-card h2{font-size:20px}.settings-card>p{color:var(--muted);font-size:13px;margin:8px 0 22px}.settings-card>label{margin:18px 0 7px}.settings-card button{margin-top:8px}.settings-card .msg{margin:14px 0 0}.section-kicker{font-size:10px;color:var(--brand);letter-spacing:.13em;margin-bottom:12px}
.help-text{font-size:12px!important;color:var(--faint)!important;line-height:1.65}.access-guide dt{font-weight:600;font-size:13px;margin-top:18px}.access-guide dd{font-size:13px;color:var(--muted);margin:4px 0;line-height:1.65}
#businessPickerField{max-width:340px;margin-bottom:24px}#portalMsg:empty{display:none}.msg.good{color:#8adca6}.foot{text-align:left;border-top:1px solid var(--line);padding-top:20px;margin-top:36px;font-size:12px}.foot a{text-decoration:none}
#authView{padding-top:30px}#authView>.card{padding:32px;box-shadow:0 24px 80px #0003}#authView h2{font-size:24px}#authView .tabs{margin-bottom:26px}#authView form>button{width:100%}
@media(min-width:1600px){.signed-in .shell{padding-top:48px}}
@media(max-width:1100px){.signed-in .shell{margin-left:215px;padding:30px 24px}.workspace-nav{width:215px;padding-inline:12px}.signed-in .brandbar{left:22px;width:170px}.signed-in .who{left:24px;width:164px}.overview-stat{padding:18px}.account-chip{max-width:180px}.settings-grid{gap:16px}.settings-card{padding:20px}}
@media(max-width:800px){.signed-in .shell{margin:0;padding:24px 20px 36px}.signed-in .brandbar{position:static;width:auto;margin:0 0 22px;flex-wrap:nowrap}.signed-in .who{position:static;width:auto;margin-left:auto;border:0;padding:0}.signed-in #whoText{display:none}.signed-in #signOut{width:auto}.workspace-nav{position:static;width:auto;padding:8px;margin:-2px 0 28px;border:1px solid var(--line);border-radius:12px;overflow:visible}.workspace-nav nav{flex-direction:row;gap:4px;flex-wrap:wrap}.workspace-nav nav a{flex:1;justify-content:center;padding:9px 10px;min-height:42px;font-size:12px;white-space:nowrap}.workspace-nav nav a>span{display:none}.workspace-nav nav a[aria-current=page]{box-shadow:none}.nav-caption,.nav-help{display:none}.workspace-heading{margin-bottom:24px}.account-chip{display:none}h1{font-size:30px}.overview-grid{gap:10px;margin-bottom:26px}.overview-stat{padding:16px}.overview-stat strong{font-size:28px}.overview-stat small{font-size:10px}.settings-grid{grid-template-columns:1fr}.venue{padding:20px}.foot{margin-top:28px}}
@media(max-width:480px){.signed-in .shell{padding:20px 14px 32px}.workspace-nav nav a{flex-basis:40%}.overview-grid{grid-template-columns:1fr;gap:8px}.overview-stat{display:grid;grid-template-columns:1fr auto;gap:4px;padding:14px 16px}.overview-stat strong{grid-column:2;grid-row:1/3;align-self:center}.overview-stat small{font-size:11px}.venue-manage>summary span{display:block;margin:5px 0 0 16px}.venue-toolbar{align-items:center}.src .act{flex-wrap:wrap;flex-shrink:1}.src .grow{min-width:0;flex-basis:100%}.venue-details .row>*{max-width:100%}.venue .price{margin-left:auto}.section-heading{align-items:start}.section-heading button{font-size:12px;padding:10px 12px}.shell{padding:24px 16px}.settings-card{padding:20px}.srcform .row>label{min-width:0;flex-basis:100%}#authView{padding-top:8px}#authView>.card{padding:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(min-width:801px) and (max-height:820px){.nav-help{display:none}}

@media(max-width:480px){.overview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.overview-stat{display:flex;padding:14px 10px;gap:8px}.overview-stat>span{font-size:11px}.overview-stat strong{align-self:start;font-size:28px}.overview-stat small{display:none}}