/* Calhoun Management v_3.0 */
:root {
  color-scheme: light;
  --bg: #f2f4f6;
  --surface: #ffffff;
  --ink: #16222d;
  --muted: #5d6c7a;
  --rule: #d5dce3;
  --rule-strong: #8a99a8;
  --accent: #1d4e6b;
  --accent-ink: #ffffff;
  --accent-soft: #e3edf3;
  --good: #1c6e45;
  --bad: #ad2f28;
  --warn-bg: #fff4dc;
  --warn-ink: #6b4700;
  --info-bg: #e6eef5;
  --ok-bg: #e5f2ea;
  --err-bg: #fbe9e7;
  --sec-bg: #eef2f5;
  --total-bg: #f7f9fa;
  --focus: #2f7fb5;
  --prg-green: #145a32;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #12181e;
    --surface: #1a222a;
    --ink: #e4eaef;
    --muted: #97a6b3;
    --rule: #2e3a45;
    --rule-strong: #566573;
    --accent: #7fb6d8;
    --accent-ink: #0d1a24;
    --accent-soft: #223443;
    --good: #6cc895;
    --bad: #f08a80;
    --warn-bg: #3a2f16;
    --warn-ink: #f2d38e;
    --info-bg: #1f2d39;
    --ok-bg: #1b3326;
    --err-bg: #3c1f1c;
    --sec-bg: #202b35;
    --total-bg: #1e2730;
    --focus: #8cc5ea;
    --prg-green: #1d7a45;
  }
}

/* A person’s chosen screen colors (Your account) override the automatic setting. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f6;
  --surface: #ffffff;
  --ink: #16222d;
  --muted: #5d6c7a;
  --rule: #d5dce3;
  --rule-strong: #8a99a8;
  --accent: #1d4e6b;
  --accent-ink: #ffffff;
  --accent-soft: #e3edf3;
  --good: #1c6e45;
  --bad: #ad2f28;
  --warn-bg: #fff4dc;
  --warn-ink: #6b4700;
  --info-bg: #e6eef5;
  --ok-bg: #e5f2ea;
  --err-bg: #fbe9e7;
  --sec-bg: #eef2f5;
  --total-bg: #f7f9fa;
  --focus: #2f7fb5;
  --prg-green: #145a32;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12181e;
  --surface: #1a222a;
  --ink: #e4eaef;
  --muted: #97a6b3;
  --rule: #2e3a45;
  --rule-strong: #566573;
  --accent: #7fb6d8;
  --accent-ink: #0d1a24;
  --accent-soft: #223443;
  --good: #6cc895;
  --bad: #f08a80;
  --warn-bg: #3a2f16;
  --warn-ink: #f2d38e;
  --info-bg: #1f2d39;
  --ok-bg: #1b3326;
  --err-bg: #3c1f1c;
  --sec-bg: #202b35;
  --total-bg: #1e2730;
  --focus: #8cc5ea;
  --prg-green: #1d7a45;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 15px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .25rem; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; font-weight: 650; }
.lede { color: var(--muted); margin: 0 0 1.25rem; max-width: 70ch; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: .5rem; background: var(--surface); padding: .5rem 1rem; z-index: 10; }

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .6rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  /* Stays at the top of the window while the page scrolls. */
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
/* Wide screens: everything on one row. Narrower laptop screens: logos and sign-out on top,
   page links on a second row. */
@media screen and (min-width: 761px) {
  .topbar { flex-wrap: nowrap; gap: 1.1rem; padding: .45rem 1.5rem; }
  .topbar > .mainnav { flex-wrap: nowrap; }
  .topbar > .mainnav > a, .topbar > .mainnav .nav-btn { white-space: nowrap; }
}
/* Two lines (menu below the logos) only where one line won't fit: narrow tablets. From 1180px up,
   the menu (Home, Reports, Stores, Manage) shares the line with the logos. Phones have their own layout. */
@media screen and (min-width: 761px) and (max-width: 1179px) {
  .topbar { display: grid; grid-template-columns: auto auto 1fr auto; gap: .35rem 1.25rem; padding: .45rem 1.5rem .3rem; }
  .topbar > .co-switch { grid-row: 1; grid-column: 2; }
  .topbar > .usermenu { grid-row: 1; grid-column: 4; margin-left: 0; }
  .topbar > .mainnav { grid-row: 2; grid-column: 1 / -1; margin: 0 -.6rem; }
  .topbar > .mainnav::-webkit-scrollbar { display: none; }
}
/* The company name is always as wide as the longest one ("All Companies"), so the logos
   stay in the same spot when switching between Wendy’s, Wingstop, and All Companies. */
.brand-name { display: inline-block; min-width: 8.2em; white-space: nowrap; }
.brand-mark { min-width: 2.6em; text-align: center; }
@media screen and (max-width: 760px) { .brand-name { min-width: 0; } }

/* Jumps to a section (like "All Stores Setup") stop below the pinned bar. */
html { scroll-padding-top: 7.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 650; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 1.6rem; border-radius: 3px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 750; letter-spacing: .04em;
}
.brand-mark.brand-wingstop { background: var(--prg-green); color: #ffffff; }
.mainnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.mainnav > a, .mainnav .nav-btn {
  color: var(--muted); text-decoration: none; padding: .4rem .7rem; border-radius: 4px;
}
/* Hover tint fades with the dock swell (driven by --lift) instead of snapping on. */
.mainnav > a:not([aria-current="page"]), .mainnav .nav-btn:not(.is-current) {
  background: color-mix(in srgb, var(--sec-bg) calc(var(--lift, 0) * 100%), transparent);
  color: color-mix(in srgb, var(--ink) calc(var(--lift, 0) * 100%), var(--muted));
}
.mainnav > a[aria-current="page"], .mainnav .nav-btn.is-current { color: var(--ink); background: var(--accent-soft); font-weight: 600; }

/* Menus: Reports, Stores, Manage */
.nav-group { position: relative; display: inline-block; }
.mainnav .nav-btn { font: inherit; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.nav-caret { width: .75em; height: .75em; transition: transform .15s ease; }
.nav-group.is-open .nav-caret { transform: rotate(180deg); }
.nav-group.is-open .nav-btn:not(.is-current) { color: var(--ink); background: var(--sec-bg); }
.nav-menu { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 60; min-width: 21rem; padding: .35rem; padding-bottom: calc(.35rem + var(--dock-extra, 0px));
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.nav-menu[hidden] { display: none; }
.nav-menu a { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .7rem; border-radius: 6px; text-decoration: none; color: var(--ink);
  width: calc(100% / 1.08);   /* leaves room for the dock swell (1.08, in app.js) so it never spills past the menu's edge */
  transform-origin: left center; will-change: transform; backface-visibility: hidden; position: relative; }
/* The hover tint fades in with the swell (--lift), like the top bar; keyboard focus still gets it outright. */
.nav-menu a:not([aria-current="page"]) { background: color-mix(in srgb, var(--sec-bg) calc(var(--lift, 0) * 100%), transparent); }
.nav-menu a:focus-visible { background: var(--sec-bg); outline: none; }
@media (hover: none) { .nav-menu a:active { background: var(--sec-bg); } }
.nav-menu a[aria-current="page"] { background: var(--accent-soft); }
.nav-menu a[aria-current="page"] .nav-item { font-weight: 700; }
.nav-item { font-weight: 600; }
.nav-desc { font-size: .8rem; color: var(--muted); white-space: normal; }
.usermenu { margin-left: auto; display: flex; align-items: center; gap: .75rem; white-space: nowrap; flex-shrink: 0; }
.usermenu a { color: var(--ink); text-decoration: none; }
.usermenu a[aria-current="page"] { text-decoration: underline; }
.usermenu form { margin: 0; }
.um-icon { display: none; width: 1.35rem; height: 1.35rem; vertical-align: middle; }
/* Narrow phones: a person icon stands in for your name (same link to Your Account). */
@media screen and (max-width: 480px) { .um-icon { display: inline-block; } .um-name { display: none; } }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

main { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
main.wide { max-width: none; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 0 1rem 2rem; }

/* Forms and buttons */
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
label.check { flex-direction: row; align-items: center; gap: .45rem; font-weight: 400; }
input, select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 4px; padding: .45rem .6rem; min-height: 2.3rem;
}
input[type="checkbox"] { min-height: 0; width: 1.05rem; height: 1.05rem; }
input[type="file"] { padding: .6rem; border-style: dashed; }
.stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
.narrow { max-width: 28rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: .5rem 1rem; min-height: 2.3rem; border-radius: 4px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
}
.btn:hover { background: var(--sec-bg); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.12); }
.btn-danger { color: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: var(--err-bg); }
.btn-small { padding: .25rem .6rem; min-height: 0; font-size: .85rem; font-weight: 500; }
.stack .btn { justify-self: start; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; margin: 0; flex-wrap: wrap; }
.inline-form label { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.actions { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1.5rem; }

/* Notices */
.notice { padding: .7rem 1rem; border-radius: 4px; margin: 0 0 1rem; border-left: 4px solid; max-width: 75ch; }
.notice-info { background: var(--info-bg); border-color: var(--accent); }
.notice-success { background: var(--ok-bg); border-color: var(--good); }
.notice-error { background: var(--err-bg); border-color: var(--bad); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-ink); color: var(--warn-ink); }
.temp-pass code { font-size: 1.1rem; padding: .1rem .35rem; background: var(--surface); border-radius: 3px; }
.debug { white-space: pre-wrap; background: var(--surface); padding: 1rem; border: 1px solid var(--rule); }

/* Sign-in */
.signin { max-width: 24rem; margin: 3rem auto; }

/* Report header and filters */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.filters {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin: 0 0 1.25rem;
}
.filters.compact { margin: 0; }
.js .filters[data-autosubmit] > .btn { display: none; }

/* Period track: 12 periods drawn to scale, 4-4-5 weeks */
.period-track {
  display: flex; gap: 3px; margin: .25rem 0 1.5rem;
  padding: .5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}
.period-track .seg {
  flex: 4 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .35rem .3rem .3rem; border-radius: 3px;
  text-decoration: none; color: var(--muted); font-size: .8rem; text-align: center;
}
.period-track .seg.w5 { flex-grow: 5; }
.period-track .seg.w6 { flex-grow: 6; }
.period-track .seg:hover { background: var(--sec-bg); color: var(--ink); }
.seg-bar { display: block; height: .45rem; border-radius: 2px; background: var(--rule); position: relative; overflow: hidden; }



.seg.is-current { color: var(--ink); font-weight: 700; background: var(--accent-soft); }
/* Thick bar: actuals uploaded. Thin bar underneath: budget uploaded. */
.seg-bar2 { display: block; height: .2rem; border-radius: 2px; background: var(--rule); margin-top: -.1rem; }
.seg.has-actual .seg-bar { background: var(--accent); }
.seg.has-budget .seg-bar2 { background: var(--accent); opacity: .6; }
.seg.is-current .seg-bar { box-shadow: 0 0 0 2px var(--accent); }
.track-key { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: -1.1rem 0 1.25rem; font-size: .78rem; color: var(--muted); }
.track-key span { display: inline-block; width: 1.4rem; border-radius: 2px; background: var(--accent); }
.track-key .k-act { height: .45rem; }
.track-key .k-bud { height: .2rem; opacity: .6; margin-left: .8rem; }
/* Dot under the bars: GL detail uploaded. */
.seg-gl { display: block; width: .4rem; height: .4rem; border-radius: 50%; margin: .05rem auto 0; background: transparent; border: 1px solid var(--rule); }
.seg.has-gl .seg-gl { background: var(--accent); border-color: var(--accent); }
.track-key .k-gl { width: .5rem; height: .5rem; border-radius: 50%; margin-left: .8rem; }

/* Quarter strip above the periods, drawn to the same scale */
.quarter-track { display: flex; gap: 3px; margin: .25rem 0 .35rem; padding: 0 .5rem; }
.quarter-track .qseg {
  flex: 13 1 0; min-width: 0; text-align: center; text-decoration: none;
  padding: .3rem .2rem; border-radius: 4px; font-size: .82rem; font-weight: 600;
  color: var(--muted); background: var(--surface); border: 1px solid var(--rule);
}
.quarter-track .qseg.w14 { flex-grow: 14; }
.quarter-track .qseg:hover { color: var(--ink); background: var(--sec-bg); }
.quarter-track .qseg.holds-current { color: var(--ink); }
.quarter-track .qseg.is-current { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.period-track .seg.in-quarter { color: var(--ink); background: var(--accent-soft); }
.period-track .seg.in-quarter .seg-bar { box-shadow: 0 0 0 1px var(--accent); }
.period-track { margin-top: 0; }

/* Dock-style magnification (like the Mac dock). The script sets each period's size and a
   matching "lift" (0 to 1), so the shadow fades in and out together with the size. */
.period-track .seg, .quarter-track .qseg {
  position: relative; transform-origin: center bottom; will-change: transform; backface-visibility: hidden;
  --lift: 0;
  box-shadow: 0 calc(var(--lift) * 6px) calc(var(--lift) * 14px) rgba(0, 0, 0, calc(var(--lift) * .14));
}
.quarter-track .qseg { transform-origin: center top; box-shadow: 0 calc(var(--lift) * 4px) calc(var(--lift) * 10px) rgba(0, 0, 0, calc(var(--lift) * .12)); }
/* The page links in the top bar swell the same way (from their center, no shadow), with room
   above and below so a growing link isn't clipped. */
.mainnav { padding-top: .45rem; padding-bottom: .45rem; margin-top: -.25rem; margin-bottom: -.25rem; }
.mainnav > a, .mainnav .nav-btn { display: inline-block; transform-origin: center center; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
.mainnav .nav-btn { display: inline-flex; }

/* Statement table */
.table-wrap {
  overflow: auto; max-height: calc(100vh - 12rem);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}
.statement { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .87rem; }
.statement th, .statement td { padding: .32rem .6rem; white-space: nowrap; }
.statement td { text-align: right; border-bottom: 1px solid var(--bg); }
.statement thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); color: var(--muted); font-weight: 600; font-size: .78rem;
  text-align: right; border-bottom: 1px solid var(--rule-strong);
}
.statement thead tr:first-child th { text-align: center; color: var(--ink); font-size: .85rem; border-bottom: 1px solid var(--rule); }
.statement thead tr:nth-child(2) th { top: 2.05rem; }
.statement thead th.line-col { text-align: left; z-index: 3; left: 0; vertical-align: bottom; }
.statement tbody th.line-col {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); text-align: left; font-weight: 400;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--bg);
}
.statement .ytd-start { border-left: 2px solid var(--rule); }
.statement .pct { color: var(--muted); font-size: .8rem; }
.statement tr.acct th.line-col { padding-left: 1.6rem; }
.statement tr.sec th {
  text-align: left; background: var(--sec-bg); color: var(--ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; padding-top: .55rem;
  position: sticky; left: 0;
}
.statement tr.sec-4 th { background: var(--surface); color: var(--muted); padding-left: 1rem; }
.statement tr.total th.line-col, .statement tr.total td {
  font-weight: 700; background: var(--total-bg); border-top: 1px solid var(--rule-strong);
}
.statement tr.retired th.line-col { font-style: italic; color: var(--muted); }
/* Every other line is lightly shaded in the company's color so rows are easy to follow across:
   light red for Wendy’s, light green for Wingstop, gray for All Companies. */
:root { --stripe: rgba(245, 102, 0, .10); }   /* All Companies: light orange */
:root[data-co="wendys"] { --stripe: rgba(200, 40, 50, .075); }
:root[data-co="wingstop"] { --stripe: rgba(20, 120, 60, .085); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-co="wendys"] { --stripe: rgba(255, 110, 110, .10); }
  :root:not([data-theme="light"])[data-co="wingstop"] { --stripe: rgba(110, 220, 150, .09); }
  :root:not([data-theme="light"])[data-co="all"] { --stripe: rgba(255, 150, 70, .09); }
}
:root[data-theme="dark"][data-co="wendys"] { --stripe: rgba(255, 110, 110, .10); }
:root[data-theme="dark"][data-co="wingstop"] { --stripe: rgba(110, 220, 150, .09); }
:root[data-theme="dark"][data-co="all"] { --stripe: rgba(255, 150, 70, .09); }
.statement tbody tr.zebra td { background: var(--stripe); }
.statement tbody tr.zebra th.line-col { background: linear-gradient(var(--stripe), var(--stripe)), var(--surface); }
.statement tbody tr:hover td, .statement tbody tr:hover th.line-col { background: var(--accent-soft); }
.var.good, .legend .good { color: var(--good); }
.var.bad, .legend .bad { color: var(--bad); }
.legend { color: var(--muted); font-size: .85rem; margin-top: .75rem; max-width: 90ch; }
.legend .good, .legend .bad { font-weight: 600; }

/* Plain grids (periods, users, activity) */
.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); font-size: .92rem; }
.grid th, .grid td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.grid thead th { font-size: .8rem; color: var(--muted); font-weight: 600; background: var(--sec-bg); }
.grid tbody th { font-weight: 600; }
.grid .num { text-align: right; }
.grid tr.is-now { background: var(--accent-soft); }
.grid tr.superseded { color: var(--muted); }
.done { color: var(--good); font-weight: 600; }

/* Store groups */
.group-note { margin: -.75rem 0 1.25rem; color: var(--muted); }
.group-form .narrow-field { max-width: 28rem; }
fieldset { border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.25rem; margin: 0; background: var(--surface); }
/* Box headings sit inside their boxes (browsers put them on the top border by default). */
legend { float: left; width: 100%; padding: 0; margin: 0 0 .7rem; font-weight: 650; }
legend + * { clear: both; }
fieldset { padding-top: .9rem; }
.range { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; }
.range label { flex-direction: row; align-items: center; gap: .5rem; }
.range input { width: 5.5rem; }
.range p { flex-basis: 100%; margin: 0; font-size: .85rem; }
.pick-tools { display: none; gap: .5rem; margin-bottom: .75rem; }
.js .pick-tools { display: flex; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1rem; }
.pick-grid label { font-size: .9rem; }
.store-picks legend .muted { font-weight: 400; margin-left: .35rem; }

[data-scope-some] { display: grid; gap: 1rem; }
[data-scope-some][hidden] { display: none; }
fieldset .check + .check { margin-top: .35rem; }
.small { font-size: .85rem; }
.warn-text { color: var(--bad); font-weight: 600; }

/* Companies */
.co-switch { display: flex; gap: .35rem; margin: 0; }
/* All three company buttons share the Wingstop button's size: --logo-h is the logo height, and the
   Wingstop logo is 2.885 times as wide as it is tall. Other logos are centered at the same height. */
.co-switch { --logo-h: 34px; }
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: content-box;
  width: calc(var(--logo-h) * 2.885); height: var(--logo-h); padding: .2rem .55rem; cursor: pointer;
  /* Solid white behind every logo so both stay crisp on light, dark, red, or green screens. */
  background: #ffffff; border: 2px solid transparent; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.co-btn img { height: var(--logo-h); width: auto; max-width: 100%; display: block; }
/* Unselected logos stay at full strength; the selected one is marked by its outline. */
.co-btn:not(.is-on):hover { box-shadow: 0 0 0 2px var(--rule-strong); }
.co-btn.is-on { border-color: var(--accent); cursor: default; box-shadow: 0 0 0 2px var(--accent); }
/* All Companies: the two logos side by side, sized together to fill the same width
   (Wendy’s is 1.083 times as wide as tall, Wingstop 2.885, with a 4px gap). */
.co-btn.co-all { flex-direction: row; gap: 4px; text-decoration: none; }
.co-btn.co-all img { height: calc((var(--logo-h) * 2.885 - 4px) / 3.968); }
.co-btn.co-all.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.brand-mark.brand-all { background: linear-gradient(90deg, #b1262c 50%, #145a32 50%); color: #ffffff; }
.co-btn.co-wingstop.is-on { border-color: var(--prg-green); box-shadow: 0 0 0 2px var(--prg-green); }
.co-btn:disabled { border-color: transparent; cursor: default; }

/* Dark screens: Wingstop shows its white logo on a solid green chip, which stays
   readable even when a phone browser darkens pages on its own. */
.co-btn .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .co-btn.co-wingstop { background: #145a32; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
  :root:not([data-theme="light"]) .co-btn.co-wingstop .logo-light { display: none; }
  :root:not([data-theme="light"]) .co-btn.co-wingstop .logo-dark { display: block; }
  :root:not([data-theme="light"]) .co-btn.co-wingstop.is-on { border-color: #8fe0b0; box-shadow: 0 0 0 2px #8fe0b0; }
}
:root[data-theme="dark"] .co-btn.co-wingstop { background: #145a32; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
:root[data-theme="dark"] .co-btn.co-wingstop .logo-light { display: none; }
:root[data-theme="dark"] .co-btn.co-wingstop .logo-dark { display: block; }
:root[data-theme="dark"] .co-btn.co-wingstop.is-on { border-color: #8fe0b0; box-shadow: 0 0 0 2px #8fe0b0; }
.company-banner { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; }
.company-banner img { background: #ffffff; border-radius: 4px; padding: 2px 4px; height: 40px; width: auto; }
.co-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.co-tabs a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--surface);
  color: var(--ink); text-decoration: none;
}
.co-tabs a img { background: #ffffff; border-radius: 3px; height: 28px; width: auto; }
.co-tabs a[aria-current="page"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
.co-access { list-style: none; margin: 0; padding: 0; }
.co-access li + li { margin-top: .15rem; }
.confirm-co { font-weight: 600; color: var(--warn-ink); }

/* GL transactions */
.gl-link { color: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
.gl-link:hover { color: var(--accent); text-decoration-style: solid; }
/* Dock effect down the Actual columns: the script sizes each clickable amount by how close it is to
   the mouse (growing from the right edge, since amounts are right-aligned) and fades in a soft
   highlight with it. */
.statement a.gl-link { display: inline-block; transform-origin: right center; will-change: transform; backface-visibility: hidden;
  --lift: 0; border-radius: 3px; padding: 0 .15rem; margin: 0 -.15rem;
  background: color-mix(in srgb, var(--accent-soft) calc(var(--lift) * 100%), transparent); }
.gl-dialog {
  width: min(1100px, 96vw); max-height: 90vh; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.gl-dialog::backdrop { background: rgba(10, 20, 30, .55); }
.gl-pop { padding: 1.1rem 1.4rem 1.4rem; }
.gl-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.gl-head h2 { margin: 0 0 .15rem; }
.gl-head p { margin: 0; }
.gl-actions { display: flex; gap: .5rem; }
.gl-facts { margin: 1rem 0; }
.gl-stores { margin-bottom: 1rem; }
.table-scroll { overflow: auto; }
.gl-scroll { max-height: 55vh; border: 1px solid var(--rule); }
.gl-dialog .gl-scroll { max-height: 50vh; }
.grid.compact th, .grid.compact td { padding: .3rem .55rem; font-size: .85rem; }
.gl-table thead th { position: sticky; top: 0; z-index: 1; }
.gl-table .memo { min-width: 18rem; max-width: 34rem; white-space: normal; }
.nowrap { white-space: nowrap; }

/* Screen colors */
[data-custom-colors][hidden] { display: none; }
.color-pick { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.color-pick input[type="color"] { width: 4.5rem; height: 2.4rem; padding: .15rem; cursor: pointer; }
.color-sample { margin-top: .9rem; padding: .8rem 1rem; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--bg); color: var(--ink); }

/* Upload alerts */
.sms-fields { display: grid; gap: .6rem; margin: .6rem 0 0 1.6rem; }
.sms-fields[hidden] { display: none; }
.sms-fields input[type="tel"] { max-width: 14rem; }
.consent { font-size: .85rem; align-items: flex-start; }
.consent input { margin-top: .2rem; }

/* AI chat */
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ai-dialog { width: min(760px, 96vw); }
.ai-log { max-height: 52vh; min-height: 8rem; overflow-y: auto; margin: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.ai-msg { padding: .65rem .85rem; border-radius: 8px; white-space: pre-wrap; line-height: 1.5; max-width: 92%; }
.ai-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.ai-assistant { align-self: flex-start; background: var(--sec-bg); border: 1px solid var(--rule); }
.ai-wait { color: var(--muted); font-style: italic; }
.ai-error { background: var(--err-bg); border-color: var(--bad); }
.ai-suggest { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-form { display: flex; gap: .5rem; align-items: flex-end; }
.ai-form textarea { flex: 1; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 4px; padding: .5rem .6rem; resize: vertical; }

.suggest-form { margin-top: .6rem; }

/* Upload progress window */
.progress-dialog { width: min(560px, 94vw); }
.progress-dialog h2 { margin: 0 0 .3rem; }
.pbar { height: 1rem; border-radius: 999px; background: var(--sec-bg); border: 1px solid var(--rule); overflow: hidden; margin: .8rem 0; }
.pbar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f28c28, #f6d02f, #8cc63f, #1e9e4a); transition: width .25s ease; }
.pbar.is-busy .pbar-fill { background-size: 200% 100%; animation: pbar-move 1.2s linear infinite; background-image: linear-gradient(90deg, #8cc63f, #1e9e4a, #8cc63f); }
@keyframes pbar-move { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .pbar.is-busy .pbar-fill { animation: none; } }
.pd-log { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; font-size: .88rem; }
.pd-log li { padding: .15rem 0; }
.pd-log li.ok { color: var(--good); }
.pd-log li.bad { color: var(--bad); font-weight: 600; }
@media screen and (max-width: 760px) { .gl-dialog.progress-dialog { height: auto; max-height: 90dvh; width: 94vw; border-radius: 8px; border: 1px solid var(--rule-strong); margin: auto; } }

.remove-form { margin-left: .4rem; }
.remove-link { color: var(--bad); font-size: .85rem; }
.year-reset { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1.25rem 0 0; }

/* Upload review */
.period-mismatch { max-width: none; }
.review { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--good); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.review.blocked { border-left-color: var(--bad); }
.review h2 { margin-top: 0; font-size: 1rem; word-break: break-all; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem 1.5rem; margin: 0 0 1rem; }
.facts div { margin: 0; }
.facts dt { font-size: .8rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
details { margin: .5rem 0; }
summary { cursor: pointer; color: var(--accent); }

.empty { background: var(--surface); border: 1px dashed var(--rule-strong); border-radius: 6px; padding: 2rem; text-align: center; }
.empty h2 { margin-top: 0; }

/* Trailing 12 */
.statement.t12 thead th { text-align: right; }
.statement.t12 thead th.line-col { text-align: left; }
.statement.t12 .t12-start { background: var(--total-bg); }
.statement.t12 .p-start { border-left: 2px solid var(--rule); }
.statement.t12 .pcol { padding-left: .4rem; padding-right: .5rem; font-size: .82rem; }
.statement.t12 td.pcol { color: var(--muted); }
.statement.t12 tr.total td.pcol { color: var(--ink); }

/* Home gauges */
main.is-loading .gauges, main.is-loading .rank-list { opacity: .55; transition: opacity .15s; }
.home-track { margin-bottom: .9rem; }
.home-filters { margin: 0 0 1.25rem; }
.gauge-row h2 { margin: 1.25rem 0 .6rem; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .9rem; }
.gauge {
  /* Light cards in every color scheme so the gauges stand out, with their own dark text. */
  background: #f7f6f2; color: #16222d;
  border: 1px solid rgba(0, 0, 0, .1); border-top: 4px solid #c9d1d8;
  border-radius: 10px; padding: .9rem 1rem 1rem; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
/* Top edge colored by needle position, matching the dial's gradient. */
.gauge.gc0 { border-top-color: #d7263d; }
.gauge.gc1 { border-top-color: #dc373a; }
.gauge.gc2 { border-top-color: #e04836; }
.gauge.gc3 { border-top-color: #e45932; }
.gauge.gc4 { border-top-color: #e96a2f; }
.gauge.gc5 { border-top-color: #ee7b2c; }
.gauge.gc6 { border-top-color: #f28c28; }
.gauge.gc7 { border-top-color: #f39a29; }
.gauge.gc8 { border-top-color: #f4a72b; }
.gauge.gc9 { border-top-color: #f4b52c; }
.gauge.gc10 { border-top-color: #f5c22e; }
.gauge.gc11 { border-top-color: #f6d02f; }
.gauge.gc12 { border-top-color: #dfce32; }
.gauge.gc13 { border-top-color: #c8cc36; }
.gauge.gc14 { border-top-color: #b1c939; }
.gauge.gc15 { border-top-color: #9ac73d; }
.gauge.gc16 { border-top-color: #82c240; }
.gauge.gc17 { border-top-color: #69b942; }
.gauge.gc18 { border-top-color: #50b045; }
.gauge.gc19 { border-top-color: #37a748; }
.gauge.gc20 { border-top-color: #1e9e4a; }
.gauge { border-top-width: 6px; }
/* Six gauges: four across, then two centered beneath the gaps. */
.gauges.gauges-6 { grid-template-columns: repeat(8, 1fr); }
.gauges-6 .gpos1 { grid-column: 1 / 3; } .gauges-6 .gpos2 { grid-column: 3 / 5; }
.gauges-6 .gpos3 { grid-column: 5 / 7; } .gauges-6 .gpos4 { grid-column: 7 / 9; }
.gauges-6 .gpos5 { grid-column: 2 / 4; } .gauges-6 .gpos6 { grid-column: 6 / 8; }
.gauge-name { font-weight: 650; font-size: .92rem; }
.gauge-svg { width: 100%; max-width: 15rem; display: block; margin: .3rem auto .1rem; }
.gauge-svg .g-arc { fill: none; stroke-width: 16; stroke-linecap: butt; }
.gauge-svg .g-needle { stroke: #16222d; stroke-width: 4; stroke-linecap: round; }
.gauge-svg .g-hub { fill: #16222d; }
.gauge-svg .g-end { fill: #5d6c7a; font-size: 11px; }
.gauge-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.gauge-value.muted, .gauge-was { color: #5d6c7a; }
.gauge-was { font-size: .85rem; }
.gauge-chg { font-weight: 650; font-size: .9rem; margin-top: .15rem; }
.gauge-chg.up { color: #157a39; }
.gauge-chg.down { color: #b3202f; }

/* Combined dashboard */
.gauge-split { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; margin-top: .35rem; font-size: .8rem; color: #5d6c7a; border-top: 1px dashed rgba(0, 0, 0, .12); padding-top: .35rem; }
.rank-brand { display: inline-block; font-size: .72rem; font-weight: 700; color: #5d6c7a; border: 1px solid rgba(0, 0, 0, .15); border-radius: 3px; padding: .05rem .4rem; margin-right: .35rem; vertical-align: 1px; }
/* Company tags in the combined ranking: dark red for Wendy’s, dark green for Wingstop. */
.rank-brand.rank-brand-wendys { background: #8f1d22; border-color: #8f1d22; color: #ffffff; }
.rank-brand.rank-brand-wingstop { background: #145a32; border-color: #145a32; color: #ffffff; }

/* Period strip across two years (Trailing 12) */
.window-track .seg-num small { font-size: .62rem; opacity: .75; margin-left: 1px; }

/* Banded report */
/* Banded report: numbers and their headings are centered in their columns; store and band names stay left. */
.bands-table thead th { text-align: center; }
.bands-table thead tr:first-child th.line-col { text-align: left; }   /* beats the general "center the top heading row" rule */
.band-detail .bands-table thead tr:first-child th.line-col { padding-left: 1.6rem; }   /* lines up with the indented store names */
.bands-table td { text-align: center; font-variant-numeric: tabular-nums; }
.bands-table .sort-btn { justify-content: center; }
.band-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .5rem; vertical-align: -1px; }
.band-dot.rc0 { background: #1e9e4a; }
.band-dot.rc1 { background: #4fb043; }
.band-dot.rc2 { background: #8cc63f; }
.band-dot.rc3 { background: #c5d138; }
.band-dot.rc4 { background: #f6d02f; }
.band-dot.rc5 { background: #f7b62c; }
.band-dot.rc6 { background: #f28c28; }
.band-dot.rc7 { background: #ec6a2c; }
.band-dot.rc8 { background: #e2453a; }
.band-dot.rc9 { background: #d7263d; }
.band-detail { margin: .6rem 0; }
.band-detail summary { cursor: pointer; font-weight: 650; padding: .4rem 0; }
.band-txt { font-weight: 700; }
.band-txt.rc0 { color: #1e9e4a; }
.band-txt.rc1 { color: #3f9a36; }
.band-txt.rc2 { color: #6f9e2a; }
.band-txt.rc3 { color: #8f9420; }
.band-txt.rc4 { color: #a9860a; }
.band-txt.rc5 { color: #b97a0c; }
.band-txt.rc6 { color: #d06d12; }
.band-txt.rc7 { color: #d4561f; }
.band-txt.rc8 { color: #d23b31; }
.band-txt.rc9 { color: #c41f35; }

/* Locations: directory, profiles, and map */
.loc-status { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.loc-open { background: #e3f4e8; color: #157a39; border-color: #b9e2c6; }
.loc-soon { background: #fff4d6; color: #8a5a00; border-color: #f2d98a; }
.loc-closed { background: #eee; color: #555; border-color: #ccc; }
.loc-closing { background: #fde8e4; color: #a33a1d; border-color: #f3c0b3; }
.loc-row-closed th, .loc-row-closed td { color: var(--muted); }
.loc-tools { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1.25rem; }
.close-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.close-note > span { flex: 1 1 22rem; }
.loc-none { background: transparent; color: var(--muted); border-color: var(--rule); }
.loc-search { display: block; max-width: 26rem; margin: 0 0 .8rem; }
.loc-search input { width: 100%; }
.loc-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.25rem; max-width: 52rem; }
.loc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem 1.5rem; margin: 0 0 .75rem; }
.loc-fields dt { color: var(--muted); font-size: .8rem; font-weight: 600; margin: 0; }
.loc-fields dd { margin: .15rem 0 0; }
.loc-fields .loc-notes { grid-column: 1 / -1; }
.loc-import { margin-top: 2rem; }
.upload-panel { margin: .25rem 0 1rem; }
.upload-panel > summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.upload-panel > summary::-webkit-details-marker { display: none; }
.upload-panel[open] > summary { background: var(--accent-soft, #eef3f7); }
.upload-panel-body { margin-top: .6rem; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); max-width: 60rem; }
.upload-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
.upload-row label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.upload-panel-body p { margin: .6rem 0 0; }
@media print { .upload-panel { display: none !important; } }
.map-wrap { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: .5rem; position: relative; overflow: hidden; }
.map-wrap .store-map { touch-action: none; cursor: grab; user-select: none; }
.map-wrap.is-dragging .store-map { cursor: grabbing; }
.map-tools { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: flex; flex-direction: column; gap: .3rem; }
.map-tools .btn { min-width: 2.4rem; font-weight: 700; font-size: 1rem; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); justify-content: center; }
.map-hint { margin: .3rem 0 0; }
.store-map { width: 100%; height: auto; display: block; max-height: 78vh; }
.store-map .map-state { fill: var(--sec-bg); stroke: var(--rule-strong); stroke-linejoin: round; }
.store-map .map-county { fill: none; stroke: var(--rule-strong); opacity: .35; stroke-linejoin: round; pointer-events: none; }
.store-map .map-city { fill: var(--muted); font-weight: 600; opacity: .8; pointer-events: none; paint-order: stroke; stroke: var(--sec-bg); stroke-linejoin: round; }
.store-map .map-state-label { fill: var(--muted); font-weight: 700; text-anchor: middle; dominant-baseline: middle; opacity: .55; pointer-events: none; }
.store-map .map-dot:not(.map-badge-ring) { stroke: #ffffff; transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.store-map .map-dot-soon:not(.map-badge-ring) { fill: #ffffff; stroke: #8a8f96; }
.store-map a.map-store:hover .map-dot:not(.map-badge-ring), .store-map a.map-store:focus .map-dot:not(.map-badge-ring) { transform: scale(1.5); stroke: #16222d; }
/* Store badges: the company logo in a white circle ringed in the store's color; they grow a little on hover. */
.store-map .map-badge { transform-box: fill-box; transform-origin: center; transition: transform .15s ease; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
.store-map a.map-store:hover .map-badge, .store-map a.map-store:focus .map-badge { transform: scale(1.3); }
.store-map .map-logo { pointer-events: none; }
/* Roads: under the stores and town names, light enough to read the map by. */
.store-map .map-road { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.store-map .road-i  { stroke: #e0a54a; opacity: .85; }
.store-map .road-us { stroke: #c9b07a; opacity: .75; }
.store-map .road-st { stroke: #b9b2a4; opacity: .6; }
.store-map .map-road-label { font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--sec-bg); stroke-linejoin: round; pointer-events: none; }
.store-map .road-lbl-i  { fill: #2b5ea8; }
.store-map .road-lbl-us { fill: #6b6457; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .store-map .road-i { stroke: #b07a2a; } :root:not([data-theme="light"]) .store-map .road-lbl-i { fill: #8fb6ec; } }
.map-legend { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin: .6rem 0 1rem; }
.map-scale { display: inline-block; width: 9rem; height: .6rem; border-radius: 999px; background: linear-gradient(90deg, #1e9e4a, #4fb043, #8cc63f, #c5d138, #f6d02f, #f7b62c, #f28c28, #ec6a2c, #e2453a, #d7263d); }
.map-scale-mid { margin: 0 auto 0 0; }
.map-key-soon { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 2px dashed #8a8f96; background: #fff; margin-left: 1rem; }
.store-map .map-dot-nodata:not(.map-badge-ring) { fill: #b6bcc3; }
/* Our stores pulse: a bright, glowing ring grows out from each dot and fades all the way out,
   with a brief moment fully off before the next ping. */
.store-map .map-pulse { pointer-events: none; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: map-pulse 2.8s ease-out infinite; }
.store-map .pulse-d1 { animation-delay: -.47s; } .store-map .pulse-d2 { animation-delay: -.93s; } .store-map .pulse-d3 { animation-delay: -1.4s; }
.store-map .pulse-d4 { animation-delay: -1.87s; } .store-map .pulse-d5 { animation-delay: -2.33s; }
@keyframes map-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }   /* fully off for a moment */
}
/* The pulse runs even with Windows' "Show animations" turned off (it's the point of the map's
   look, and it's small and soft). The site's general "reduce motion" rule must not stop it. */
@media (prefers-reduced-motion: reduce) {
  .store-map .map-pulse { animation: map-pulse 2.8s ease-out infinite !important; transition: none; }
}
@media print { .store-map .map-pulse { display: none; } }
.map-key-nodata { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: #b6bcc3; margin-left: 1rem; }
.map-focus { margin-top: .5rem; }


/* Nearby restaurants on the map: hidden until switched on in the panel below the map. */
.store-map .map-poi { display: none; stroke: #ffffff; opacity: .85; }
.store-map text.map-poi-label, .store-map text.map-city { display: none; }   /* drawn by the label layer instead */
/* Nearby restaurants: a short abbreviation in plain white lettering on the badge (dark on the light gray group). */
.store-map .map-poi-abbr { display: none; fill: #ffffff; font-weight: 800; text-anchor: middle; dominant-baseline: central; letter-spacing: -.02em; pointer-events: none; }
.map-wrap.show-samebrand .store-map .poi-abbr-samebrand, .map-wrap.show-chicken .store-map .poi-abbr-chicken, .map-wrap.show-burger .store-map .poi-abbr-burger,
.map-wrap.show-pizza .store-map .poi-abbr-pizza, .map-wrap.show-mexican .store-map .poi-abbr-mexican, .map-wrap.show-sandwich .store-map .poi-abbr-sandwich,
.map-wrap.show-other .store-map .poi-abbr-other { display: inline; }
.map-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 600; line-height: 1;
  text-shadow: 0 0 2px var(--sec-bg), 0 0 2px var(--sec-bg), 0 0 3px var(--sec-bg), 0 0 4px var(--sec-bg); }
.map-lbl[hidden] { display: none; }
.map-lbl-city { color: var(--muted); font-size: .8rem; pointer-events: auto; cursor: default; }   /* hover a town for its stores */
.map-lbl-poi { color: var(--ink); font-size: .74rem; }
/* Restaurant names in their group's color (a shade deeper where the badge color is light), with a soft outline
   so they read over roads. */
.map-lbl-poi { text-shadow: 0 0 2px var(--sec-bg), 0 0 2px var(--sec-bg), 0 0 3px var(--sec-bg); }
.map-lbl-poi-samebrand { color: #1f2933; }
.map-lbl-poi-chicken   { color: #8b4419; }
.map-lbl-poi-burger    { color: #3d49c2; }
.map-lbl-poi-pizza     { color: #962c85; }
.map-lbl-poi-mexican   { color: #0d7169; }
.map-lbl-poi-sandwich  { color: #4f5f6b; }
.map-lbl-poi-other     { color: #5c656e; }
/* Dark screens: chain-colored names are lightened so they stay readable. */
:root[data-theme="dark"] .map-lbl-poi { filter: brightness(1.75) saturate(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-lbl-poi { filter: brightness(1.75) saturate(.85); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-lbl-poi-samebrand { color: #d6dde4; } :root:not([data-theme="light"]) .map-lbl-poi-chicken { color: #e0a074; }
  :root:not([data-theme="light"]) .map-lbl-poi-burger { color: #a3aaf2; } :root:not([data-theme="light"]) .map-lbl-poi-pizza { color: #e09bd4; }
  :root:not([data-theme="light"]) .map-lbl-poi-mexican { color: #6fd0c6; } :root:not([data-theme="light"]) .map-lbl-poi-sandwich { color: #b3c1cc; }
  :root:not([data-theme="light"]) .map-lbl-poi-other { color: #c2c9d0; }
}
/* Hover label for markers on the map. */
.map-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 18rem; padding: .35rem .55rem; border-radius: 6px;
  background: #16222d; color: #ffffff; font-size: .82rem; line-height: 1.35; white-space: pre-line; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.map-tip strong { font-weight: 700; }
.map-tip[hidden] { display: none; }
.map-wrap.show-samebrand .store-map .map-poi.poi-samebrand { display: inline; }
.poi-swatch-samebrand { background: #1f2933; }
.map-wrap.show-chicken .store-map .map-poi.poi-chicken { display: inline; }
.poi-swatch-chicken { background: #a0522d; }
.map-wrap.show-burger .store-map .map-poi.poi-burger { display: inline; }
.poi-swatch-burger { background: #4f5bd5; }
.map-wrap.show-pizza .store-map .map-poi.poi-pizza { display: inline; }
.poi-swatch-pizza { background: #b0379c; }
.map-wrap.show-mexican .store-map .map-poi.poi-mexican { display: inline; }
.poi-swatch-mexican { background: #12897f; }
.map-wrap.show-sandwich .store-map .map-poi.poi-sandwich { display: inline; }
.poi-swatch-sandwich { background: #6b7f8e; }
.map-wrap.show-other .store-map .map-poi.poi-other { display: inline; }
.poi-swatch-other { background: #9aa3ab; }
.poi-panel { margin: .75rem 0 1rem; border: 1px solid var(--rule); border-radius: 8px; padding: .6rem 1rem .8rem; background: var(--surface); }
.poi-panel legend { font-weight: 650; padding: 0 .3rem; }
.poi-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .3rem 0 .4rem; }
.poi-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: -1px; }
.poi-panel form { margin-top: .5rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Buttons that are turned off look it. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* Upload page: files chosen and their total size */
.upload-summary { margin: 0; padding: .55rem .8rem; border-radius: 6px; background: var(--sec-bg); border: 1px solid var(--rule); }
.upload-summary.is-over { background: #fdecec; border-color: #e7a3a3; color: #8a1f1f; }
.upload-summary ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.upload-summary li { margin: .15rem 0; }

/* Band average row under each band's store list */
.bands-table tfoot .band-avg th, .bands-table tfoot .band-avg td { border-top: 2px solid var(--rule-strong, #8a99a8); background: var(--total-bg, #f3f5f7); }
.bands-table tfoot .band-avg th { text-align: left; }

/* Preview-as-user banner (inside the pinned top bar, so it's always visible) */
.preview-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .4rem .9rem; border-radius: 8px;
  background: #4a2c82; color: #fff; font-size: .9rem; }
/* Always its own full-width line at the bottom of the top bar, whichever top-bar layout is in use. */
.topbar > .preview-banner { order: 99; flex: 0 0 100%; grid-column: 1 / -1; }
@media screen and (min-width: 761px) { .topbar:has(> .preview-banner) { flex-wrap: wrap; } }
.preview-banner .btn { background: #fff; color: #4a2c82; border-color: #fff; }
.preview-banner .btn-icon { width: 1.2em; height: 1.2em; }
@media print { .preview-banner { display: none !important; } }

.daily-db { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); max-width: 60rem; }
.daily-db p { margin: .35rem 0; }

/* Daily Sales */
.day-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 .5rem; }
.day-nav-gap { flex: 1 1 auto; }
.day-nav input[type=date] { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); }
.daily-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin: .5rem 0 .75rem; }
.daily-tile { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.daily-tile strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.daily-table td.good, .daily-table td.bad { font-weight: 600; }
.daily-table td.good, .daily-tile .good { color: var(--good); }
.daily-table td.bad, .daily-tile .bad { color: var(--bad); }
.daily-detail { max-width: 46rem; }
.daily-detail td { text-align: right; font-variant-numeric: tabular-nums; }
.daily-detail tr.sec th { background: var(--sec-bg, #eef1f4); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.daily-review { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: .6rem 1rem; margin: 0 0 .9rem; }
.daily-review h2 { font-size: 1.05rem; margin: .2rem 0 .4rem; }
.daily-review p { margin: .3rem 0; }

.chg-flag { background: color-mix(in srgb, #f9a825 28%, transparent); color: #7a5300; margin-left: .3rem; vertical-align: middle; }
.change-hist { margin: .35rem 0 0 1.1rem; padding: 0; }
.change-hist li { margin: .15rem 0; }
.daily-changes td { white-space: nowrap; }
.change-totals .daily-tile strong { font-size: 1.15rem; }

/* Daily Sales: Show columns */
.col-picker { margin: .25rem 0 .6rem; }
.col-picker > summary { list-style: none; display: inline-flex; gap: .35rem; cursor: pointer; }
.col-picker > summary::-webkit-details-marker { display: none; }
.col-picker[open] > summary { background: var(--accent-soft, #eef3f7); }
.col-picker-body { margin-top: .5rem; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.col-picker-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.col-picker-top p { margin: 0; }
.col-bulk { display: inline-flex; gap: .4rem; }
.col-group-bulk { font-weight: 400; font-size: .78rem; color: var(--muted); margin-left: .35rem; }
.col-group-bulk button { all: unset; cursor: pointer; color: var(--accent); text-decoration: underline; }
.col-group-bulk button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.col-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem 1.25rem; margin: .4rem 0 .6rem; }
.col-groups fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
.col-groups legend { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
.col-groups .check { display: flex; gap: .4rem; align-items: baseline; font-size: .9rem; padding: .08rem 0; }

/* Daily Sales: Uploaded Days calendar */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cal-head h2 { margin: .2rem 0; }
.cal-overall { margin: .2rem 0 .3rem; }
.cal-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .4rem 0 .6rem; font-size: .9rem; }
.cal-key { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; border: 1px solid var(--rule); }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .8rem; }
.cal-period { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: .5rem .6rem .6rem; }
.cal-period h3 { margin: 0 0 .3rem; font-size: .95rem; }
.cal-table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-table thead th { font-size: .72rem; color: var(--muted); font-weight: 600; text-align: center; }
.cal-table tbody th { width: 1.9rem; text-align: left; font-weight: 500; }
.cal-day { text-align: center; border-radius: 5px; font-size: .82rem; font-variant-numeric: tabular-nums; padding: 0; position: relative; height: 1.75rem; }
.cal-day a, .cal-day span { display: block; line-height: 1.75rem; color: inherit; text-decoration: none; border-radius: 5px; }
.cal-day a:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-full, .cal-key.cal-full { background: color-mix(in srgb, #2e7d32 26%, var(--surface)); color: #14421a; }
.cal-partial, .cal-key.cal-partial { background: color-mix(in srgb, #f9a825 40%, var(--surface)); color: #5c3d00; font-weight: 700; }
.cal-none, .cal-key.cal-none { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); color: var(--muted); }
.cal-future { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.cal-was-changed::after, .cal-key.cal-changed::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #c62828; }
.cal-key.cal-changed { position: relative; background: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal-full { color: #d7f5da; } :root:not([data-theme="light"]) .cal-partial { color: #fff1cc; } }
@media print { .cal-grid { grid-template-columns: repeat(4, 1fr); gap: .3rem; } .cal-period { break-inside: avoid; } .cal-day { height: 1.2rem; } .cal-day a, .cal-day span { line-height: 1.2rem; } }

/* Home: Day / Week / Period / Year to Date */
.view-tabs { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 .7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.view-tabs a { padding: .38rem .95rem; border-radius: 7px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; }
.view-tabs a:hover { color: var(--ink); background: var(--sec-bg); }
.view-tabs a.is-on { color: var(--accent-ink, #fff); background: var(--accent); }
.gauge-lw { margin-top: .1rem; }
@media print { .view-tabs { display: none; } }

/* Home: Customize tiles */
.gauge.tile-off { display: none; }
.tiles-bar { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.3rem 0 .45rem; }
.tiles-extra { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gauges.tiles-editing { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
@media screen and (max-width: 760px) { .gauges.tiles-editing { grid-template-columns: 1fr 1fr; } }   /* two across on a phone, so more fit on screen while moving them */
.gauges.tiles-editing .gauge { position: relative; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; outline: 2px dashed var(--rule); outline-offset: -2px; }
.gauges.tiles-editing .gauge.tile-off { display: block; opacity: .42; }
.gauges.tiles-editing .gauge.drag-ready { transform: scale(.97); transition: transform .3s; }
.gauges.tiles-editing .gauge.dragging { cursor: grabbing; z-index: 30; pointer-events: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); opacity: .95; }
.tile-btn { position: absolute; top: .4rem; right: .4rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.tile-btn:hover { background: var(--sec-bg); }
@media print { .tiles-bar { display: none; } }

/* Weekly Sales */
.weekly-table th, .weekly-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weekly-table thead th { text-align: center; }
.weekly-table tbody th { text-align: center; }
.weekly-table tr.is-current td, .weekly-table tr.is-current th { background: var(--accent-soft); }
.weekly-table tr.future td { color: var(--muted); }
.weekly-table tr.period-row th, .weekly-table tr.period-row td { border-top: 2px solid var(--rule); }
.weekly-table td.is-year, .weekly-table th.is-year { font-weight: 700; }
.weekly-table td.is-best { outline: 2px solid #1e9e4a; outline-offset: -3px; border-radius: 4px; }
.weekly-stores td { text-align: center; font-variant-numeric: tabular-nums; }
.prior-flag { background: color-mix(in srgb, #8a6d1f 16%, transparent); color: #6b5413; }
.weekly-table td.is-prior { font-style: italic; color: #8a6d1f; }
.hist-flag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.rec-flag { background: color-mix(in srgb, #1e9e4a 22%, transparent); color: #145a32; }
.check-list { display: grid; gap: .9rem; }
.check-card { border: 1px solid var(--rule); border-left-width: 5px; border-radius: 10px; padding: .7rem 1rem; background: var(--surface); }
.check-card h2 { margin: .1rem 0 .4rem; font-size: 1.05rem; }
.check-card p { margin: .3rem 0; }
.check-ok { border-left-color: #1e9e4a; } .check-warn { border-left-color: #e0a100; } .check-info { border-left-color: var(--accent); }
.check-items { margin: .3rem 0 0 1.1rem; padding: 0; columns: 2 22rem; }
.check-items li { margin: .1rem 0; break-inside: avoid; }

/* Tips for Paylocity */
.tips-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .8rem; }
.tips-file { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; align-items: start; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.tips-file input[type=file] { grid-column: 1 / -1; }
.tips-step { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tips-result { margin-top: 1.4rem; }
.tips-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.tips-totals > div { display: grid; gap: .1rem; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.tips-totals strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.tips-stores td, .tips-lines td { font-variant-numeric: tabular-nums; }
tr.bad-row th, tr.bad-row td { background: color-mix(in srgb, #c62828 8%, transparent); }

/* Automatic Uploads */
.key-once { border: 2px solid var(--accent); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.2rem; background: var(--surface); }
.key-once h2 { margin-top: 0; }
.key-box { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; }
.key-box code { font-size: .95rem; padding: .45rem .6rem; border-radius: 8px; background: var(--sec-bg); word-break: break-all; user-select: all; }
.key-steps li { margin: .45rem 0; }
.new-key-panel { margin: .8rem 0 1.4rem; }
.small-strong { font-size: 1rem !important; }
.cron-status { margin: .4rem 0 1rem; }
.num-input { width: 4.2rem; }
.expect-form { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
pre.code-line { white-space: pre-wrap; word-break: break-all; padding: .6rem .8rem; border-radius: 8px; background: var(--sec-bg); font-size: .85rem; }

/* Reported vs Actual (RTI vs Paylocity) */
.diff-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; margin: .4rem 0 .8rem; }
.diff-card { display: grid; gap: .15rem; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.diff-card strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.diff-card span { font-size: .8rem; color: var(--muted); line-height: 1.25; }
.diff-card.has-some strong { color: #b26a00; }
.diff-card.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.diff-card.diff-ok strong { color: #1e9e4a; }
.labor-cmp .al-tag { margin: .1rem 0; }
.diff-rti_only, .diff-pay_only { background: color-mix(in srgb, #c62828 14%, transparent); color: #9b1c1c; }
.diff-train { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.diff-store, .diff-rate, .diff-job { background: color-mix(in srgb, #e0a100 18%, transparent); color: #7a5600; }
.roster-rti { margin-top: 1.4rem; }

/* Store roster */
.roster-counts { display: flex; flex-wrap: wrap; gap: .35rem; }
.roster-table tr.roster-lead th { font-weight: 700; }
.roster-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sortable column headings */
.sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; font: inherit; color: inherit; border-radius: 4px; padding: 0 .1rem; }
.sort-btn:hover { text-decoration: underline; }
.sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sort-btn::after { content: "↕"; font-size: .8em; opacity: .35; }
th[aria-sort="descending"] .sort-btn::after { content: "▼"; opacity: .9; }
th[aria-sort="ascending"] .sort-btn::after { content: "▲"; opacity: .9; }
th[aria-sort="descending"], th[aria-sort="ascending"] { color: var(--accent); }
@media print { .sort-btn::after { content: none !important; } }
.legend strong.good, .legend strong.bad { font-weight: 800; }

.loc-sub { font-size: 1rem; margin: 1.1rem 0 .4rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.loc-card > .loc-sub:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.loc-dir abbr { text-decoration: none; cursor: help; }
.loc-dir td:nth-child(4), .loc-dir td:nth-child(6) { white-space: nowrap; }   /* phone and open date stay on one line */

.name-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .name-pair { grid-template-columns: 1fr; } }

/* Alignment */
.al-tools { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: end; margin: .5rem 0 1rem; }
.al-tools label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .9rem; }
.al-flags { margin: 0 0 1rem; }
.al-flags p { margin: .25rem 0; }
.al-flag { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.al-flag-bad { background: color-mix(in srgb, #c62828 15%, transparent); color: #b71c1c; }
.al-changes { margin: 0 0 1.25rem; border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .9rem; background: var(--surface); }
.al-changes summary { cursor: pointer; }
.chg { font-size: .78rem; font-weight: 700; padding: .05rem .45rem; border-radius: 4px; white-space: nowrap; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chg-new { background: color-mix(in srgb, #2e7d32 16%, transparent); color: #1b5e20; }
.chg-left { background: color-mix(in srgb, #c62828 14%, transparent); color: #b71c1c; }
.al-group { margin: 0 0 1.75rem; }
.al-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; border-bottom: 2px solid var(--accent); margin-bottom: .75rem; padding-bottom: .3rem; }
.al-group-head h2 { margin: 0; font-size: 1.2rem; }
.al-group-head p { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.al-role { font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: var(--accent); }
.al-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .75rem; align-items: start; }
.al-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: .7rem .85rem; scroll-margin-top: 7rem; }
.al-card-flag { border-color: #c62828; box-shadow: inset 3px 0 0 #c62828; }
.al-card header h3 { margin: 0; font-size: 1.02rem; }
.al-card header p { margin: .1rem 0 .4rem; }
.al-sec { border-top: 1px solid var(--rule); padding: .35rem 0 .25rem; }
.al-sec h4 { margin: 0 0 .15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667); }
.al-sec ul { list-style: none; margin: 0; padding: 0; }
.al-sec li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; padding: .08rem 0; }
.al-gm .al-name { font-weight: 700; }
.al-since { margin-left: auto; font-size: .78rem; color: var(--muted, #667); white-space: nowrap; }
.al-tag { font-size: .68rem; font-weight: 700; padding: 0 .35rem; border-radius: 4px; }
.al-new { background: color-mix(in srgb, #2e7d32 16%, transparent); color: #1b5e20; }
.al-leave { background: color-mix(in srgb, #f9a825 25%, transparent); color: #7a5300; }
.al-none { margin: 0; font-size: .9rem; }
.al-meta { flex-basis: 100%; font-size: .78rem; color: var(--muted, #667); font-variant-numeric: tabular-nums; margin-top: -.15rem; }
.al-meta strong { color: var(--ink, inherit); }
.al-meta > * + *::before { content: " · "; font-weight: 400; color: var(--muted, #667); }
.al-avg { float: right; text-transform: none; letter-spacing: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-hit { background: color-mix(in srgb, #fdd835 45%, transparent); border-radius: 4px; }
.al-count { border-top: 1px solid var(--rule); padding-top: .4rem; margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
@media print {
  .no-print { display: none !important; }
  .al-pay, .al-avg { display: none !important; }   /* pay is on screen only, never printed */
  .al-cards { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: .25rem; }
  .al-card { min-width: 0; overflow-wrap: anywhere; }
  .al-card { break-inside: avoid; padding: .3rem .4rem; font-size: 7.5pt; }
  .al-card header h3 { font-size: 9pt; }
  .al-meta { font-size: 6.5pt; }
  .al-group { break-inside: auto; }
  .al-group + .al-group { break-before: page; }
  .al-card-flag { box-shadow: none; border-width: 2px; }
}

/* Installed app (full screen on phones): keep clear of the notch and the home bar. */
@media (display-mode: standalone) {
  .topbar { padding-top: max(.45rem, env(safe-area-inset-top)); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}
.install-box { border: 1px solid var(--rule); border-radius: 8px; padding: .8rem 1rem; background: var(--surface); }
.install-box ol { margin: .4rem 0 0 1.2rem; padding: 0; }
.install-box li { margin: .25rem 0; }
.install-box [hidden] { display: none; }
.offline-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.offline-card { max-width: 26rem; text-align: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.75rem 1.5rem; }
.offline-card img { border-radius: 16px; margin-bottom: .5rem; }

/* Store ranking */
.ranking { margin-top: 2rem; }
.ranking .report-head h2 { margin: 0; align-self: center; }
.rank-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .3rem; max-height: 34rem; overflow-y: auto; }
.rank-row { background: #f7f6f2; border: 1px solid rgba(0, 0, 0, .08); border-left: 8px solid #c9d1d8; border-radius: 6px; }
.rank-row a { display: grid; grid-template-columns: 2.2rem 1fr auto 6.5rem; gap: .75rem; align-items: center; padding: .45rem .8rem .45rem .5rem; color: #16222d; text-decoration: none; }
.rank-row a:hover { background: rgba(0, 0, 0, .04); }
.rank-row.is-sel { outline: 2px solid var(--accent); }
.rank-no { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #ffffff; font-weight: 700; font-size: .85rem; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.rank-name { font-weight: 600; }
.rank-detail { color: #5d6c7a; font-size: .85rem; }
.rank-val { text-align: right; font-weight: 700; }
.rank-row.rc0 { border-left-color: #1e9e4a; }
.rank-row.rc0 .rank-no { background: #1e9e4a; }
.rank-row.rc1 { border-left-color: #4fb043; }
.rank-row.rc1 .rank-no { background: #4fb043; }
.rank-row.rc2 { border-left-color: #8cc63f; }
.rank-row.rc2 .rank-no { background: #8cc63f; }
.rank-row.rc3 { border-left-color: #c5d138; }
.rank-row.rc3 .rank-no { background: #c5d138; }
.rank-row.rc4 { border-left-color: #f6d02f; }
.rank-row.rc4 .rank-no { background: #f6d02f; }
.rank-row.rc5 { border-left-color: #f7b62c; }
.rank-row.rc5 .rank-no { background: #f7b62c; }
.rank-row.rc6 { border-left-color: #f28c28; }
.rank-row.rc6 .rank-no { background: #f28c28; }
.rank-row.rc7 { border-left-color: #ec6a2c; }
.rank-row.rc7 .rank-no { background: #ec6a2c; }
.rank-row.rc8 { border-left-color: #e2453a; }
.rank-row.rc8 .rank-no { background: #e2453a; }
.rank-row.rc9 { border-left-color: #d7263d; }
.rank-row.rc9 .rank-no { background: #d7263d; }

/* Store scorecard */
.score-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; margin: .5rem 0 1.5rem; }
.score-card { background: #f7f6f2; color: #16222d; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); border-left: 8px solid #c9d1d8; }
.score-label { color: #5d6c7a; font-size: .85rem; font-weight: 600; }
.score-big { font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.score-sub { color: #5d6c7a; font-size: .88rem; }
.score-sub .good { color: #157a39; font-weight: 600; } .score-sub .bad { color: #b3202f; font-weight: 600; }
.rank-card.rc0, .rank-card.rc1 { border-left-color: #1e9e4a; } .rank-card.rc2, .rank-card.rc3 { border-left-color: #8cc63f; }
.rank-card.rc4, .rank-card.rc5 { border-left-color: #f6d02f; } .rank-card.rc6, .rank-card.rc7 { border-left-color: #f28c28; }
.rank-card.rc8, .rank-card.rc9 { border-left-color: #d7263d; }
.rank-card .rank-no { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
.rank-card.rc0 .rank-no { background: #1e9e4a; }
.rank-card.rc1 .rank-no { background: #4fb043; }
.rank-card.rc2 .rank-no { background: #8cc63f; }
.rank-card.rc3 .rank-no { background: #c5d138; }
.rank-card.rc4 .rank-no { background: #f6d02f; }
.rank-card.rc5 .rank-no { background: #f7b62c; }
.rank-card.rc6 .rank-no { background: #f28c28; }
.rank-card.rc7 .rank-no { background: #ec6a2c; }
.rank-card.rc8 .rank-no { background: #e2453a; }
.rank-card.rc9 .rank-no { background: #d7263d; }
.coach-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.coach h2 { margin: 0 0 .6rem; }
.coach-item { background: #f7f6f2; color: #16222d; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .6rem; }
.coach-good .coach-item { border-left: 6px solid #1e9e4a; }
.coach-work .coach-item { border-left: 6px solid #f28c28; }
.coach-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.coach-item p { margin: .3rem 0 0; font-size: .9rem; color: #2f3d4a; }
.coach-amt { font-weight: 700; white-space: nowrap; }
.coach-basis { font-weight: 500; font-size: .78rem; color: #5d6c7a; margin-left: .3rem; }
.coach-amt.good { color: #157a39; } .coach-amt.bad { color: #b3202f; } .coach-amt.warn { color: #9a5b00; }
.coach-watch { margin-top: 1.25rem; }
.coach-watch .coach-item { border-left: 6px solid #f6d02f; }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .6rem; }

/* ---------- Phones and small tablets ---------- */
.mobile-cols { display: none; }
@media screen and (max-width: 760px) {
  html { font-size: 14px; }
  /* Inputs at 16px stop iPhones from zooming in when a box is tapped. */
  input, select, textarea { font-size: 16px; }

  /* Compact header: brand, logos, and sign-out on one line; menu scrolls sideways. */
  .topbar { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem .6rem; padding: .5rem .75rem; align-items: center; }
  .topbar > * { min-width: 0; }
  .stack > *, .stack label, .filters > * { min-width: 0; }
  input, select, textarea { max-width: 100%; }
  select { width: 100%; }
  .inline-form select { width: auto; }
  .brand { gap: .4rem; }
  .brand-name { display: none; }
  .co-switch { justify-self: start; }
  .co-switch { --logo-h: 20px; }
  .co-btn { padding: .15rem .4rem; }
  .usermenu { margin-left: 0; gap: .5rem; font-size: .9rem; justify-self: end; grid-row: 1; grid-column: 3; }
  .co-switch { grid-row: 1; grid-column: 2; }
  .usermenu > a { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mainnav { grid-column: 1 / -1; flex-wrap: nowrap; margin: 0 -.75rem; padding: 0 .75rem; }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav > a, .mainnav .nav-btn { white-space: nowrap; padding: .45rem .65rem; }
  .nav-menu { min-width: 0; width: min(21rem, calc(100vw - 1rem)); }   /* never wider than the screen */

  main { padding: 1rem .75rem 2rem; }
  h1 { font-size: 1.45rem; }
  .lede { margin-bottom: .9rem; }
  .report-head { gap: .6rem; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1 1 auto; }

  /* Filters stack into a tidy two-column grid. */
  .filters { display: grid; grid-template-columns: 1fr 2fr; gap: .6rem; }
  .filters label { min-width: 0; }
  .filters label select { width: 100%; }
  .filters label:nth-of-type(3), .filters label.check { grid-column: 1 / -1; }
  .filters.compact { grid-template-columns: 1fr; }

  /* Bigger tap targets on the quarter and period strips. */
  .quarter-track .qseg { padding: .45rem .1rem; }
  .period-track { padding: .35rem; gap: 2px; }
  .period-track .seg { padding: .45rem .1rem .35rem; }
  .period-track .seg-num { font-size: .68rem; }

  /* Report: one span at a time, % of sales on request. */
  .mobile-cols { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 .6rem; }
  .mobile-cols .btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .mobile-cols .check { font-size: .9rem; margin-left: auto; }
  .statement.show-per .ytd, .statement.show-ytd .per { display: none; }
  .statement.t12.show-sum .pcol, .statement.t12.show-per .scol:not(.t12-start) { display: none; }
  .statement.t12 .p-start { border-left: 0; }
  .statement:not(.show-psales) .psales { display: none; }
  .statement .ytd-start { border-left: 0; }
  .statement th, .statement td { padding: .4rem .45rem; }
  .statement tbody th.line-col { max-width: 10.5rem; min-width: 8rem; white-space: normal; line-height: 1.25; }
  .statement tr.acct th.line-col { padding-left: .6rem; }
  .table-wrap { max-height: 72vh; }
  .legend { font-size: .8rem; }

  /* Plain tables scroll sideways inside themselves instead of widening the page. */
  .grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .grid th, .grid td { white-space: nowrap; }
  .grid td .co-access li, .grid .memo { white-space: normal; }

  /* Pop-ups fill the screen. */
  .gauges, .gauges.gauges-6 { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .gauges-6 .gauge { grid-column: auto !important; }
  .gauge { padding: .6rem .5rem .7rem; }
  .gauge-value { font-size: 1.1rem; }
  .gauge-svg .g-end { font-size: 13px; }
  .rank-row a { grid-template-columns: 2rem 1fr auto; }
  .coach-cols { grid-template-columns: 1fr; }
  .rank-detail { display: none; }
  .gl-dialog, .ai-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .gl-pop { padding: .9rem .9rem 1.2rem; display: flex; flex-direction: column; min-height: 100%; }
  .gl-dialog .gl-scroll { max-height: none; flex: 1; }
  .gl-facts { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .gl-facts dt { font-size: .72rem; }
  .gl-table .memo { min-width: 12rem; }
  .ai-log { max-height: none; flex: 1; }
  .ai-msg { max-width: 100%; }

  /* Forms use the full width. */
  .narrow, .signin { max-width: none; }
  .signin { margin: 1.5rem auto; }
  .pick-grid { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .actions { gap: .6rem; }
  .inline-form { gap: .3rem; }
}
@media screen and (max-width: 380px) {
  .pick-grid { grid-template-columns: 1fr; }
  .co-switch { --logo-h: 22px; }
}
/* Print button */
.btn-print { display: inline-flex; align-items: center; gap: .4rem; }
.btn-icon { width: 1.1rem; height: 1.1rem; }
.print-stamp { display: none; }
.print-menu { position: relative; display: inline-block; }
.print-menu > summary { list-style: none; cursor: pointer; }
.print-menu > summary::-webkit-details-marker { display: none; }
.print-choices { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; display: flex; flex-direction: column; gap: .3rem; min-width: 12rem;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; padding: .5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.print-choices .btn { justify-content: flex-start; text-align: left; }

/* ---------- Printing on 8.5 x 11 ---------- */
@page { size: letter landscape; margin: .4in .35in; }
@page portrait-page { size: letter portrait; margin: .45in .4in; }
@media print {
  :root[data-printing="portrait"] body { page: portrait-page; }   /* the scorecard and single-span reports print upright */
  /* Period only / Year to Date only (these come after the rule that shows every column) */
  /* Plain black on white, whatever the screen colors. */
  :root, :root[data-theme] { --bg: #fff; --surface: #fff; --ink: #000; --muted: #444; --rule: #bbb; --rule-strong: #777; --sec-bg: #eee; --total-bg: #f3f3f3; --accent-soft: #eee; color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; font-size: 9pt; }
  /* Print the site's own shading even when the browser's "Background graphics" box is off. */
  html, body, .statement, .statement * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .filters, .foot, .btn, .head-actions, .mobile-cols, .quarter-track, .period-track, .track-key,
  .notice, .ai-dialog, .gl-dialog, .skip, dialog { display: none !important; }
  main, main.wide { max-width: none; padding: 0; margin: 0; }
  h1 { font-size: 15pt; margin: 0 0 .1in; }
  h2 { font-size: 11pt; margin: .15in 0 .06in; break-after: avoid; }
  .lede, .all-note, .group-note { font-size: 8.5pt; margin: 0 0 .08in; }
  .report-head { margin: 0; }
  /* Tables use the full page width and repeat their headings on every page. */
  .table-wrap { max-height: none !important; overflow: visible !important; border: 0; box-shadow: none; }
  .statement { width: 100%; font-size: 7.6pt; }
  .statement th, .statement td { padding: 1.8pt 5pt !important; white-space: nowrap; }
  /* Thin lines between columns and rows so the numbers don't run together. */
  .statement td, .statement thead tr:nth-child(2) th { border-left: .5pt solid #cfcfcf; }
  .statement tbody tr td, .statement tbody tr th { border-bottom: .5pt solid #e2e2e2; }
  .statement .ytd-start, .statement .t12-start, .statement .p-start { border-left: 1.2pt solid #888 !important; }
  .statement tr.total td, .statement tr.total th { border-top: .8pt solid #777; }
  .statement tbody th.line-col { max-width: none; white-space: nowrap; text-align: left; }
  .statement tr.sec th { text-align: left; background: #eee !important; }
  .statement thead { display: table-header-group; }
  .statement thead th, .statement tbody th.line-col { position: static !important; background: #fff !important; }
  /* Keep the stripes on paper, in a light tint. */
  .statement tbody tr.zebra td, .statement tbody tr.zebra th.line-col { background: #f1f2f3 !important; }
  :root[data-co="wendys"] .statement tbody tr.zebra td, :root[data-co="wendys"] .statement tbody tr.zebra th.line-col { background: #fbeced !important; }
  :root[data-co="wingstop"] .statement tbody tr.zebra td, :root[data-co="wingstop"] .statement tbody tr.zebra th.line-col { background: #e8f4ec !important; }
  .statement tr { break-inside: avoid; }
  /* Every column prints, even if the phone view was showing one span at a time. */
  .statement .per, .statement .ytd, .statement .psales, .statement .pcol, .statement .scol { display: table-cell !important; }
  .statement.t12 { font-size: 6.6pt; }
  :root[data-print-cols="per"] .statement .ytd, :root[data-print-cols="ytd"] .statement .per { display: none !important; }
  :root[data-print-cols="ytd"] .statement .ytd-start { border-left: 0; }
  :root[data-print-cols="per"] .statement, :root[data-print-cols="ytd"] .statement { font-size: 8.4pt; }
  .good { color: #0b5d2a !important; } .bad { color: #a01c1c !important; }
  .gl-link { text-decoration: none; color: inherit; }
  .band-detail summary { list-style: none; font-size: 10pt; }
  .band-detail summary::-webkit-details-marker { display: none; }
  /* Scorecard: three cards across, then the two columns. */
  .score-top { grid-template-columns: repeat(3, 1fr); gap: .1in; }
  .coach-cols { grid-template-columns: 1fr 1fr; gap: .15in; }
  .score-card, .coach-item { box-shadow: none; break-inside: avoid; }
  .coach-item p { font-size: 8pt; }
  .print-stamp { display: block; font-size: 7.5pt; color: #444; margin: .12in 0 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* The narrowest phones (320–360px): tighter menu names so all four fit without the page sliding sideways. */
@media screen and (max-width: 360px) {
  .mainnav { gap: .1rem; }
  .mainnav > a, .mainnav .nav-btn { padding: .45rem .42rem; font-size: .95rem; }
  .nav-btn { gap: .15rem; }
}

/* ===================== Animations ===================== */
/* 1. Smooth page changes: the page content fades and rises into place; the top bar stays put.
      (Browsers without view transitions simply change pages as before.) */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: vt-out .16s ease-in both; }
::view-transition-new(root) { animation: vt-in .3s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-group(topbar) { animation-duration: .2s; }
/* Switching companies: a plain cross-fade, nothing slides or moves (early.js adds .co-switching). */
html.co-switching::view-transition-old(root) { animation: vt-out .35s ease both; }
html.co-switching::view-transition-new(root) { animation: vt-fade-in .45s ease both; }
html.co-switching::view-transition-group(root), html.co-switching::view-transition-group(topbar) { animation: none; }   /* no position change: this was the "swipe" */
html.co-switching::view-transition-old(topbar) { animation: vt-out .3s ease both; }
html.co-switching::view-transition-new(topbar) { animation: vt-fade-in .3s ease both; }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 2. Launch animation for the installed app (added by app.js once per launch). */
.app-splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #1d3a52;
  animation: splash-out .45s ease-in .95s forwards; }
.app-splash-inner { display: grid; justify-items: center; gap: .9rem; }
.app-splash-inner > img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: splash-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.app-splash-name { color: #fff; font-weight: 700; letter-spacing: .02em; font-size: 1.05rem; opacity: 0;
  animation: splash-fade .4s ease-out .3s forwards; }
.app-splash-bars { display: flex; gap: 6px; }
.app-splash-bars span { display: block; height: 6px; width: 0; border-radius: 3px; animation: splash-bar .45s cubic-bezier(.3, .8, .3, 1) forwards; }
.app-splash-bars span:first-child { background: #b2223a; animation-delay: .35s; }
.app-splash-bars span:last-child { background: #156e3a; animation-delay: .5s; }
@keyframes splash-pop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splash-fade { to { opacity: 1; } }
@keyframes splash-bar { to { width: 44px; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
/* With company logos: they fly in after the bars, then everything fades a little later. */
.app-splash.with-logos { animation-delay: 1.6s; }
.app-splash-logos { position: absolute; left: 0; right: 0; bottom: max(11vh, calc(env(safe-area-inset-bottom, 0px) + 56px));
  display: flex; justify-content: center; align-items: center; gap: 2.2rem; }
.app-splash-logos img { height: 52px; width: auto; opacity: 0; }
.app-splash-logos img.logo-wendys { height: 64px; }
.app-splash-logos .fly-left  { animation: fly-left  .7s cubic-bezier(.2, 1.25, .35, 1) .75s forwards; }
.app-splash-logos .fly-right { animation: fly-right .7s cubic-bezier(.2, 1.25, .35, 1) .85s forwards; }
.app-splash-logos .fly-up    { animation: fly-up    .7s cubic-bezier(.2, 1.3, .35, 1) .75s forwards; }
@keyframes fly-left  { from { opacity: 0; transform: translateX(-60vw) rotate(-10deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fly-right { from { opacity: 0; transform: translateX(60vw) rotate(10deg); }  60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fly-up    { from { opacity: 0; transform: translateY(35vh) scale(.6); }      60% { opacity: 1; } to { opacity: 1; transform: none; } }

/* The welcome's show: under the greeting, the logos fly in (Wingstop flapping its wings) and drop food that
   falls down the screen, turning into money and fading. */
.welcome-fly { display: flex; justify-content: center; align-items: center; gap: 2.4rem; margin-top: .4rem; }
.welcome-fly .splash-slot { position: relative; display: block; }
.welcome-fly .splash-logo { display: block; opacity: 0; position: relative; z-index: 2; }
.welcome-fly img.splash-logo.logo-wendys { height: min(13vh, 104px); width: auto; }
.welcome-fly .splash-ws { position: relative; height: min(9vh, 74px); aspect-ratio: 720 / 249; }
.welcome-fly .splash-ws img { position: absolute; inset: 0; width: 100%; height: 100%; }
.welcome-fly .ws-left  { transform-origin: 37% 28%; animation: flap-l .26s ease-in-out .65s 4; }
.welcome-fly .ws-right { transform-origin: 63% 28%; animation: flap-r .26s ease-in-out .65s 4; }
@keyframes flap-l { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(16deg); } 75% { transform: rotate(-9deg); } }
@keyframes flap-r { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 75% { transform: rotate(9deg); } }
.welcome-fly .fly-left  .splash-logo { animation: fly-left  .7s cubic-bezier(.2, 1.25, .35, 1) .55s forwards; }
.welcome-fly .fly-right .splash-logo { animation: fly-right .7s cubic-bezier(.2, 1.25, .35, 1) .65s forwards; }
.welcome-fly .fly-up    .splash-logo { animation: fly-up    .7s cubic-bezier(.2, 1.3, .35, 1) .55s forwards; }
.splash-drops { position: absolute; left: 0; right: 0; top: 55%; height: 0; pointer-events: none; z-index: 1; }
.drop { position: absolute; top: 0; width: 34px; height: 30px; margin-left: -17px; opacity: 0;
  animation: drop-fall 1.8s cubic-bezier(.4, 0, .75, 1) var(--d) forwards; }
.drop > span { position: absolute; inset: 0; display: grid; place-items: center; }
.drop svg { width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.d-food { animation: drop-food-out .35s ease-in calc(var(--d) + .7s) forwards; }
.d-cash { opacity: 0; transform: scale(.4) rotateY(90deg); animation: drop-cash-in .4s ease-out calc(var(--d) + .75s) forwards; }
.d-cash svg { width: 38px; }
@keyframes drop-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 78% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 62vh) rotate(var(--rot)); } }
@keyframes drop-food-out { to { opacity: 0; transform: scale(.4) rotateY(90deg); } }
@keyframes drop-cash-in { to { opacity: 1; transform: none; } }
.welcome-screen.greet-show .goodbye-text { animation-delay: .1s; }   /* the greeting first, then the logos */

/* Welcome after signing in (added by app.js): white screen, each company logo large, then the page. */
.welcome-screen { position: fixed; inset: 0; z-index: 9998; background: #fff; display: grid; place-items: center;
  animation: welcome-in .35s ease-out both; cursor: pointer; }
.welcome-screen.out { animation: welcome-out .45s ease-in forwards; }
/* Keyframe animations, not transitions: they still play when Windows animations are turned off. */
.welcome-logo { grid-area: 1 / 1; width: min(72vw, 62vh, 620px); height: auto; max-height: 62vh; object-fit: contain; opacity: 0; }
.welcome-logo.wide { width: min(88vw, 900px); }   /* a wide, short logo (Wingstop) can use nearly the full width */
.welcome-logo.show { animation: wl-in .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.welcome-logo.hide { animation: wl-out .35s ease-in forwards; }
@keyframes wl-in { from { opacity: 0; transform: scale(.92); } 50% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes wl-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.04); } }
@keyframes welcome-in { from { opacity: 0; } }
/* Drawn with the page (welcome after signing in): already white on the first frame, no fade-in needed.
   Fail-safe: if the script never runs, it clears itself after a few seconds anyway. */
.welcome-screen.from-start { animation: failsafe-clear 0s 7s forwards; }
@keyframes failsafe-clear { to { opacity: 0; visibility: hidden; } }
/* Goodbye after signing out: the logos, smaller and lighter, and "See you soon", then the sign-in page. */
.welcome-screen.greet { animation: failsafe-clear 0s 5s forwards;
  align-items: start; padding-top: max(14vh, calc(env(safe-area-inset-top, 0px) + 64px)); }   /* welcome and goodbye: near the top, clear of a phone's keyboard */
/* Pages that open with the welcome or goodbye: the top bar isn't drawn as its own layer during the page
   change (it was showing over the white screen for a moment). */
html.intro .topbar { view-transition-name: none; }
.welcome-screen.greet.out { animation: welcome-out .45s ease-in forwards; }   /* the normal fade-out wins over the fail-safe */
.goodbye-inner { display: grid; justify-items: center; gap: 1.1rem; }
.goodbye-logos { display: flex; gap: 2.5rem; align-items: center; justify-content: center; }
.goodbye-logos img { height: min(14vh, 110px); width: auto; max-width: 40vw; object-fit: contain; opacity: 0; animation: bye-logo .6s ease-out .15s forwards; }   /* contain: keeps its shape when the width is limited */
.goodbye-text { margin: 0; font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 600; color: #1d3a52; letter-spacing: .01em; opacity: 0;
  animation: bye-text .6s ease-out .45s forwards; }
@keyframes bye-logo { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: .55; transform: none; } }
@keyframes bye-text { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Fresh launch of the installed app: early.js holds the page on navy until the opening animation covers it. */
html.splash-pending body { background: #1d3a52 !important; }
/* Hidden until the opening animation covers the page; shown after 3 seconds anyway, as a fail-safe. */
html.splash-pending body > *:not(.app-splash) { animation: splash-hold 3s steps(1, end) both; }
@keyframes splash-hold { from { visibility: hidden; } to { visibility: visible; } }

/* Company switch: a very light, ghosted logo fades in and out over the page change. */
.switch-mark { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: flex; justify-content: center; align-items: center; gap: 6vw;
  animation: switch-mark 1.8s ease-in-out forwards; opacity: 0; }
.switch-mark img { width: min(46vw, 52vh, 520px); height: auto; }
.switch-mark img.mark-wingstop { width: min(58vw, 60vh, 660px); }   /* a wide, short logo: a little bigger so it reads as large */
.switch-mark.two img { width: min(32vw, 40vh, 400px); }
.switch-mark.two img.mark-wingstop { width: min(40vw, 46vh, 500px); }
/* A quick, brighter flash (about 45%, richer color), easing back to a faint mark, then gone. Nothing moves. */
@keyframes switch-mark { 0% { opacity: 0; filter: none; } 28% { opacity: .46; filter: brightness(1.12) saturate(1.35); }
  42% { opacity: .3; filter: none; } 72% { opacity: .2; } 100% { opacity: 0; } }
@media screen and (max-width: 760px) { .switch-mark.two { flex-direction: column; gap: 8vh; } .switch-mark img, .switch-mark.two img { width: min(70vw, 34vh); } .switch-mark img.mark-wingstop, .switch-mark.two img.mark-wingstop { width: min(84vw, 40vh); } }
@keyframes welcome-out { to { opacity: 0; visibility: hidden; } }
@media print { .welcome-screen, .switch-mark { display: none !important; } }

/* 4. Menus, panels, and pop-up windows ease open. */
.nav-menu:not([hidden]) { animation: menu-in .18s cubic-bezier(.2, .7, .2, 1); transform-origin: top left; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
details.upload-panel[open] > :not(summary), details.col-picker[open] > :not(summary), details.close-panel[open] > :not(summary),
details.al-changes[open] > :not(summary), details.band-detail[open] > :not(summary), details.print-menu[open] > :not(summary) {
  animation: panel-in .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } }
dialog[open] { animation: dialog-in .22s cubic-bezier(.2, .8, .2, 1); }
dialog[open]::backdrop { animation: backdrop-in .22s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes backdrop-in { from { opacity: 0; } }

@media print {
  .app-splash { display: none !important; }
  .nav-menu, details > *, dialog { animation: none !important; }
}

/* U.S. highway numbers show once zoomed in a little (interstate numbers always show). */
.map-zoom-wrap .store-map .road-lbl-us, [data-map-zoom] .store-map .road-lbl-us { display: none; }
[data-map-zoom].zoom-mid .store-map .road-lbl-us { display: inline; }

/* Upload finished: a green check draws itself in the progress window. */
.pd-check { display: flex; justify-content: center; margin: .2rem 0 .4rem; }
.pd-check svg { width: 56px; height: 56px; fill: none; stroke: #1e9e4a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pd-check circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: check-draw .55s ease-out forwards; }
.pd-check path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: check-draw .35s ease-out .45s forwards; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
html.no-anim .pd-check circle, html.no-anim .pd-check path { stroke-dashoffset: 0 !important; }

/* Staggered entrances (app.js sets each one's delay). "backwards" so hover effects work once they've landed. */
.cal-day.in-wave { animation: cal-in .4s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes cal-in { from { opacity: 0; transform: scale(.55); } }
.rank-row.in-rise { animation: row-rise .8s cubic-bezier(.2, .9, .3, 1.05) backwards; }   /* Store Ranking: fly in worst to best */
@keyframes row-rise { from { opacity: 0; transform: translate(-36px, 22px) scale(.97); } 60% { opacity: 1; } }
.store-map .map-badge.in-drop { animation: pin-drop .55s cubic-bezier(.3, 1.35, .5, 1) backwards; }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-36px) scale(.8); } 60% { opacity: 1; } }
.al-card.in-deal { animation: deal-in .5s cubic-bezier(.2, .9, .3, 1) backwards; }
@keyframes deal-in { from { opacity: 0; transform: translate(-18px, -26px) rotate(-4deg) scale(.96); } }
@media print { .cal-day.in-wave, .rank-row.in-rise, .al-card.in-deal { animation: none !important; } }

/* Scorecard reveal (see app.js): the coaching starts hidden and each item rises in as it's shown. If the script
   never runs, everything appears by itself after a few seconds. */
html.sc-reveal .coach h2, html.sc-reveal .coach .coach-item, html.sc-reveal .coach p.muted { opacity: 0; animation: sc-failsafe 0s 6s forwards; }
/* Once the script is running it controls the timing, so the fail-safe is switched off. */
html.sc-reveal.sc-running .coach h2, html.sc-reveal.sc-running .coach .coach-item, html.sc-reveal.sc-running .coach p.muted { animation: none; }
html.sc-reveal.sc-running .coach .sc-in.sc-in { animation: sc-in .6s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes sc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sc-failsafe { to { opacity: 1; } }
@media print { html.sc-reveal .coach h2, html.sc-reveal .coach .coach-item, html.sc-reveal .coach p.muted { opacity: 1 !important; animation: none !important; } }

/* Individual animations turned off (Your Account > Animations; the page gets .na-<key>). The rest are handled in app.js. */
html.na-pages::view-transition-group(*), html.na-pages::view-transition-old(*), html.na-pages::view-transition-new(*) { animation: none !important; }
html.na-menus .nav-menu:not([hidden]), html.na-menus details[open] > :not(summary), html.na-menus dialog[open], html.na-menus dialog[open]::backdrop { animation: none !important; }
html.na-pulse .map-pulse { display: none !important; }
.anim-choices { display: grid; gap: .25rem; margin: .2rem 0 .4rem; }

/* Animations turned off (Your Account > Animations): page changes are instant and nothing moves, except
   the app's opening animation, the welcome after signing in, and the moving bar that shows an upload is
   still working. */
html.no-anim::view-transition-group(*), html.no-anim::view-transition-old(*), html.no-anim::view-transition-new(*) { animation: none !important; }
html.no-anim:not(.splash-pending) *:not(.pbar-fill):not(.app-splash):not(.app-splash *):not(.welcome-screen):not(.welcome-screen *),
html.no-anim *::before, html.no-anim *::after { animation: none !important; transition: none !important; }