/* Look-only polish layer [Jared Nov 3: 'improve the UI while you're rebuilding'; 'a little cheesy in some areas, like the packing station'].
   Loaded after the page's own <style>, so it only restyles: nothing is moved, hidden or renamed, and every number stays.
   Hand-written (not build output). Remove the <link> to polish.css in tools/build-page.mjs to undo all of it.
   html.tablet = ?view=count|clock|log (set by the boot script); html.v-<view> = the view. */

:root { --focus: 0 0 0 3px rgba(59,110,165,.28); --soft-shadow: 0 1px 2px rgba(42,31,23,.06), 0 2px 8px rgba(42,31,23,.05); }

/* ---------- everywhere: calmer surfaces, clear focus, steady type ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, .rbtn, .tile, a.tile { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s; }
button:focus-visible, a:focus-visible, .tile:focus-visible { outline: none; box-shadow: var(--focus) !important; }
.tile { box-shadow: var(--soft-shadow); }
@media (hover: hover) { .tile:hover { border-color: var(--line2); box-shadow: 0 2px 4px rgba(42,31,23,.07), 0 8px 20px rgba(42,31,23,.08); } }
.station, .ord, .sb, .role, .witem-card, .stat, .lt-tot div { box-shadow: var(--soft-shadow); }
.rbtn { font-weight: 650; letter-spacing: .01em; }
.rbtn.ghost { border: 1px solid #b9cde2; background: #fff; }
.pill, .ts-pill, .chip { letter-spacing: .01em; }
table.lt, table.team, table.pt { border-radius: 12px; overflow: hidden; }
.links a { background: var(--card); }

/* Scoreboard button: a plain outlined button instead of a yellow game token */
.bp-btn { background: var(--card); color: var(--ink); border: 1px solid var(--line2); box-shadow: var(--soft-shadow);
  font: 650 16px var(--sans); padding: 10px 16px; border-radius: 12px; }
.bp-btn.sm { font-size: 14px; padding: 6px 12px; }

/* ---------- station tablets (counters, Label Station, Time Clock, My Hours) ---------- */
html.tablet header { padding: 10px 16px 12px; }
html.tablet h1 { font-size: 20px; }
html.tablet main { max-width: 860px; }

/* top: station name, who is working, today's numbers */
.cn-st { font: 650 28px var(--serif); letter-spacing: -.01em; }
.cn-who { color: var(--ink2); }
.cn-who b { color: var(--ink); font-weight: 700; }
.cn-who button { font: 650 17px var(--sans); border-radius: 12px; }
.cn-who button.done { background: var(--card); color: var(--ink2); border: 1px solid var(--line2); padding: 9px 14px; margin-left: 10px; box-shadow: var(--soft-shadow); }
.cn-nums div { border-radius: 12px; box-shadow: var(--soft-shadow); min-width: 100px; }
.cn-nums b { font-weight: 600; letter-spacing: -.02em; }
.cn-nums span { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 600; color: var(--muted); }

/* the 'to confirm' box: solid and quiet, not a dashed coupon */
.cn-pend { background: var(--card); border: 1px solid var(--line2); border-left: 6px solid var(--brass); border-radius: 14px; box-shadow: var(--soft-shadow); }
.cn-pend .ln { font-weight: 650; }
.cn-pend .tot { border-top: 1px solid var(--line2); font-weight: 750; }
.cn-empty { color: var(--muted); }

/* CONFIRM / Cancel and the count buttons */
.cn-acts button { font-weight: 750; letter-spacing: .04em; border-radius: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.cn-ok { background: #2f6b3f; }
.cn-x { background: var(--card) !important; color: var(--ink2) !important; border: 1px solid var(--line2) !important; box-shadow: none !important; }
.cn-btns button { font-weight: 650; border: 1px solid var(--line2); background: var(--card); box-shadow: var(--soft-shadow); }
.cn-btns button:active { background: var(--sage-bg); border-color: var(--sage); }
.cn-foot { color: var(--muted); }
#cnSplit, #cnLabels { border-radius: 12px; }

/* Label Station panel: one clean white card, status shown by a colored edge */
#cnLbl { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--soft-shadow); padding: 14px 16px !important; }
#cnLbl b[style*="font-size:20px"] { font: 650 20px var(--serif) !important; }
#lblTog { font: 700 16px var(--sans) !important; border-radius: 999px !important; padding: 9px 16px !important; }
#lblTog[style*="#1d7a3a"] { background: #2f6b3f !important; }
#lblQ > div[style*="border-radius:8px"] { background: #fff !important; border: 1px solid var(--line); border-left: 5px solid var(--line2); border-radius: 10px !important; padding: 9px 12px !important; }
#lblQ > div[style*="#e8f1ea"] { border-left-color: var(--sage) !important; }
#lblQ > div[style*="#eef2f8"] { border-left-color: var(--blue) !important; }
#lblQ > div[style*="#fff3c4"] { border-left-color: var(--amber) !important; }
#lblQ > div[style*="#fdecea"] { border-left-color: var(--red) !important; }
#lblQ button, #lblOut button, #cnLbl button { font-weight: 700 !important; letter-spacing: .02em; border-radius: 10px !important; }
#lblQ button[style*="#6b645c"], #cnLbl button[style*="background:#6b645c"] { background: var(--card) !important; color: var(--ink2) !important; border: 1px solid var(--line2) !important; }
#lblOut > div { border: 1px solid var(--line); }
#lblAskIn { border-radius: 12px !important; }

/* Time Clock keypad */
.ck-pad button { font-weight: 600; border-radius: 14px; box-shadow: var(--soft-shadow); }
.ck-pad button:active { background: var(--sage-bg); border-color: var(--sage); }
.ck-dots i { border-width: 2px; }
.ck-acts button { font-weight: 700; letter-spacing: .01em; border-radius: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.ck-name { font-weight: 650; }

/* My Hours job buttons */
.wl-jobs button, .wl-col button { font-weight: 700; border-radius: 12px; }
.wl-jobs button { background: var(--card); border: 1px solid var(--line2); box-shadow: var(--soft-shadow); }
.wl-jobs button.on { background: #2f6b3f; border-color: #2f6b3f; }
.wl-tal button { font-weight: 700; border-radius: 12px; }
.wl-tal button:not(.minus) { background: #2f6b3f; }

/* Bigger targets on the shop tablets (iPad / Samsung, 700px and up) */
@media (min-width: 700px) {
  html.v-clock .ck-wrap { max-width: 580px; }
  html.v-clock .ck-pad { gap: 14px; }
  html.v-clock .ck-pad button { padding: 26px 0; font-size: 34px; }
  html.v-clock .ck-acts button { padding: 26px; }
  html.v-count .cn-btns button { min-height: 68px; }
}

/* Station pages in the main hub's colors [Jared Nov 3: 'I like the main page of the hub... some of the stations look very cheesy']:
   walnut = main action (like the hub's Save bar), the hub's sage = go / selected / good, cards like the home tiles. Cartoon cheers untouched. */
html.tablet .rbtn { background: var(--walnut); border-radius: 14px; box-shadow: 0 2px 0 rgba(42,31,23,.18); }
html.tablet .rbtn.ghost { background: var(--card); color: var(--walnut2); border: 1px solid var(--line2); box-shadow: var(--soft-shadow); }
html.tablet #wlCatchOpen { background: var(--sage) !important; }
html.tablet a { color: var(--walnut2); }
.cn-ok, .ck-acts .in, .ck-fbb .in { background: var(--sage) !important; }
#lblTog[style*="#1d7a3a"] { background: var(--sage) !important; }
.wl-jobs button.on { background: var(--walnut); border-color: var(--walnut); color: #f6efe6; }
.wl-tal button:not(.minus) { background: var(--sage); }
html.tablet .cn-btns button, html.tablet .wl-jobs button:not(.on) { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
html.tablet #wlForm > div, html.tablet .cn-pend { border-radius: var(--radius); box-shadow: var(--shadow); }
html.tablet #wlForm > div { background: var(--card) !important; border: 1px solid var(--line); }
html.tablet .cn-who button.done, html.tablet .bp-btn { color: var(--walnut2); }

/* Color rule [Jared Nov 4: 'anything bad is red, anything good is green', darker green; style C picked] */
:root { --good: #2f6b3f; --bad: #b3261e; }
html.tablet .rbtn:not(.ghost), .cn-ok, .ck-acts .in, .ck-fbb .in, .wl-tal button:not(.minus), #lblTog[style*="#1d7a3a"] { background: var(--good) !important; }
html.tablet #wlCatchOpen { background: var(--good) !important; }
.ck-acts .out, #cnDefect .def, #lblQ button[style*="#b3261e"] { background: var(--bad) !important; color: #fff !important; border-color: var(--bad) !important; }
#lblQ > div[style*="#e8f1ea"] { border-left-color: var(--good) !important; }
#lblQ > div[style*="#fdecea"] { border-left-color: var(--bad) !important; }
.cn-st, html.tablet h1 { font-family: var(--serif); }