/* POUR CORNER — views A: home (hm-), ledger (lg-), stats (st-). Flat ink, hairline rules. */

/* ---------- home ---------- */
.hm-empty{max-width:640px}
.hm-formslot{margin-top:1.4rem}
/* (v24) Latest pours now speaks the same section language as Now brewing:
   a display title and full-size rows, with proper rhythm above the section. */
.hm-latest{margin:2.8rem 0 2.4rem}
.hm-latest .hm-nb-title{margin:0 0 1rem}
.hm-mini{padding:1.1rem .2rem;min-height:64px}
.hm-mini .hm-mini-date{flex:0 0 auto;color:var(--mute);font-size:15px;min-width:110px}
.hm-mini-bag{flex:0 0 auto;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--crema);font-size:16px;font-weight:600}
/* (v55) the coffee name links to its bag page */
a.hm-mini-bag{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hm-mini .hm-mini-meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--paper-faint);font-size:15px}
.hm-archived{margin:0 0 2.4rem}
.hm-arc-row .hm-arc-name{flex:1;color:var(--paper-faint);font-size:15px}
.hm-arc-actions{display:flex;gap:.2rem;align-items:center}
.hm-arc-actions .btn{min-height:44px}

/* hero Pour Now — the page's primary call to action, riding the brand
   lockup on the ink hills */
.hm-pournow{margin-top:1.05rem;padding:.85rem 2.7rem;font-size:14px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border-radius:999px}
  /* (v23) pill edges + a touch smaller */
/* (v22) Pour Now floats over the middle of the hero photo instead of riding
   the lockup. Absolutely positioned inside the deep photo layer at 50%
   height (the layer overcovers ±12%, so this lands at the hero's vertical
   middle), centered horizontally. Margin zeroed so it doesn't offset from
   center. */
.hm-pournow-mid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  margin:0;z-index:5;pointer-events:auto}
/* the generic .btn:active press-nudge would replace the centering transform
   (teleporting the button on tap, so the tap never lands) — compose it. */
.btn.hm-pournow-mid:active{transform:translate(-50%,-50%) translateY(1px)}

/* now brewing = the bar: every active bag as a row. Face on the left, the
   bag's name and details tight to the face (left-aligned, hugging the
   portrait), Log a pour pinned right. */
/* (v25) home section titles now match the page-title scale EXACTLY — the same
   metrics as .display-sm ("Origins", "Recipes"): same family, weight, size,
   line-height and tracking. */
.hm-nb-title{font-family:var(--disp);font-weight:700;line-height:1.08;
  font-size:clamp(1.7rem,4.5vw,2.6rem);letter-spacing:.005em;color:var(--paper);
  margin:0 0 .4rem}
.hm-bar{margin-top:1.2rem}
/* (v37) the Now Brewing bag row is a burlap coffee-sack panel: jute weave
   ground, the sewn-shut top seam, stenciled dark-umber text, plain vermilion
   pill. The seam and the exporter-mark watermark are THIS card's "sack
   mouth" motif — deliberately not repeated on any other card. The earlier
   aged-paper treatment (v34–v36) is superseded. */
.hm-bar-row{position:relative;display:flex;align-items:center;gap:1.1rem;width:100%;text-align:start;
  background-color:var(--sack-ground);background-image:var(--sack-burlap);
  background-size:240px 240px;background-repeat:repeat;
  border:1px solid rgba(58,40,20,.6);
  border-radius:20px;overflow:hidden; /* (v38) round edges; the burlap and the
    seam clip into the rounded corners. Other sack cards stay square for now. */
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  padding:1.85rem 1.2rem .85rem;margin:0 0 .9rem;
  min-height:118px;cursor:pointer;color:inherit;font:inherit}
.hm-bar-row:active{border-color:#6d5230}
/* sewn-shut sack mouth: dashed dark-umber thread, slight wave; spans the full
   card width end to end — the rounded corners (v38 overflow:hidden) clip the
   stitch ends cleanly into the edges */
.hm-bar-seam{position:absolute;top:5px;left:0;right:0;width:100%;height:16px;pointer-events:none}
/* exporter-mark watermark: sized/positioned by JS (see home.js) so it sits
   exactly halfway between the name ink and the pill, fully inside the card */
.hm-bar-wm{position:absolute;top:50%;width:94px;height:94px;z-index:0;
  transform:translateY(-50%) rotate(-15deg);opacity:.3;pointer-events:none;display:block} /* (v57) more present, still ghosted */
.hm-bar-info{flex:1;min-width:0;text-align:start;position:relative;z-index:1;margin-inline-start:.35rem} /* (v51) text sits a touch past the medallion */
.hm-bar-row .hm-bar-name{font-family:var(--stencil);font-weight:400;font-size:1.5rem;line-height:1.2; /* (v57) a touch larger */
  letter-spacing:.15em;text-transform:uppercase;color:var(--sack-ink);
  margin:0 0 .35rem;white-space:nowrap}
.hm-bar-row .hm-bar-meta{font-family:var(--stencil);font-weight:400;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sack-ink-soft);line-height:1.8;margin:0}
/* (v64) Arabic on the sack card: the stencil face has no Arabic glyphs and
   letter-spacing breaks Arabic joining, so the meta line renders in the UI
   face, larger, with no tracking or uppercase transform. */
html[lang=ar] .hm-bar-row .hm-bar-meta{font-family:var(--body);font-weight:500;font-size:.95rem;
  letter-spacing:0;text-transform:none;line-height:1.9}
/* (v64) Arabic sack-card name: Aref Ruqaa has real Arabic glyphs; the stencil
   face does not, and its tracking/uppercase treatment breaks Arabic joining.
   Larger, no tracking, may wrap to two lines instead of clipping. */
html[lang=ar] .hm-bar-row .hm-bar-name{font-family:var(--disp);font-weight:700;
  font-size:1.6rem;letter-spacing:0;text-transform:none;line-height:1.5;
  white-space:normal;margin:0 0 .5rem}
@media(max-width:560px){
  html[lang=ar] .hm-bar-row .hm-bar-name{font-size:1.2rem}}
.hm-bar-log{flex:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:.75rem 1.2rem;border-radius:999px;position:relative;z-index:1;
  margin-inline-end:.5rem} /* (v51) pill sits a touch off the card edge */
  /* (v23) pill edges + a touch smaller */
/* compact medallion for bar rows and sheet pick lists */
.hm-producer.sm{width:76px;height:76px}
.hm-producer.sm .hm-producer-mask{width:76px;height:76px}
.hm-producer.sm .hm-producer-mono{font-size:1.9rem}
.hm-producer.sm .hm-flagbadge{width:30px;height:30px;right:-4px;bottom:-4px}
.hm-producer.sm .hm-flagbadge.bg-mono{font-size:.58rem}
/* (v37) sack-card medallion: 60px, portrait reads as a producer transfer
   stamped onto the burlap — thin umber keyline ring, warm transfer tint. */
.hm-bar-seamwrap,.hm-bar-wmwrap{display:contents} /* (v49) wrappers hold
  absolute-positioned SVGs only; keep them out of the flex flow so their
  gaps don't push the medallion right */
.hm-producer.sack{width:96px;height:96px;margin-inline-start:-.55rem} /* (v49) nudge the medallion toward the card's inline-start edge */
.hm-producer.sack .hm-producer-mask{width:96px;height:96px;border:2px solid #3d2c17;background:#8a6b42}
.hm-producer.sack .hm-producer-img{filter:sepia(.28) saturate(.92)}
.hm-producer.sack .hm-producer-mono{font-size:2.2rem}
.hm-producer.sack .hm-flagbadge{width:40px;height:40px;right:-6px;bottom:-6px;border:2px solid #14100b}

/* log sheet — one sheet, two paths. (v64) no longer a bottom sheet: the
   dialog is centered in the viewport on every language, with the wave
   strip (below) flowing across its top edge.
   (v29) the page behind stays scrollable while the sheet is open: no
   scroll lock, the veil lets vertical pans pass through to the page
   (taps still close it), and the fixed sheet keeps its own internal
   scrolling as a safety net. */
.sheet-veil{position:fixed;inset:0;background:rgba(8,5,3,.62);z-index:1500;touch-action:pan-y}
.sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,calc(100% - 2rem));
  max-height:min(88dvh,860px);overflow-y:auto;overscroll-behavior:contain;background:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:14px;
  z-index:1501;padding:0 var(--pad) calc(1.8rem + env(safe-area-inset-bottom))}
/* (v66) single muted wave across the top of the centered dialog — the
   homepage treeline's barely-green at its four-crest rhythm, one band with
   a wavy lower edge melting into the sheet ink. Nothing bright. The strip
   bleeds to the dialog's rounded top corners. */
.sheet-wave{display:block;height:34px;margin:0 calc(var(--pad) * -1);border-radius:13px 13px 0 0;
  overflow:hidden;position:relative;background:var(--ink-2)}
.sheet-wave svg{position:absolute;inset:0;width:100%;height:100%}
.sheet-wave svg path{fill:var(--hill-mid)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;
  padding-top:1.1rem}
.sheet-title{font-family:var(--disp);font-weight:700;font-size:1.6rem;color:var(--paper);margin:0}
.sheet-x{display:flex;align-items:center;justify-content:center;background:none;border:0;
  color:var(--mute);width:48px;height:48px;cursor:pointer}
.sheet-x .ti{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.sheet-kicker{margin:0 0 1rem}
.sheet-back{background:none;border:0;color:var(--mute);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:.8rem 0;cursor:pointer;font:inherit}
/* (v57) sack retired on sheets: option cards wear the kora-card design —
   Koraïchi ground, dark veil, hairline cream rim, display type, paper ink.
   No seam, no watermark (those belong to the Now Brewing card only). */
.sheet-opt{display:flex;align-items:center;gap:1.1rem;width:100%;text-align:start;
  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);
  padding:1.15rem 1.2rem;margin:0 0 .8rem;cursor:pointer;font:inherit}
.sheet-opt::before{content:'';position:absolute;inset:0;background:rgba(6,10,7,.65);pointer-events:none}
.sheet-opt>*{position:relative}
.sheet-opt:active{border-color:var(--crema)}
.sheet-opt .ti{width:26px;height:26px;flex:none;color:var(--crema);stroke:currentColor;fill:none;stroke-width:1.8}
.sheet-opt-t{display:block;font-family:var(--disp);font-weight:700;font-size:1.25rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.sheet-opt-d{display:block;font-size:13px;color:var(--meta-bronze);margin-top:.25rem;line-height:1.5} /* (v59) uniform card-subtitle bronze */
/* (v57) bag/recipe pick rows wear the kora-card design too (same language),
   so every step of the log sheet feels like one family. */
.sheet-pick{display:flex;align-items:center;gap:1rem;width:100%;text-align:start;
  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);
  padding:.9rem 1rem;margin:0 0 .7rem;
  min-height:72px;cursor:pointer;font:inherit}
.sheet-pick::before{content:'';position:absolute;inset:0;background:rgba(6,10,7,.65);pointer-events:none}
.sheet-pick>*{position:relative}
.sheet-pick:last-child{border-bottom:1px solid var(--line);margin-bottom:0}
.sheet-pick-info{flex:1;min-width:0;text-align:start}
.sheet-pick-name{display:block;font-family:var(--disp);font-weight:700;font-size:1.15rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.sheet-pick-meta{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--meta-bronze);margin-top:.2rem} /* (v59) uniform card-subtitle bronze */
.sheet .hm-ratecard{margin-top:.4rem}

/* ---------- ledger ---------- */
.lg-head{margin-bottom:1.2rem}
.lg-head .meta{margin-top:.4rem}
.lg-list .lg-row:first-child .lg-line{border-top:1px solid var(--line)}
.lg-line{width:100%;text-align:start;background:none;padding:1rem .2rem;min-height:var(--tap)}
.lg-line .lg-date{flex:0 0 auto;color:var(--mute);font-size:13px;min-width:96px}
.lg-main{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.lg-bean{font-size:15px;color:var(--paper)}
.lg-sub{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.lg-bc{flex:0 0 auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--verm)}
.lg-confirm{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem .2rem;border-top:1px solid var(--line);font-size:14px;color:var(--paper-faint)}
.lg-confirm-actions{display:flex;gap:.5rem}
.lg-confirm-actions .btn{min-height:44px}
.lg-edit{border-top:1px solid var(--line);padding:1.2rem 0 0}
.lg-edit .panel{border:0;padding:0}
.lg-numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.lg-numgrid .input{text-align:center}

/* ---------- stats ---------- */
.st-head{margin-bottom:1.6rem}
.st-totals{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media(min-width:768px){.st-totals{grid-template-columns:repeat(3,1fr) auto}}
.st-num{font-size:clamp(1.8rem,4.5vw,2.6rem)}
.st-totlabel{margin:.3rem 0 0}
.st-bags{margin:2.4rem 0}
.st-bag{margin-bottom:.8rem}
.st-bagname{font-family:var(--disp);font-weight:700;font-size:1.3rem;margin:0 0 .5rem;color:var(--paper)}
.st-bagmeta{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.st-tech{margin:0 0 2.4rem}
.st-rows{margin-top:1.2rem}
.st-row{display:flex;align-items:center;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line);min-height:var(--tap)}
.st-row:last-child{border-bottom:1px solid var(--line)}
.st-rowlabel{flex:0 0 9rem;font-size:14px;color:var(--paper-faint)}
.st-barwrap{flex:1;height:10px;border:1px solid var(--line-strong);border-radius:2px;position:relative}
.st-bar{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--verm);border-radius:1px}
.st-avg{flex:0 0 3rem;text-align:end;font-size:14px;font-weight:700;color:var(--paper)}

/* (v55) stats cards wear the Koraïchi ground (supersedes the v37 sack):
   calligraphy ground, dark veil, hairline cream rim (from .kora-card).
   Inner text blocks sit above the veil; the coffee-ring motif is absolute
   so it already paints above the veil. */
.kora-card.st-totals,.kora-card.st-bag{padding:1.3rem;
  box-shadow:0 10px 28px rgba(0,0,0,.45)}
.kora-card.st-totals .st-tot{position:relative}
.st-totals .st-num{color:var(--paper)} /* (v56) stencil retired; display-sm supplies the face */
/* (v57) best-bag name matches the numeral size, one line; the last column is
   auto-sized so the full name fits at every width */
.st-totals .st-tot-name .st-num{white-space:nowrap}
@media(max-width:767px){.st-totals .st-tot-name{grid-column:span 2}}
.st-totals .motif-ring{color:#a9834f;opacity:.22}
.kora-card.st-bag .st-bagname{position:relative;color:var(--paper);
  font-family:var(--disp);font-weight:700;white-space:nowrap; /* (v56) stencil
  retired; one line, card height follows */
  letter-spacing:.06em;text-transform:uppercase}
.kora-card.st-bag .st-bagmeta{position:relative;color:var(--meta-bronze)} /* (v59) uniform card-subtitle bronze */

/* ---------- parallax coffee-farm hero (2.5D, transform-only) ----------
   Full-bleed breakout inside the constrained #view. Three layers separate on
   scroll: farm photo (slowest) → tree silhouette → ink hills, the front hill
   exactly the page ink so art melts into content. Mid + foreground are
   bottom-anchored FULL fills with bleed past the hero bottom, so no gap can
   ever open between layers at any scroll position. Brand lockup sits on the
   ink hills — text never floats on bright photo. */
.px-hero{position:relative;height:calc(100svh - 62px);height:calc(100dvh - 62px);
  min-height:520px;overflow:hidden;
  width:100vw;max-width:none;margin-inline-start:calc(50% - 50vw); /* (v62) logical: full-bleed in RTL too */
  margin-top:calc(var(--pad)*-1.2)}
.px-layer{position:absolute;left:0;right:0;top:-12%;bottom:-12%;will-change:transform;
  transform-origin:50% 100%;pointer-events:none}
/* (v22) the parallax layers are decorative — they must never swallow taps
   meant for the mid-photo Pour Now button, so the button re-enables
   pointer events on itself. */
/* Hero reframe (v13): the golden-hour photo showed too much sky. The image is
   drawn 118% tall and the crop pushed down-right (88%/68%) so the visible
   band favors the plantation rows over the sky, while the left-side rock
   mound stays out of frame. Layer still overcovers the hero at every scroll
   position — no-gap invariant intact. */
/* Hero reframe (v14): in portrait the crop pushes further down (140% scale,
   bottom-anchored, x shifted right) so the farm clearly dominates the
   visible band — sky drops to about a third. The visible slice threads
   between the photo's rock fields (left slope and right domes stay out of
   frame). Wide/landscape viewports keep the v13 crop, where a wider slice
   could catch the rocks. */
.px-deep{background:url('../assets/texture/coffee-farm-hd.jpg') 68% 88%/auto 118% no-repeat}
@media (max-aspect-ratio:1/1){
  .px-deep{background:url('../assets/texture/coffee-farm-hd.jpg') 72% 100%/auto 140% no-repeat}}
.px-mid svg{position:absolute;left:0;right:0;bottom:-3%;width:100%;height:72%}
/* (v24) the dark foreground wave was 65% of the hero — a tall dead zone
   above the Now Brewing band once the lockup scrolled away. 55% keeps the
   layered-hills read while tightening the rhythm into the next section.
   The lockup is bottom-anchored, so it stays fully on the dark. */
.px-fore svg{position:absolute;left:-2%;right:-2%;bottom:-3%;width:104%;height:55%}
.px-content{position:absolute;left:0;right:0;bottom:4.2%;padding:0 var(--pad);
  text-align:center;will-change:transform,opacity}
/* home brand lockup — Arabic → tagline, all on the dark hills.
   (v26: the bean-crease squiggle is gone — the tagline sits a touch lower so
   the lockup keeps its air without the mark.) */
.hm-brand-ar{font-family:var(--disp);font-weight:700;color:var(--verm);
  font-size:clamp(3.2rem,9.5vw,5.9rem);line-height:1.32;text-align:center;direction:rtl}
.hm-brand-tag{margin:.95rem 0 0;color:var(--mute);font-size:clamp(.95rem,2.2vw,1.15rem);
  letter-spacing:.05em}

/* now brewing header row: title left, quiet ghost Add bag pill right */
.hm-nb-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:0 0 .6rem}
.hm-nb-head .hm-nb-title{margin:0}
.btn.hm-addbag{border-radius:999px;border-color:var(--line-strong);color:var(--mute);
  background:transparent;flex:none;padding:.62rem 1.15rem;font-size:11px}
.btn.hm-addbag:hover{border-color:var(--crema);color:var(--crema)}

/* the now-brewing band meets the hero on a clean straight horizontal line.
   (v20: the old diagonal clip-path cut is gone — the section starts level,
   per the user's correction. The wavy top edge belongs to the dark hero
   wave above it, not to this boundary.) */
/* (v24) tightened top padding: the hero's dark wave already gives the header
   its air — the band no longer needs a full section rhythm above the title. */
.hm-band{position:relative;background:var(--ink-2);
  width:100vw;max-width:none;margin-inline-start:calc(50% - 50vw); /* (v62) logical: full-bleed in RTL too */
  padding:1.2rem 0 2.4rem}
.hm-band-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* now brewing: home section title, same scale as the page titles */
@media(max-width:560px){
  .hm-bar-log{padding:.7rem .95rem;font-size:11px}
  .hm-bar-row .hm-bar-name{font-size:1rem;letter-spacing:.1em} /* (v57) one line, no clip at 390px */
  .hm-producer.sack{width:76px;height:76px}
  .hm-producer.sack .hm-producer-mask{width:76px;height:76px}
  .hm-producer.sack .hm-flagbadge{width:32px;height:32px}}
.hm-producer{position:relative;flex:none;width:136px;height:136px}
/* circular mask zooms the portrait toward a headshot framing. Producer
   portraits vary, so the crop favors the face with a center-left bias
   (transform-origin left of center) rather than a dead-center zoom — this
   keeps foreheads and full faces inside the circle. The flag badge rides
   outside the mask so its overlap is never clipped */
.hm-producer-mask{display:block;width:136px;height:136px;border-radius:50%;overflow:hidden;
  border:2px solid var(--cream-line);background:var(--ink-3)}
.hm-producer-img{width:100%;height:100%;object-fit:cover;object-position:30% 30%;
  transform:scale(1.5);transform-origin:30% 34%;display:block}
.hm-producer-mono{width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;background:var(--ink-3);color:var(--crema);font-family:var(--disp);
  font-weight:700;font-size:3.4rem}
.hm-flagbadge{position:absolute;right:-6px;bottom:-6px;width:48px;height:48px;border-radius:50%;
  overflow:hidden;border:2px solid var(--ink-2);background:var(--ink-3);flex:none}
.hm-flagbadge img{width:100%;height:100%;object-fit:cover;display:block}
.hm-flagbadge.bg-mono{display:flex;align-items:center;justify-content:center;color:var(--crema);
  font-size:.72rem;font-weight:700;letter-spacing:.06em}