/* Shared components. Tokens only (tokens.css). See DESIGN.md. */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(var(--bar-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);
  line-height:var(--lh);-webkit-text-size-adjust:100%}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
kbd{font:inherit;font-size:var(--fs-label);font-weight:var(--fw-semi);padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--card)}
button{font:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
:where(button:not([class])){min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-control);border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font-weight:var(--fw-semi)}
:where(button:not([class])):disabled{opacity:.5}
a{color:var(--slate)}
.muted{color:var(--muted)}
.title{font-size:var(--fs-title);line-height:var(--lh-tight);font-weight:var(--fw-heavy);letter-spacing:var(--track-title);margin:var(--sp-1) 0 6px}
.lede{color:var(--muted);margin:0 0 var(--sp-5);max-width:60ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);
  border:1px solid transparent;border-radius:var(--r-control);background:transparent;color:var(--ink);font:inherit;
  font-weight:var(--fw-semi);font-size:var(--fs-ui);line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast),border-color var(--dur-fast),opacity var(--dur-fast)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn svg{flex:none}
.btn-primary{background:var(--ink);color:var(--on-ink)}
.btn-primary:hover:not(:disabled){opacity:.9}
.btn-secondary{background:var(--card);border-color:var(--line-strong);color:var(--ink)}
.btn-secondary:hover:not(:disabled){background:var(--paper)}
.btn-ghost{color:var(--slate)}
.btn-ghost:hover:not(:disabled){background:var(--sunk)}
.btn-quiet{color:var(--muted);font-weight:var(--fw-medium)}
.btn-quiet:hover:not(:disabled){color:var(--ink);background:var(--sunk)}
.btn-danger{background:var(--card);border-color:var(--err);color:var(--err)}
.btn-danger:hover:not(:disabled){background:var(--err-soft)}
.btn-dashed{border:1.5px dashed var(--line-faint);color:var(--slate);background:transparent}
.btn-dashed:hover{background:var(--sunk)}
.btn-small{min-height:var(--tap-sm);padding:0 var(--sp-3);font-size:var(--fs-small)}
.btn-lg{min-height:48px;border-radius:var(--r-card);font-size:var(--fs-body);padding:0 var(--sp-5)}
.btn-icon{width:var(--tap);padding:0}
.btn-icon.btn-small{width:40px;min-height:40px}
.btn-round{border-radius:var(--r-pill)}
.btn-float{background:var(--card);border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-pop)}
/* legacy aliases (kitchen.js) */
button.primary,button.ghost,button.accent,button.small{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-control);border:1px solid var(--line-strong);font:inherit;font-weight:var(--fw-semi);font-size:var(--fs-ui)}
button.primary:disabled,button.ghost:disabled,button.accent:disabled{opacity:.5}
button.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
button.ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
button.accent{background:var(--oak);border-color:var(--oak);color:var(--card)}
button.small{min-height:var(--tap-sm);padding:0 var(--sp-3);font-size:var(--fs-small)}
a.btnlike{display:inline-flex;align-items:center;min-height:var(--tap-sm);padding:0 var(--sp-3);font-size:var(--fs-small);font-weight:var(--fw-semi);border:1px solid var(--line-strong);border-radius:var(--r-control);background:var(--card);color:var(--ink);text-decoration:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin:var(--sp-5) 0 var(--sp-2)}
.actions.inline{margin:var(--sp-3) 0 0;justify-content:flex-start}

/* chips + segmented */
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-4);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);font-weight:var(--fw-medium);font-size:var(--fs-ui);cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast)}
input:checked + .chip,.chip.on,.chip[aria-pressed="true"]{border-color:var(--oak);box-shadow:inset 0 0 0 .5px var(--oak);background:var(--oak-soft);font-weight:var(--fw-semi)}
input:focus-visible + .chip{outline:2px solid var(--focus);outline-offset:2px}
input:disabled + .chip,.chip:disabled{opacity:.45;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.seg{display:inline-flex;gap:2px;padding:4px;background:var(--sunk);border-radius:var(--r-card)}
.seg>button,.seg>label>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap-sm);padding:0 14px;border:0;border-radius:9px;
  background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-small);font-weight:var(--fw-medium);white-space:nowrap;cursor:pointer}
.seg>label{display:flex;position:relative}
.seg>button.on,.seg>button[aria-pressed="true"],.seg>label>input:checked + span{background:var(--card);box-shadow:var(--shadow-seg);color:var(--ink);font-weight:var(--fw-semi)}
.seg>label>input:focus-visible + span{outline:2px solid var(--focus);outline-offset:1px}
.seg-fill{display:flex}
.seg-fill>button,.seg-fill>label{flex:1}
.seg-fill>label>span{flex:1}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin:var(--sp-4) 0;max-width:680px}
.label{font-size:var(--fs-small);font-weight:var(--fw-semi)}
.label-sub{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-regular)}
.req{color:var(--oak-ink)}
.input,input:not([type]).input{width:100%;min-height:var(--tap);padding:0 var(--sp-3);font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--r-control)}
textarea.input{padding:10px var(--sp-3);min-height:120px;resize:vertical;line-height:var(--lh)}
select.input{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px;background-repeat:no-repeat}
.input::placeholder{color:var(--faint)}
.input:focus-visible,.unit:focus-within{outline:none;border-color:var(--slate);box-shadow:var(--ring)}
.input.bad,.input[aria-invalid="true"],.unit.bad{border-color:var(--err)}
.unit{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-3);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r-control)}
.unit>input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-body);color:var(--ink);padding:0;min-height:calc(var(--tap) - 2px)}
.unit>i{font-style:normal;color:var(--muted);font-size:var(--fs-small);margin-left:var(--sp-2)}
.errmsg{color:var(--err);font-size:var(--fs-small);margin-top:6px}
.bad{border-color:var(--err)}
.check{display:flex;gap:var(--sp-3);align-items:center;min-height:var(--tap);cursor:pointer;font-weight:var(--fw-medium)}
.check input{width:20px;height:20px;margin:0;accent-color:var(--oak)}
.help{color:var(--muted);font-size:var(--fs-small);margin:0 0 var(--sp-4)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);max-width:680px}
@media (max-width:520px){.row{grid-template-columns:1fr}}

/* choice cards */
.choice{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  cursor:pointer;text-align:left;transition:border-color var(--dur-fast)}
.choice:hover{border-color:var(--line-faint)}
.choice-media{display:flex;align-items:center;justify-content:center;background:var(--sunk);aspect-ratio:4/3;overflow:hidden}
.choice-media img{display:block;width:100%;height:100%;object-fit:cover}
.choice-media svg{display:block;width:100%;height:auto;max-height:100%}
.choice-body{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) 14px 14px;font-size:var(--fs-ui);font-weight:var(--fw-bold);line-height:1.25}
.choice-body small{font-size:var(--fs-small);font-weight:var(--fw-regular);color:var(--muted)}
.choice-check{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--oak);color:var(--card);display:none;align-items:center;justify-content:center}
input:checked + .choice,.choice.on,.choice[aria-pressed="true"]{border-color:var(--oak);box-shadow:inset 0 0 0 1px var(--oak)}
input:checked + .choice .choice-check,.choice.on .choice-check{display:flex}
input:disabled + .choice{opacity:.45;cursor:not-allowed}
input:focus-visible + .choice{outline:2px solid var(--focus);outline-offset:2px}
.choice-icon{align-items:center;justify-content:center;gap:var(--sp-2);min-height:96px;padding:var(--sp-3);text-align:center;font-size:var(--fs-small);font-weight:var(--fw-semi);color:var(--ink)}
.choice-icon svg{display:block;color:var(--slate)}
input:checked + .choice-icon,.choice-icon.on{background:var(--oak-soft)}

/* surfaces */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--sp-5)}
.card-raise{box-shadow:var(--shadow-raise)}
.note{margin-top:10px;padding:10px 14px;border-left:3px solid var(--oak);background:var(--oak-soft);border-radius:0 var(--r-control) var(--r-control) 0;font-size:var(--fs-small);white-space:pre-wrap}
.note.err{border-color:var(--err);color:var(--err);background:var(--err-soft)}
.note.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
/* Dialog: native <dialog>, centred; a bottom sheet on phones */
.dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-sheet);background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop)}
.dialog::backdrop{background:var(--scrim)}
.dialog-title{margin:0 0 var(--sp-1);font-size:var(--fs-h);font-weight:var(--fw-bold)}
.dz{width:min(560px,calc(100vw - 24px))}
.dz-list{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2);max-height:min(420px,60dvh);overflow:auto}
.dz-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.dz-cur{border-color:var(--oak);background:var(--oak-soft)}
.dz-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dz-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-txt span{font-size:var(--fs-small);color:var(--muted)}
.dz-here{font-size:var(--fs-small);font-weight:var(--fw-semi);color:var(--oak-ink);white-space:nowrap}
.dz-msg{padding:var(--sp-4);color:var(--muted);text-align:center}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
@media (max-width:599px){
  .dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px))}
  .dialog-actions .btn{flex:1}
}
.hint{display:flex;align-items:flex-start;gap:var(--sp-3);padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-raise);font-size:var(--fs-small)}
.hint-ico{flex:none;width:32px;height:32px;border-radius:50%;background:var(--oak-soft);color:var(--oak-ink);display:flex;align-items:center;justify-content:center}
.hint-txt{flex:1;min-width:0;align-self:center}
.hint-txt b{font-weight:var(--fw-semi)}
.hint-x{flex:none;align-self:center}

/* progress */
.progress{height:6px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--oak);border-radius:var(--r-pill);transition:width var(--dur) var(--ease)}
.progress-seg{display:flex;gap:6px}
.progress-seg>span{flex:1;height:4px;border-radius:var(--r-pill);background:var(--sunk)}
.progress-seg>span.done,.progress-seg>span.on{background:var(--oak)}
.progress-label{font-size:var(--fs-label);font-weight:var(--fw-semi);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}

/* stepper (header) */
.stepper{display:flex;align-items:center;gap:10px;font-size:var(--fs-small)}
.stepper button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap-sm);padding:0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-small);white-space:nowrap}
.stepper button+button::before{content:"";width:28px;height:1px;background:var(--line-strong);margin-right:2px}
.stepper .num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);font-size:var(--fs-label);font-variant-numeric:tabular-nums;flex:none}
.stepper button:hover:not(:disabled) .lbl{color:var(--ink)}
.stepper button.on .num{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:var(--fw-heavy)}
.stepper button.on .lbl{color:var(--ink);font-weight:var(--fw-semi)}
.stepper button.done .num{background:var(--oak);border-color:var(--oak);color:var(--card)}
.stepper button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:480px){
  .stepper{gap:6px}
  .stepper button:not(.on) .lbl{display:none}
  .stepper button+button::before{width:12px}
}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--sp-5) + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);display:flex;align-items:center;gap:var(--sp-3);
  max-width:calc(100vw - 24px);padding:10px 14px;background:var(--coach-bg);color:#fff;border-radius:var(--r-control);font-size:var(--fs-small);
  z-index:var(--z-toast);opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-act{border:0;background:transparent;color:var(--coach-accent);font:inherit;font-weight:var(--fw-semi);cursor:pointer;padding:0;min-height:0}

/* tour coach */
.coach{position:fixed;width:min(320px,calc(100vw - 24px));background:var(--coach-bg);color:#fff;border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-coach);z-index:var(--z-tour)}
.coach-k{color:var(--coach-accent);font-size:var(--fs-label);font-weight:var(--fw-semi);letter-spacing:var(--track-label);text-transform:uppercase}
.coach-dots{display:flex;gap:6px;margin:var(--sp-2) 0}
.coach-dots>i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--line-faint)}
.coach-dots>i.on{width:16px;background:var(--coach-accent)}
.coach-t{font-size:17px;font-weight:var(--fw-heavy);margin:0 0 6px}
.coach-b{font-size:var(--fs-small);color:var(--coach-text);margin:0}
.coach-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-4)}
.coach-actions .btn-quiet{color:var(--coach-text)}
.coach-actions .btn-quiet:hover:not(:disabled){background:transparent;color:#fff}
.coach-actions .back{border:1px solid #4A5C66;color:#fff;background:transparent}
.coach-actions .next{background:#fff;color:#1C2B33}
.coach-arrow{position:absolute;width:14px;height:14px;background:var(--coach-bg);transform:rotate(45deg)}
.coach-arrow[data-side="top"]{top:-7px}
.coach-arrow[data-side="bottom"]{bottom:-7px}
.coach-arrow[data-side="left"]{left:-7px}
.coach-arrow[data-side="right"]{right:-7px}
.spot{position:fixed;border-radius:var(--r-card);box-shadow:0 0 0 9999px var(--scrim),0 0 0 3px var(--coach-accent);pointer-events:none;z-index:var(--z-tour);transition:all var(--dur) var(--ease)}
.tour-block{position:fixed;inset:0;background:transparent;z-index:var(--z-tour)}

/* menu */
.menu{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);padding:var(--sp-2);z-index:var(--z-menu)}
.menu-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:var(--tap);padding:0 var(--sp-3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-small);text-align:left;cursor:pointer}
.menu-item:hover{background:var(--paper)}
.menu-sep{height:1px;background:var(--line);margin:var(--sp-2) 0}
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-3);font-size:var(--fs-xs);color:var(--muted);margin:0;padding:var(--sp-1) var(--sp-3) var(--sp-2)}
.kbd-list dt{white-space:nowrap}
.kbd-list dd{margin:0}

/* action bar (steps 1 and 2) */
.actionbar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:var(--actionbar-h);
  padding:0 var(--pad);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--line);z-index:var(--z-bar)}

.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--oak-soft);color:var(--oak-ink);font-size:var(--fs-label);font-weight:var(--fw-heavy)}

.spin{width:16px;height:16px;border:2.5px solid var(--line);border-top-color:var(--oak);border-radius:50%;animation:spin .9s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:3s}}

/* Tooltip: data-tip="..." on a button; shown on hover and keyboard focus (touch shows the visible label instead) */
[data-tip]{position:relative}
@media (hover:hover){
  [data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;z-index:var(--z-menu);bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
    width:max-content;max-width:220px;padding:8px 10px;border-radius:var(--r-sm);background:var(--coach-bg);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-regular);
    line-height:1.4;text-align:left;white-space:normal;pointer-events:none;box-shadow:var(--shadow-pop)}
  [data-tip]:first-child:hover::after,[data-tip]:first-child:focus-visible::after{left:0;transform:none}
  [data-tip]:last-child:hover::after,[data-tip]:last-child:focus-visible::after{left:auto;right:0;transform:none}
}