/* ---------- Theme ---------- */
:root {
    /* Bun + pancake palette: warm tan, cream, sauce red, maple brown */
    --bg:         #ecd0a3;   /* page: toasted bun top */
    --bg-2:       #e2bf86;   /* inputs / pressed surfaces */
    --surface:    #f5e1be;   /* card: bun interior cream */
    --surface-2:  #e9cc97;   /* card pressed / hover */
    --surface-3:  #c79966;   /* deeper toast for borders & buttons */
    --char:       #4a2e16;   /* burnt edge for accents */

    --text:       #2e1c0e;   /* maple syrup */
    --text-dim:   #6b4a30;
    --text-mute:  #97734c;

    --accent:     #d94e1f;   /* BBQ sauce */
    --accent-2:   #b53915;
    --accent-dim: #7a2710;
    --ember:      #d6831b;   /* warm amber/yellow */

    --green:      #6a8c2c;   /* smoky green */
    --green-dim:  #455a16;
    --amber:      #d6831b;
    --red:        #c0302a;

    --shadow-sm:  0 1px 2px rgba(74,46,22,.16);
    --shadow:     0 4px 14px rgba(74,46,22,.18), 0 1px 3px rgba(74,46,22,.10);
    --shadow-lg:  0 16px 32px rgba(74,46,22,.22), 0 2px 6px rgba(74,46,22,.12);

    --radius:     10px;
    --radius-sm:  6px;
    --tap:        58px;
    --tap-lg:     74px;

    --display: "Alfa Slab One", Georgia, "Times New Roman", serif;
    --body:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(217,78,31,.18), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(214,131,27,.14), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

button { font-family: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
input { font-family: inherit; }

/* ---------- Icons ---------- */
.icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 28px; height: 28px; }
.icon-lg { width: 36px; height: 36px; stroke-width: 1.6; }
.icon-xl { width: 56px; height: 56px; stroke-width: 1.5; }
.icon-2xl { width: 96px; height: 96px; stroke-width: 1.5; }

/* ---------- Logo ---------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}
.logo-mark {
    color: var(--accent);
    filter: drop-shadow(0 4px 12px rgba(217,78,31,.35));
    transition: transform .2s ease;
}
.logo:active .logo-mark { transform: scale(.96) rotate(-2deg); }
.logo-mark.lg {
    width: 140px;
    height: 112px;
    stroke-width: 2.2;
}
.logo-mark.sm { width: 44px; height: 35px; stroke-width: 2; }

.wordmark {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1;
}
.wordmark .word-bbq {
    color: var(--accent);
    text-shadow: 0 2px 0 var(--accent-dim), 0 4px 18px rgba(217,78,31,.30);
}
.wordmark .word-cook {
    color: var(--text);
    text-shadow: 0 2px 0 rgba(74,46,22,.18);
}

/* ---------- Landing ---------- */
.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    padding-top: max(56px, env(safe-area-inset-top));
    min-height: 100dvh;
}
.landing-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
    text-align: center;
}
.landing-logo .wordmark {
    font-size: 3.2rem;
}
.landing-logo .wordmark .word-bbq { display: block; }
.landing-logo .wordmark .word-cook { display: block; font-size: .82em; }
.landing-tagline {
    color: var(--text-dim);
    margin: 0 0 36px;
    text-align: center;
    font-size: 1.05rem;
}
.landing-card {
    width: 100%;
    max-width: 420px;
    background:
        linear-gradient(180deg, #fbeed1, var(--surface) 60%);
    border-radius: var(--radius);
    padding: 28px 22px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(74,46,22,.08);
}
.primary-form { margin: 0 0 18px; }
.divider {
    text-align: center;
    color: var(--text-mute);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin: 18px 0;
    position: relative;
}
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 36px);
    height: 1px;
    background: var(--surface-3);
    opacity: .5;
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.divider span { background: var(--surface); padding: 0 10px; }

.resume-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}
.resume-form label {
    color: var(--text-dim);
    font-size: .85rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .15em;
}
.resume-form input {
    background: var(--bg-2);
    border: 2px solid var(--surface-3);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 1.6rem;
    text-align: center;
    letter-spacing: .35em;
    text-transform: lowercase;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    transition: border-color .15s ease;
}
.resume-form input:focus { outline: none; border-color: var(--accent); }
.resume-form input::placeholder { color: var(--text-mute); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    font-weight: 700;
    font-size: 1.02rem;
    min-height: var(--tap);
    cursor: pointer;
    transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
    letter-spacing: .01em;
}
.btn:active { transform: translateY(2px); }
.btn-primary {
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: white;
    box-shadow: 0 4px 0 var(--accent-dim), 0 6px 20px rgba(217,78,31,.4);
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.btn-primary:active { box-shadow: 0 2px 0 var(--accent-dim), 0 3px 10px rgba(217,78,31,.4); }
.btn-secondary {
    background: var(--surface-3);
    color: white;
    box-shadow: 0 3px 0 var(--char), var(--shadow-sm);
}
.btn-secondary:active { box-shadow: 0 1px 0 var(--char); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-xl {
    font-size: 1.15rem;
    padding: 18px 22px;
    min-height: var(--tap-lg);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.error { color: var(--accent-2); margin: 4px 0 0; font-size: .9rem; text-align: center; }

/* ---------- Cook page ---------- */
.cook { padding-top: max(8px, env(safe-area-inset-top)); }

.cook-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
    background:
        linear-gradient(to bottom, var(--bg) 70%, rgba(236,208,163,0));
    backdrop-filter: blur(6px);
}
.cook-header .logo .wordmark { font-size: 1.15rem; }
.cook-header .logo .wordmark .word-bbq,
.cook-header .logo .wordmark .word-cook { display: inline; }
.cook-header .logo .wordmark .word-cook { margin-left: 4px; font-size: .9em; }

.code-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--surface-3);
    border-radius: 999px;
    padding: 7px 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease;
    color: var(--text);
}
.code-pill:active,
.code-pill.copied { background: var(--green); color: white; border-color: var(--green-dim); }
.code-pill .icon { color: var(--accent); }
.code-pill.copied .icon { color: white; }
.code-value {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: .15em;
    font-size: 1rem;
}

.header-actions {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background .15s ease, color .15s ease;
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn.active { color: var(--accent); background: rgba(217,78,31,.12); }

/* ---------- Add panel ---------- */
.add-panel { padding: 6px 12px 14px; }

.add-toggle {
    width: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: white;
    border-radius: var(--radius);
    min-height: 64px;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 0 var(--accent-dim), 0 8px 22px rgba(217,78,31,.32);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: transform .08s ease, box-shadow .15s ease;
}
.add-toggle:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--accent-dim), 0 4px 12px rgba(217,78,31,.32);
}
.add-toggle .icon {
    transition: transform .25s ease;
    width: 26px; height: 26px;
    stroke-width: 2.2;
}
.add-panel:not([data-step="collapsed"]) .add-toggle .icon {
    transform: rotate(45deg);
}

.add-step { display: none; margin-top: 12px; }
.add-panel[data-step="picking-icon"] #iconStep,
.add-panel[data-step="picking-time"] #timeStep { display: block; }

.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.icon-tile {
    background:
        linear-gradient(180deg, #fbeed1, var(--surface) 60%);
    border: 1px solid rgba(74,46,22,.10);
    border-radius: var(--radius);
    padding: 14px 4px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 96px;
    color: var(--accent);
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
    box-shadow: var(--shadow);
}
.icon-tile:active {
    transform: translateY(2px);
    background: var(--surface-2);
    border-color: var(--accent);
}
.icon-tile .icon { width: 34px; height: 34px; stroke-width: 1.6; }
.tile-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .01em;
}
.icon-tile-special {
    background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
}
.icon-tile-special .icon { color: var(--text-dim); }

/* ---------- Step context ---------- */
.step-context {
    display: flex;
    align-items: center;
    gap: 12px;
    background:
        linear-gradient(135deg, rgba(217,78,31,.14), transparent 60%),
        var(--surface);
    border: 1px solid rgba(74,46,22,.10);
    border-radius: var(--radius);
    padding: 8px 16px 8px 8px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.step-back {
    background: var(--surface-3);
    color: white;
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background .15s ease;
    box-shadow: var(--shadow-sm);
}
.step-back:active { background: var(--accent-dim); }
.ctx-icon { color: var(--accent); display: inline-flex; }
.ctx-icon .icon { width: 28px; height: 28px; }
.ctx-label {
    font-size: 1.1rem;
    font-weight: 700;
    flex: 1;
    font-family: var(--display);
    letter-spacing: .02em;
    color: var(--text);
}

/* ---------- Time grid ---------- */
.time-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.time-chip {
    background: linear-gradient(180deg, #fbeed1, var(--surface) 60%);
    color: var(--text);
    border: 1px solid rgba(74,46,22,.10);
    border-radius: var(--radius);
    min-height: 64px;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
    box-shadow: var(--shadow-sm);
}
.time-chip:active {
    transform: translateY(2px);
    border-color: var(--accent);
    background: var(--surface-2);
}
.time-chip-custom {
    font-family: var(--body);
    font-size: .92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-dim);
    background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
}

.num-row-label {
    display: block;
    text-align: center;
    color: var(--text-mute);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin: 4px 0 10px;
}
.num-row-label:last-child { margin-bottom: 0; }

/* ---------- Timer list ---------- */
.timer-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 14px 36px;
}

.empty-state {
    text-align: center;
    color: var(--text-dim);
    padding: 60px 20px 40px;
    display: none;
}
.empty-state.show { display: block; }
.empty-state .empty-mark {
    color: var(--surface-3);
    margin-bottom: 16px;
    opacity: .65;
}
.empty-state p { margin: 6px 0; }
.empty-state strong { color: var(--accent); }
.empty-state .hint { font-size: .9rem; opacity: .8; }

.timer {
    background: linear-gradient(180deg, #fbeed1, var(--surface) 50%);
    border: 1px solid rgba(74,46,22,.10);
    border-left: 4px solid var(--surface-3);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .25s ease, background .25s ease;
    position: relative;
    overflow: hidden;
    transform: rotate(var(--tilt, 0deg));
    transform-origin: center;
}
.timer.is-running { border-left-color: var(--green); }
.timer.is-paused  { border-left-color: var(--amber); }
.timer.is-warning {
    border-left-color: var(--amber);
    animation: pulse-amber 1.4s infinite;
}
.timer.is-done    {
    border-left-color: var(--red);
    animation: flash-red 1s infinite;
}
.timer.is-done::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(192,48,42,.18), transparent 70%);
    pointer-events: none;
}
@keyframes pulse-amber {
    0%, 100% { background: linear-gradient(180deg, #fbeed1, var(--surface) 50%); }
    50%      { background: linear-gradient(180deg, #fbe5ad, #f5d28d 70%); }
}
@keyframes flash-red {
    0%, 100% { background: linear-gradient(180deg, #fbeed1, var(--surface) 50%); }
    50%      { background: linear-gradient(180deg, #f5c4b0, #f0a08a 70%); }
}

.timer-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding-right: 36px;   /* reserve corner for absolute delete-btn */
}
.timer.is-reminder .timer-top {
    grid-template-columns: auto 1fr;
}
.timer-icon {
    color: var(--accent);
    display: inline-flex;
}
.timer-icon .icon { width: 32px; height: 32px; }
.timer.is-running .timer-icon { color: var(--green); }
.timer.is-done .timer-icon { color: var(--red); }
.timer-icon-fallback {
    font-size: 1.7rem;
    line-height: 1;
}
.timer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.timer-label {
    margin: 0;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.order-chip {
    background: var(--surface-3);
    color: white;
    border-radius: 999px;
    padding: 5px 12px 5px 8px;
    font-size: .92rem;
    font-weight: 700;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .15s ease, color .15s ease;
    box-shadow: var(--shadow-sm);
}
.order-chip .icon { width: 14px; height: 14px; color: rgba(255,255,255,.7); }
.order-chip:active { background: var(--accent-dim); }
.order-chip.empty {
    background: transparent;
    border: 1.5px dashed var(--surface-3);
    color: var(--text-mute);
    font-weight: 500;
    box-shadow: none;
}
.order-chip.empty .icon { color: var(--text-mute); }

.timer > .delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--text-mute);
}
.delete-btn .icon { width: 18px; height: 18px; }
.delete-btn:active { color: var(--red); background: rgba(192,48,42,.1); }

.timer-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: var(--display);
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.01em;
    padding: 0;
    color: var(--text);
    text-shadow: 0 2px 0 rgba(74,46,22,.18);
}
.timer.is-running .timer-time { color: var(--green); }
.timer.is-warning .timer-time { color: var(--accent-2); }
.timer.is-done    .timer-time { color: var(--red); }
.timer.is-reminder .timer-time { display: none; }

.timer-controls {
    display: grid;
    grid-template-columns: var(--tap) var(--tap) 1fr;
    gap: 8px;
}
.timer.is-reminder .timer-controls { grid-template-columns: 1fr 1fr; }
.timer.is-stopwatch .timer-controls { grid-template-columns: var(--tap) var(--tap); }

.add-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.timer.is-reminder .add-row,
.timer.is-stopwatch .add-row { display: none; }

.ctrl {
    background: linear-gradient(180deg, #fbeed1, var(--surface-2) 100%);
    color: var(--text);
    border: 1px solid var(--surface-3);
    border-radius: var(--radius-sm);
    min-height: var(--tap);
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
    box-shadow: var(--shadow-sm);
}
.ctrl:active { transform: translateY(2px); background: var(--surface-2); }
.ctrl-play {
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: white;
    border-color: var(--accent-2);
    box-shadow: 0 3px 0 var(--accent-dim), var(--shadow-sm);
}
.ctrl-play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-dim); }
.ctrl-play .icon { width: 22px; height: 22px; }
.timer.is-running .ctrl-play {
    background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
    color: white;
    border-color: var(--surface-3);
    box-shadow: 0 3px 0 var(--char), var(--shadow-sm);
}
.timer.is-done .ctrl-play {
    background: linear-gradient(180deg, var(--red), #8a201d);
    border-color: #8a201d;
    box-shadow: 0 3px 0 #5a1614, var(--shadow-sm);
    color: white;
}
.ctrl-add {
    font-family: var(--display);
    font-size: 1.1rem;
    padding: 0 4px;
    letter-spacing: 0;
}
.ctrl-reset { color: var(--text-dim); }
.ctrl-reset .icon { width: 22px; height: 22px; }

/* ---------- Dialog ---------- */
.dialog {
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fbeed1, var(--surface) 50%);
    color: var(--text);
    padding: 0;
    width: min(92vw, 380px);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(74,46,22,.10);
}
.dialog::backdrop {
    background: rgba(74,46,22,.55);
    backdrop-filter: blur(3px);
}
.dialog-form {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}
.dialog h2 {
    margin: 0 0 4px;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--accent);
    letter-spacing: .01em;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
    font-size: .75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
}
.field input[type=text],
.field input[type=number] {
    background: var(--bg-2);
    border: 2px solid var(--surface-3);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 1.1rem;
    min-height: var(--tap);
    width: 100%;
    transition: border-color .15s ease;
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input::placeholder { color: var(--text-mute); }
.num-row {
    display: grid;
    grid-template-columns: var(--tap) 1fr var(--tap);
    gap: 8px;
    align-items: stretch;
}
.num-btn {
    background: linear-gradient(180deg, var(--surface-3), #b0834e);
    color: white;
    border-radius: var(--radius-sm);
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 400;
    min-height: var(--tap);
    transition: background .15s ease;
    box-shadow: 0 2px 0 var(--char);
}
.num-btn:active { background: var(--accent); transform: translateY(2px); box-shadow: 0 0 0 var(--char); }
.num-row input {
    text-align: center;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.6rem;
}
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}