/* Specials board - chalkboard (fixed slate colours in both themes) and clean (theme tokens). */
.sb { display: grid; gap: 14px; }
.sb-head { display: grid; gap: 2px; justify-items: start; }
.sb-name { margin: 0; font-size: .78em; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.sb-title { margin: 0; font-size: 1.35em; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; color: var(--e-ink); overflow-wrap: anywhere; }
.sb-day { margin-top: 4px; font-size: .8em; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--e-surface-2); color: var(--e-ink-2); }
.sb-body { display: grid; gap: 14px; }
.sb-sec { display: grid; gap: 6px; }
.sb-sec-title { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1em; font-weight: 750; color: var(--e-ink); }
.sb-tag { font-size: .72em; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; padding: 1px 8px; border-radius: 999px; background: var(--e-accent); color: var(--e-accent-ink); }
.sb-sec-note { margin: -2px 0 0; font-size: .84em; color: var(--e-ink-3); }
.sb-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sb-item { min-width: 0; }
.sb-top { display: flex; align-items: baseline; gap: 8px; }
.sb-iname { font-weight: 650; color: var(--e-ink); overflow-wrap: anywhere; min-width: 0; }
.sb-dots { flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted var(--e-line-strong); transform: translateY(-4px); }
.sb-price { flex: none; font-weight: 750; color: var(--e-accent-fg); font-variant-numeric: tabular-nums; max-width: 45%; text-align: right; overflow-wrap: anywhere; }
.sb-inote { margin: 2px 0 0; font-size: .86em; color: var(--e-ink-2); overflow-wrap: anywhere; }
.sb-foot { margin: 0; font-size: .8em; color: var(--e-ink-3); text-align: center; }

/* clean */
.sb-clean .sb-sec { padding: 12px 14px; border-radius: calc(var(--e-radius) - 4px); border: 1px solid var(--e-line); background: var(--e-bg); }
.sb-clean .sb-sec.sb-today { border-color: var(--e-accent); box-shadow: 0 0 0 1px var(--e-accent) inset; background: color-mix(in srgb, var(--e-accent) 5%, var(--e-bg)); }

/* chalkboard: a slate panel that stays dark in light and dark themes */
.sb-chalk {
    --sb-ink: #f3f0e6; --sb-ink-2: #d9d4c4; --sb-ink-3: #b9b3a2; --sb-accent: #ffd88a; --sb-line: rgba(243, 240, 230, .28);
    padding: 20px 18px 18px; border-radius: calc(var(--e-radius) - 2px); color: var(--sb-ink);
    background: radial-gradient(120% 90% at 20% 0%, #33443b 0%, #24302a 55%, #1c2621 100%);
    border: 6px solid #6e4b2e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 10px rgba(16, 22, 43, .18);
}
.sb-chalk .sb-head { justify-items: center; text-align: center; padding-bottom: 12px; border-bottom: 2px dashed var(--sb-line); }
.sb-chalk .sb-name { color: var(--sb-ink-3); }
.sb-chalk .sb-title, .sb-chalk .sb-sec-title { font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", var(--e-font); color: var(--sb-ink); font-weight: 700; }
.sb-chalk .sb-title { font-size: 1.55em; letter-spacing: .01em; }
.sb-chalk .sb-day { background: rgba(243, 240, 230, .14); color: var(--sb-ink); }
.sb-chalk .sb-sec { padding-bottom: 12px; border-bottom: 1px dashed var(--sb-line); }
.sb-chalk .sb-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.sb-chalk .sb-sec-title { font-size: 1.12em; }
.sb-chalk .sb-today .sb-sec-title { color: var(--sb-accent); }
.sb-chalk .sb-tag { background: var(--sb-accent); color: #2a2412; }
.sb-chalk .sb-sec-note, .sb-chalk .sb-foot { color: var(--sb-ink-3); }
.sb-chalk .sb-iname { color: var(--sb-ink); }
.sb-chalk .sb-dots { border-bottom-color: var(--sb-line); }
.sb-chalk .sb-price { color: var(--sb-accent); }
.sb-chalk .sb-inote { color: var(--sb-ink-2); }
.sb-chalk .e-notice { background: rgba(243, 240, 230, .1); border-color: var(--sb-line); color: var(--sb-ink); }
.sb-chalk :focus-visible { outline-color: var(--sb-accent); }

html[data-compact="1"] .sb-chalk { padding: 14px 12px; border-width: 4px; }
@media (max-width: 340px) { .sb-chalk { padding: 16px 12px; border-width: 4px; } }