/* Brew Tool styles. Phone first; the desktop card and the tablet layouts are at the end.
   Sections: tokens · base · header · hero · chart · readings · controls ·
   sheets and buttons · Settings · dialogs · brew log · extraction chart · desktop · tablet */

/* ===== Tokens ===== */
:root {
    --ink: #2f2118;          /* headings, body text */
    --roast: #5c3a1e;        /* weight, time, ratio, weight line */
    --brown: #8a4510;        /* reading values, filled buttons */
    --accent: #b45309;       /* EC line, active tab, text buttons, focus */
    --muted: #8f7a66;        /* labels, axis text, secondary text */
    --faint: #c4b4a2;        /* placeholders, disconnected, disabled */
    --line: #eee4d6;         /* hairlines, gridlines */
    --edge: #e0b98a;         /* outline button borders */
    --cream: #fbf5ea;        /* soft fills: icon circles, result boxes */
    --cream-dark: #f4e8d6;   /* pressed / hovered soft fills */
    --disabled: #f4efe8;     /* fill of a disabled button */
    --ok: #3f8f4f;           /* connected */
    --danger: #b3261e;       /* errors, delete */
    --radius: 8px;
    --label: 11px;           /* small uppercase labels */
}

/* ===== Base ===== */
html, body {
    /* No pull-to-refresh / bounce: a stray swipe mid-brew would reload and drop Bluetooth */
    overscroll-behavior-y: none;
}
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;      /* visible viewport on phones */
    display: flow-root;      /* contain the container's margins */
    background: #fff;
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
button, input, select {
    font-family: inherit;
}
[hidden] {
    display: none !important;
}
/* One focus ring, for keyboard users only */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Small uppercase labels share one look */
.progress-weight-unit,
.hero-stat-label,
.readings .ritual-info-label,
.log-cards .ritual-info-label,
.log-summary-label,
.result-box > span,
.result-box > label,
.dialog-step,
.settings-group {
    font-size: var(--label);
    line-height: 1.35;           /* fixed, so a fallback glyph (e.g. Android's "→") can't make the line taller */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* ===== Main screen: full-bleed column, buttons at the bottom ===== */
.ritual-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 0 10px;
    background: #fff;
}

/* ===== Header: app name left, device icons and settings right ===== */
.ritual-header {
    box-sizing: border-box;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 8px 16px 0;
}
.app-title {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--roast);
}
.ritual-header-actions,
.device-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}
.device-icon,
.ritual-header .ritual-settings {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.device-icon svg,
.ritual-header .ritual-settings svg {
    width: 20px;
    height: 20px;
}
/* Faded = not connected (tap to connect); solid with a green dot = connected */
.device-icon[data-connected="false"] {
    color: var(--faint);
}
.device-icon[data-connected="true"] {
    color: var(--brown);
    cursor: default;
}
.device-icon[data-connected="true"]::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 2px #fff;
}
.ritual-header .ritual-settings {
    color: var(--muted);
}
/* Connection errors */
.ritual-status {
    margin: 0 16px;
    text-align: right;
    font-size: 0.85em;
    color: var(--danger);
}

/* ===== Hero: weight, then time and ratio ===== */
.ritual-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 18px 0 10px;
}
.progress-weight-unit {
    margin-bottom: 2px;
}
.hero-weight {
    display: flex;
    align-items: baseline;
    width: 100%;
    color: var(--roast);
}
.progress-weight-value {
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.hero-weight .progress-weight-value {
    display: contents;           /* its .w-int / .w-frac children join the row */
    font-variant-numeric: tabular-nums;
}
.hero-weight .w-int,
.hero-weight .w-frac {
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
/* The decimal point stays on the midline: whole grams fill the left half
   (right-aligned) minus half the point's width, then the readout shifts one digit right */
.hero-weight .w-int {
    flex: 0 0 calc(50% - 0.13em + 1ch);
    text-align: right;
}
/* No weight yet ("--"): centred and faint, it isn't a reading */
.hero-weight .progress-weight-value.is-placeholder {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--faint);
}
.hero-weight-unit {
    margin-left: 0.3rem;
    font-size: 1.5rem;
    opacity: 0.8;
}
.hero-meta {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 40px;
    margin-top: 8px;
}
.hero-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
.progress-timer,
.progress-ratio-value {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--roast);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Ratio: proportional digits so "1:15.0" isn't spread out (the timer ticks, so it keeps tabular) */
.progress-ratio-value {
    font-variant-numeric: proportional-nums;
}
/* A dash until there is a ratio */
.progress-ratio-value:empty::before {
    content: "\2014";
    color: var(--muted);
}

/* ===== Chart: tabs and legend above, drawn straight on white; fills the free height ===== */
.brew-chart {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 14px 16px 6px;
}
.chart-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 26px;
}
.chart-dots {
    display: flex;
    gap: 16px;
}
.chart-dot {
    padding: 2px 0 5px;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}
.chart-dot[aria-current="true"] {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
}
/* Legend / axis titles: a short line swatch before each series */
.brew-chart-label {
    display: flex;
    gap: 12px;
    font-size: var(--label);
    color: var(--muted);
}
.chart-legend {
    margin-left: auto;
}
.brew-chart-label-weight::before,
.brew-chart-label-ec::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 2.5px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 2px;
    background: var(--roast);
}
.brew-chart-label-ec::before {
    height: 1.5px;
    background: var(--accent);
}
#extractionSlide .brew-chart-label {
    padding-left: 4px;
}
/* Carousel after a TDS brew: brew chart, then TDS vs extraction */
.chart-track {
    flex: 1 1 0;
    min-height: 150px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.chart-track::-webkit-scrollbar {
    display: none;
}
.chart-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}
/* The canvas fills its slide; its own pixel size must not feed back into the layout */
.chart-slide canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.chart-slide .extraction-chart {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
}
/* Nothing connected: Connect in the empty chart, or under a stopped brew's chart */
.chart-connect {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 132px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brown);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.chart-connect:disabled {
    opacity: 0.75;
    cursor: progress;
}
.strip-connect-row {
    display: flex;
    justify-content: center;
    margin: -6px 16px 8px;
}
.strip-connect-row:has(> [hidden]) {
    display: none;
}
.chart-connect.strip-connect {
    position: static;
    transform: none;
    min-width: 116px;
    min-height: 36px;
    font-size: 0.95rem;
}
/* After Stop: live readings under the frozen chart */
.live-strip {
    margin: 0 16px 2px;
    font-size: var(--label);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ===== Readings: a spec sheet, labels above values, no boxes ===== */
.readings,
.log-cards {
    display: grid;
    /* Up to three columns; unused ones collapse, so two readings share the row evenly */
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 24px) / 3), 1fr));
    gap: 12px;
}
.readings {
    margin: 8px 16px 0;
}
.readings .ritual-info {
    display: contents;           /* both sections share one grid */
}
.ritual-info-item {
    min-width: 0;
}
.readings .ritual-info-label,
.log-cards .ritual-info-label {
    letter-spacing: 0.06em;
}
.readings .ritual-info-value,
.log-cards .ritual-info-value {
    margin-top: 1px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--brown);
}
.readings .ritual-info-value {
    white-space: nowrap;
}
.readings .ritual-info-value em {
    font-style: normal;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
}
/* In → out on one line (scale-ui.js shrinks it to fit) */
#targetWeight {
    white-space: nowrap;
    overflow: hidden;
}

/* ===== Controls: one big main button, icon + label buttons either side ===== */
.ritual-main-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    margin: 12px 0 6px;
    padding: 0 8px;
}
.side-action {
    width: 76px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--brown);
    cursor: pointer;
}
.side-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
}
.side-icon svg {
    width: 23px;
    height: 23px;
}
.side-label {
    font-size: var(--label);
    font-weight: 500;
}
.timer-action {
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brown);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.timer-action svg {
    display: block;
    margin: 0 auto;
    stroke-width: 2.5;
}
.side-action:disabled,
.timer-action:disabled {
    color: var(--faint);
    cursor: not-allowed;
}
.side-action:disabled .side-icon,
.timer-action:disabled {
    background: var(--disabled);
}
/* Order: Tare | Start/Stop/Reset | Beans or CSV; after Stop: Final TDS | Reset | CSV */
#tareBtn { order: 1; }
#timerToggleBtn { order: 2; }
#tareBeanBtn,
#exportCsvBtn { order: 3; }
.ritual-main-actions.is-stopped #tareBtn { display: none; }
.ritual-main-actions.is-stopped #tareBeanBtn { order: 1; }

/* ===== Sheets (Settings, brew log, dialogs) ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;            /* sheets taller than the screen scroll inside the overlay */
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, 0.3);
}
.modal-content {
    position: relative;
    box-sizing: border-box;
    width: min(480px, 100%);
    margin: 0 auto;
    background: #fff;
}
.modal h2,
.modal h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}
/* Round icon buttons: close, back, rename */
.round-close,
.log-back,
.log-rename {
    flex: none;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: var(--cream);
    color: var(--brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.round-close {
    font-size: 1.6rem;
    line-height: 1;
}

/* ===== Buttons in sheets: filled (one per screen), outline, text ===== */
.modal .ritual-btn {
    min-width: 88px;
    min-height: 36px;
    padding: 0.45em 0.85em;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--brown);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.modal .ritual-btn:disabled {
    background: var(--disabled);
    color: var(--faint);
    cursor: not-allowed;
}
/* Outline: Disconnect, Tare in the calculator */
.modal .ritual-btn.btn-outline,
.modal .ritual-btn.ritual-disconnect,
.modal .ritual-btn.ritual-connect[aria-pressed="true"] {
    border: 1.5px solid var(--edge);
    background: #fff;
    color: var(--accent);
}
/* Text: Cancel, Keep current */
.modal .ritual-btn.btn-secondary {
    min-width: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: 0;
    background: transparent;
    color: var(--accent);
}
/* Delete: outline, then filled to confirm */
.modal .ritual-btn.log-delete {
    padding: 0.45em 1.1em;
    border: 1.5px solid #e6b3ad;
    background: #fff;
    color: var(--danger);
}
.modal .ritual-btn.log-delete-now {
    border: 0;
    background: var(--danger);
}
.modal .ritual-btn.tare-inline {
    min-width: 0;
    min-height: 32px;
    margin-left: 6px;
    padding: 0.2em 0.6em;
    font-size: 0.8em;
    vertical-align: middle;
}
.dialog-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.dialog-actions:has(> :only-child) {
    justify-content: flex-end;
}

/* ===== Inputs ===== */
input[type="number"],
.log-name-input,
.text-input {
    box-sizing: content-box;
    padding: 4px 6px;
    border: 2px solid var(--muted);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 1em;
    outline: none;
}
input[type="number"]:focus,
.log-name-input:focus,
.text-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18);
}
/* No spinner arrows (Android shows none; keep desktop the same) */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
    text-align: right;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.field-error {
    margin: 0 0 0.5em;
    text-align: right;
    font-size: 0.9em;
    color: var(--danger);
}

/* ===== Tables: Settings values, calculator rows ===== */
.memory-table {
    width: 100%;
    margin-bottom: 1em;
    border-collapse: collapse;
    font-size: 1.05em;
}
.memory-table td {
    padding: 0.4em 0.35em;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.memory-table td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.memory-table label {
    font: inherit;
    color: inherit;
}

/* ===== Settings: a full-height sheet with a title bar and three groups ===== */
#settingsModal .settings-sheet {
    min-height: 100%;
    padding: 0 16px 28px;
}
.settings-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.settings-group {
    margin: 18px 0 6px;
    font-weight: 500;
}
.device-row {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05em;
}
.device-name {
    flex: 1;
}
.device-name small {
    display: block;
    font-size: var(--label);
    color: var(--muted);
}
.device-state {
    font-size: 0.9em;
    color: var(--muted);
}
.device-state.is-on {
    color: var(--ok);
}
.connect-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
/* Value table: fixed columns so the Edit buttons line up */
.settings-table {
    table-layout: fixed;
}
.settings-table td {
    padding: 0.45em 0.25em;
}
.settings-table td:nth-child(2) {
    width: 30%;
}
.settings-table td:nth-child(3) {
    width: 96px;
}
/* Editing: the value becomes a small input on the same line ("1: [15]", "[2.0] g/g") */
.settings-table input[type="number"] {
    width: 3.6em;
    margin: 0 0 0 2px;
    vertical-align: middle;
}
/* Quiet text buttons: Edit / Save / Calibrate */
.memory-overwrite {
    width: 100%;
    min-height: 36px;
    padding: 6px 4px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
}
/* Default k_v in use until the first calibration */
.kv-uncalibrated {
    display: block;
    font-size: 0.75em;
    color: var(--muted);
}
/* A row that opens the brew log */
.settings-row-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font-size: 1.05em;
    text-align: left;
    cursor: pointer;
}
.settings-row-btn > span:first-child {
    flex: 1;
}
.settings-row-meta {
    font-size: 0.9em;
    color: var(--muted);
}
.settings-row-btn svg {
    color: var(--muted);
}

/* ===== Final TDS and calibration: sheets that slide up from the bottom ===== */
.modal.tds-dialog {
    z-index: 1002;               /* above Settings */
    align-items: flex-end;
}
.tds-dialog .modal-content {
    max-height: 92dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 16px 20px;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(47, 33, 24, 0.12);
}
/* Grab handle */
.tds-dialog .modal-content::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: #e4d8c8;
}
.tds-dialog h3 {
    margin-bottom: 0.6em;
}
.dialog-step {
    margin: 0 0 2px;
}
.dialog-note {
    line-height: 1.5;
}
.tds-table {
    margin-bottom: 0.6em;
}
.tds-table tr.tds-strong td {
    font-weight: 600;
}
.tds-table td.tare-cell {
    white-space: nowrap;         /* "Scale [Tare]" stays together */
}
.tds-table input[type="number"] {
    width: 4em;
    margin: 0 2px 0 0;
}
.result-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 0;
}
.result-pair.one {
    grid-template-columns: 1fr;
}
.result-box {
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--cream);
}
.result-box > span,
.result-box > label {
    display: block;
    margin: 0;
    letter-spacing: 0.06em;
}
.result-box > b {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: var(--brown);
}
.result-box input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    margin: 2px 0 0;
    font-size: 18px;
    color: var(--brown);
    text-align: left;
}
/* Sync: labels left, inputs fill the rest of the row */
.sync-table td:first-child {
    width: 4.5em;
}
.sync-table td:nth-child(2) {
    white-space: normal;
}
.sync-table .text-input {
    box-sizing: border-box;
    width: 100%;
    font-size: 0.95em;
}
.tds-formula {
    margin: 12px 0 14px;
    padding: 10px 6px;
    border-radius: var(--radius);
    background: var(--cream);
    font-size: 1.05em;
}
.tds-formula math {
    font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", serif;
}

/* ===== Brew log (Settings > Brew log): saved brews, then one brew ===== */
.modal.brew-log {
    z-index: 1003;               /* above Settings */
    align-items: flex-start;
}
.brew-log .modal-content {
    min-height: 100dvh;
    padding: 12px 16px 24px;
}
.log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.log-header h3 {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}
.log-count {
    font-size: 0.85em;
    color: var(--muted);
}
.log-list {
    list-style: none;
    margin: 0 0 0.6em;
    padding: 0;
}
.log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.log-item-name {
    font-weight: 600;
}
.log-item-sub {
    font-size: 0.85em;
    color: var(--muted);
}
.log-item-right {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Rename: the name becomes an input, the pencil a Save button */
.log-name-input {
    box-sizing: border-box;
    width: 100%;
    padding: 4px 8px;
    font: inherit;
}
.log-rename {
    padding: 0 8px;
    font-weight: 600;
}
.log-rename.is-saving {
    padding: 0 14px;
    background: var(--brown);
    color: #fff;
}
#logDate {
    margin: 2px 0 8px 48px;      /* lines up with the name, past the back button */
}
/* Summary: time, ratio and TDS like the main screen's time and ratio */
.log-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 12px;
    text-align: center;
}
.log-summary > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.log-summary-value {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--roast);
    font-variant-numeric: tabular-nums;
}
.log-chart {
    margin: 8px 0;
}
.log-chart .brew-chart-label {
    margin-bottom: 4px;
}
#logBrewChartLabel {
    justify-content: flex-end;   /* the legend sits right, as on the main screen */
}
.log-chart canvas {
    display: block;
    width: 100%;
    height: 150px;
}
.log-group {
    margin: 12px 0 4px;
}
.log-cards .ritual-info-value {
    font-size: 18px;
    overflow-wrap: anywhere;
}
.log-delete-area {
    margin-top: 16px;
}
.log-delete-confirm p {
    margin: 0 0 0.6em;
}

/* ===== TDS vs extraction chart (SVG drawn by tds.js) ===== */
.extraction-chart {
    display: block;
    width: 100%;
    height: 150px;
    font-family: inherit;
    cursor: pointer;
}
.extraction-chart:focus:not(:focus-visible) {
    outline: none;               /* tapping it toggles the labels; no ring */
}
.log-ey-chart {
    cursor: default;
}
.ey-grid {
    stroke: var(--line);
    stroke-width: 1;
}
.ey-tick,
.ey-axis-title {
    fill: var(--muted);
    font-size: 10px;
}
.ey-axis-title {
    font-size: 10.5px;
}
.ey-gold {
    fill: rgba(180, 83, 9, 0.14);
}
.ey-ref {
    fill: #c9a46c;
}
.ey-label {
    fill: var(--muted);
    font-size: 9px;
}
.ey-hint {
    fill: var(--muted);
    font-size: 12px;
}
.ey-brew {
    fill: var(--accent);
    stroke: #fff;
    stroke-width: 1.5;
}
.ey-brew.ey-brew-estimate {
    fill: #fff;
    stroke: var(--accent);
    stroke-width: 2;
}
.ey-brew-label {
    fill: var(--accent);
    font-size: 10.5px;
    font-weight: 600;
}
.ey-trail {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-opacity: 0.45;
    stroke-linejoin: round;
}

/* ===== Debug log (Settings > Enable logging, hidden for now) ===== */
.log {
    max-height: 180px;
    margin: 16px;
    padding: 12px;
    overflow-y: auto;
    border-radius: var(--radius);
    background: var(--cream);
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 0.85em;
}

/* ===== Trim: after Stop, if Stop was pressed late (optional) ===== */
.chart-trim {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 3px 8px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-size: var(--label);
    white-space: nowrap;
    cursor: pointer;
}
.chart-trim svg {
    width: 13px;
    height: 13px;
}
.chart-trim.is-trimmed {
    background: var(--cream);
    color: var(--accent);
}
.chart-trim.is-trimmed svg {
    display: none;                   /* "Trimmed" alone fits next to the legend on a phone */
}
/* The end line over the brew chart; what's after it is faded */
.trim-overlay {
    position: absolute;
    inset: 0;
    touch-action: none;
    cursor: ew-resize;
}
.trim-shade {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.75);
}
.trim-line {
    position: absolute;
    top: 0;
    bottom: 20px;
    width: 2px;
    margin-left: -1px;
    background: var(--accent);
}
.trim-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(47, 33, 24, 0.3);
}
.trim-hint {
    color: var(--accent);
}
/* Trim bar: Cancel, -1 s / end / +1 s, Trim (in place of the buttons) */
body.trimming .ritual-main-actions {
    display: none;
}
.trim-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 80px;
    margin: 12px 0 6px;
    padding: 0 16px;
}
.trim-step {
    display: flex;
    align-items: center;
    gap: 6px;
}
.trim-step button {
    width: 48px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: var(--cream);
    color: var(--brown);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.trim-step b {
    min-width: 2.6em;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: var(--roast);
    font-variant-numeric: tabular-nums;
}
.trim-text-btn {
    padding: 10px 4px;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.trim-primary-btn {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius);
    background: var(--brown);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* ===== Hover (mouse only: touch screens keep :hover after a tap) ===== */
@media (hover: hover) {
    .timer-action:hover:enabled,
    .chart-connect:hover:enabled,
    .modal .ritual-btn:hover:enabled {
        background: var(--roast);
    }
    .side-action:hover:enabled .side-icon,
    .device-icon[data-connected="false"]:hover,
    .ritual-header .ritual-settings:hover,
    .round-close:hover,
    .log-back:hover,
    .log-rename:not(.is-saving):hover,
    .memory-overwrite:hover,
    .settings-row-btn:hover,
    .log-item:hover {
        background: var(--cream-dark);
    }
    .modal .ritual-btn.btn-outline:hover:enabled,
    .modal .ritual-btn.ritual-disconnect:hover:enabled,
    .modal .ritual-btn.ritual-connect[aria-pressed="true"]:hover:enabled,
    .modal .ritual-btn.btn-secondary:hover:enabled,
    .modal .ritual-btn.log-delete:hover:enabled {
        background: var(--cream);
    }
    .modal .ritual-btn.log-delete-now:hover:enabled {
        background: #8c1d17;
    }
    .trim-primary-btn:hover {
        background: var(--roast);
    }
    .chart-trim:hover,
    .trim-step button:hover {
        background: var(--cream-dark);
    }
}

/* ===== Desktop and tablets: a floating card on a warm background ===== */
@media (min-width: 601px) {
    body {
        background: linear-gradient(to bottom, #fff8e1 0%, #ffe0b2 100%);
    }
    .ritual-container {
        display: block;
        max-width: 420px;
        min-height: 0;
        margin: 40px auto;
        padding-bottom: 32px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07);
    }
    .ritual-hero {
        margin: 28px 0 14px;
    }
    .ritual-main-actions {
        gap: 24px;
    }
    .log-ey-chart {
        height: 170px;
    }
}

/* ===== Tablet (iPad), landscape and portrait ===== */
/* Any iPad. Landscape (11": ~1194 x 760 in the browser, 12.9": ~1366 x 930), and portrait
   (~834 x 1120, ~1024 x 1290: its own grid and sizes are in the next block). The big sizes
   scale with the screen, so the 11" and 12.9" get the same layout.
   Landscape, left third: weight, time and ratio (top half), all nine readings (bottom half),
   buttons. Right two thirds: the charts, both at once. Settings slides in from the right;
   the brew log is a list beside the open brew. */
@media (min-width: 1024px) and (min-height: 700px) and (orientation: landscape),
       (min-width: 768px) and (min-height: 1000px) and (orientation: portrait) {
    /* The only place that decides "tablet": scale-ui.js reads this (isTablet) */
    :root {
        --layout: tablet;
    }
    body {
        background: #fff;
    }
    .ritual-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        grid-template-rows: auto 1fr auto auto 1fr auto;
        grid-template-areas:
            "header header"
            "hero   chart"
            "strip  chart"
            "conn   chart"
            "read   chart"
            "ctrl   chart";
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 0 0 20px;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
    }
    .ritual-header {
        grid-area: header;
        height: 64px;
        padding: 8px 28px 0;
    }
    .app-title {
        font-size: 20px;
    }

    /* Hero: as large as the third allows */
    .ritual-hero {
        grid-area: hero;
        align-self: center;
        margin: 0;
    }
    .progress-weight-unit,
    .hero-stat-label {
        font-size: 14px;
    }
    .progress-weight-value,
    .hero-weight .w-int,
    .hero-weight .w-frac {
        font-size: clamp(5rem, 15vh, 9rem);
    }
    .hero-weight-unit {
        font-size: clamp(1.8rem, 4.6vh, 2.8rem);
    }
    .hero-meta {
        gap: 64px;
        margin-top: clamp(8px, 2vh, 20px);
    }
    .progress-timer,
    .progress-ratio-value {
        font-size: clamp(36px, 5.6vh, 52px);
    }
    .live-strip {
        grid-area: strip;
        margin: 16px 28px 0;
        font-size: 13px;
        text-align: center;
    }
    .strip-connect-row {
        grid-area: conn;
        margin: 12px 28px 0;
    }
    .trim-hint {
        grid-area: strip;
        margin: 16px 28px 0;
        font-size: 13px;
        text-align: center;
    }

    /* Readings: three rows of three, always in this order: scale, strength, EC meter */
    .readings {
        grid-area: read;
        align-self: center;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(16px, 3.2vh, 30px) 16px;
        margin: 0 28px;
        padding-top: clamp(16px, 3vh, 28px);
        border-top: 1px solid var(--line);
    }
    #flowPanel { order: 1; }
    #targetPanel { order: 2; }
    #remainderPanel { order: 3; }
    #tdsPanel { order: 4; }
    #eyPanel { order: 5; }
    #yieldPanel { order: 6; }
    #tempPanel { order: 7; }
    #ecPanel { order: 8; }
    #ciyPanel { order: 9; }
    .readings .ritual-info-label {
        font-size: 13px;
        white-space: nowrap;
    }
    .readings .ritual-info-value {
        font-size: clamp(20px, min(3vh, 2.1vw), 28px);
    }
    .readings .ritual-info-value em {
        font-size: clamp(13px, min(1.8vh, 1.3vw), 17px);
    }

    /* Buttons */
    .ritual-main-actions,
    .trim-bar {
        grid-area: ctrl;
        margin: 0;
        padding: 0 28px;
    }
    .chart-trim {
        font-size: 13px;
    }
    .side-action {
        width: 96px;
    }
    .side-icon {
        width: clamp(52px, 7vh, 64px);
        height: clamp(52px, 7vh, 64px);
    }
    .side-icon svg {
        width: 28px;
        height: 28px;
    }
    .side-label {
        font-size: 13px;
    }
    .timer-action {
        width: clamp(80px, 11vh, 104px);
        height: clamp(80px, 11vh, 104px);
    }
    .timer-action svg {
        width: 40px;
        height: 40px;
    }

    /* Charts: stacked, no tabs; the brew chart fills the space when it is alone */
    .brew-chart {
        grid-area: chart;
        min-height: 0;
        margin: 20px 28px 0 0;
        padding-left: 28px;
        border-left: 1px solid var(--line);
        --chart-font: 14px;
        --chart-values: 1;
    }
    .chart-dots {
        display: none;
    }
    .brew-chart-label {
        font-size: 13px;
    }
    .chart-track {
        flex-direction: column;
        gap: 20px;
        overflow: hidden;
        scroll-snap-type: none;
    }
    /* A hairline between the brew chart and the extraction chart */
    #extractionSlide {
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }
    .chart-slide {
        flex: 1 1 0;
        min-height: 0;
    }
    .ey-tick,
    .ey-axis-title,
    .ey-brew-label {
        font-size: 13px;
    }
    .ey-label {
        font-size: 12px;
    }
    .ey-hint {
        font-size: 15px;
    }

    /* Final TDS: over the left third, so the charts stay visible */
    .modal.tds-dialog {
        justify-content: flex-start;
    }
    .tds-dialog .modal-content {
        width: calc(33.333% - 16px);
        margin: 0 0 0 8px;
    }

    /* Settings: a panel from the right; the main screen stays visible */
    #settingsModal,
    #calibrateModal,
    #syncModal {
        background: rgba(47, 33, 24, 0.12);
    }
    #settingsModal .settings-sheet {
        width: 480px;
        margin: 0 0 0 auto;
        padding: 0 28px 28px;
        box-shadow: -8px 0 32px rgba(47, 33, 24, 0.12);
    }
    /* Calibration and Sync open inside the Settings panel */
    #calibrateModal,
    #syncModal {
        justify-content: flex-end;
    }
    #calibrateModal .modal-content,
    #syncModal .modal-content {
        width: 480px;
        margin: 0;
        padding-left: 28px;
        padding-right: 28px;
    }

    /* Brew log: the list beside the open brew */
    .brew-log .modal-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
        width: 100%;
        padding: 0;
    }
    #logListView {
        position: sticky;
        top: 0;
        box-sizing: border-box;
        height: 100dvh;
        overflow-y: auto;
        padding: 12px 20px 24px 28px;
        border-right: 1px solid var(--line);
    }
    .log-header {
        min-height: 52px;
    }
    .log-item {
        padding: 12px 10px;
        border-bottom-color: transparent;
        border-radius: var(--radius);
        box-shadow: 0 1px 0 var(--line);
    }
    .log-item.is-selected {
        background: var(--cream);
        box-shadow: none;
    }
    .log-item.is-selected .log-item-name {
        color: var(--brown);
    }
    #logDetailView {
        padding: 12px 28px 28px;
    }
    #logDetailView .log-back {
        display: none;               /* the list is beside it */
    }
    #logDetailView .log-header h3 {
        font-size: 26px;
    }
    #logDate {
        margin: 2px 0 12px;
    }
    .log-summary {
        grid-template-columns: repeat(auto-fit, minmax(0, 180px));
        margin: 12px 0 20px;
        text-align: left;
    }
    .log-summary > div {
        align-items: flex-start;
    }
    .log-summary-label {
        font-size: 13px;
    }
    .log-summary-value {
        font-size: 40px;
    }
    .log-chart {
        margin: 0 0 20px;
        --chart-font: 13px;
        --chart-values: 1;
    }
    .log-chart canvas,
    .log-chart .log-ey-chart {
        height: 260px;
    }
    #logEyChartBox {
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }
    .log-chart .brew-chart-label {
        font-size: 13px;
    }
    /* Final data: the three groups side by side */
    #logCards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        column-gap: 32px;
    }
    #logCards .log-group {
        margin: 0 0 8px;
        font-size: 13px;
    }
    #logCards .log-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .log-cards .ritual-info-label {
        font-size: 13px;
    }
    .log-cards .ritual-info-value {
        font-size: 24px;
    }
    .log-delete-area {
        margin-top: 28px;
    }
}

/* ===== Tablet portrait: what the tablet rules above don't cover =====
   Charts on top (TDS vs extraction, then the brew chart with its legend and Trim), then the
   readings (left) and weight, time and ratio (right) in the bottom third, buttons at the bottom. */
@media (min-width: 768px) and (min-height: 1000px) and (orientation: portrait) {
    .ritual-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto auto auto auto;
        grid-template-areas:
            "header header"
            "chart  chart"
            "strip  strip"
            "conn   conn"
            "read   hero"
            "ctrl   ctrl";
    }
    .brew-chart {
        margin: 12px 28px 0;
        padding-left: 0;
        border-left: 0;
    }
    /* Extraction chart on top; the brew chart, with its legend and Trim, just above the numbers */
    .chart-track {
        display: contents;
    }
    #extractionSlide {
        order: 1;
        margin-bottom: 16px;
        padding: 0 0 20px;
        border-top: 0;
        border-bottom: 1px solid var(--line);
    }
    .chart-head {
        order: 2;
    }
    .chart-slide:first-child {
        order: 3;
    }
    .live-strip,
    .trim-hint {
        margin: 12px 28px 0;
    }
    /* Bottom third: weight, time and ratio | the nine readings */
    .ritual-hero,
    .readings {
        align-self: stretch;
        margin-top: 16px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
    }
    .ritual-hero {
        justify-content: center;
        margin-right: 28px;
    }
    .readings {
        align-content: center;
        margin: 16px 0 0 28px;
        padding-right: 12px;
    }
    .progress-weight-value,
    .hero-weight .w-int,
    .hero-weight .w-frac {
        font-size: clamp(4.5rem, 12vw, 8.5rem);
    }
    .hero-weight-unit {
        font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    }
    .progress-timer,
    .progress-ratio-value {
        font-size: clamp(32px, 4.6vw, 48px);
    }
    .readings .ritual-info-value {
        font-size: clamp(20px, 2.6vw, 28px);
    }
    .readings .ritual-info-value em {
        font-size: clamp(13px, 1.6vw, 17px);
    }
    /* Buttons across the bottom */
    .ritual-main-actions {
        justify-content: center;
        gap: 96px;
        margin-top: 20px;
    }
    .trim-bar {
        box-sizing: border-box;
        width: 100%;
        max-width: 640px;
        margin: 20px auto 0;
    }
    /* Final TDS: from the bottom, centred; the charts above stay visible */
    .modal.tds-dialog {
        justify-content: center;
    }
    .tds-dialog .modal-content {
        width: min(560px, 100%);
        margin: 0 auto;
    }
    /* Brew log: a narrower list beside the open brew */
    .brew-log .modal-content {
        grid-template-columns: 300px minmax(0, 1fr);
    }
    .log-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}