/* Hogolloween ’26 skin for Стена смен. Every themed rule lives under
   :root[data-theme="hogolloween"]; without that attribute only the toggle
   button below is styled. */

/* ---------- theme toggle button (always present) ---------- */
#themeToggle { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }
#themeToggle svg { display: block; }
#themeToggle svg[hidden] { display: none; }

/* ---------- font: Eater, self-hosted, latin only, used for the wordmark ---------- */
@font-face {
  font-family: "Eater";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Eater-latin.woff2") format("woff2");
}

/* ---------- Phase 1: tokens ---------- */
/* The site already has its own variables (--wall/--paper/--ink/--accent...), so
   the palette from the brief is stored under --hw-* and the site's variables are
   re-pointed at it: every component picks the theme up without being touched.
   Note: the brief's "--ink" (sticker frame) is --hw-ink here, because --ink on
   this site already means the text colour. */
:root[data-theme="hogolloween"] {
  color-scheme: dark;

  --hw-bg-base: #14131f;
  --hw-bg-card: #1d1b2e;
  --hw-bg-card-alt: #241f38;
  --hw-border: #352f4d;
  --hw-text: #f2ede4;
  --hw-text-2: #b8b0c9;
  --hw-muted: #766f8a;
  --hw-pumpkin: #ff8a3d;
  --hw-pumpkin-hover: #ff9f5e;
  --hw-green: #7fd858;
  --hw-red: #e5484d;
  --hw-wax: #b3323c;
  --hw-ink: #100b06;

  --wall: var(--hw-bg-base);
  --wall-2: #1b1a2e;
  --paper: var(--hw-bg-card);
  --paper-kraft: var(--hw-bg-card-alt);
  --ink: var(--hw-text);
  --ink-soft: var(--hw-text-2);
  --accent: var(--hw-pumpkin);
  --accent-ink: #1d1611;
  --ok: var(--hw-green);
  --ok-bg: #243322;
  --warn: #f0a35e;
  --warn-bg: #35281f;
  --danger: var(--hw-red);
  --danger-bg: #3a1f26;
  --pin-shadow: rgba(0, 0, 0, .6);
  --tape: rgba(242, 237, 228, .07);
  --chrome-bg: rgba(20, 19, 31, .9);
  --chrome-border: var(--hw-border);

  /* the site picks the grain colour from the system scheme; the theme is always dark, so pin the dark one */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --hw-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23f2ede4' fill-opacity='.05'%3E%3Cpath transform='translate(26 34) scale(1.5) rotate(-12 12 12)' d='M12 6c-1-2-3-3-5-3 1 1.3 1.6 2.6 1.7 3.6C6 7.8 3 9.6 1 13c2.2-.9 4-1.1 5.3-1-1 1-1.6 2.2-1.6 3.6 1.3-1 2.6-1.6 3.8-1.7.4 1.3 1.5 2.6 2.5 3.1 1-.5 2.1-1.8 2.5-3.1 1.2.1 2.5.7 3.8 1.7 0-1.4-.6-2.6-1.6-3.6 1.3-.1 3.1.1 5.3 1-2-3.4-5-5.2-7.7-6.4.1-1 .7-2.3 1.7-3.6-2 0-4 1-5 3Z'/%3E%3Cpath transform='translate(150 148) scale(1.1) rotate(10 12 12)' d='M12 6c-1-2-3-3-5-3 1 1.3 1.6 2.6 1.7 3.6C6 7.8 3 9.6 1 13c2.2-.9 4-1.1 5.3-1-1 1-1.6 2.2-1.6 3.6 1.3-1 2.6-1.6 3.8-1.7.4 1.3 1.5 2.6 2.5 3.1 1-.5 2.1-1.8 2.5-3.1 1.2.1 2.5.7 3.8 1.7 0-1.4-.6-2.6-1.6-3.6 1.3-.1 3.1.1 5.3 1-2-3.4-5-5.2-7.7-6.4.1-1 .7-2.3 1.7-3.6-2 0-4 1-5 3Z'/%3E%3Cpath transform='translate(168 26) scale(1.3)' d='M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9Z'/%3E%3C/g%3E%3C/svg%3E");
  --hw-pumpkin-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a3d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v2'/%3E%3Cellipse cx='12' cy='14' rx='8' ry='7'/%3E%3Cpath d='M8 9.2c1.5-1.4 2.5-1.4 4-1.4s2.5 0 4 1.4'/%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M7 14c0-1.9.8-3.4 2-4.4'/%3E%3Cpath d='M17 14c0-1.9-.8-3.4-2-4.4'/%3E%3C/svg%3E");
}

/* ---------- Phase 1: background pattern (bats + moon, ~5%) ---------- */
/* Cabinet and login: behind the page content. */
:root[data-theme="hogolloween"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hw-pattern); background-size: 240px 240px;
}
/* Wall: the scrolling .viewport paints its own opaque background over body, so the
   pattern is one more layer there (fixed to the screen, doesn't zoom with the canvas). */
:root[data-theme="hogolloween"] .viewport {
  background:
    var(--hw-pattern),
    var(--grain),
    radial-gradient(ellipse at 20% 0%, var(--wall-2), transparent 60%),
    linear-gradient(180deg, var(--wall), var(--wall));
  background-size: 240px 240px, auto, auto, auto;
  background-blend-mode: normal, overlay, normal, normal;
}

/* ---------- Phase 1: header (shared toolbar) ---------- */
:root[data-theme="hogolloween"] .toolbar { gap: 12px; padding: 8px 16px; min-height: 54px; } /* 54px = height before the theme, keeps the wall's title rule hidden under it */
:root[data-theme="hogolloween"] .toolbar .hint { display: none; }

/* Wordmark: pumpkin + "Hogolloween" in Eater, then the site name in the normal font. */
:root[data-theme="hogolloween"] .toolbar .brand {
  display: flex; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-soft);
}
:root[data-theme="hogolloween"] .toolbar .brand small { display: none; }
:root[data-theme="hogolloween"] .toolbar .brand::before {
  content: "Hogolloween";
  font-family: "Eater", var(--font-display); font-weight: 400; font-size: 25px; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
  padding: 4px 14px 0 32px; margin-right: 12px;
  border-right: 1px solid var(--chrome-border);
  background: var(--hw-pumpkin-icon) no-repeat left center / 22px 22px;
}

/* Mode tabs become text tabs with an underline. */
:root[data-theme="hogolloween"] .modetabs { gap: 4px; margin-left: 0; }
:root[data-theme="hogolloween"] .modetabs button {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink-soft); padding: 8px 10px; font-size: 13px;
}
:root[data-theme="hogolloween"] .modetabs button:hover { color: var(--ink); }
:root[data-theme="hogolloween"] .modetabs button[aria-selected="true"] {
  background: transparent; color: var(--accent); border-bottom-color: var(--accent);
}

/* Wall tools: quiet outlined pills, pumpkin on hover/pressed. */
:root[data-theme="hogolloween"] .fitbtn,
:root[data-theme="hogolloween"] .btn-outline {
  border: 1px solid var(--chrome-border); color: var(--ink-soft); background: transparent; font-size: 12px;
}
:root[data-theme="hogolloween"] .fitbtn:hover,
:root[data-theme="hogolloween"] .btn-outline:hover {
  background: transparent; border-color: var(--accent); color: var(--accent);
}
:root[data-theme="hogolloween"] .fitbtn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
:root[data-theme="hogolloween"] .zoomctl button { border-color: var(--chrome-border); background: var(--hw-bg-card); }

/* Right cluster: toggle + Logout pushed to the edge. */
:root[data-theme="hogolloween"] #themeToggle { margin-left: auto; width: 32px; padding: 0; border-radius: 999px; }
:root[data-theme="hogolloween"] .toolbar .btn-outline { margin-left: 0 !important; }

/* On screens wider than a phone the row can still be wider than the screen (admin tools
   on the wall), so toggle + Logout stay pinned to the right edge instead of scrolling out
   of sight, as Logout used to. */
@media (min-width: 700px) {
  :root[data-theme="hogolloween"] #themeToggle,
  :root[data-theme="hogolloween"] .toolbar .btn-outline { position: sticky; }
  :root[data-theme="hogolloween"] .toolbar .btn-outline { right: 0; background: var(--hw-bg-base); box-shadow: -12px 0 10px -4px var(--hw-bg-base); }
  :root[data-theme="hogolloween"] #themeToggle { right: 76px; box-shadow: -14px 0 10px -2px var(--hw-bg-base); }
  /* pinned buttons need an opaque background; the toggle's pressed (= theme on) look has its own pumpkin one */
  :root[data-theme="hogolloween"] #themeToggle:not([aria-pressed="true"]) { background: var(--hw-bg-base); }
}

/* Phone: compact wordmark (site name text hidden), normal scrolling toolbar as before. */
/* Phone, theme on or off: the toolbar scrolls sideways, so the toggle would sit past the
   right edge; put it right after the brand instead (order only, nothing else moves). */
@media (max-width: 699px) {
  .toolbar .brand { order: -2; }
  #themeToggle { order: -1; }
  :root[data-theme="hogolloween"] #themeToggle { margin-left: 0; margin-right: 6px; }
}

@media (max-width: 699px) {
  :root[data-theme="hogolloween"] .toolbar .brand { font-size: 0; }
  :root[data-theme="hogolloween"] .toolbar .brand::before { font-size: 19px; padding: 3px 10px 0 26px; margin-right: 8px; background-size: 18px 18px; }
}

/* The canvas paints its own gradient over the pattern and shows as a lighter box
   against the page; let the .viewport background carry the whole look. */
:root[data-theme="hogolloween"] .canvas { background: none; }


/* ================= Phase 2: Стена — cards, tables, statuses, buttons ================= */
:root[data-theme="hogolloween"] {
  --hw-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c-1 0-1.8.8-1.8 1.8v.6C7.8 6.3 6.5 8.4 6.5 11v3.5L5 17h14l-1.5-2.5V11c0-2.6-1.3-4.7-3.7-5.6v-.6C13.8 3.8 13 3 12 3Z'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --hw-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9 7 7 0 0 1-9-9Z'/%3E%3C/svg%3E");
  --hw-icon-candle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 1.3 1.6 2.2 1.6 3.1 0 .9-.7 1.3-1.6 1.3s-1.6-.4-1.6-1.3C10.4 5.2 11 4.3 12 3Z'/%3E%3Crect x='9.5' y='8' width='5' height='12' rx='1'/%3E%3Cpath d='M9.5 12h5'/%3E%3C/svg%3E");
}

/* Boards = cards. The paper "tape" strips are part of the old corkboard look. */
:root[data-theme="hogolloween"] .board {
  background: var(--hw-bg-card); border: 1px solid var(--hw-border); border-radius: 12px;
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .7);
}
:root[data-theme="hogolloween"] .board::before,
:root[data-theme="hogolloween"] .board::after { display: none; }
:root[data-theme="hogolloween"] .board h2 {
  font-family: var(--font-body); font-size: 18px; font-weight: 700; letter-spacing: 0; margin-bottom: 6px;
}
:root[data-theme="hogolloween"] .board h2::before {
  content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -3px;
  background: var(--accent);
  -webkit-mask: var(--hw-board-icon) center / contain no-repeat; mask: var(--hw-board-icon) center / contain no-repeat;
}
:root[data-theme="hogolloween"] #centralBoard { --hw-board-icon: var(--hw-icon-bell); }
:root[data-theme="hogolloween"] #ledgerBoard { --hw-board-icon: var(--hw-icon-moon); }
:root[data-theme="hogolloween"] #dayoffTableBoard { --hw-board-icon: var(--hw-icon-candle); }
:root[data-theme="hogolloween"] .board .sub { color: var(--ink-soft); }
:root[data-theme="hogolloween"] .sign { border-bottom-color: var(--hw-border); }
:root[data-theme="hogolloween"] .zoom-to { background: rgba(242, 237, 228, .08); color: var(--ink-soft); }
:root[data-theme="hogolloween"] .zoom-to:hover { background: var(--accent); color: var(--accent-ink); }

/* Week tabs */
:root[data-theme="hogolloween"] .weektabs button { border: 1px solid var(--hw-border); color: var(--ink-soft); }
:root[data-theme="hogolloween"] .weektabs button:hover { border-color: var(--accent); color: var(--accent); }
:root[data-theme="hogolloween"] .weektabs button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

/* Schedule / day-off tables (also the draft preview in the cabinet): horizontal rules only,
   alternating card shades, small uppercase header. Sizes and fonts of the data are untouched. */
:root[data-theme="hogolloween"] table.sched th,
:root[data-theme="hogolloween"] table.sched td { border: 0; border-bottom: 1px solid var(--hw-border); }
:root[data-theme="hogolloween"] table.sched thead th {
  background: transparent; color: var(--ink-soft); font-size: 12px; letter-spacing: .05em;
}
:root[data-theme="hogolloween"] table.sched tbody tr:nth-child(odd) td { background: var(--hw-bg-card); }
:root[data-theme="hogolloween"] table.sched tbody tr:nth-child(even) td { background: var(--hw-bg-card-alt); }
:root[data-theme="hogolloween"] table.sched tr.weekend td.date { color: var(--accent); }
:root[data-theme="hogolloween"] select.edit-select { border-color: var(--hw-border); }

/* Vacation ledger */
:root[data-theme="hogolloween"] table.ledger th,
:root[data-theme="hogolloween"] table.ledger td { border-bottom: 1px solid var(--hw-border); }
:root[data-theme="hogolloween"] table.ledger thead th { font-size: 12px; border-bottom: 1px solid var(--hw-border); }
:root[data-theme="hogolloween"] table.ledger tr:nth-child(even) { background: var(--hw-bg-card-alt); }
:root[data-theme="hogolloween"] table.ledger td.range { color: var(--accent); }

/* Shift chips. Red is kept for a real conflict only (the "Надо выйти!" chip): red rule underneath. */
:root[data-theme="hogolloween"] .chip { border-radius: 6px; }
:root[data-theme="hogolloween"] .chip.vac { color: var(--accent); }
:root[data-theme="hogolloween"] .chip.callin {
  background: var(--danger-bg); color: var(--hw-text); border-bottom: 2px solid var(--hw-red); border-radius: 6px 6px 0 0;
}

/* Buttons (shared by the cabinet): primary = pumpkin, secondary = outlined. */
:root[data-theme="hogolloween"] .btn-primary {
  background: var(--accent); color: var(--accent-ink); border-radius: 8px;
}
:root[data-theme="hogolloween"] .btn-primary:hover { background: var(--hw-pumpkin-hover); }
:root[data-theme="hogolloween"] .approve-btn { background: var(--ok); color: var(--ok-bg); }
:root[data-theme="hogolloween"] .reject-btn { border-color: var(--hw-border) !important; color: var(--ink-soft); }

/* The generic .zoom-to colours above must not leak onto the pastel personal boards (restyled in phase 3). */
:root[data-theme="hogolloween"] .mini .zoom-to { background: rgba(0, 0, 0, .08); color: var(--card-ink-soft); }
:root[data-theme="hogolloween"] .mini .zoom-to:hover { background: var(--accent); color: var(--accent-ink); }


/* ================= Phase 3: personal boards (.mini) as "Заметки на стене" ================= */
/* Each waiter's little board becomes an ink-framed paper note: three paper colours and tilts in a
   cycle, red wax pin, brush frame. The old pastel colour and tilt are set inline by JS, hence !important.
   The stickers pinned by the owner (.sticker) are deliberately NOT touched. */
:root[data-theme="hogolloween"] {
  --hw-note-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%23100b06' fill-opacity='.96' fill-rule='evenodd' d='M0.8,12 Q0.5,3.2 11,3 L60,2.6 L109,3.1 Q119.5,3.6 119,12.5 L119.6,60 L119,108 Q119.5,118 109,118.6 L60,119.2 L11,118.6 Q0.5,118.2 0.8,108 L0.3,60 Z M18,22 Q18,19 21,19 L99,18.5 Q102,19 102,22 L103,60 L102,98 Q102,101 99,101 L21,101.5 Q18,101 18,98 L17.5,60 Z'/%3E%3Cpath d='M10,8 Q9,1.6 22,1.3 L96,0.9 Q112,1.3 114,7' fill='none' stroke='%23100b06' stroke-width='2.4' stroke-linecap='round' opacity='.5'/%3E%3Ccircle cx='90' cy='30' r='3.2' fill='%23100b06' opacity='.85'/%3E%3Ccircle cx='96' cy='34' r='2' fill='%23100b06' opacity='.7'/%3E%3Ccircle cx='25' cy='94' r='2.2' fill='%23100b06' opacity='.75'/%3E%3C/svg%3E");
  --hw-icon-candle2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 1.3 1.6 2.2 1.6 3.1 0 .9-.7 1.3-1.6 1.3s-1.6-.4-1.6-1.3C10.4 5.2 11 4.3 12 3Z'/%3E%3Crect x='9.5' y='8' width='5' height='12' rx='1'/%3E%3Cpath d='M9.5 12h5'/%3E%3C/svg%3E");
}

:root[data-theme="hogolloween"] .mini {
  border-radius: 4px; box-shadow: none; padding: 8px 8px 10px;
  border: 3px solid var(--hw-ink);                      /* fallback without border-image */
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .4));
}
@supports (border-image: url("x.svg") 1) {
  :root[data-theme="hogolloween"] .mini {
    border: 14px solid var(--hw-ink);
    border-image: var(--hw-note-frame) 36 / 14px stretch;   /* 9-slice: corners keep their shape on any height */
  }
}
:root[data-theme="hogolloween"] #miniBoards > .mini:nth-child(3n+1) { background: #e8c468 !important; transform: rotate(-2.5deg) !important; --hw-note-ink: #2a2015; --hw-note-name: #6b4a1e; }
:root[data-theme="hogolloween"] #miniBoards > .mini:nth-child(3n+2) { background: #d9834a !important; transform: rotate(1.8deg) !important;  --hw-note-ink: #2a1810; --hw-note-name: #451f08; }
:root[data-theme="hogolloween"] #miniBoards > .mini:nth-child(3n)   { background: #c9b8d6 !important; transform: rotate(-1.6deg) !important; --hw-note-ink: #241a2e; --hw-note-name: #4a3357; }

/* wax pin, centred on the outer top edge of the frame */
:root[data-theme="hogolloween"] .mini::before {
  width: 12px; height: 12px; top: -22px; background: var(--hw-wax);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .55), inset 0 -1px 2px rgba(0, 0, 0, .3);
}

/* author name (small, tinted) */
:root[data-theme="hogolloween"] .mini .name {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; margin: 4px 0 6px;
  color: var(--hw-note-name, var(--card-ink));
}
/* note text: italic, dark ink */
:root[data-theme="hogolloween"] .mini-note {
  font-style: italic; font-size: 13px; color: var(--hw-note-ink, var(--card-ink)); border-top-color: rgba(16, 11, 6, .3);
}
/* weekday dots: dark = works, hollow = day off (no red, red is for conflicts only) */
:root[data-theme="hogolloween"] .mini .strip .pin-dot {
  height: auto; aspect-ratio: 1 / 1; font-size: 9px;
}
:root[data-theme="hogolloween"] .mini .strip .pin-dot[data-state="work"] { background: var(--hw-ink); color: #f2ede4; }
:root[data-theme="hogolloween"] .mini .strip .pin-dot[data-state="off"] {
  background: transparent; color: var(--hw-note-ink, var(--card-ink)); box-shadow: inset 0 0 0 1.5px var(--hw-ink);
}
:root[data-theme="hogolloween"] .mini .zoom-to { top: 6px; right: 6px; color: var(--hw-note-ink, var(--card-ink)); }

/* Heading above the personal boards */
:root[data-theme="hogolloween"] .cluster-label { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--ink); }
:root[data-theme="hogolloween"] .cluster-label::before {
  content: ""; display: inline-block; width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; background: var(--accent);
  -webkit-mask: var(--hw-icon-candle2) center / contain no-repeat; mask: var(--hw-icon-candle2) center / contain no-repeat;
}


/* ================= Phase 4: Личный кабинет ================= */
:root[data-theme="hogolloween"] {
  --hw-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c4 1 7 3.6 7 8 0 5-3.5 9-7 10-3.5-1-7-5-7-10 0-4.4 3-7 7-8Z'/%3E%3Cpath d='M9.5 12h5'/%3E%3Cpath d='M12 9.5v5'/%3E%3C/svg%3E");
  --hw-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='7'/%3E%3Cpath d='M12 13V9'/%3E%3Cpath d='M9 3h6'/%3E%3C/svg%3E");
  --hw-icon-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 6c-1-2-3-3-5-3 1 1.3 1.6 2.6 1.7 3.6C6 7.8 3 9.6 1 13c2.2-.9 4-1.1 5.3-1-1 1-1.6 2.2-1.6 3.6 1.3-1 2.6-1.6 3.8-1.7.4 1.3 1.5 2.6 2.5 3.1 1-.5 2.1-1.8 2.5-3.1 1.2.1 2.5.7 3.8 1.7 0-1.4-.6-2.6-1.6-3.6 1.3-.1 3.1.1 5.3 1-2-3.4-5-5.2-7.7-6.4.1-1 .7-2.3 1.7-3.6-2 0-4 1-5 3Z'/%3E%3C/svg%3E");
  --hw-icon-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2c1.8 2 3.5 3.6 3.5 6a3.5 3.5 0 1 1-7 0c0-2.4 1.7-4 3.5-6Z'/%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3C/svg%3E");
}

/* Header strip of the cabinet (avatar + name): the "outer block" with the pumpkin top edge. */
:root[data-theme="hogolloween"] #cabinetView .topbar {
  background: var(--hw-bg-card-alt); border: 1px solid var(--hw-border); border-top: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 18px;
}
:root[data-theme="hogolloween"] .topbar h1 { font-family: var(--font-body); font-size: 20px; }

/* Panels = cards with an icon in the heading (headings that already start with an emoji are left as they are). */
:root[data-theme="hogolloween"] .panel { border: 1px solid var(--hw-border); border-radius: 12px; box-shadow: none; }
:root[data-theme="hogolloween"] .panel h2 { font-family: var(--font-body); font-size: 16px; font-weight: 700; }
:root[data-theme="hogolloween"] .panel > h2::before {
  display: inline-block; width: 17px; height: 17px; margin-right: 9px; vertical-align: -3px; background: var(--accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
:root[data-theme="hogolloween"] .panel:has(> #dutyBox) > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-shield); mask-image: var(--hw-icon-shield); }
:root[data-theme="hogolloween"] #notePanel > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-candle2); mask-image: var(--hw-icon-candle2); }
:root[data-theme="hogolloween"] #schedulePanel > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-clock); mask-image: var(--hw-icon-clock); }
:root[data-theme="hogolloween"] #dayoffPanel > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-moon); mask-image: var(--hw-icon-moon); }
:root[data-theme="hogolloween"] #swapPanel > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-bat); mask-image: var(--hw-icon-bat); }
:root[data-theme="hogolloween"] .panel:has(#dayoffReqFrom) > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-moon); mask-image: var(--hw-icon-moon); }
:root[data-theme="hogolloween"] .panel:has(#vacFrom) > h2::before { content: ""; -webkit-mask-image: var(--hw-icon-bat); mask-image: var(--hw-icon-bat); }

/* My schedule (a vertical list on this site, not a 7-column grid) */
:root[data-theme="hogolloween"] .agenda-day { border-bottom-color: var(--hw-border); }
:root[data-theme="hogolloween"] .agenda-day .d small { color: var(--ink-soft); }

/* My days off. Marked day (auto-approved) = green with a wax seal; unmarked = neutral. Red is gone from here:
   weekends use the pumpkin, red is kept for real conflicts. */
:root[data-theme="hogolloween"] .dayoff-row .d { color: var(--ink-soft); }
:root[data-theme="hogolloween"] .dayoff-row .d.weekend { color: var(--accent); }
:root[data-theme="hogolloween"] .toggle-btn {
  background: var(--hw-bg-card-alt); color: var(--ink-soft); border: 1px solid var(--hw-border);
}
:root[data-theme="hogolloween"] .toggle-btn[data-state="work"] { background: var(--hw-bg-card-alt); color: var(--ink-soft); }
:root[data-theme="hogolloween"] .toggle-btn[data-state="off"] {
  background: rgba(127, 216, 88, .12); color: var(--hw-green); border-color: rgba(127, 216, 88, .35);
  display: inline-flex; align-items: center; gap: 6px;
}
:root[data-theme="hogolloween"] .toggle-btn[data-state="off"]::before,
:root[data-theme="hogolloween"] .vac-item.approved span:last-child::before {
  content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 0; background: currentColor;
  -webkit-mask: var(--hw-icon-seal) center / contain no-repeat; mask: var(--hw-icon-seal) center / contain no-repeat;
}
:root[data-theme="hogolloween"] .vac-item.approved span:last-child::before { margin-right: 6px; vertical-align: -1px; }
:root[data-theme="hogolloween"] .toggle-btn:not([disabled]):hover { border-color: var(--accent); }

/* Request statuses: approved = green + seal, waiting = dashed pumpkin outline, rejected = muted. */
:root[data-theme="hogolloween"] .vac-item { background: var(--hw-bg-card-alt); border-radius: 8px; border: 1px solid transparent; }
:root[data-theme="hogolloween"] .vac-item span.label { color: var(--ink); }
:root[data-theme="hogolloween"] .vac-item.approved span:last-child { color: var(--hw-green); }
:root[data-theme="hogolloween"] .vac-item.pending { background: transparent; border: 1px dashed var(--accent); border-radius: 6px; }
:root[data-theme="hogolloween"] .vac-item.pending span:last-child { color: var(--accent); }
:root[data-theme="hogolloween"] .vac-item.rejected span:last-child { color: var(--ink-soft); }
/* Things waiting for an answer (incoming swap offers, admin queues) get the same dashed outline. */
:root[data-theme="hogolloween"] .swap-incoming,
:root[data-theme="hogolloween"] .admin-item { background: transparent; border: 1px dashed var(--accent); border-radius: 8px; }
:root[data-theme="hogolloween"] .swap-lead { color: var(--ink); }

/* Forms */
:root[data-theme="hogolloween"] .vac-form input[type="date"],
:root[data-theme="hogolloween"] .vac-form textarea,
:root[data-theme="hogolloween"] .vac-form select {
  background: var(--hw-bg-card-alt); border: 1px solid var(--hw-border); border-radius: 8px; color: var(--ink);
}
:root[data-theme="hogolloween"] .vac-form input:focus,
:root[data-theme="hogolloween"] .vac-form textarea:focus,
:root[data-theme="hogolloween"] .vac-form select:focus { outline: none; border-color: var(--accent); }
:root[data-theme="hogolloween"] .error-msg { color: #ff7b80; }

/* ================= Phase 5: quote of the day strip (created by hogolloween-quote.js) ================= */
:root[data-theme="hogolloween"][data-hw-quote] { --hw-quote-h: 31px; }
:root[data-theme="hogolloween"] .hw-quote {
  position: fixed; top: 54px; left: 0; right: 0; z-index: 49; height: var(--hw-quote-h, 31px);
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  background: var(--hw-bg-card); border-top: 1px dashed var(--hw-border); border-bottom: 1px dashed var(--hw-border);
  color: var(--ink-soft); font-size: 13px; font-style: italic;
}
:root[data-theme="hogolloween"] .hw-quote svg { flex: none; color: var(--accent); }
:root[data-theme="hogolloween"] .hw-quote span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* no strip on the login screen (the toolbar is hidden there) */
/* initial HTML has style="display:none", the site's JS later writes "display: none;" — match both */
#toolbar[style*="display:none"] + .hw-quote,
#toolbar[style*="display: none"] + .hw-quote { display: none; }

/* The strip sits over the top of the page, so push the content down by its height instead of covering it. */
:root[data-theme="hogolloween"][data-hw-quote] .viewport { top: var(--hw-quote-h); }
:root[data-theme="hogolloween"][data-hw-quote] #cabinetView.page { padding-top: calc(54px + var(--hw-quote-h) + 18px); }

@media (max-width: 699px) {
  :root[data-theme="hogolloween"][data-hw-quote] { --hw-quote-h: 46px; }
  :root[data-theme="hogolloween"] .hw-quote { padding: 0 12px; font-size: 12.5px; line-height: 1.3; }
  :root[data-theme="hogolloween"] .hw-quote span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ================= Phase 6: polish — keyboard focus, placeholders, selection, scrollbars ================= */
/* One clear focus ring for everything reachable by keyboard (pumpkin on the dark cards is well over 3:1). */
:root[data-theme="hogolloween"] :is(button, a, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* The text fields hide the default ring on :focus (phase 4) and use a border colour instead; add the glow back
   so the focus is not carried by a thin colour change alone. */
:root[data-theme="hogolloween"] .vac-form :is(input, textarea, select):focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 138, 61, .35);
}
/* Inside the horizontally scrolling toolbar a ring can be clipped at its edges, so draw it inward there. */
:root[data-theme="hogolloween"] .toolbar :is(button, a):focus-visible { outline-offset: -2px; }

:root[data-theme="hogolloween"] ::placeholder { color: #9a92ad; opacity: 1; }
:root[data-theme="hogolloween"] ::selection { background: rgba(255, 138, 61, .35); color: var(--hw-text); }
:root[data-theme="hogolloween"] :is(.viewport, .grid-scroll, .ledger-scroll, .toolbar) { scrollbar-color: #4a4466 transparent; }