/* The thread summary's groups (Mo, 2026-09-26: option A "Apple, grouped rows", tone Whisper). Recipe:
   summa-design/components/thread-summary.md. The layout follows the thread column's own width (a container query on
   .cs-top-body), never the viewport: an iPad, a narrow desk window and the phone drawer each get what fits.
   · 700px of column or more: Reach · Order · each supplier side by side, all open, no glance line
   · less: one glance line (two lines at most) and a Details disclosure that opens the same groups stacked */
.cs-top-body{container-type:inline-size;container-name:ts}

/* the glance line: what the groups say, in one tap-sized row */
.c-ts-glance{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:color-mix(in oklab,var(--bg) 55%,var(--panel));font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-ts-gtxt{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.c-ts-gtxt i{font-style:normal;color:var(--ink-3);margin:0 6px}
.c-ts-gsig{color:var(--ink-2)}
.c-ts-more{flex:none;display:inline-flex;align-items:center;gap:2px;color:var(--ink-3);font-size:13px;font-weight:600}
.c-ts:not(.is-open) .c-ts-more svg{transform:rotate(180deg)}   /* the chevron points up by default: closed points down */

/* the groups: a label in the "Monty's read" type (.cs-seclbl), then soft rows on hairlines */
.c-ts-groups{display:none;margin-top:12px;gap:14px;grid-template-columns:minmax(0,1fr)}
.c-ts.is-open .c-ts-groups{display:grid}
.c-ts.is-small .c-ts-groups{display:grid;margin-top:0}   /* no order, two rows at most: shown, no disclosure */
.c-ts-group{min-width:0}
.c-ts-group h4.cs-seclbl{display:block;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-ts-group h4 a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.c-ts-group h4 a:hover{color:var(--ink)}
.c-ts-list{border-radius:12px;background:color-mix(in oklab,var(--bg) 55%,var(--panel));overflow:hidden}
.c-ts-row{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;font-size:14px}
.c-ts-row+.c-ts-row::before{content:"";position:absolute;top:0;left:40px;right:0;border-top:1px solid color-mix(in oklab,var(--line) 60%,transparent)}
.c-ts-ico{flex:none;display:inline-grid;color:var(--ink-3)}
.c-ts-k{flex:none;width:64px;color:var(--ink-3);font-size:13px}
.c-ts-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.c-ts-v b{font-weight:600}
.c-ts-v small{color:var(--ink-3);font-size:12px}
/* the signals are soft: the icon carries the colour, the words stay ink */
.c-ts-row.is-ok .c-ts-ico{color:var(--green)}
.c-ts-row.is-no .c-ts-ico,.c-ts-row.is-ask .c-ts-ico{color:var(--rust)}
.c-ts-row.is-ok .c-ts-v b,.c-ts-row.is-no .c-ts-v b,.c-ts-row.is-ask .c-ts-v b{font-weight:500}
/* a line whose quantity changed, or a delivery that moved: the timeline says how (Mo, 2026-09-25) */
.c-ts-row.is-changed .c-ts-v,.c-ts-row.is-changed .c-ts-ico{color:var(--rust)}
.c-ts-copy{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:-6px -8px -6px 0;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-ts-copy:hover{background:var(--bg-2);color:var(--ink)}
.c-ts-copy:active{background:var(--bg-2)}

/* a wide column shows everything, side by side, with no glance line */
@container ts (min-width:700px){
  .c-ts-glance{display:none}
  .c-ts-groups,.c-ts.is-open .c-ts-groups{display:grid;margin-top:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
}
/* the read-only card beside an order (.cs-view) is glass: the groups show through, as the old facts did */
.cs-view .c-ts-list,.cs-view .c-ts-glance{background:color-mix(in oklab,var(--panel) 26%,transparent)}

/* History: a chip on the "Monty's read" line, a glass pop to peek (Mo, 2026-09-26). No row of its own. */
.c-ts-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;min-height:26px}
.c-ts-head .cs-read-lbl{margin:0}
.c-ts-hchip{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:none;font:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-ts-hchip span{font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink-2)}
.c-ts-hchip:hover,.c-ts-hchip.is-on{background:var(--bg-2);color:var(--ink)}
.c-ts-hpop{position:fixed;z-index:90;width:min(360px,calc(100vw - 16px));max-height:min(60vh,420px);display:flex;flex-direction:column;border-radius:14px;box-shadow:0 18px 40px -16px rgba(42,36,24,.5);overflow:hidden}
.c-ts-hpop.is-sheet{left:8px;right:8px;top:auto;bottom:calc(88px + env(safe-area-inset-bottom));width:auto;max-height:55vh}   /* a phone: a sheet over the bar, like the who? pop */
.c-ts-hpop-h{flex:none;padding:12px 14px 6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.c-ts-hpop-h span{margin-left:4px;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink-2)}
.c-ts-hpop-list{overflow-y:auto;overscroll-behavior:contain;padding:0 0 6px}
.c-ts-hev{display:flex;align-items:baseline;gap:12px;padding:8px 14px;font-size:13px;line-height:1.4;color:var(--ink)}
.c-ts-hev+.c-ts-hev{border-top:1px solid color-mix(in oklab,var(--line) 60%,transparent)}
.c-ts-hev span{flex:1;min-width:0;overflow-wrap:anywhere}
.c-ts-hev time{flex:none;font-size:12px;color:var(--ink-3);white-space:nowrap}

/* a group that opens something (the Order section): the whole section is the target, "Open ›" says so at rest, the box
   tints on hover (Mo, 2026-09-27) */
.c-ts-group.is-go{cursor:pointer;border-radius:12px;outline:none}
.c-ts-group.is-go h4.cs-seclbl{display:flex;align-items:baseline;gap:8px}
.c-ts-group.is-go h4.cs-seclbl>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.c-ts-go{flex:none;display:inline-flex;align-items:center;gap:2px;font-weight:700;letter-spacing:.04em;color:var(--ink-3);transition:color .12s}
.c-ts-go svg{transform:rotate(90deg)}
.c-ts-group.is-go .c-ts-list{transition:background .12s}
.c-ts-group.is-go:hover .c-ts-list{background:var(--bg-2)}
.c-ts-group.is-go:hover .c-ts-go{color:var(--ink)}
.c-ts-group.is-go:focus-visible .c-ts-list{box-shadow:0 0 0 2px var(--green-2)}
.c-ts-group.is-go h4.cs-seclbl>span{text-transform:uppercase;letter-spacing:inherit;font-weight:inherit;color:inherit}   /* .cs-seclbl span is un-capitalised in cases.css */
.c-ts-group.is-go h4.cs-seclbl>.c-ts-go{color:var(--ink-3)}
.c-ts-group.is-go:hover h4.cs-seclbl>.c-ts-go{color:var(--ink)}
/* a returning customer's past orders (2026-10-07): history rows, each opens its order */
.c-ts-row.is-past{cursor:pointer}
.c-ts-row.is-past:hover{background:color-mix(in oklab,var(--ink) 5%,transparent)}
.c-ts-row.is-past small{color:var(--ink-3)}