/* Specials: hub page, dosage calculator and vial tracker. Shares every
   token with styles.css / v2-styles.css; only the tool-specific pieces
   (syringe and vial graphics, fact grids, inline panels) live here. */

.specials-page .page-intro { max-width: 940px; }
.specials-page .page-intro h1 { margin: 0; font-size: clamp(29px, 4vw, 51px); line-height: 1.12; letter-spacing: -.035em; }
.specials-page .page-intro .hero-lead { max-width: 760px; color: var(--muted-2); font-size: 16px; }

/* Section switcher under the intro: overview / calculator / tracker. */
.specials-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.specials-subnav a { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-2); font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .02); }
.specials-subnav a:hover { color: var(--text); border-color: var(--border-strong); }
.specials-subnav a[aria-current="page"] { color: var(--on-action); background: var(--action-bg); border-color: var(--accent); }
.specials-back-row { margin: 22px 0 0; }
.specials-back { min-height: 40px; padding: 8px 16px; }

.specials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* The whole tile is the link: it lifts, its border and arrow light up in
   the accent, and the cursor says "click" - no button needed. */
.specials-tool-card { position: relative; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); border-radius: 18px; padding: 24px; background: var(--surface-gradient); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); color: inherit; cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.specials-tool-card:hover, .specials-tool-card:focus-visible { color: inherit; border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .28), 0 0 0 3px rgba(var(--accent-rgb), .12); }
.specials-tool-card:hover h2, .specials-tool-card:focus-visible h2 { color: var(--accent-strong); }
.specials-tool-arrow { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.specials-tool-arrow svg { width: 18px; height: 18px; }
.specials-tool-card:hover .specials-tool-arrow, .specials-tool-card:focus-visible .specials-tool-arrow { color: var(--on-action); border-color: var(--accent); background: var(--action-bg); transform: translateX(3px); }
.specials-tool-card h2 { transition: color .18s ease; }
.specials-tool-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 12px; color: var(--accent-strong); background: var(--accent-soft); }
.specials-tool-icon svg { width: 26px; height: 26px; }
.specials-tool-icons { display: flex; align-items: center; gap: 8px; }
.specials-tool-card h2 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.03em; }
.specials-tool-card p { margin: 0; color: var(--muted-2); font-size: 15px; flex: 1; }
/* Previews inside the two tool cards: drawn by the tools' own renderers. */
.specials-preview[hidden] { display: none; }
.specials-preview-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface-inset); pointer-events: none; }
.specials-preview-card.vial-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; box-shadow: none; }
.specials-preview-vial { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.specials-preview-vial .vial-svg { width: 62px; }
.specials-preview-vial .vial-fill-readout strong { font-size: 16px; }
.specials-preview-facts { min-width: 0; }
.specials-preview-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; font-weight: 700; font-family: var(--font-display); }
.specials-preview-title .vial-status { margin-left: auto; padding: 3px 8px; font-size: 9px; }
.specials-preview-facts dl { display: grid; gap: 5px; margin: 0; }
.specials-preview-facts dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.specials-preview-facts dt { color: var(--muted); }
.specials-preview-facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.specials-preview-syringe .syringe-svg { max-width: 420px; margin: 0 auto; }
.specials-preview-line { margin: 6px 0 0; text-align: center; color: var(--muted-2); font-size: 13px; }
.specials-preview-line strong { color: var(--text); }
@media (max-width: 420px) { .specials-preview-card.vial-card { grid-template-columns: 1fr; justify-items: center; } .specials-preview-facts { width: 100%; } }


/* Shared form pieces (calculator form, new-vial form). */
.specials-form-card { border: 1px solid var(--border); border-radius: 18px; padding: clamp(18px, 3vw, 28px); background: var(--panel); box-shadow: 0 18px 50px rgba(0, 0, 0, .16); }
.specials-form-card h2 { margin: 0 0 18px; font-size: 20px; letter-spacing: -.02em; }
.specials-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.specials-field { display: grid; gap: 6px; min-width: 0; }
.specials-field.full { grid-column: 1 / -1; }
.specials-field > label, .specials-field > span.field-label { color: var(--muted-2); font-size: 14px; font-weight: 700; font-family: var(--font-display); }
.specials-field input, .specials-field select, .specials-field textarea { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-inset); color: var(--text); padding: 10px 12px; outline: none; font-size: 16px; transition: border-color .16s ease, box-shadow .16s ease; }
.specials-field textarea { min-height: 80px; resize: vertical; }
.specials-field input:focus, .specials-field select:focus, .specials-field textarea:focus { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .06); }
.specials-field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.specials-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
.specials-field-row select { min-width: 0; }
[data-custom-syringe][hidden] { display: none; }
.specials-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.specials-form-error, .vial-form-error { min-height: 1.4em; margin: 10px 0 0; color: var(--danger); font-size: 13px; }
.specials-preview { margin: 0; color: var(--accent-strong); font-size: 13px; font-weight: 600; min-height: 1.4em; }

/* --- dosage calculator ------------------------------------------------ */
.dose-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 22px; align-items: start; margin-top: 28px; }
.dose-result { position: sticky; top: 100px; border: 1px solid var(--border-strong); border-radius: 20px; padding: 24px; background: var(--surface-gradient); box-shadow: var(--shadow), inset 0 0 70px rgba(var(--accent-rgb), .04); }
.dose-result-main .eyebrow { margin-bottom: 4px; }
.dose-draw-label { margin: 0; color: var(--muted-2); font-size: 14px; }
.dose-draw-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 4px 0 18px; }
.dose-draw-value strong { font-size: clamp(34px, 5vw, 46px); line-height: 1; letter-spacing: -.035em; color: var(--accent-strong); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.dose-draw-value span { color: var(--muted-2); font-size: 16px; }
.dose-syringe { padding: 8px 0 4px; }
.dose-syringe-caption { margin: 6px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.syringe-svg { display: block; width: 100%; height: auto; }
.syringe-needle { stroke: #c9d3d9; stroke-width: 1.6; stroke-linecap: round; }
.syringe-hub { fill: #ff8a3c; }
.syringe-barrel { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .5); stroke-width: 1.2; }
.syringe-fill { fill: rgba(190, 227, 247, .5); transition: width .25s ease; }
.syringe-plunger-tip { fill: #1b2229; stroke: rgba(255, 255, 255, .25); stroke-width: .8; transition: x .25s ease; }
.syringe-plunger-rod { fill: #d9e2e7; transition: x .25s ease, width .25s ease; }
.syringe-thumb-rest { fill: #e9f0f3; }
.syringe-flange { fill: #e9f0f3; }
.syringe-sheen { fill: rgba(255, 255, 255, .16); }
.syringe-tick { stroke: rgba(233, 240, 243, .55); stroke-width: .8; }
.syringe-tick.major { stroke: var(--text); stroke-width: 1.2; }
.syringe-tick-label { fill: var(--muted-2); font-size: 8.5px; text-anchor: middle; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.syringe-marker { stroke: var(--accent-strong); stroke-width: 1.6; stroke-dasharray: 3 2; }
.syringe-marker-arrow { fill: var(--accent-strong); }
.syringe-marker-label { fill: var(--accent-strong); font-size: 12px; font-weight: 700; text-anchor: middle; font-family: var(--font-display); }
.dose-warnings { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.dose-warnings li { padding: 10px 12px; border: 1px solid rgba(240, 180, 41, .3); border-radius: 12px; background: rgba(240, 180, 41, .07); color: #f6d27a; font-size: 13px; line-height: 1.5; }
.dose-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.dose-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg-soft); min-width: 0; }
/* Five figures: the dose itself across the top, then two pairs - no empty cell. */
.dose-stats .dose-stat:first-child { grid-column: 1 / -1; background: rgba(var(--accent-rgb), .07); }
.dose-stats .dose-stat:first-child strong { font-size: 18px; }
.dose-stat span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.dose-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dose-result-empty { padding: 30px 10px; text-align: center; color: var(--muted); }
.dose-result-empty p { margin: 0; }
.dose-tracker-link { margin: 18px 0 0; }
.dose-tracker-link .button { width: 100%; }
.dose-how { max-width: 760px; }
.dose-how h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.dose-how p { margin: 0; color: var(--muted-2); }

/* --- vial tracker ------------------------------------------------------ */
.vial-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.vial-sync { margin: 0; color: var(--muted); font-size: 12px; min-height: 1.4em; }
.vial-sync[data-state="saved"] { color: var(--success); }
.vial-sync[data-state="error"], .vial-sync[data-state="conflict"] { color: #f0c141; }
/* Login gate: what the tracker is, and the two ways in. */
[data-vial-app][hidden] { display: none; }
/* Reminder settings below the vials. */
.vial-reminder h3 { margin: 0 0 6px; font-size: 15px; }
/* On/off switch for the reminder, same build as the cookie settings toggle. */
.vial-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.vial-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vial-toggle-track { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: var(--border-strong); transition: background .15s ease; }
.vial-toggle-track::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: transform .15s ease; }
.vial-toggle input:checked + .vial-toggle-track { background: var(--success); }
.vial-toggle input:checked + .vial-toggle-track::before { transform: translateX(20px); }
.vial-toggle input:focus-visible + .vial-toggle-track { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.vial-toggle strong { color: var(--muted-2); }
.vial-toggle input:checked ~ strong { color: var(--success); }
.vial-reminders-text { margin: 0 0 14px; color: var(--muted-2); font-size: 14px; line-height: 1.55; }
.vial-reminders-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.vial-reminders-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.vial-reminders-toggle input { width: 20px; height: 20px; accent-color: var(--accent); }
.vial-reminders-hour { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.vial-reminders-hour select, .vial-reminders-hour input[type="time"] { min-height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-inset); color: var(--text); padding: 6px 10px; font: inherit; color-scheme: dark; }
.vial-summary { margin: 0; color: var(--muted); font-size: 13px; }
[data-vial-form-shell] { margin-top: 18px; }
[data-vial-form-shell][hidden] { display: none; }
.vial-list { margin-top: 22px; }
.vial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 14px; }
.vial-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; border: 1px solid var(--border); border-radius: 20px; padding: 22px; background: var(--surface-gradient); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.vial-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vial-card-head { flex-wrap: wrap; }
.vial-card-head > div { flex: 1 1 auto; min-width: 0; }
.vial-card-head h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; overflow-wrap: normal; word-break: normal; }
.vial-card-sub { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.vial-status { flex: 0 0 auto; display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; font-family: var(--font-display); }
.vial-card[data-status="ok"] .vial-status { color: var(--success); border-color: rgba(93, 223, 153, .35); background: rgba(93, 223, 153, .08); }
.vial-card[data-status="due"] .vial-status, .vial-card[data-status="low"] .vial-status { color: var(--accent-strong); border-color: rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .1); }
.vial-card[data-status="overdue"] .vial-status, .vial-card[data-status="expiring"] .vial-status { color: #f0c141; border-color: rgba(240, 180, 41, .35); background: rgba(240, 180, 41, .08); }
.vial-card[data-status="expired"] .vial-status, .vial-card[data-status="empty"] .vial-status { color: #f4776a; border-color: rgba(240, 80, 70, .35); background: rgba(240, 80, 70, .08); }
.vial-card-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
.vial-visual { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vial-svg { width: 104px; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .38)); }
.vial-liquid { transition: y .35s ease, height .35s ease; }
.vial-cap-dot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; vertical-align: 2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .18); }
.vial-fill-readout { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.vial-fill-readout strong { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
/* Traffic-light for the fill level, on the number and the liquid alike. */
.vial-fill-value[data-tone="high"] { color: var(--success); }
.vial-fill-value[data-tone="mid"] { color: #f2a900; }
.vial-fill-value[data-tone="low"] { color: #ff6b61; }
.vial-fill-readout span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.vial-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.vial-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bg-soft); min-width: 0; }
.vial-fact dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.vial-fact dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vial-fact dd small { display: block; margin-top: 2px; color: var(--muted-2); font-size: 12px; font-weight: 500; }
.vial-fact-next { grid-column: 1 / -1; background: rgba(var(--accent-rgb), .07); }
.vial-fact-next dd { color: var(--accent-strong); font-size: 16px; }
.vial-fact-warn dd { color: #f0c141; }
.vial-fact-alert dd { color: #f4776a; }
.vial-consumption { display: grid; gap: 8px; }
.vial-consumption-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.vial-consumption-count { margin-left: auto; }
.vial-consumption-head strong { color: var(--text); font-size: 13px; }
.vial-consumption-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.vial-consumption-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .3s ease; }
.vial-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vial-warnings li { padding: 9px 12px; border: 1px solid rgba(240, 180, 41, .3); border-radius: 12px; background: rgba(240, 180, 41, .07); color: #f6d27a; font-size: 13px; line-height: 1.5; }
.vial-card[data-status="expired"] .vial-warnings li:first-child { border-color: rgba(240, 80, 70, .35); background: rgba(240, 80, 70, .08); color: #f4948a; }
.vial-notes { margin: 0; color: var(--muted-2); font-size: 13px; }
.vial-notes span { color: var(--muted); font-weight: 700; }
.vial-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vial-panel { border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px; background: var(--surface-inset); }
.vial-log-form { display: grid; gap: 12px; }
.vial-log-form label { display: grid; gap: 6px; color: var(--muted-2); font-size: 13px; font-weight: 700; }
.vial-log-form input, .vial-log-form select { min-height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding: 8px 10px; font-size: 15px; width: 100%; }
.vial-amount-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
.vial-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vial-history h3 { margin: 0 0 10px; font-size: 15px; }
.vial-history-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.vial-history-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); font-size: 13px; }
.vial-history-list time { color: var(--muted-2); }
.vial-history-list span { font-variant-numeric: tabular-nums; font-weight: 700; }
.vial-level-meta { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 12px; color: var(--muted); font-size: 11px; }
.vial-empty { margin-top: 14px; }
.vial-empty h2 { font-size: 22px; }

@media (max-width: 900px) {
  .dose-layout { grid-template-columns: 1fr; }
  .dose-result { position: static; }
  .specials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .specials-form-grid { grid-template-columns: 1fr; }
  .specials-field.full { grid-column: auto; }
  .vial-card { padding: 16px; }
  .vial-card-body { grid-template-columns: 1fr; }
  .vial-visual { flex-direction: row; justify-content: center; gap: 18px; }
  .vial-facts { grid-template-columns: 1fr; }
  .vial-history-list li { grid-template-columns: 1fr; gap: 4px; }
  .vial-actions .button { flex: 1 1 45%; }
  .dose-stats { grid-template-columns: 1fr; }
  .dose-stats .dose-stat:first-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .syringe-fill, .vial-liquid, .vial-consumption-track span, .specials-tool-card, .specials-tool-arrow { transition: none; }
  .specials-tool-card:hover { transform: none; }
}