/* POUR CORNER — recipe library (rc-), brewcast (bc-), guided timer (tm-).
   Flat ink + hairlines. Vermilion only. No gradients, no glows. */

/* ---- button icons ---- */
.btn .ti{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- recipe library ---- */
/* (v55) recipe cards wear the Koraïchi ground (supersedes the v37 sack):
   dark-green + antique-gold calligraphy, dark veil, hairline cream rim
   (from .kora-card). (v56) stencil is retired — names match the app's
   display face via .display-sm. */
.rc-title{margin:0 0 1.8rem}
.rc-card{display:block;text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  padding:1.25rem 1.3rem;margin:0 0 1.3rem;min-height:var(--tap)} /* (v57) a touch more air between cards */
.rc-card-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.rc-name{margin:0 0 .4rem;color:var(--paper);
  letter-spacing:.08em;text-transform:uppercase}
.rc-meta{margin:0;color:var(--meta-bronze)} /* (v59) uniform card-subtitle bronze */
.rc-chev{flex:0 0 auto;color:var(--crema)}
.rc-chev svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- recipe detail ---- */
.rc-params{margin-top:1.6rem}
.rc-param-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
@media(max-width:560px){.rc-param-grid{grid-template-columns:1fr}}
.rc-param-static{font-family:var(--disp);font-size:1.7rem;margin:0;padding:.5rem 0;color:var(--paper)}
.rc-dose{max-width:220px}
.tm-water{font-family:var(--disp);font-weight:700;
  font-size:clamp(2rem,6vw,3rem);margin:.4rem 0 1rem;color:var(--paper)}

/* step rows */
.tm-steps{margin-top:.6rem}
.tm-step{display:flex;align-items:baseline;gap:1rem;min-height:var(--tap);
  padding:.7rem .2rem;border-top:1px solid var(--line)}
.tm-steps .tm-step:last-child{border-bottom:1px solid var(--line)}
.tm-at{font-variant-numeric:tabular-nums;font-weight:700;min-width:3.4rem;color:var(--paper)}
.tm-to{font-weight:700;min-width:4.4rem;color:var(--verm)}
.tm-label{color:var(--paper-faint)}
.tm-step.wait .tm-at,.tm-step.wait .tm-to,.tm-step.wait .tm-label{color:var(--mute-2)}
.tm-step.on{background:var(--ink-3);border-inline-start:2px solid var(--verm);
  margin-inline-start:-2px;padding-inline-start:calc(.2rem + 2px)}

/* ---- brewcast ---- */
.bc-panel{margin-top:1.6rem}
.bc-line{margin:.9rem 0 0;color:var(--paper-faint)}
.bc-status{margin:.8rem 0 0}
.bc-onair{border-color:var(--verm);color:var(--verm)}
.bc-quiet{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem}
.bc-quiet .ti{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;opacity:0}
.bc-quiet.on{color:var(--paper)}
.bc-quiet.on .ti{opacity:1;stroke:var(--verm)}
.bc-onair-card{margin:0 0 1.2rem;border-color:var(--line-strong)}
.bc-id{font-family:var(--disp);font-size:1.5rem;margin:.2rem 0;color:var(--paper)}
.bc-id-sub{margin:.2rem 0;color:var(--mute)}

/* ---- guided timer ---- */
.tm-panel{text-align:center}
.tm-elapsed{font-family:var(--disp);font-weight:700;color:var(--paper);
  font-size:clamp(4.5rem,18vw,9rem);line-height:1;margin:.4rem 0;
  font-variant-numeric:tabular-nums}
.tm-track{height:2px;background:var(--line);margin:1.2rem 0}
.tm-fill{height:100%;width:0;background:var(--verm);transition:width .25s linear}
.tm-target{font-size:1.15rem;font-weight:500;color:var(--paper);margin:.6rem 0 1.2rem}
.tm-panel .tm-steps{text-align:start}
.tm-panel .btn-row{justify-content:center}

/* ---- afterglow log form ---- */
.bc-log-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}
@media(max-width:560px){.bc-log-grid{grid-template-columns:1fr}}

/* ---- (v57) sack retired: guided-brew + recipe-detail panels wear the
   kora-card design — Koraïchi ground, dark veil, hairline cream rim,
   paper ink, display type. No seam, no watermark (Now Brewing only).
   Brewcast panel stays dark by design — untouched. */
.panel.cream{position:relative;overflow:hidden;color:var(--paper);
  background:#0d1812 url('../assets/texture/koraichi-tab-bg.jpg') center/cover no-repeat;
  border:1px solid var(--crema);border-radius:20px;
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.panel.cream::before{content:'';position:absolute;inset:0;background:rgba(6,10,7,.65);pointer-events:none}
.panel.cream>*{position:relative}
/* child ink re-pointed at the dark ground */
.panel.cream .dim{color:var(--mute)}
.panel.cream .field label{color:var(--mute)}
.panel.cream .input,.panel.cream textarea.input,.panel.cream select.input{
  background:var(--ink-3);border-color:var(--line-strong);color:var(--paper)}
.panel.cream .rc-param-static{color:var(--paper)}
.panel.cream .tm-water{color:var(--paper)}
/* step rows on the dark ground */
.panel.cream .tm-step{border-top-color:var(--line)}
.panel.cream .tm-steps .tm-step:last-child{border-bottom-color:var(--line)}
.panel.cream .tm-at{color:var(--paper)}
.panel.cream .tm-to{color:var(--verm)}
.panel.cream .tm-label{color:var(--paper-faint)}
.panel.cream .tm-step.wait .tm-at,.panel.cream .tm-step.wait .tm-to,
.panel.cream .tm-step.wait .tm-label{color:var(--mute-2)}
.panel.cream .tm-step.on{background:rgba(217,56,30,.14);border-inline-start-color:var(--verm)}
/* timer readouts: display digits, legibility first */
.panel.cream .tm-elapsed{color:var(--paper)}
.panel.cream .tm-track{background:var(--line-strong)}
.panel.cream .tm-fill{background:var(--verm)}
.panel.cream .tm-target{color:var(--paper)}
/* (v58) timer instructions: one card; the highlight jumps between steps,
   hairline dividers keep the steps distinct */
.tm-panel .tm-steps{margin-top:.8rem;border:1px solid var(--line-strong);
  border-radius:14px;overflow:hidden;background:rgba(6,10,7,.35)}
.tm-panel .tm-step{border-top:1px solid var(--line);padding:.85rem 1rem}
.tm-panel .tm-steps .tm-step:first-child{border-top:0}
.tm-panel .tm-steps .tm-step:last-child{border-bottom:0}
.tm-panel .tm-step .tm-label{color:var(--paper)}
.tm-panel .tm-step.on{background:rgba(217,56,30,.16);border-inline-start:0;
  margin-inline-start:0;padding-inline-start:1rem;box-shadow:inset 3px 0 0 var(--verm)}
[dir="rtl"] .tm-panel .tm-step.on{box-shadow:inset -3px 0 0 var(--verm)}
/* buttons on the dark ground */
.panel.cream .btn:not(.btn-solid){color:var(--paper);border-color:var(--line-strong)}
.panel.cream .btn:not(.btn-solid):hover{color:var(--verm);border-color:var(--verm)}
.panel.cream .btn-solid{color:#fff}
.panel.cream .btn-quiet{color:var(--mute)}
/* rate + tag controls on the dark ground */
.panel.cream .rate button{border-color:var(--line-strong);color:var(--mute)}
.panel.cream .rate button.on{background:var(--verm);border-color:var(--verm);color:#fff}
.panel.cream .tag{border-color:var(--line-strong);color:var(--paper-faint)}
.panel.cream .tag.on{background:var(--paper);color:var(--on-paper);border-color:var(--paper)}