/* Components. Uses ONLY tokens from tokens.css; logical properties only (RTL-ready). */
@font-face{font-family:"Fraunces";src:url(fonts/Fraunces.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/Nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Heebo";src:url(fonts/Heebo.ttf) format("truetype");font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0}
body{min-block-size:100dvh;background:var(--color-bg);color:var(--color-ink);font:var(--weight-body) var(--text-md)/var(--leading) var(--font-body);-webkit-font-smoothing:antialiased}
.page{max-inline-size:32rem;margin-inline:auto;padding:var(--space-5) var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);min-block-size:100dvh}
.brand{font:var(--weight-strong) var(--text-sm)/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-2)}
h1,h2{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:-.01em;line-height:1.1}
h1{font-size:var(--text-xl)} h2{font-size:var(--text-lg)}
.muted{color:var(--color-ink-2)}
.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.hero{border-radius:var(--radius-lg);padding:var(--space-5);color:var(--color-hero-ink);background:linear-gradient(150deg,var(--color-hero-from),var(--color-hero-to));display:flex;flex-direction:column;gap:var(--space-3);box-shadow:var(--shadow-1);transition:opacity var(--motion-med) var(--ease)}
.hero[data-state="expired"],.hero[data-state="unset"]{background:var(--color-bg-2);color:var(--color-ink-2)}
.hero[data-state="expired"] .mood{text-decoration:line-through;text-decoration-thickness:2px}
.mood{font:var(--weight-display) var(--text-xl)/1.1 var(--font-display);overflow-wrap:anywhere}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);font:var(--weight-strong) var(--text-sm)/1 var(--font-body);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);background:var(--color-ok-soft);color:var(--color-ok)}
.pill::before{content:"";inline-size:.55rem;block-size:.55rem;border-radius:50%;background:currentColor}
.pill[data-state="expired"]{background:var(--color-bad-soft);color:var(--color-bad)}
.pill[data-state="unset"]{background:var(--color-warn-soft);color:var(--color-warn)}
.flash{animation:flash var(--motion-med) var(--ease)}
@keyframes flash{from{transform:scale(.97);opacity:.5}to{transform:none;opacity:1}}
.foot{margin-block-start:auto;font-size:var(--text-sm);color:var(--color-ink-2);display:flex;justify-content:space-between;gap:var(--space-3)}
.live::before{content:"";display:inline-block;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--color-ok);margin-inline-end:var(--space-2)}
.live[data-offline="true"]::before{background:var(--color-warn)}
/* form */
label,.legend{font:var(--weight-strong) var(--text-sm)/1.2 var(--font-body);color:var(--color-ink-2);text-transform:uppercase;letter-spacing:.05em}
input[type=text],input[type=datetime-local]{inline-size:100%;min-block-size:var(--tap);border:2px solid var(--color-line);border-radius:var(--radius-sm);padding-inline:var(--space-4);background:var(--color-bg);color:var(--color-ink);font:inherit}
input:focus-visible,button:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{min-block-size:2.75rem;border:0;border-radius:var(--radius-pill);padding-inline:var(--space-4);background:var(--color-accent-soft);color:var(--color-ink);font:var(--weight-strong) var(--text-sm)/1 var(--font-body);cursor:pointer}
.radio{display:flex;align-items:center;gap:var(--space-3);min-block-size:var(--tap);font:var(--weight-body) var(--text-md)/1.2 var(--font-body);text-transform:none;letter-spacing:0;color:var(--color-ink)}
.radio input{inline-size:1.4rem;block-size:1.4rem;accent-color:var(--color-accent)}
.btn{appearance:none;border:0;cursor:pointer;min-block-size:var(--tap);border-radius:var(--radius-pill);padding-inline:var(--space-5);font:var(--weight-strong) var(--text-md)/1 var(--font-body);background:var(--color-accent);color:var(--color-accent-ink);transition:transform var(--motion-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-line)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}.row>*{flex:1}
.msg{font-size:var(--text-sm);min-block-size:1.3em}.msg[data-kind="error"]{color:var(--color-bad)}.msg[data-kind="ok"]{color:var(--color-ok)}
[hidden]{display:none!important}
/* slice 2: tabs, setup, coverage, claim sheet (tokens + logical properties only) */
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
h3{font:var(--weight-strong) var(--text-md)/1.2 var(--font-body)}
.small{font-size:var(--text-sm)}
.preview{font-size:var(--text-sm);color:var(--color-ink);background:var(--color-bg-2);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4)}
.setup{border:2px solid var(--color-accent-soft)}
select,input[type=time],input[type=tel]{inline-size:100%;min-block-size:var(--tap);border:2px solid var(--color-line);border-radius:var(--radius-sm);padding-inline:var(--space-4);background:var(--color-bg);color:var(--color-ink);font:inherit}
.row .field{min-inline-size:6.5rem}
.radio input[type=checkbox]{inline-size:1.4rem;block-size:1.4rem;accent-color:var(--color-accent)}
.tabs{display:flex;gap:var(--space-2);background:var(--color-bg-2);border-radius:var(--radius-pill);padding:var(--space-1);position:sticky;inset-block-start:var(--space-2);z-index:2}
.tab{flex:1;min-block-size:2.9rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-2);font:var(--weight-strong) var(--text-sm)/1 var(--font-body);cursor:pointer}
.tab[aria-selected="true"]{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-1)}
.day{display:flex;flex-direction:column;gap:var(--space-2)}
.days{display:flex;flex-direction:column;gap:var(--space-5)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:var(--space-2)}
.slot{appearance:none;text-align:start;border:2px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);padding:var(--space-2) var(--space-3);min-block-size:var(--tap);display:flex;flex-direction:column;gap:var(--space-1);font:var(--weight-body) var(--text-sm)/1.2 var(--font-body);cursor:pointer;transition:transform var(--motion-fast) var(--ease)}
.slot:active{transform:scale(.97)}
.slot:disabled{cursor:default}
.slot-time{font-weight:var(--weight-strong)}
.slot-who{color:var(--color-ink-2);overflow-wrap:anywhere}
.slot[data-state="empty"]{border-color:var(--color-accent);background:var(--color-accent-soft)}
.slot[data-state="thin"]{border-color:var(--color-warn);background:var(--color-warn-soft)}
.slot[data-state="covered"],.slot[data-state="full"]{border-color:transparent;background:var(--color-ok-soft)}
.slot[data-state="full"] .slot-who{color:var(--color-ok)}
.bar{position:relative;block-size:1.1rem;border-radius:var(--radius-pill);background:var(--color-bg-2);overflow:hidden}
.seg{position:absolute;inset-block:0}
.seg[data-state="empty"]{background:var(--color-accent)}
.seg[data-state="thin"]{background:var(--color-warn)}
.seg[data-state="covered"],.seg[data-state="full"]{background:var(--color-ok)}
.bar-ends{display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--color-ink-2)}
.gap-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--space-4);border-inline-start:6px solid var(--color-accent)}
.gap-card .when{font:var(--weight-strong) var(--text-md)/1.2 var(--font-body)}
.gap-card .btn{flex:none}
dialog.sheet{inline-size:min(32rem,100%);max-inline-size:100%;margin:auto auto 0;border:0;border-start-start-radius:var(--radius-lg);border-start-end-radius:var(--radius-lg);padding:var(--space-5) var(--space-4) var(--space-6);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-1)}
dialog.sheet::backdrop{background:rgba(30,20,15,.45)}
.big-when{font:var(--weight-display) var(--text-lg)/1.2 var(--font-display)}
.list{display:flex;flex-direction:column;gap:var(--space-2);padding:0;list-style:none}
.list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-block-end:1px solid var(--color-line);padding-block:var(--space-2)}
.list a{color:var(--color-accent);font-weight:var(--weight-strong)}
.btn.small{min-block-size:2.75rem;padding-inline:var(--space-4);font-size:var(--text-sm)}
/* slice 3 */
.choice{appearance:none;text-align:start;display:flex;flex-direction:column;gap:var(--space-1);border:2px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-ink);padding:var(--space-4);min-block-size:var(--tap);font:var(--weight-body) var(--text-sm)/1.35 var(--font-body);cursor:pointer;transition:transform var(--motion-fast) var(--ease)}
.choice strong{font:var(--weight-strong) var(--text-md)/1.2 var(--font-body)}
.choice span{color:var(--color-ink-2)}
.choice:hover,.choice:focus-visible{border-color:var(--color-accent)}
.choice:active{transform:scale(.98)}
.linkish{appearance:none;border:0;background:none;color:var(--color-accent);font:var(--weight-strong) var(--text-sm)/1 var(--font-body);padding:0;align-self:flex-start;cursor:pointer;min-block-size:2.75rem}
textarea{inline-size:100%;border:2px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);background:var(--color-bg);color:var(--color-ink);font:inherit;resize:vertical}
.break-row{display:flex;flex-direction:column;gap:var(--space-2);border:2px dashed var(--color-line);border-radius:var(--radius-sm);padding:var(--space-3)}
.break-row .btn{align-self:flex-start}
.now-card{display:flex;flex-direction:column;gap:var(--space-2);border-radius:var(--radius-md);padding:var(--space-4);background:var(--color-ok-soft)}
.now-card[data-state="break"]{background:var(--color-warn-soft)}
.now-card[data-state="closed"]{background:var(--color-bg-2)}
.now-card p{font:var(--weight-strong) var(--text-md)/1.3 var(--font-body)}
.times-day{display:flex;flex-direction:column;gap:var(--space-2);padding-block:var(--space-2);border-block-end:1px solid var(--color-line)}
.times-day.today h3{color:var(--color-accent)}
.times-line{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.time-open,.time-break{border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);font:var(--weight-strong) var(--text-sm)/1 var(--font-body)}
.time-open{background:var(--color-ok-soft);color:var(--color-ok)}
.time-break{background:var(--color-warn-soft);color:var(--color-warn)}
.where-name{font:var(--weight-display) var(--text-lg)/1.2 var(--font-display)}
.notes{display:flex;flex-direction:column;gap:var(--space-2);padding-inline-start:var(--space-5)}
.slot-maybe{color:var(--color-warn);font-weight:var(--weight-strong)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}