/* ────────────────────────────────────────
   StoreKeeper — default brand theme
   Orange #FF9D00 / white / Inter / Roboto Mono
   Supports light + dark via [data-scheme]
   ──────────────────────────────────────── */
:root,
html[data-scheme="light"] {
  --sk-primary: #FF9D00;
  --sk-primary-hover: #E68D00;
  --sk-primary-bg: #FFF5E5;

  --sk-bg: #F4F5F7;
  --sk-card-bg: #FFFFFF;
  --sk-sidebar-bg: #FFFFFF;
  --sk-topbar-bg: #FFFFFF;

  --sk-text: #111827;
  --sk-text-muted: #4B5563;
  --sk-text-subtle: #6B7280;

  --sk-border: #E5E7EB;
  --sk-border-strong: #D1D5DB;

  --sk-success: #10B981;
  --sk-danger: #EF4444;

  --sk-font-display: 'Inter', system-ui, sans-serif;
  --sk-font-body: 'Inter', system-ui, sans-serif;
  --sk-font-data: 'Roboto Mono', monospace;

  --sk-radius: 8px;
  --sk-radius-sm: 6px;

  --sk-sidebar-width: 240px;
  --sk-sidebar-item-bg-active: #FFF5E5;
  --sk-sidebar-item-text-active: #FF9D00;
  --sk-sidebar-item-text: #404040;
  --sk-sidebar-header-text: #9CA3AF;
}

/* ── Theme-specific tweaks ── */

/* Logo wordmark — tighter tracking, brand feel */
.sk-logo-text {
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Primary button variant (orange) for CTAs that opt in */
.sk-btn-primary {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: var(--sk-on-primary);
}
.sk-btn-primary:hover {
  background: var(--sk-primary-hover);
  border-color: var(--sk-primary-hover);
}

/* Nav item active: subtle left accent bar for brand flavour */
.sk-nav-item.active {
  position: relative;
}

/* Clickable "Apps" section header → opens the Apps catalog */
.sk-nav-header-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.sk-nav-header-link:hover,
.sk-nav-header-link.active {
  color: var(--sk-primary);
}
.sk-nav-header-ico {
  width: 13px;
  height: 13px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.sk-nav-header-link:hover .sk-nav-header-ico {
  opacity: 1;
}

/* Pinned apps: faint category header above each group */
.sk-pin-cat-head {
  padding: 0 12px;
  margin: 10px 0 3px;
  font-size: 10px;
  font-weight: 400;
  color: var(--sk-text-subtle);
  opacity: 0.8;
}

/* Unpin control on a pinned app — appears on row hover */
.sk-pin-row {
  position: relative;
}
.sk-pin-row .sk-nav-item {
  padding-right: 28px;
}
.sk-pin-unpin {
  position: absolute;
  top: 0;
  bottom: 2px;
  right: 6px;
  margin: 0;
  display: none;
  align-items: center;
  z-index: 2;
}
.sk-pin-row:hover .sk-pin-unpin {
  display: flex;
}
.sk-pin-unpin button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--sk-text-subtle);
  cursor: pointer;
}
.sk-pin-unpin button:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--sk-danger, #e11d48);
}
.sk-pin-unpin svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* Focus ring in brand orange */
.sk-search input:focus,
.sk-btn:focus-visible {
  outline: none;
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-primary) 15%, transparent);
}

/* KPI values — prominent data font */
.sk-kpi-value {
  font-family: var(--sk-font-data);
  letter-spacing: -0.01em;
}

/* Cards & KPIs — surface + hairline border + tiny shadow.
   --sk-card-bg flips to #17181D in dark mode (see html[data-scheme="dark"] block). */
.sk-card,
.sk-kpi,
.sk-kpi-rich {
  background: var(--sk-card-bg);
  border: 1px solid var(--sk-border-strong);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}

/* Sidebar gets a single hairline divider so it visually rests on the gray page */
.sk-sidebar {
  border-right: 1px solid var(--sk-border);
}

/* Topbar hairline + tiny lift */
.sk-topbar {
  border-bottom: 1px solid var(--sk-border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}

/* Tables sit on cards — zebra is subtle, no nested same-shade-on-same-shade */
.sk-card .sk-table tbody tr { background: var(--sk-card-bg); }
.sk-card .sk-table tbody tr:nth-child(even) { background: var(--sk-bg); }
.sk-card .sk-table tbody tr:hover { background: color-mix(in srgb, var(--sk-primary) 6%, transparent); }
.sk-card .sk-table th { background: var(--sk-bg); }

/* Topbar — clean, minimal shadow on scroll */
.sk-topbar {
  box-shadow: 0 1px 0 0 var(--sk-border);
  border-bottom-color: transparent;
}

/* Avatar — rounded square, orange fill */
.sk-avatar {
  border-radius: var(--sk-radius-sm);
  background: var(--sk-primary);
}

/* Theme menu — soft shadow */
.sk-theme-menu {
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12), 0 2px 6px rgba(17, 24, 39, 0.06);
}

/* ────────────────────────────────────────
   DARK MODE
   ──────────────────────────────────────── */
html[data-scheme="dark"] {
  --sk-primary: #FFB020;
  --sk-primary-hover: #FFC44F;
  --sk-primary-bg: #2A1F0A;

  --sk-bg: #0B0C10;
  --sk-card-bg: #1E2128;
  --sk-sidebar-bg: #0A0B0F;
  --sk-topbar-bg: #0A0B0F;
  /* Lifts instead of darkens, so a chip stays visible on the dark card. */
  --sk-bg-soft: rgba(255, 255, 255, 0.06);
  /* Amber-400 rather than the light scheme's amber-700: the light value is picked
     to read on white and does not carry on this background. No number here on
     purpose - a hard-coded ratio in a comment goes stale the moment either value
     moves. */
  --sk-warning: #FBBF24;

  --sk-text: #F9FAFB;
  --sk-text-muted: #CDD2DB;
  --sk-text-subtle: #AAB0BC;

  --sk-border: #383C46;
  --sk-border-strong: #4B5060;

  --sk-sidebar-item-bg-active: #2A1F0A;
  --sk-sidebar-item-text-active: #FFB020;
  --sk-sidebar-item-text: #C5C7CC;
  --sk-sidebar-header-text: #6B6E75;
}

/* ── ExactKassa: the package's red as the accent ───────────────────────────
   #E30613 from the ExactKassa brandbook, on an ExactKassa account only
   (`data-sk-exact-kassa`, base.html.twig). On <body>, not <html>: Turbo swaps the
   body on every visit, so the red never outlives an account switch.

   Only the accent moves. Success, danger and warning keep their own hues, so a
   warning stays amber and does not read as the brand. The tints follow the
   orange's ratios (10, 20 and 40% into white, the ink at 70%), and the tokens
   :root works out from the primary are restated here so they are worked out
   from the red rather than inherited already mixed with the orange. White on
   the red: 4.9:1, where black on the orange was the house choice. */
html[data-scheme="light"] body[data-sk-exact-kassa],
html[data-scheme="dark"] body[data-sk-exact-kassa] {
  --sk-orange: var(--sk-primary);
  --sk-on-primary: #FFFFFF;
  --sk-accent-soft: color-mix(in srgb, var(--sk-primary) 16%, var(--sk-card-bg));
  --sk-accent-ink: color-mix(in srgb, var(--sk-primary) 55%, var(--sk-text));
  --sk-series-1: var(--sk-primary);
  --sk-series-2: color-mix(in srgb, var(--sk-primary) 78%, var(--sk-text-muted));
  --sk-series-3: color-mix(in srgb, var(--sk-primary) 56%, var(--sk-text-muted));
  --sk-series-4: color-mix(in srgb, var(--sk-primary) 34%, var(--sk-text-muted));
  --sk-series-5: color-mix(in srgb, var(--sk-primary) 16%, var(--sk-text-muted));
}
html[data-scheme="light"] body[data-sk-exact-kassa] {
  --sk-primary: #E30613;
  --sk-primary-hover: #CC0511;
  --sk-primary-bg: #FCE6E7;
  --sk-sidebar-item-bg-active: #FCE6E7;
  --sk-sidebar-item-text-active: #E30613;
}
html[data-scheme="dark"] body[data-sk-exact-kassa] {
  --sk-primary: #E93842;
  --sk-primary-hover: #ED5D66;
  --sk-primary-bg: #270A0C;
  --sk-sidebar-item-bg-active: #270A0C;
  --sk-sidebar-item-text-active: #E93842;
}

html[data-scheme="dark"] body {
  background: var(--sk-bg);
  color: var(--sk-text);
}

/* Dark mode polish ─────────────────────────────────────────
   - swap to the dedicated dark-mode logo (white text + orange mark)
   - neutral .sk-btn needs a raised surface so it's visible on the page /
     topbar (page-bg would blend in); variants keep their own colours
   - rail icons read a touch brighter */
.sk-logo .sk-logo-dark { display: none; }
html[data-scheme="dark"] .sk-logo .sk-logo-light { display: none; }
html[data-scheme="dark"] .sk-logo .sk-logo-dark { display: block; }

html[data-scheme="dark"] .sk-btn:not(.sk-btn-primary):not(.sk-btn-danger):not(.sk-btn-ghost) {
  background: #262A33;
  border-color: #4C5263;
  color: var(--sk-text);
}
html[data-scheme="dark"] .sk-btn:not(.sk-btn-primary):not(.sk-btn-danger):not(.sk-btn-ghost):hover {
  background: #2F343F;
  border-color: #5C6376;
}
html[data-scheme="dark"] .sk-nav-item svg { opacity: 0.9; }

html[data-scheme="dark"] .sk-theme-menu {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

html[data-scheme="dark"] ::-webkit-scrollbar-thumb {
  background: #2E3038;
}
html[data-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3E4048;
}

.sk-theme-select {
  height: 32px;
  padding: 0 28px 0 10px;
  background: var(--sk-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text);
  font-size: 12px;
  font-family: var(--sk-font-body);
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  transition: all 0.15s;
}
.sk-theme-select:hover { border-color: var(--sk-border-strong); }
.sk-theme-select:focus { border-color: var(--sk-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-primary) 15%, transparent); }
html[data-scheme="dark"] .sk-theme-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A3AA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ────────────────────────────────────────
   Promotions phase 2E responsive + a11y
   Scoped to .promotions-* hooks so other apps are untouched.
   See docs/promotions-plan.md §7.1 + §7.2.
   ──────────────────────────────────────── */

/* ── Promotions picker tiles ── */
/* Visible 3px primary focus ring on keyboard nav (radiogroup tiles).
   Per §7.2: Type picker tiles get an obvious focus indicator while
   arrow-key navigating the radiogroup. */
.picker-tile:focus-visible {
  outline: none;
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-primary) 15%, transparent);
}

/* ── Promotions list responsive ── */
/* At ≤768px the table collapses into a card-per-row layout.
   Per §7.1, only Status / Title / Code / Used surface on mobile —
   Discount summary and Window are hidden (they re-appear on detail).
   The Actions cell carries class="no-label" to skip the label prefix. */
@media (max-width: 768px) {
  .promotions-list-card .sk-table { display: block; width: 100%; }
  .promotions-list-card .sk-table thead { display: none; }
  .promotions-list-card .sk-table tbody,
  .promotions-list-card .sk-table tr { display: block; width: 100%; }
  .promotions-list-card .sk-table tbody tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sk-border);
    background: var(--sk-card-bg) !important;
  }
  .promotions-list-card .sk-table tbody tr:last-child { border-bottom: none; }
  .promotions-list-card .sk-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border: none;
    text-align: left !important;
    white-space: normal !important;
    width: auto !important;
    min-width: 0;
  }
  .promotions-list-card .sk-table tbody td::before {
    content: attr(data-label);
    color: var(--sk-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .promotions-list-card .sk-table tbody td.no-label {
    justify-content: flex-end;
    padding-top: 8px;
  }
  .promotions-list-card .sk-table tbody td.no-label::before { content: none; }

  /* Hide low-priority columns on mobile (§7.1 row 1: skip Discount + Window). */
  .promotions-list-card .sk-table tbody td[data-label="Discount"],
  .promotions-list-card .sk-table tbody td[data-label="Window"] {
    display: none;
  }
}

/* ── Promotions cart preview responsive ── */
/* At ≤768px the two-column grid stacks; the result panel sticks to
   the top so the discount total stays visible while editing the
   cart inputs below. Per §7.1 last row + §5.9. */
@media (max-width: 768px) {
  .promotions-preview-grid {
    grid-template-columns: 1fr !important;
  }
  .promotions-preview-grid .promotions-preview-result {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Solid surface so sticky overlay never bleeds through underlying cards. */
    background: var(--sk-bg);
    padding-top: 4px;
    padding-bottom: 4px;
    margin: -4px 0;
  }

  /* 44×44px touch targets on chip-style remove buttons (§7.2 "Pill X
     buttons min 44×44px"). Targets cart-item row remove + any pill X. */
  .promotions-preview-remove,
  .promotions-pill-remove {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ────────────────────────────────────────
   BREAK SUPPORT — wellness page
   Scoped under .bs-page so it cannot bleed.
   All colors read from --sk-* tokens so dark mode works for free.
   Note: avoid writing the comment-close sequence inside prose; we use
   slashes-with-spaces (e.g. orange-x / neutral-x) where needed.
   ──────────────────────────────────────── */
.bs-page {
  padding: 8px 4px 64px;
  color: var(--sk-text);
}

/* Hero */
.bs-page .bs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 28px;
}
.bs-page .bs-hero-text {
  background: var(--sk-card-bg);
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}
.bs-page .bs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sk-text-subtle);
  font-family: var(--sk-font-data);
}
.bs-page .bs-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sk-primary);
  display: inline-block;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sk-primary) 35%, transparent);
  animation: bsPulse 2.2s infinite cubic-bezier(.2,0,0,1);
}
@keyframes bsPulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--sk-primary) 40%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sk-primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--sk-primary) 0%, transparent); }
}
.bs-page .bs-title {
  margin: 0 0 8px;
  font-family: var(--sk-font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sk-text);
}
.bs-page .bs-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sk-text-muted);
  max-width: 56ch;
}

/* Pomodoro card */
.bs-page .bs-pomo {
  background: var(--sk-card-bg);
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.bs-page .bs-pomo.is-work { border-color: var(--sk-primary); }
.bs-page .bs-pomo.is-break {
  background: var(--sk-primary-bg);
  border-color: var(--sk-primary);
}
.bs-page .bs-pomo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sk-text-subtle);
}
.bs-page .bs-pomo-cycles { font-family: var(--sk-font-data); }
.bs-page .bs-pomo-time {
  font-family: var(--sk-font-data);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sk-text);
  font-variant-numeric: tabular-nums;
}
.bs-page .bs-pomo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.bs-page .bs-pomo-hint {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--sk-card-bg);
  border: 1px dashed var(--sk-border-strong);
  border-radius: 8px;
  font-size: 13px;
  color: var(--sk-text);
}
.bs-page .bs-pomo-hint strong {
  display: block;
  margin-top: 2px;
  color: var(--sk-primary);
  font-weight: 600;
}

/* Buttons */
.bs-page .bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--sk-border-strong);
  background: var(--sk-card-bg);
  color: var(--sk-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.bs-page .bs-btn:hover { border-color: var(--sk-primary); color: var(--sk-primary); }
.bs-page .bs-btn-primary {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: #fff;
}
.bs-page .bs-btn-primary:hover {
  background: var(--sk-primary-hover);
  border-color: var(--sk-primary-hover);
  color: #fff;
}
.bs-page .bs-btn-ghost {
  background: transparent;
  color: var(--sk-text-muted);
}
.bs-page .bs-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }

/* Grid */
.bs-page .bs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Card */
.bs-page .bs-card {
  background: var(--sk-card-bg);
  border: 1px solid var(--sk-border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform 180ms cubic-bezier(.2,0,0,1), box-shadow 180ms, border-color 180ms;
}
.bs-page .bs-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.09);
  border-color: var(--sk-border-strong);
}
.bs-page .bs-card.is-running { border-color: var(--sk-primary); }
.bs-page .bs-card.is-suggested {
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-primary) 18%, transparent);
}

.bs-page .bs-card-illust {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  border-radius: 10px;
  background: var(--sk-bg);
  color: var(--sk-text-muted);
}
.bs-page .bs-card-body { display: flex; flex-direction: column; gap: 8px; }
.bs-page .bs-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--sk-font-display);
  color: var(--sk-text);
  letter-spacing: -0.005em;
}
.bs-page .bs-card-why {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sk-text-muted);
}

/* Segment control + start */
.bs-page .bs-card-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.bs-page .bs-seg {
  display: inline-flex;
  border: 1px solid var(--sk-border-strong);
  border-radius: 7px;
  overflow: hidden;
  background: var(--sk-card-bg);
}
.bs-page .bs-seg-btn {
  padding: 5px 10px;
  font: inherit;
  font-family: var(--sk-font-data);
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  color: var(--sk-text-muted);
  border: none;
  border-right: 1px solid var(--sk-border);
  cursor: pointer;
}
.bs-page .bs-seg-btn:last-child { border-right: none; }
.bs-page .bs-seg-btn.is-on {
  background: var(--sk-primary-bg);
  color: var(--sk-primary);
}
.bs-page .bs-seg-btn:hover:not(.is-on) { background: var(--sk-bg); color: var(--sk-text); }

/* Mini ring timer */
.bs-page .bs-card-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sk-bg);
  border-radius: 8px;
}
.bs-page .bs-ring { transform: rotate(-90deg); }
.bs-page .bs-ring-track {
  fill: none;
  stroke: var(--sk-border-strong);
  stroke-width: 3;
}
.bs-page .bs-ring-prog {
  fill: none;
  stroke: var(--sk-primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 250ms linear;
}
.bs-page .bs-ring-time {
  font-family: var(--sk-font-data);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 500;
  color: var(--sk-text);
}

/* Footer copy */
.bs-page .bs-foot {
  margin: 28px 0 0;
  font-size: 12px;
  color: var(--sk-text-subtle);
  text-align: center;
}
.bs-page .bs-foot-mono {
  font-family: var(--sk-font-data);
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--sk-bg);
  border: 1px solid var(--sk-border);
  border-radius: 999px;
}

/* Topbar Break-Support active state */
.sk-topbar .sk-btn.is-active {
  background: var(--sk-primary-bg);
  border-color: var(--sk-primary);
  color: var(--sk-primary);
}

/* Responsive */
@media (max-width: 860px) {
  .bs-page .bs-hero { grid-template-columns: 1fr; }
  .bs-page .bs-pomo-time { font-size: 38px; }
}

/* ── Collapsed sidebar: storekeeper logo mark + pinned-app icons ──
   The full wordmark folds to the square mark, and pinned favourites stay as
   clickable icons (label + unpin control fold away). Higher-specificity rules
   so they win over the dark-mode logo swap above. */
.sk-logo-icon { display: none; }
.sk-app.is-collapsed .sk-logo-light,
.sk-app.is-collapsed .sk-logo-dark,
html[data-scheme="dark"] .sk-app.is-collapsed .sk-logo-light,
html[data-scheme="dark"] .sk-app.is-collapsed .sk-logo-dark { display: none; }
.sk-app.is-collapsed .sk-logo-icon { display: block; max-width: 34px; }

/* Food mode: the "SK Bakery" mark, an orange tile with the white mark and the name
   beside it. Collapsed, only the tile stays. */
.sk-logo-bakery { gap: 10px; }
.sk-logo-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--sk-primary);
}
.sk-logo-tile img { display: block; width: auto; height: 14px; }
.sk-logo-bakery .sk-logo-text { font-size: 18px; white-space: nowrap; }
.sk-app.is-collapsed .sk-logo-bakery .sk-logo-text { display: none; }

.sk-app.is-collapsed .sk-pin-cat-head,
.sk-app.is-collapsed .sk-pin-unpin { display: none; }
.sk-app.is-collapsed .sk-pin-row .sk-nav-item { padding-right: 0; }