/* Shift Planner polish layer — 7 Oct 2026. Review preview only; no app/web source changes.
   Loaded after android-look.css. Keeps layout, identity, calculations and data untouched. */

/* ---------- 1. Palettes (accent family only; shift-type colours are never changed) ---------- */
html[data-palette=ocean]{--accent:#0e7c86;--accent-soft:#e3f4f5;--native-navy:#0f3a46;--brand:#0b6a73;--soft:#dff1f2;--accent-text:#0b6a73}
html[data-palette=rose]{--accent:#be3a76;--accent-soft:#fdebf3;--native-navy:#3a1a2b;--brand:#a82f63;--soft:#fbe6ef;--accent-text:#a82f63}
html[data-palette=forest]{--accent:#2f7d57;--accent-soft:#e6f4ec;--native-navy:#16382b;--brand:#266a48;--soft:#e2f1e9;--accent-text:#266a48}
html[data-palette=amber]{--accent:#a8560c;--accent-soft:#fdf0df;--native-navy:#3a2412;--brand:#8f4709;--soft:#fbecd8;--accent-text:#8f4709}
html[data-palette=graphite]{--accent:#475569;--accent-soft:#edf0f4;--native-navy:#1f2937;--brand:#3b4658;--soft:#e9edf2;--accent-text:#3b4658}
:root{--accent-text:var(--accent)}
html[data-theme=dark]{--accent-text:#a79cff}
html[data-theme=dark][data-palette=ocean]{--accent-text:#5fd0d9;--native-navy:#143f49}
html[data-theme=dark][data-palette=rose]{--accent-text:#f08ab5;--native-navy:#4a2338}
html[data-theme=dark][data-palette=forest]{--accent-text:#6fcf9e;--native-navy:#1a4635}
html[data-theme=dark][data-palette=amber]{--accent-text:#f0a45c;--native-navy:#4a3016}
html[data-theme=dark][data-palette=graphite]{--accent-text:#b6c2d3;--native-navy:#2a3547}
html[data-theme=dark][data-palette]{--accent-soft:color-mix(in srgb,var(--accent) 24%,#192232)}
html[data-theme=dark] .nav-button.active,html[data-theme=dark] .eyebrow,html[data-theme=dark] .native-target-details summary{color:var(--accent-text)}
html[data-theme=dark] .nav-button.active svg{background:var(--accent-soft)}

/* ---------- 2. Contrast and readable type scale (min 12px for labels, 10px only for in-cell notes) ---------- */
:root{--muted:#5f6c7f}
html[data-theme=dark]{--muted:#aab6c9}
.weekday{font-size:12px;font-weight:700;color:var(--ink-soft)}
.nav-button{font-size:12px;font-weight:600}
.nav-button.active{font-weight:800}
.native-hero-period,.native-hero-mode,.native-hero-stats span,.native-rosters,.native-progress-copy,.native-widget small,.version-note,.native-service small,.action-tile span,.native-mode-row span,.native-section-head button{font-size:12px}
.native-hero-stats small{font-size:11px}
.native-progress-copy{color:#dbe6f2}
.shift-pill-note,.day-holiday{font-size:10px;font-weight:700}
.report-stat .label{font-size:13px;color:var(--ink-soft)}
.review-mode-banner{font-size:11px}
.native-hero-stats strong{letter-spacing:0}
/* one consistent scale for page headings */
.page-heading h1{font-size:26px}
.native-section-head h2,.native-current-roster h2,.setting-panel h3{font-size:18px}

/* ---------- 3. Touch targets (>= 44px) ---------- */
.native-welcome-lang,.review-controls summary,.native-rosters,.segment-button,.soft-button,.solid-button,.icon-button,.nav-button{min-height:44px}
.icon-button{min-width:44px}
.native-pattern-chips span{min-width:31px}

/* ---------- 4. Calendar: empty-day affordance and holiday contrast ---------- */
.day-cell:not(.native-filled):not(.selected):not(.holiday)::after{content:"+";position:absolute;inset-inline:0;bottom:6px;text-align:center;font-size:15px;font-weight:700;line-height:1;color:var(--muted);opacity:.45;pointer-events:none}
.day-cell:not(.native-filled):hover::after,.day-cell.selected:not(.native-filled)::after{opacity:.9;color:var(--accent-text)}
.day-cell.holiday{background:#fff4dc;border-color:#d99a2b}
.day-cell.holiday .day-holiday{color:#7a4a00}
html[data-theme=dark] .day-cell.holiday .day-holiday{color:#f7c46b}
.day-cell.selected{outline-color:var(--accent-text)}

/* ---------- 5. Empty states with icon + action ---------- */
.empty-state{padding:26px 16px;border:1px dashed var(--line);border-radius:18px;background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.empty-state .empty-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);font-size:22px;font-weight:700}
.empty-state p{font-size:14px;color:var(--ink-soft);line-height:1.8}

/* ---------- 6. Surface depth (hero echoes the palette; dock stays light and quiet) ---------- */
.native-hero{background:linear-gradient(150deg,var(--native-navy) 0%,color-mix(in srgb,var(--native-navy) 72%,var(--accent)) 100%);box-shadow:0 10px 26px color-mix(in srgb,var(--native-navy) 22%,transparent)}
.native-progress>span{background:color-mix(in srgb,#61d5b6 85%,#fff)}
.card{transition:border-color 160ms,box-shadow 160ms}
.native-service,.native-pattern,.action-tile,.type-card{transition:border-color 160ms,transform 120ms}
.native-service:hover,.native-pattern:hover,.action-tile:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}

/* ---------- 7. Focus, press and dialog motion ---------- */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent-text);outline-offset:2px;border-radius:10px}
:where(button,.native-service,.native-pattern,.action-tile,.day-cell,.nav-button):active{transform:scale(.975)}
dialog[open]{animation:polishRise 180ms ease-out}
dialog[open]::backdrop{animation:polishFade 180ms ease-out}
@keyframes polishRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes polishFade{from{opacity:0}to{opacity:1}}

/* ---------- 8. Palette picker (More page) ---------- */
.polish-palette{padding:18px 16px;margin-bottom:16px}
.polish-palette h2{margin:0 0 4px;font-size:18px}
.polish-palette p{margin:0 0 14px;font-size:13px;line-height:1.9;color:var(--ink-soft)}
.polish-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.polish-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:84px;padding:10px 6px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);font-size:12px;font-weight:700;cursor:pointer}
.polish-swatch i{width:34px;height:34px;border-radius:50%;display:block;background:conic-gradient(var(--c1) 0 50%,var(--c2) 50% 100%);box-shadow:inset 0 0 0 3px var(--surface),0 0 0 1px var(--line)}
.polish-swatch[aria-pressed=true]{border-color:var(--accent-text);background:var(--accent-soft)}
.polish-swatch[aria-pressed=true] span::after{content:" ✓"}
.polish-mode{display:flex;gap:8px;margin-top:14px}
.polish-mode button{flex:1;min-height:44px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-weight:700;font-size:13px}
.polish-mode button[aria-pressed=true]{border-color:var(--accent-text);background:var(--accent-soft)}

@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop{animation:none!important}:where(button,.native-service,.native-pattern,.action-tile,.day-cell,.nav-button):active{transform:none!important}}