/* =============================================================================
   pantry.css — the Pantry desk's own sheet (labs 557)

   Tokens only. Every colour here is a var() that assets/css/site.css defines
   and assets/css/dark.css redefines, so this one file serves both editions.
   A literal colour in this file is a bug in the dark edition that the paper
   edition cannot show you. (The one exception is the camera's frame marks,
   which are drawn over a live picture and are white in both.)

   Class names are all prefixed pn-. site.css owns the short names (.band,
   .console, .field, .btn, .seg__b, .lbl, .hint) and this sheet only places
   them.

   Phones first: one column, every control at least 44px tall, nothing wider
   than the screen (the nutrition table scrolls inside its own box if it must).
   Colour is never the only signal: a match's kind is a WORD on a tag, a
   printed barcode is bold and underlined, a warning line carries a bar and
   says what is wrong.
   ========================================================================== */

/* ------------------------------------------------------------------ the hero */
.pn-fact {
    margin: 2.2rem 0 0; padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    max-width: 46rem;
    font-size: .84rem; line-height: 1.6; color: var(--ink-55);
}

/* ------------------------------------------------------------------ the form */
.pn-stat { margin: 0 0 0 auto; font-size: .78rem; letter-spacing: .04em; color: var(--ink-55); text-align: right; }
.pn-stat--busy { color: var(--ink-77); }
.pn-stat--live { color: var(--free); }
.pn-stat--err  { color: var(--taken); }

.pn-form { display: grid; gap: .9rem; min-width: 0; }
.pn-f { min-width: 0; display: grid; gap: .1rem; align-content: start; }
.pn-opt { font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--ink-55); margin-left: .35rem; }
.pn-inline { display: flex; gap: .5rem; min-width: 0; }
.pn-inline .field {
    flex: 1 1 auto; width: 100%; min-width: 0; min-height: 48px;
    font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.pn-go { flex: 0 0 auto; min-height: 48px; white-space: nowrap; }
.pn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pn-btn { min-height: 44px; }
.pn-btn svg { flex: 0 0 auto; }
.pn-btn[hidden], .pn-more[hidden], .pn-recent[hidden], .pn-cam[hidden] { display: none; }
#pn-cam-light[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pn-msg {
    margin: 0; padding: .7rem .9rem;
    border: 1px solid var(--taken); border-left-width: 4px; border-radius: 10px;
    background: var(--taken-wash);
    font-size: .88rem; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.pn-msg[hidden] { display: none; }
@media (max-width: 30rem) {
    .pn-inline { flex-wrap: wrap; }
    .pn-go { flex: 1 1 100%; }
    .pn-acts .pn-btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- the camera */
.pn-cam { display: grid; gap: .7rem; min-width: 0; }
.pn-cam__view {
    position: relative; overflow: hidden;
    width: 100%; max-width: 40rem; margin: 0 auto;
    aspect-ratio: 4 / 3; max-height: 62vh;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--deep);
}
.pn-cam__view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The frame to hold the bars in: four corners and a level line. Drawn on the picture, so white in both editions. */
.pn-cam__aim {
    position: absolute; left: 9%; right: 9%; top: 27%; bottom: 27%;
    border-radius: 10px; pointer-events: none;
    background:
        linear-gradient(#fff, #fff) left top / 26px 3px no-repeat, linear-gradient(#fff, #fff) left top / 3px 26px no-repeat,
        linear-gradient(#fff, #fff) right top / 26px 3px no-repeat, linear-gradient(#fff, #fff) right top / 3px 26px no-repeat,
        linear-gradient(#fff, #fff) left bottom / 26px 3px no-repeat, linear-gradient(#fff, #fff) left bottom / 3px 26px no-repeat,
        linear-gradient(#fff, #fff) right bottom / 26px 3px no-repeat, linear-gradient(#fff, #fff) right bottom / 3px 26px no-repeat;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
}
.pn-cam__aim span { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; margin-top: -1px; background: var(--accent-fill); opacity: .9; }
.pn-cam__say { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-77); min-height: 1.5em; }
.pn-cam__acts { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------ the disclaimer */
.pn-disc {
    margin: 0; padding: .75rem .95rem;
    border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px;
    background: var(--paper);
    font-size: .84rem; line-height: 1.5; color: var(--ink-77);
}
.pn-disc b { color: var(--ink); }

/* ---------------------------------------------------------------- the result */
.pn-res { display: grid; gap: .85rem; min-width: 0; }
#pn-out { display: grid; gap: .85rem; min-width: 0; }
/* the result's two boxes, the product and the recalls: each is repainted only when what it says has changed */
.pn-part { min-width: 0; }
.pn-empty { padding: 1rem 1.1rem; border: 1px dashed var(--line); border-radius: 12px; font-size: .92rem; color: var(--ink-77); }
.pn-empty p { margin: 0 0 .7rem; }
.pn-empty b { color: var(--ink); }
.pn-try { display: flex; flex-wrap: wrap; gap: .4rem; }
.pn-try .seg__b { min-height: 44px; text-align: left; overflow-wrap: anywhere; }
.pn-try .seg__b:focus-visible, .pn-linkb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-err { padding: .95rem 1.05rem; border: 1px solid var(--taken); border-radius: 12px; background: var(--taken-wash); font-size: .9rem; line-height: 1.5; color: var(--ink-77); }
.pn-more { display: flex; flex-wrap: wrap; gap: .6rem; }
.pn-recent { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); min-width: 0; }
.pn-recent .lbl { margin: 0; }
.pn-recent > .pn-btn { justify-self: start; }

.pn-card {
    min-width: 0; padding: 1.05rem 1.15rem 1.1rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--paper);
}
.pn-card--err { border-color: var(--taken); border-left-width: 4px; }
@media (max-width: 30rem) { .pn-card { padding: .9rem .85rem .95rem; } }

.pn-prod__top { display: flex; gap: 1.1rem; align-items: flex-start; min-width: 0; }
.pn-prod__id { flex: 1 1 auto; min-width: 0; }
.pn-pic { flex: 0 0 auto; margin: 0; width: 120px; }
.pn-pic[hidden] { display: none; }
.pn-pic img { display: block; width: 120px; height: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); }
.pn-pic figcaption { margin-top: .3rem; font-size: .62rem; line-height: 1.35; color: var(--ink-55); }
@media (max-width: 30rem) {
    .pn-prod__top { gap: .8rem; }
    .pn-pic, .pn-pic img { width: 84px; }
    .pn-pic img { height: 112px; }
}
.pn-kicker { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); overflow-wrap: anywhere; }
.pn-digits { font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.pn-h { margin: 0; font-size: 1.32rem; line-height: 1.22; font-weight: 600; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
/* The heading takes focus when a result arrives, so a screen reader starts there. The ring is drawn when the reader
   is using the keyboard (:focus-visible), not after a press of the mouse or a touch. */
.pn-h:focus { outline: none; }
.pn-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.pn-sub { margin: .3rem 0 0; font-size: .95rem; color: var(--ink-77); overflow-wrap: anywhere; }
.pn-note { margin: .55rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-77); }
.pn-linkb {
    -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0;
    display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle;
    font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.pn-src { margin: .55rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-55); overflow-wrap: anywhere; }
.pn-src a, .pn-line a, .pn-quiet a, .pn-p a, .pn-verdict a, .pn-hit a { color: var(--ink); }
.pn-src--warn, .pn-line--warn {
    padding: .55rem .75rem; border: 1px solid var(--line); border-left: 4px solid var(--unsure); border-radius: 8px;
    background: var(--unsure-wash); color: var(--ink-77);
}
.pn-src--warn b, .pn-line--warn b { color: var(--ink); }
.pn-quiet { font-size: .78rem; line-height: 1.5; color: var(--ink-55); }
p.pn-quiet { margin: .5rem 0 0; }
.pn-p { margin: .7rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-77); max-width: 70ch; }
.pn-p b { color: var(--ink); }

.pn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
@media (min-width: 47.5rem) {
    .pn-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.3rem 1.8rem; }
    .pn-sec--wide { grid-column: 1 / -1; }
}
.pn-sec { min-width: 0; }
.pn-h4 { margin: 0 0 .5rem; font-size: .66rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-55); }
.pn-rec .pn-h4 { margin-top: 1.25rem; }
.pn-ing { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; max-width: 72ch; }
.pn-ing b { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pn-tags { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.pn-tag { max-width: 100%; padding: .22rem .65rem; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; color: var(--ink-77); overflow-wrap: anywhere; }
.pn-tag--alg { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.pn-lbl2 { margin: .8rem 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--ink-77); }

.pn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.pn-nut { border-collapse: collapse; width: 100%; max-width: 34rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.pn-nut th, .pn-nut td { padding: .38rem .6rem .38rem 0; text-align: right; border-bottom: 1px solid var(--line-soft); color: var(--ink); white-space: nowrap; }
/* no capitals here: the head holds units and a serving size as the pack states it ("per 100 g", "30 ml"), and G and ML are not units */
.pn-nut thead th { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-55); white-space: normal; vertical-align: bottom; border-bottom-color: var(--line); }
.pn-nut tbody th { text-align: left; font-weight: 600; white-space: normal; }
.pn-nut__sub th { padding-left: .9rem; font-weight: 400; color: var(--ink-77); }
.pn-nut__no { color: var(--ink-55); }
.pn-nw { white-space: nowrap; }
@media (max-width: 34rem) {
    .pn-nut { font-size: .82rem; }
    .pn-nut th, .pn-nut td { padding-right: .45rem; white-space: normal; }
    .pn-nut th:last-child, .pn-nut td:last-child { padding-right: 0; }
    .pn-nut__sub th { padding-left: .55rem; }
}
.pn-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- the recalls */
.pn-verdict { margin: .5rem 0 .8rem; font-size: 1rem; line-height: 1.5; color: var(--ink-77); max-width: 74ch; }
.pn-verdict b { color: var(--ink); }
.pn-line { margin: .45rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--ink-77); max-width: 86ch; overflow-wrap: anywhere; }
.pn-line b { color: var(--ink); }
.pn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pn-hit {
    min-width: 0; padding: .85rem .95rem .9rem;
    border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px;
}
.pn-hit--exact { border-left-color: var(--taken); }
.pn-hit--short { border-left-color: var(--unsure); }
.pn-hit--name  { border-left-style: dashed; }
.pn-hit--digits { border-left-style: dotted; }
.pn-hit__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .45rem; }
.pn-how {
    display: inline-block; padding: .2rem .6rem; border-radius: 999px; border: 1.5px solid var(--line);
    font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; line-height: 1.5; color: var(--ink);
}
.pn-how--exact { border-color: var(--taken); color: var(--taken); background: var(--taken-wash); }
.pn-how--short { border-color: var(--unsure); color: var(--unsure); background: var(--unsure-wash); }
.pn-how--name  { border-style: dashed; border-color: var(--ink-55); color: var(--ink-77); }
.pn-how--digits { border-style: dotted; border-color: var(--ink-55); color: var(--ink-77); }
.pn-ag, .pn-cls { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.pn-cls { padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 6px; }
.pn-date { font-size: .78rem; color: var(--ink-55); margin-left: auto; white-space: nowrap; }
.pn-hit__how { margin: 0 0 .5rem; font-size: .84rem; line-height: 1.5; color: var(--ink-77); }
.pn-hit__how b { color: var(--ink); }
.pn-hit__p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; max-width: 84ch; }
.pn-hit__why, .pn-hit__lots, .pn-hit__meta { margin: .5rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-77); overflow-wrap: anywhere; max-width: 84ch; }
.pn-hit__why b, .pn-hit__lots b, .pn-hit__meta b { color: var(--ink); font-weight: 600; }
.pn-hit__meta { font-size: .78rem; color: var(--ink-55); }
.pn-mark { background: transparent; color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.pn-full { margin-top: .5rem; }
.pn-full > summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--ink); width: max-content; max-width: 100%; min-height: 44px; display: flex; align-items: center; }
.pn-full > summary:hover { color: var(--accent); }
.pn-full > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-full[open] > summary { margin-bottom: .4rem; }
.pn-others { margin-top: 1rem; padding-top: .4rem; border-top: 1px solid var(--line-soft); }
@media (max-width: 30rem) { .pn-date { margin-left: 0; flex: 1 1 100%; } }

/* ------------------------------------------------------- reading, and method */
.pn-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; margin-top: 2rem; }
@media (max-width: 62rem) { .pn-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .pn-guide { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
.pn-gcol { min-width: 0; }
.pn-h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .7rem; }
.pn-dl { margin: 0; display: grid; gap: .3rem; }
.pn-dl dt { margin-top: .7rem; }
.pn-dl dt:first-child { margin-top: 0; }
.pn-dl dd { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-77); }
.pn-dl dd b { color: var(--ink); }
.pn-gcol .pn-p { margin: 0 0 .9rem; font-size: .88rem; }
.pn-gcol .pn-p a { color: var(--ink); }

.pn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; margin-top: 1.4rem; }
@media (max-width: 52rem) { .pn-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.pn-cols > div { min-width: 0; }
.pn-cols p, .pn-ul { font-size: .95rem; line-height: 1.62; color: var(--ink-77); max-width: 66ch; }
.pn-cols p { margin: 0 0 1rem; }
.pn-cols b { color: var(--ink); font-weight: 600; }
.pn-cols .pn-h3 { margin-top: 1.6rem; }
.pn-cols > div > .pn-h3:first-child { margin-top: 0; }
@media (max-width: 52rem) { .pn-cols > div + div > .pn-h3:first-child { margin-top: 1.6rem; } }
.pn-ul { margin: 0 0 1rem; padding-left: 1.1rem; }
.pn-ul li { margin: .35rem 0; }
.pn-ul li::marker { color: var(--accent); }
.pn-cols code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em;
    padding: .03em .32em; border-radius: 4px; border: 1px solid var(--line); color: var(--ink); overflow-wrap: anywhere;
}
.pn-cols a { color: var(--ink); }

@media print {
    .pn-form, .pn-cam, .pn-more, .pn-recent, .pn-try { display: none !important; }
    .pn-card, .pn-hit { break-inside: avoid; }
}