/* Putby tool pages (canning times by altitude, jar labels).
   Palette and type follow /apps/putby/index.html: cream paper, teal-black
   ink, rust accent, plum for safety copy, olive and teal as supporting
   greens. Light only, like the app page. One rule for the whole page: the
   altitude you set and the time you read are the biggest things on it. */

:root {
    --ink: #243B3A;
    --muted: #5d7472;
    --soft: #90a3a1;
    --rust: #C56E2C;
    --rust-deep: #A8531B;
    --plum: #8E3B52;
    --plum-ink: #6e3344;
    --olive: #6F7A4F;
    --teal: #2E6E6A;
    --teal-ink: #235957;
    --paper: #ffffff;
    --card: #FBF7EE;
    --line: #e7ddc9;
    --line-strong: #d8ccb4;
    --method: var(--rust-deep);       /* set per page: pressure = rust, water bath = teal */
    --method-soft: rgba(168, 83, 27, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background:
      radial-gradient(120% 80% at 6% 0%, rgba(197,110,44,.12) 0%, rgba(197,110,44,0) 45%),
      radial-gradient(120% 90% at 96% 4%, rgba(111,122,79,.16) 0%, rgba(111,122,79,0) 50%),
      linear-gradient(170deg,#f7f1e6 0%, #f1ecdd 52%, #ece9d6 100%);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.65;
}

/* ─── Chrome ─────────────────────────────────────────────────────────── */

header {
    background: linear-gradient(180deg,#ffffff 0%, #fbf7ee 100%);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.header-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.header-inner img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.header-inner a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.header-inner span { color: var(--soft); font-size: 0.9rem; margin-left: auto; text-align: right; }

.container { max-width: 820px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); }
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

.crumbs { font-size: 0.78rem; color: var(--muted); padding: 0.9rem 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ─── Type ───────────────────────────────────────────────────────────── */

h1 {
    font-size: clamp(1.75rem, 4.5vw + .5rem, 2.4rem);
    margin: 1.25rem 0 0.75rem;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h2 {
    font-size: 1.3rem;
    margin: 2.5rem 0 0.75rem;
    color: var(--rust-deep);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

p { color: var(--muted); margin: 1rem 0; }

.lede { font-size: 1.05rem; color: #46605e; max-width: 62ch; }

ul, ol { color: var(--muted); margin: 1rem 0 1rem 1.5rem; }
li { margin: 0.4rem 0; }

strong { color: var(--rust-deep); }

a { color: var(--rust); }
a:hover { color: var(--rust-deep); }

dl { margin: 1rem 0; }
dt { font-weight: 700; color: var(--ink); margin-top: 1.1rem; }
dd { color: var(--muted); margin: 0.3rem 0 0; }

/* ─── Tables ─────────────────────────────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
}

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 0.8rem 1rem 0.2rem; font-size: 0.82rem; color: var(--muted); caption-side: top; }
th, td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
thead th { color: var(--rust-deep); font-weight: 700; font-size: 0.8rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(197,110,44,.07); }
tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
tbody td { color: var(--ink); font-weight: 600; }
tbody th a { color: var(--ink); text-decoration: none; font-weight: 700; }
tbody th a:hover { color: var(--rust-deep); text-decoration: underline; }
tr:last-child th, tr:last-child td { border-bottom: none; }
td.na { color: var(--plum); font-style: italic; font-weight: 500; }
td.na::before { content: "\2014\00a0"; opacity: .6; }

/* The method pill under a food's name on the chart. */
.method {
    display: inline-block;
    margin-top: .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .1rem .5rem;
    border-radius: 999px;
    color: #fff;
    background: var(--rust-deep);
}
.method.water { background: var(--teal); }

/* ─── Safety copy ────────────────────────────────────────────────────── */

.disclaimer, .warning {
    background: rgba(142, 59, 82, 0.09);
    border: 1px solid rgba(142, 59, 82, 0.35);
    border-top: 4px solid var(--plum);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1.75rem 0;
    font-size: 0.95rem;
    color: var(--plum-ink);
}
.warning p, .disclaimer p { color: var(--plum-ink); margin: .5rem 0; }
.warning p + p { border-top: 1px dashed rgba(142, 59, 82, 0.35); padding-top: .6rem; }
.warning strong, .disclaimer strong { color: var(--plum); }
.warning a { color: var(--plum); }

/* ─── The tool card: altitude in, time out ───────────────────────────── */

.tool {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0;
    margin: 1.5rem 0;
    box-shadow: 0 1px 0 rgba(36,59,58,.04), 0 12px 32px -18px rgba(36,59,58,.25);
    overflow: hidden;
}

.tool-band {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .65rem 1.25rem;
    background: var(--method);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tool-band .acid { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .9; font-size: .85rem; }
.tool-band .acid::before { content: "·"; margin-right: .6rem; opacity: .7; }
.tool.pressure, .pressure .tool { --method: var(--rust-deep); --method-soft: rgba(168, 83, 27, .10); }
.tool.water, .water .tool { --method: var(--teal); --method-soft: rgba(46, 110, 106, .10); }

.tool fieldset { border: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: flex-end; padding: 1.1rem 1.25rem 0; }
.tool legend { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: .25rem; float: left; width: 100%; }
.tool .field { display: flex; flex-direction: column; gap: 0.35rem; max-width: 100%; }
.field-label { font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tool.chart { --method: var(--teal-ink); --method-soft: rgba(46, 110, 106, .08); }

.tool input, .tool select {
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--card);
    color: var(--ink);
    min-width: 7rem;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}
.tool input:focus-visible, .tool select:focus-visible, .seg input:focus-visible + span, .chip:focus-visible, .btn:focus-visible {
    outline: 3px solid rgba(197,110,44,.45);
    outline-offset: 2px;
}

/* The altitude box is the biggest control on the page. */
.alt-wrap { display: flex; align-items: stretch; gap: .5rem; }
.tool input[name="alt"] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    width: 8.5ch;
    padding: .35rem .65rem;
    text-align: right;
    letter-spacing: -.02em;
}

/* Segmented controls: feet / metres, and the jar sizes. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg label { position: relative; display: flex; font-weight: 600; color: var(--ink); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; min-width: 0; }
.seg span { display: block; padding: .6rem .9rem; font-size: .95rem; border-right: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; line-height: 1.2; }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--method); color: #fff; }
.seg.unit span { padding: .35rem .8rem; font-size: 1.1rem; display: flex; align-items: center; height: 100%; }
.seg.unit { align-self: stretch; }

.presets { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem 1.25rem 0; align-items: center; }
.presets-label { font-size: .78rem; color: var(--muted); margin-right: .25rem; }
.chip {
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--teal-ink);
    background: rgba(46,110,106,.08);
    border: 1px solid rgba(46,110,106,.22);
    border-radius: 999px;
    padding: .3rem .8rem;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.chip:hover { background: rgba(46,110,106,.16); }

.tool .source, .tool p#alt-help { font-size: 0.82rem; color: var(--muted); margin: .7rem 1.25rem 0; }

/* The readout. */
.result {
    display: block;
    margin: 1rem 0 0;
    padding: 1.25rem 1.25rem 1.35rem;
    background: var(--method-soft);
    border-top: 1px solid var(--line);
    color: var(--ink);
}
.result p { margin: 0.25rem 0; color: var(--muted); }
.result .big { font-size: 1.6rem; font-weight: 700; color: var(--ink); margin: 0; }
.result.closed { background: rgba(142, 59, 82, 0.09); border-top-color: rgba(142, 59, 82, 0.35); }
.result.closed p { color: var(--plum-ink); font-size: 1rem; }
.result.closed .r-label { color: var(--plum); }

.r-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--method); margin: 0 0 .25rem; }
.r-time { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin: 0; color: var(--ink); line-height: 1; }
.r-time .n { font-size: clamp(3.4rem, 14vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.r-time .u { font-size: 1.35rem; font-weight: 600; color: var(--muted); }
.r-time .where { font-size: 1.05rem; font-weight: 600; color: var(--method); margin-left: .25rem; }
.r-psi { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .8rem 0 0; }
.r-psi span { display: flex; align-items: baseline; gap: .35rem; color: var(--ink); font-weight: 600; }
.r-psi b { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--rust-deep); }
.r-psi small { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.r-meta { margin: .75rem 0 0; font-size: .95rem; color: var(--muted); }
.r-meta b { color: var(--ink); font-weight: 600; }
.result .r-closed-h { font-size: 1.35rem; font-weight: 800; color: var(--plum); margin: 0 0 .35rem; letter-spacing: -.01em; }

/* On the chart page the readout is a one-line status. */
p.result { font-weight: 600; color: var(--ink); }
p.result #chart-alt { color: var(--method); font-weight: 800; }

/* ─── Facts, lists, cards ─────────────────────────────────────────────── */

.facts { list-style: none; margin-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.facts li { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; color: var(--ink); font-weight: 500; }
.facts li strong { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }

.source { font-size: 0.85rem; }
.source ul { margin-left: 1.1rem; }

.cta {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.4rem;
    margin: 2.5rem 0;
}
.cta h2 { margin-top: 0; }
.cta-buttons { display: flex; gap: 0.75rem; margin: 1.1rem 0 0; flex-wrap: wrap; }

.btn {
    padding: 0.8rem 1.4rem;
    border: none;
    border-radius: 10px;
    font: inherit;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary { background: linear-gradient(135deg, #A8531B 0%, #C56E2C 100%); color: #ffffff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(197, 110, 44, 0.32); color: #ffffff; }

.related { margin: 2.5rem 0; }
.related ul { list-style: none; margin-left: 0; }
.related li { margin: 0.5rem 0; }
.food-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.food-list li { margin: 0; }
.food-list a { display: inline-block; padding: .4rem .85rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.food-list a:hover { border-color: var(--rust); color: var(--rust-deep); }

footer {
    text-align: center;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    margin-top: 3rem;
    font-size: 0.9rem;
}
footer a { color: var(--rust); text-decoration: none; }
footer a:hover { color: var(--rust-deep); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Small screens ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
    h2 { font-size: 1.2rem; }
    .btn { width: 100%; text-align: center; }
    .cta-buttons { flex-direction: column; }
}
@media (max-width: 480px) {
    .header-inner span { display: none; }
    .tool fieldset { padding-left: 1rem; padding-right: 1rem; }
    .presets, .result, .tool-band { padding-left: 1rem; padding-right: 1rem; }
    .tool .source, .tool p#alt-help { margin-left: 1rem; margin-right: 1rem; }
    .seg.jar { width: 100%; }
    .seg.jar label { flex: 1; }
    .seg.jar span { text-align: center; padding-left: .4rem; padding-right: .4rem; font-size: .88rem; }
    th, td { padding: .6rem .7rem; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn-primary:hover { transform: none; } }

@media print {
    body { background: #fff; }
    header, footer, .cta, .presets, #adl-qr, .related { display: none; }
    .tool { box-shadow: none; }
}