/* admin-style-sticker.css — the "Sticker" styling for the gold brand.
 *
 * LOAD IT LAST, after admin.css and admin-brand-gold.css, the same way the gold overlay loads
 * after admin.css. It redefines no colour the brand owns: every fill, ink and status pair still
 * comes from admin-brand-gold.css, light and dark. What this file changes is SHAPE — edges,
 * offset shadows, radii, weights — plus a handful of sticker-only tokens.
 *
 *     wwwroot/css/admin.css                (unchanged)
 *     wwwroot/css/admin-brand-gold.css     (unchanged)
 *     wwwroot/css/admin-style-sticker.css  (this file, loaded third)
 *
 * INERT UNTIL SWITCHED ON. Every rule is scoped to
 *
 *     <html data-brand="gold" data-style="sticker">
 *
 * so adding the file and the <link> changes nothing on screen. Setting the attribute is the
 * switch, and removing it is the rollback.
 *
 * Specificity: every selector starts :root[data-brand="gold"][data-style="sticker"], which is
 * (0,3,0) before the component. That outranks the gold overlay's :root[data-brand="gold"] .x
 * (0,3,0 → ours is 0,4,0 with the class) and admin.css outright, including its :hover rules,
 * and it outranks page-local <style> sections written with a single class. Nothing here uses
 * !important.
 *
 * Dark mode rides the existing mechanism: [data-theme="dark"] when chosen, and
 * prefers-color-scheme when nobody has chosen. Only the sticker tokens are restated for dark;
 * the brand's own dark palette is untouched.
 */

/* ------------------------------------------------------------ tokens, light ------------ */
:root[data-brand="gold"][data-style="sticker"]{
  --stk-edge:var(--edge);              /* #1a1a1a from the gold brand */
  --stk-edge-w:2px;
  --stk-drop:#1a1a1a;                  /* the offset shadow */
  --stk-control-edge:#1a1a1a;          /* fields: 2px ink, 17.4:1 on white */
  --stk-btn:#ffffff;                   /* resting button fill */
  --stk-input:#ffffff;
  --stk-tint:#fff8e6;                  /* a highlighted row, a ticked store */
  --stk-dot:rgba(26,26,26,.07);        /* the dot grid on the gold field */
  --stk-on-bg:#1a1a1a;                 /* a selected tab or filter chip */
  --stk-on-ink:#ffffff;
  --stk-n-on-bg:#ffc72c;               /* the count inside a selected tab */
  --stk-n-on-ink:#1a1a1a;
  --stk-nav-edge:#1a1a1a;              /* current page pill on the bar */
  --stk-who-bg:#1a1a1a;                /* the account row in the phone menu */
  --stk-who-ink:#ffffff;
  /* Status stickers: pastel fill, ink text, ink edge. The same in both schemes — they are
     stickers, not surfaces. #1a1a1a on each is 8:1 or better (lowest: the dark scheme's plain
     #c2ae8c at 8.1:1). */
  --stk-sticker-ink:#1a1a1a;
  --stk-st-plain:#ffffff;
  --stk-st-ok:#bfe8c6;
  --stk-st-warn:#ffc72c;
  --stk-st-bad:#ffb3a6;
  --stk-tilt:-2deg;                    /* set to 0deg to straighten every sticker at once */
}

/* ------------------------------------------------------------- tokens, dark ------------ */
/* The gold brand's dark scheme edges cards in full-strength gold (--edge:#ffc72c). A black
   offset shadow would vanish on #17120a, so the drop is a dark gold instead. */
:root[data-brand="gold"][data-style="sticker"][data-theme="dark"]{
  --stk-drop:#6b4f10;
  --stk-control-edge:#8a7440;          /* 4.0:1 on the #1b1610 field, 3.7:1 on a #231c11 panel */
  --stk-btn:#302614;
  --stk-input:#1b1610;
  --stk-tint:#2e2415;
  --stk-dot:rgba(255,199,44,.07);
  --stk-on-bg:#ffc72c;
  --stk-on-ink:#1a1a1a;
  --stk-n-on-bg:#1a1a1a;
  --stk-n-on-ink:#ffc72c;
  --stk-nav-edge:#ffc72c;
  --stk-who-bg:#ffc72c;
  --stk-who-ink:#1a1a1a;
  --stk-st-plain:#c2ae8c;
}
@media (prefers-color-scheme: dark){
  :root[data-brand="gold"][data-style="sticker"]:not([data-theme]){
    --stk-drop:#6b4f10;
    --stk-control-edge:#8a7440;
    --stk-btn:#302614;
    --stk-input:#1b1610;
    --stk-tint:#2e2415;
    --stk-dot:rgba(255,199,44,.07);
    --stk-on-bg:#ffc72c;
    --stk-on-ink:#1a1a1a;
    --stk-n-on-bg:#1a1a1a;
    --stk-n-on-ink:#ffc72c;
    --stk-nav-edge:#ffc72c;
    --stk-who-bg:#ffc72c;
    --stk-who-ink:#1a1a1a;
    --stk-st-plain:#c2ae8c;
  }
}

/* ------------------------------------------------------------------ the field ---------- */
/* The dot grid. Fixed attachment so the sticky list head and editor strip, which paint their
   own background to stop rows showing through, line up with the page behind them. iOS
   ignores `fixed` and scrolls it instead; the dots then drift by a few pixels under a sticky
   strip, which is the whole of the cost. */
:root[data-brand="gold"][data-style="sticker"] body,
:root[data-brand="gold"][data-style="sticker"] .list-head,
:root[data-brand="gold"][data-style="sticker"] .list-foot,
:root[data-brand="gold"][data-style="sticker"] .editor > .page-head{
  background-color:var(--bg);
  background-image:radial-gradient(var(--stk-dot) 1.2px,transparent 1.3px);
  background-size:18px 18px;
  background-attachment:fixed;
}
/* Page titles only. A bare `h1` would also reach the error and outage pages' .status h1, the
   sign-in mark and .auth-card, which size their own. */
:root[data-brand="gold"][data-style="sticker"] .page-head h1{font-size:clamp(30px,4.2vw,46px);line-height:1;letter-spacing:-.02em}
:root[data-brand="gold"][data-style="sticker"] .page-head{margin:10px 0 22px}

/* ---------------------------------------------------------------- the top bar ---------- */
:root[data-brand="gold"][data-style="sticker"] .topbar{border-bottom:3px solid var(--stk-nav-edge)}
:root[data-brand="gold"][data-style="sticker"] .nav a{border-radius:var(--r-pill);font-weight:700;
  border:2px solid transparent}
:root[data-brand="gold"][data-style="sticker"] .nav a.active{background:#ffc72c;color:#1a1a1a;
  border-color:var(--stk-nav-edge);box-shadow:2px 2px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .acct-btn{border-radius:var(--r-pill)}
:root[data-brand="gold"][data-style="sticker"] .acct-menu{border:var(--stk-edge-w) solid var(--stk-edge);
  border-radius:14px;box-shadow:4px 4px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .switch-track{border:2px solid var(--stk-nav-edge)}
/* The menu button only shows under 720px (admin.css). Styling it here costs nothing wider. */
:root[data-brand="gold"][data-style="sticker"] .menu-btn{background:#ffc72c;color:#1a1a1a;
  border:2px solid var(--stk-nav-edge);border-radius:12px;box-shadow:2px 2px 0 var(--stk-drop)}

/* ------------------------------------------------------------ cards and rows ----------- */
:root[data-brand="gold"][data-style="sticker"] .card,
:root[data-brand="gold"][data-style="sticker"] .tpl-card,
:root[data-brand="gold"][data-style="sticker"] .lib-item,
:root[data-brand="gold"][data-style="sticker"] .lib-add,
:root[data-brand="gold"][data-style="sticker"] .run-item,
:root[data-brand="gold"][data-style="sticker"] .auth-card,
:root[data-brand="gold"][data-style="sticker"] .grid-wrap{
  border:var(--stk-edge-w) solid var(--stk-edge);
  border-radius:var(--r-card);
  box-shadow:4px 4px 0 var(--stk-drop);
}
:root[data-brand="gold"][data-style="sticker"] .card:hover,
:root[data-brand="gold"][data-style="sticker"] .lib-curate .lib-item:hover{border-color:var(--stk-edge)}
:root[data-brand="gold"][data-style="sticker"] .grid-wrap{background:var(--panel);padding:6px 8px}
:root[data-brand="gold"][data-style="sticker"] .grid tbody tr:hover{background:var(--stk-tint)}
:root[data-brand="gold"][data-style="sticker"] .tpl-card:hover,
:root[data-brand="gold"][data-style="sticker"] .tpl-card:focus{border-color:var(--stk-edge);
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .lib-item:hover,
:root[data-brand="gold"][data-style="sticker"] .lib-item:focus{border-color:var(--stk-edge);
  transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--stk-drop)}
/* admin.css draws focus on these as an accent border with the outline removed; the edge above
   replaced that border, so focus gets the same ring buttons have. */
:root[data-brand="gold"][data-style="sticker"] .tpl-card:focus-visible,
:root[data-brand="gold"][data-style="sticker"] .lib-item:focus-visible,
:root[data-brand="gold"][data-style="sticker"] .tab:focus-visible,
:root[data-brand="gold"][data-style="sticker"] .chip-btn:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
:root[data-brand="gold"][data-style="sticker"] .tpl-shot{border-bottom:var(--stk-edge-w) solid var(--stk-edge)}
:root[data-brand="gold"][data-style="sticker"] .tpl-use{border-top:2px dashed var(--line)}
:root[data-brand="gold"][data-style="sticker"] .lib-art{border-radius:10px}
:root[data-brand="gold"][data-style="sticker"] .preview-wrap{border:var(--stk-edge-w) solid var(--stk-edge);
  border-radius:14px}
:root[data-brand="gold"][data-style="sticker"] .empty{border:2px dashed var(--stk-control-edge);border-radius:14px}

/* The running order. The position bubble gets an edge so it reads as a sticker on the card. */
:root[data-brand="gold"][data-style="sticker"] .run-item{padding:10px 14px;margin-bottom:12px}
:root[data-brand="gold"][data-style="sticker"] .run-item .pos{min-width:30px;height:30px;
  font-size:13px;border:2px solid var(--stk-edge)}
:root[data-brand="gold"][data-style="sticker"] .run-item.dragging{opacity:.9;border-color:var(--accent);
  transform:rotate(-1deg);box-shadow:8px 8px 0 var(--stk-drop)}

/* ---------------------------------------------------------------- buttons ------------- */
:root[data-brand="gold"][data-style="sticker"] .btn{
  background:var(--stk-btn);color:var(--text);
  border:var(--stk-edge-w) solid var(--stk-edge);
  border-radius:12px;box-shadow:3px 3px 0 var(--stk-drop);
  transition:transform .06s ease,box-shadow .06s ease}
:root[data-brand="gold"][data-style="sticker"] .btn:hover{background:var(--hover);border-color:var(--stk-edge)}
/* Pressed: the button moves into its shadow. */
:root[data-brand="gold"][data-style="sticker"] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .btn:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
:root[data-brand="gold"][data-style="sticker"] .btn.sm{border-radius:10px;box-shadow:2px 2px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .btn.primary,
:root[data-brand="gold"][data-style="sticker"] .btn.primary:hover{background:var(--accent);color:var(--on-accent);border-color:var(--stk-edge)}
/* Danger stays bordered rather than filled, as admin.css intends: a filled button beside a plain
   Cancel reads as the recommended one. Only the ink changes — admin.css writes .btn.sm.danger
   as #ff8fae, a pink chosen for the old dark scheme and about 2.0:1 on the light brand's cream.
   --bad-ink reads in both schemes. */
:root[data-brand="gold"][data-style="sticker"] .btn.danger,
:root[data-brand="gold"][data-style="sticker"] .btn.sm.danger{background:var(--stk-btn);color:var(--bad-ink);border-color:var(--stk-edge)}
/* The full-screen previews' Close is the same red on every skin (admin.css), matching the red
   corner ×. The generic .btn rule above would otherwise turn it into a resting button. */
:root[data-brand="gold"][data-style="sticker"] .btn.preview-close{background:#c8102e;color:#fff;border-color:var(--stk-edge)}
:root[data-brand="gold"][data-style="sticker"] .btn.preview-close:hover{background:#a50d26;color:#fff;border-color:var(--stk-edge)}
/* The error and outage pages' secondary action is a text link dressed as a button. Keep it one. */
:root[data-brand="gold"][data-style="sticker"] .status-actions .quiet,
:root[data-brand="gold"][data-style="sticker"] .status-actions .quiet:hover,
:root[data-brand="gold"][data-style="sticker"] .status-actions .quiet:active{background:transparent;border-color:transparent;box-shadow:none;
  transform:none;text-decoration:underline;color:var(--page-muted)}
:root[data-brand="gold"][data-style="sticker"] .status-actions .quiet:hover{color:var(--page-text)}
:root[data-brand="gold"][data-style="sticker"] .btn:disabled,
:root[data-brand="gold"][data-style="sticker"] .btn[disabled]{box-shadow:none;opacity:.55;transform:none}
@media (prefers-reduced-motion: reduce){
  :root[data-brand="gold"][data-style="sticker"] .btn,
  :root[data-brand="gold"][data-style="sticker"] .tpl-card,
  :root[data-brand="gold"][data-style="sticker"] .lib-item{transition:none}
  :root[data-brand="gold"][data-style="sticker"] .btn:active,
  :root[data-brand="gold"][data-style="sticker"] .tpl-card:hover,
  :root[data-brand="gold"][data-style="sticker"] .lib-item:hover{transform:none}
}

/* ------------------------------------------------------------------ fields ------------ */
:root[data-brand="gold"][data-style="sticker"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root[data-brand="gold"][data-style="sticker"] select,
:root[data-brand="gold"][data-style="sticker"] textarea{
  background:var(--stk-input);
  border:2px solid var(--stk-control-edge);
  border-radius:10px}
:root[data-brand="gold"][data-style="sticker"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
:root[data-brand="gold"][data-style="sticker"] select:focus,
:root[data-brand="gold"][data-style="sticker"] textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--stk-control-edge);
  box-shadow:3px 3px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .field label{color:var(--text);font-weight:700}
/* Templates: the category picker is written to read as part of its sentence (the page's own
   <style>), borderless until pointed at. The field rule above outranks it, so restate it. */
:root[data-brand="gold"][data-style="sticker"] .tpl-cat select{background:transparent;border:1px solid transparent;border-radius:5px}
:root[data-brand="gold"][data-style="sticker"] .tpl-cat select:hover,
:root[data-brand="gold"][data-style="sticker"] .tpl-cat select:focus{border-color:var(--line);background:var(--btn);box-shadow:none}
:root[data-brand="gold"][data-style="sticker"] .ql-snow.ql-toolbar.cms-toolbar,
:root[data-brand="gold"][data-style="sticker"] .ql-container.ql-snow{border:2px solid var(--stk-control-edge)}
:root[data-brand="gold"][data-style="sticker"] .ql-container.ql-snow{border-top:0}
/* Ticked restaurants: a sticker chip that fills when ticked. :has() is progressive — a browser
   without it shows the plain chip with the native tick, which is what it shows today. */
:root[data-brand="gold"][data-style="sticker"] .stores .chk,
:root[data-brand="gold"][data-style="sticker"] .hold-video{
  background:var(--stk-btn);border:2px solid var(--stk-control-edge);border-radius:10px;font-weight:700}
:root[data-brand="gold"][data-style="sticker"] .stores .chk:has(input:checked){
  background:var(--stk-tint);border-color:var(--stk-edge);box-shadow:2px 2px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .media-thumb{border:2px solid var(--stk-edge)}

/* ------------------------------------------------------- tabs, filters, chips --------- */
:root[data-brand="gold"][data-style="sticker"] .tabs{border-bottom:0;gap:8px;padding:2px 4px 8px 0}
:root[data-brand="gold"][data-style="sticker"] .tab{
  background:var(--stk-btn);color:var(--text);font-weight:700;
  border:2px solid var(--stk-edge);border-radius:var(--r-pill);
  box-shadow:2px 2px 0 var(--stk-drop);padding:7px 14px;white-space:nowrap}
:root[data-brand="gold"][data-style="sticker"] .tab:hover{background:var(--hover);color:var(--text)}
:root[data-brand="gold"][data-style="sticker"] .tab.is-on{background:var(--stk-on-bg);color:var(--stk-on-ink);
  border-color:var(--stk-edge)}
:root[data-brand="gold"][data-style="sticker"] .tab .n{background:var(--stk-tint);color:var(--text);font-weight:700}
:root[data-brand="gold"][data-style="sticker"] .tab.is-on .n{background:var(--stk-n-on-bg);color:var(--stk-n-on-ink)}
:root[data-brand="gold"][data-style="sticker"] .chip-btn{
  background:var(--stk-btn);color:var(--text);font-weight:700;
  border:2px solid var(--stk-edge);box-shadow:2px 2px 0 var(--stk-drop)}
:root[data-brand="gold"][data-style="sticker"] .chip-btn.is-on{background:var(--stk-on-bg);color:var(--stk-on-ink);border-color:var(--stk-edge)}
/* Small labels — the fields a template asks for, a schedule note. Tags, not stickers. */
:root[data-brand="gold"][data-style="sticker"] .chip,
:root[data-brand="gold"][data-style="sticker"] .sched-chip{
  background:var(--stk-btn);color:var(--text);border:1.5px solid var(--stk-control-edge);border-radius:6px}
:root[data-brand="gold"][data-style="sticker"] .chips .chip{border:2px solid var(--stk-control-edge);border-radius:var(--r-pill)}
/* .run-title is a flex column, so a schedule note stretched to the full width of the row. That
   was true before this file too; the edge given to it above just made it visible. */
:root[data-brand="gold"][data-style="sticker"] .run-title .sched-chip{align-self:flex-start;margin-left:0;margin-top:3px}

/* ---------------------------------------------------------- status stickers ----------- */
:root[data-brand="gold"][data-style="sticker"] .badge,
:root[data-brand="gold"][data-style="sticker"] .pill{
  background:var(--stk-st-plain);color:var(--stk-sticker-ink);
  border:2px solid var(--stk-sticker-ink);border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;transform:rotate(var(--stk-tilt))}
:root[data-brand="gold"][data-style="sticker"] .badge.pub,
:root[data-brand="gold"][data-style="sticker"] .badge.ok,
:root[data-brand="gold"][data-style="sticker"] .pill.ok{background:var(--stk-st-ok);color:var(--stk-sticker-ink)}
:root[data-brand="gold"][data-style="sticker"] .badge.warn,
:root[data-brand="gold"][data-style="sticker"] .pill.warn{background:var(--stk-st-warn);color:var(--stk-sticker-ink)}
:root[data-brand="gold"][data-style="sticker"] .badge.rej,
:root[data-brand="gold"][data-style="sticker"] .badge.bad,
:root[data-brand="gold"][data-style="sticker"] .pill.bad{background:var(--stk-st-bad);color:var(--stk-sticker-ink)}

/* -------------------------------------------------------- messages and dialogs -------- */
:root[data-brand="gold"][data-style="sticker"] .flash,
:root[data-brand="gold"][data-style="sticker"] .err,
:root[data-brand="gold"][data-style="sticker"] .notice{
  border:2px solid var(--stk-edge);border-radius:14px;box-shadow:3px 3px 0 var(--stk-drop);font-weight:700}
:root[data-brand="gold"][data-style="sticker"] .confirm{
  border:2px solid var(--stk-edge);border-radius:var(--r-card);box-shadow:6px 6px 0 var(--stk-drop)}

/* -------------------------------------------------------------- phone --------------- */
@media (max-width:719px){
  /* The menu becomes a stack of sticker buttons on the page colour rather than a strip of
     the bar. Same markup and the same toggle in admin.js; only its clothes change. */
  /* Scrolls inside the screen: with every link a webmaster sees (twelve, plus Password, Sign out
     and the account row) the stack is taller than a phone, and the menu hangs from the sticky
     bar, so the page behind cannot scroll it into view. 64px is the bar's height here. nowrap
     because admin.css lets .nav wrap, and a capped column would wrap into a second column. */
  :root[data-brand="gold"][data-style="sticker"] .nav{background:var(--bg);gap:8px;padding:12px 14px 16px;
    border-bottom:3px solid var(--stk-nav-edge);
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);
    flex-wrap:nowrap;overflow-y:auto;overscroll-behavior:contain}
  :root[data-brand="gold"][data-style="sticker"] .nav a{
    background:var(--panel);color:var(--text);font-size:16px;min-height:48px;padding:8px 16px;
    border:2px solid var(--stk-edge);border-radius:16px;box-shadow:3px 3px 0 var(--stk-drop)}
  :root[data-brand="gold"][data-style="sticker"] .nav a:hover{background:var(--hover);color:var(--text)}
  :root[data-brand="gold"][data-style="sticker"] .nav a.active{background:var(--accent);color:var(--on-accent);
    border-color:var(--stk-edge)}
  :root[data-brand="gold"][data-style="sticker"] .nav .whoami{
    background:var(--stk-who-bg);color:var(--stk-who-ink);border:2px solid var(--stk-edge);
    border-radius:16px;margin-top:6px}
  :root[data-brand="gold"][data-style="sticker"] .nav .whoami .switch{color:var(--stk-who-ink)}
  :root[data-brand="gold"][data-style="sticker"] .nav .whoami .switch-track{border-color:var(--stk-who-ink)}

  /* Tabs scroll sideways instead of wrapping onto three rows. The bottom padding keeps the
     offset shadow inside the scroller, which would otherwise clip it. */
  :root[data-brand="gold"][data-style="sticker"] .tabs{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:8px;margin-right:-12px}
  :root[data-brand="gold"][data-style="sticker"] .tabs::-webkit-scrollbar{display:none}

  /* New post floats bottom-right on the Posts list. The link is the one already in the page
     head, pinned — no markup change, and the header copy is not duplicated. z-index 25 keeps
     it under the open menu, which lives in the sticky top bar's stacking context at 30. */
  :root[data-brand="gold"][data-style="sticker"] .page-head > a.btn.primary[href="/Pages/New"]{
    position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:25;
    min-height:56px;padding:14px 22px;font-size:16px;box-shadow:4px 4px 0 var(--stk-drop)}
  /* Room under the last post so the button never covers its Edit. */
  :root[data-brand="gold"][data-style="sticker"] .container:has(.page-head > a.btn.primary[href="/Pages/New"]):not(:has(.list-foot)){
    padding-bottom:112px}
  /* With more than one page of posts the sticky pager (.list-foot) holds the bottom edge. The
     button sits above it, and the room goes above the pager instead, so neither the pager's Next
     nor the last post is covered — scrolled to the end or not. */
  :root[data-brand="gold"][data-style="sticker"] .container:has(.list-foot) .page-head > a.btn.primary[href="/Pages/New"]{
    bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  :root[data-brand="gold"][data-style="sticker"] .container:has(.list-foot):has(.page-head > a.btn.primary[href="/Pages/New"]) .list-scroll{
    padding-bottom:84px}
}