/* ============================================================
   brief_card.components.css · "งานที่รอคุณ" on a workbench landing (ล้ง · ผู้ส่งออก).
   Ported from docs/design/handoff_out/lung_today/ (2026-10-10). EXTENSION ONLY:
   - the card IS the grower focal card `.gh-today` (grower.components.css) with the
     server's kind as its state modifier — `.waiting` `.opportunity` `.setup`;
   - every row IS the assistant briefing row (assistant.components.css — those rules
     are widened to `.gh-today` there, so there is one copy of each).
   Load AFTER grower.components.css + assistant.components.css.
   ============================================================ */

/* placement: inside .wbhead, between the title and .wbtabs */
.wbhead:has(> .gh-today), .wbhead:has(> .as-briefhide){ container-type:inline-size; }
.wbhead > .gh-today{ flex:1 0 100%; min-width:0; }
.wbhead > .as-briefhide{ flex:1 0 100%; text-align:left; }

/* kind tints — aliases of the shipped state tints, no new colour.
   waiting = brass (your move) · opportunity = ochre (worth a look) ·
   setup = a suggestion: neutral bar + the dashed edge the system uses for
   "softer than a fact" (.tabnew, .pv.declared). */
.gh-today.waiting::before{ background:var(--brand); }
.gh-today.opportunity::before{ background:var(--pv-est); }
.gh-today.setup{ border-style:dashed; border-color:var(--line2); box-shadow:none; }
.gh-today.setup::before{ background:var(--line2); }

/* dense tune (ล้ง / exporter): one rung tighter, same material */
[data-density="dense"] .gh-today{ padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 6px); box-shadow:none; }
[data-density="dense"] .gh-today .gh-thead{ margin-bottom:var(--s1); }
.gh-today h2.gh-teyebrow{ margin:0; line-height:1.3; }
.gh-today .gh-thead .as-briefhide{ min-height:32px; }
.gh-today .gh-thead .as-briefmore{ white-space:nowrap; }
.gh-today .as-next:focus-visible,
.gh-today .as-briefhide:focus-visible,
.wbhead > .as-briefhide:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* the card's list rhythm: sentence left, ONE button right */
.gh-today .gh-tmain{ display:flex; flex-direction:column; }
.gh-today .as-briefitem{ flex-direction:row; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s2) 0; border-top:1px solid var(--line); }
.gh-today .gh-tmain > .as-briefitem:first-child{ border-top:0; padding-top:0; }
.gh-today .as-brieftext{ flex:1; min-width:0; font-size:var(--fs-md); text-wrap:pretty; }
.gh-today .as-next{ flex:0 0 auto; }
/* kinds differ by ORDER + WEIGHT + the group title — never a warning colour */
.gh-today .as-briefitem[data-kind="waiting"] .as-brieftext{ font-weight:var(--fw-semi); }
.gh-today .as-briefitem[data-kind="setup"] .as-brieftext{ color:var(--ink2); }
.gh-today .as-briefitem[data-kind="setup"] .as-next{ color:var(--ink); background:var(--surface);
  border-color:var(--line2); }
.gh-today .as-briefitem[data-kind="setup"] .as-next:hover,
.gh-today .as-briefitem[data-kind="setup"] .as-next:focus-visible{ background:var(--surface2); border-color:var(--brand); }
.gh-today .gh-tmain > .as-brieftitle{ padding:var(--s3) 0 var(--s1); border-top:1px solid var(--line); }
.gh-today .gh-tmain > .as-brieftitle + .as-briefitem{ border-top:0; padding-top:0; }
.gh-today .gh-tmain > .as-briefmore{ padding-top:var(--s2); border-top:1px solid var(--line); }
.gh-today [data-role="unfold"]{ display:none; }
/* wide: the toggle exists only when the server sent items past the cap (`rest`) */
.gh-today [data-role="unfold"][data-wide]{ display:inline-flex; align-items:center; }
.gh-today [data-rest]{ display:none; }
.gh-today[data-unfolded] .as-briefitem[data-rest]{ display:flex; }
.gh-today[data-unfolded] .as-brieftitle[data-rest]{ display:block; }
.gh-today .bc-nphone{ display:none; }

/* phone width: one item, the rest one tap away, so the market list stays on screen 1 */
@container (max-width:560px){
  /* compact (owner 2026-10-10, phone screenshot: the market list fell below the
     first screen): the button sits BESIDE its sentence and wraps under it only when
     the sentence needs the room; one rung less padding; the targets stay 44 px. */
  [data-density="dense"] .gh-today{ padding:var(--s2) var(--s3) var(--s2) calc(var(--s3) + 6px); }
  .gh-today .as-briefitem{ flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:var(--s1) var(--s2); padding:var(--s1) 0; }
  .gh-today .as-brieftext{ flex:1 1 11em; font-size:var(--fs-sm); }
  .gh-today .as-next{ padding:6px 12px; }
  .gh-today .gh-thead{ flex-wrap:wrap; row-gap:0; column-gap:var(--s3); margin-bottom:0; }
  .gh-today .gh-thead .as-briefhide{ min-height:44px; }
  /* the stale-day chip ("ข้อมูล ณ …", a page left open past midnight) takes a line of its
     own UNDER the title — inline it pushed "ซ่อนวันนี้" onto a 44 px row alone (2026-10-22) */
  .gh-today .gh-thead .as-briefmore{ order:9; flex-basis:100%; }
  .gh-today[data-folded] .gh-tmain > :not(:first-child):not([data-role="unfold"]){ display:none; }
  .gh-today [data-role="unfold"]{ display:inline-flex; align-items:center; }
  .gh-today .bc-nphone{ display:inline; }
  .gh-today .bc-nwide{ display:none; }
}

@media (pointer:coarse){ .gh-today .gh-thead .as-briefhide{ min-height:44px; } }

/* GROWER "วันนี้" filled from the briefing (grower.view.js briefTodayCard). Items that
   came from the old card carry a short line + detail and render as shipped; a server
   item with ONE long sentence steps the headline down a size (Claude Design §12.1). */
.gh-today.opportunity .gh-tglyph{ background:var(--pv-est-bg); color:var(--pv-est); border-color:var(--pv-est-ln); }
.gh-today.setup .gh-tglyph{ background:var(--surface2); color:var(--ink2); border-color:var(--line2); }
.gh-today[data-oneline] .gh-tline{ font-size:var(--fs-lg); line-height:1.35; }
.gh-today.setup[data-oneline] .gh-tline{ font-weight:var(--fw-semi); color:var(--ink2); }
/* situation (ladder 1b): a check-in, toned like an opportunity, not a debt */
.gh-today.situation::before{ background:var(--pv-est); }
.gh-today.situation .gh-tglyph{ background:var(--pv-est-bg); color:var(--pv-est); border-color:var(--pv-est-ln); }