/* The Today area (2026-10-05): Daily briefing (/today), All changes (/movers)
   and Brands to watch (/watch). One calm layout for all three: pill tabs, a
   plain title with a one-line job, sentence-case section heads, and the
   shared brand card from workspace.css ("Brand card"). This file only adds
   what the Today area needs on top of that card: the rank, the movement
   chips, the ranking row, the filter row and the soft beta card.
   Palette comes from app.css custom properties, so both themes follow. */

.today-area{--gap:16px}

/* Tabs: the same quiet pills as /brands, not a filled purple block. */
.today-area .today-tabs{display:flex;gap:6px;border-bottom:0;padding:4px 0 6px;margin:20px 0 8px;overflow-x:auto;scrollbar-width:none}
.today-area .today-tabs::-webkit-scrollbar{display:none}
.today-area .today-tabs a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border-radius:var(--r-pill);background:none;color:var(--ink-2);font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap}
.today-area .today-tabs a:hover{background:var(--pane);color:var(--ink)}
.today-area .today-tabs a[aria-current="page"]{background:var(--violet-soft);color:var(--violet)}

/* Title, the page's one-line job, and a small "Data as of". */
.today-head{margin:0 0 8px}
.today-head .dateline{margin:8px 0 6px}
.today-job{margin:0;max-width:68ch;font-size:16px;line-height:1.5;color:var(--ink-2)}
.today-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:40px;margin:8px 0 0}
.data-asof{display:inline-flex;align-items:center;font-size:13px;line-height:1.4;color:var(--ink-2)}
.data-asof.is-warning{color:var(--ink);font-weight:600}
.data-asof.is-warning::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:#d98a1f}
.today-archive,.today-select{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.today-area .today-archive select,.today-area .today-select select{width:auto}
.today-archive{margin-left:auto}
.today-archive select,.today-select select,.today-filters select,.today-filters input[type=search]{min-height:40px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--pane);color:var(--ink);font:inherit;font-size:14px;max-width:100%}
.today-archive select:focus-visible,.today-select select:focus-visible,.today-filters select:focus-visible,.today-filters input[type=search]:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.today-area .info{width:18px;height:18px;font-size:12px}
.today-area .infopop{left:0;transform:none;max-width:min(320px,78vw);border-color:var(--rule);border-radius:var(--r-md);padding:12px 14px;background:var(--pane)}
.today-meta .infowrap,.today-section-head .infowrap{margin-left:6px}

/* Sections: sentence-case headings, a small count, one link to the full list. */
.today-section{margin:32px 0 0}
.today-section-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 var(--gap);min-height:40px}
.today-section-head h2{margin:0;font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.today-count{font-size:13px;font-weight:650;line-height:1.3;color:var(--violet);font-variant-numeric:tabular-nums}
.today-count:not(:empty){padding:4px 10px;border-radius:var(--r-pill);background:var(--violet-soft)}
.today-section-head .infowrap{margin-left:0}
.today-all{display:inline-flex;align-items:center;min-height:40px;margin-left:auto;font-size:14px;font-weight:650;color:var(--violet);text-decoration:none}
.today-all:hover{text-decoration:underline;text-underline-offset:4px}
.today-all::after{content:"→";margin-left:6px}
/* "New on Trybe" reserves its loaded header from first paint: a skeleton
   count pill while the cards load, and on phones the heading on its own line,
   the count on the next and the "See all" line held open, so the count and
   link arriving move nothing (CLS was 0.028 at 390). */
#sec-new:has(#new-cards[aria-busy="true"]) #new-count:empty{display:inline-block;width:180px;max-width:100%;height:calc(13px*1.3 + 8px);border-radius:var(--r-pill);background:var(--violet-soft)}
@media(max-width:700px){
  #sec-new .today-section-head h2{flex-basis:100%}
  #sec-new:has(#new-cards[aria-busy="true"]) #new-all[hidden]{display:inline-flex!important;visibility:hidden}
}
.today-select{margin-left:auto}

/* Card grids: three, two, one. */
.today-area .today-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:0;border:0}
/* Six placeholders at the measured card height, because the page shows up to
   six cards per grid. Three short placeholders let the real cards push "What
   changed" down by about 250px as they landed, which was most of the
   page's layout shift (0.37 of ~0.4 at 1440 wide). Heights follow the column
   width: cards get taller as the three columns narrow, then shorter again
   at two columns and one. */
/* Skeleton heights measured from the stat-row cards (2026-10-08). */
.today-area .today-cards>.sk-card{height:215px;border-radius:var(--r-lg)}
.today-area #changed-cards>.sk-card{height:267px}
@media(max-width:1240px){.today-area .today-cards>.sk-card{height:236px}.today-area #changed-cards>.sk-card{height:278px}}
@media(max-width:1020px){.today-area .today-cards>.sk-card{height:215px}.today-area #changed-cards>.sk-card{height:278px}}
@media(max-width:700px){.today-area .today-cards>.sk-card{height:272px}.today-area #changed-cards>.sk-card{height:286px}}
.today-area .sk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.today-area .sk-grid .sk-card{height:190px;border-radius:var(--r-lg)}
.today-empty{grid-column:1/-1;margin:0;padding:20px;border:1px dashed var(--rule);border-radius:var(--r-lg);font-size:14px;line-height:1.5;color:var(--ink-2);text-align:center}
.today-empty a{color:var(--violet)}
.today-more{display:flex;min-height:44px;margin:var(--gap) auto 0;border-radius:var(--r-pill);text-transform:none;letter-spacing:0;font-size:14px}

/* Additions to the shared brand card. */
.brand-card .card-meta{display:flex;flex-direction:column;gap:10px;margin-top:auto;min-width:0}
.brand-card .card-meta .card-facts{margin:0}
.brand-card .card-moves{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-size:13px;font-weight:650;line-height:1.3;font-variant-numeric:tabular-nums}
.brand-card .card-moves li{padding:6px 10px;border-radius:var(--r-pill);background:var(--pane-2);color:var(--ink-2);overflow-wrap:anywhere}
.brand-card .card-moves .is-up{background:color-mix(in srgb,var(--confirm) 13%,var(--pane));color:var(--confirm)}
.brand-card .card-moves .is-down{background:color-mix(in srgb,var(--strike) 13%,var(--pane));color:var(--strike)}
.brand-card .card-moves .is-new{background:var(--violet-soft);color:var(--violet)}
.brand-card .card-facts .is-ads strong{color:var(--violet)}
.brand-card .card-context{margin:0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.brand-card .card-context a{color:var(--violet)}
.brand-card .card-context small{display:block;font-size:12px}
.brand-card .card-trybe{--icon:url("/icons/phosphor/arrow-square-out.svg")}
.brand-card .result-actions>:is(button,a).card-icon{display:inline-grid;place-items:center}
.brand-card .card-rank{position:absolute;top:31px;left:14px;min-width:20px;font-size:14px;font-weight:700;line-height:1;text-align:center;color:var(--ink-2);font-variant-numeric:tabular-nums}
.brand-card .card-rank.is-top{color:var(--violet)}
.brand-card.has-rank .result-identity{padding-left:26px}

/* The activity ranking: one clean row per brand on wide screens. */
.today-rows{display:grid;gap:8px}
.today-rows .sk-row{height:84px;border-radius:var(--r-lg)}
@media(min-width:961px){
  .today-rows .brand-result.brand-card.is-row{display:grid;grid-template-columns:28px minmax(200px,1.1fr) minmax(150px,.9fr) minmax(0,2fr) auto;align-items:center;gap:16px;padding:12px 16px}
  .today-rows .is-row>*{grid-row:1}
  .today-rows .is-row .card-rank{position:static;grid-column:1}
  .today-rows .is-row .result-identity{grid-column:2;padding:0}
  .today-rows .is-row .card-pay{grid-column:3}
  .today-rows .is-row .card-pay span{font-size:15px}
  .today-rows .is-row .card-meta{grid-column:4;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
  .today-rows .is-row .result-actions{grid-column:5;position:relative;top:auto;right:auto}
}

/* Category pills above the ranking; they scroll sideways on a phone. */
.today-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--gap)}
.today-pill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--pane);color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.today-pill span{font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.today-pill:hover{border-color:var(--violet);color:var(--ink)}
.today-pill[aria-pressed="true"]{border-color:transparent;background:var(--violet-soft);color:var(--violet)}
.today-pill[aria-pressed="true"] span{color:inherit}
.today-pill:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* Filters in one tidy row: search, category, sort, then checkboxes as pills. */
.today-area .today-kinds{margin:12px 0 var(--gap);overflow-x:auto;scrollbar-width:none}
.today-area .today-kinds::-webkit-scrollbar{display:none}
.today-area .today-kinds button{flex:none;gap:6px;white-space:nowrap}
.today-area .today-kinds button span{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}
.today-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 var(--gap)}
/* /watch opened from Today's "See all" link is narrowed to one day; this says so and undoes it. */
.today-day-filter{margin:calc(var(--gap) * -.5) 0 var(--gap);font-size:14px;color:var(--ink-2)}
.today-day-filter a{color:var(--violet);font-weight:600}
.today-area .today-filters input[type=search]{flex:1 1 220px;min-width:0;max-width:340px;width:auto}
.today-area .today-filters select{flex:0 1 200px;width:auto}
.today-check{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--pane);color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.today-check input{width:16px;height:16px;margin:0;accent-color:var(--violet-fill,var(--violet))}
.today-check:has(input:checked){border-color:transparent;background:var(--violet-soft);color:var(--violet)}
.today-check:has(input:focus-visible){outline:2px solid var(--violet);outline-offset:2px}
.today-result-count{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.today-filter-note{flex:1 1 320px;margin:0;max-width:70ch;font-size:14px;line-height:1.5;color:var(--ink-2)}

/* One soft invitation where beta members see more. Never a wall. */
.beta-soft{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 var(--gap);padding:14px 16px;border:1px solid color-mix(in srgb,var(--violet) 22%,var(--rule));border-radius:var(--r-lg);background:color-mix(in srgb,var(--violet) 6%,var(--pane));font-size:14px;line-height:1.5;color:var(--ink-2)}
.beta-soft strong{color:var(--ink);font-weight:700}
.beta-soft-links{display:inline-flex;align-items:center;gap:16px}
.beta-soft-links a{font-size:14px;font-weight:650;color:var(--violet);text-underline-offset:4px}
.beta-soft-links a.beta-soft-join{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:var(--r-pill);background:var(--violet-fill);color:#fff;text-decoration:none}
.beta-soft-links a.beta-soft-join:hover{background:var(--violet-deep)}

.today-next{display:flex;flex-wrap:wrap;gap:8px 20px;margin:32px 0 0;font-size:14px}
.today-next a{display:inline-flex;align-items:center;min-height:40px;color:var(--violet);font-weight:600;text-underline-offset:4px}

@media(max-width:1020px){
  .today-area .today-cards,.today-area .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .today-rows{gap:12px}
}
@media(max-width:700px){
  .today-area .today-tabs{margin:8px -16px 4px;padding-inline:16px}
  .today-area .today-cards,.today-area .sk-grid{grid-template-columns:1fr}
  .today-job{font-size:15px}
  .today-section{margin-top:28px}
  .today-section-head h2{font-size:20px}
  .today-all{margin-left:0;flex-basis:100%;min-height:32px}
  .today-archive{margin-left:0}
  .today-select{margin-left:0;flex:1 1 100%;justify-content:space-between}
  .today-pills,.today-area .today-kinds{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .today-pills::-webkit-scrollbar{display:none}
  .today-area .today-filters input[type=search]{flex:1 1 100%;max-width:none}
  .today-area .today-filters select{flex:1 1 calc(50% - 6px);min-width:0}
  .today-result-count{margin-left:0;flex-basis:100%}
  .beta-soft{align-items:flex-start;flex-direction:column}
  .today-area .infopop{max-width:min(290px,74vw)}
}

.today-area .brand-card .result-actions{border-top:0}
/* Filters share one row on wide screens; selects size to their content. */
.today-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.today-filters>input[type=search]{flex:1 1 240px;min-width:0;max-width:420px}
.today-filters>select{width:auto;flex:0 1 230px;min-width:160px}
@media(max-width:700px){.today-filters>input[type=search]{flex-basis:100%;max-width:none}.today-filters>select{flex:1 1 150px}}
/* Compact page top: title and job on the left, day picker and a small data note on the right. */
main.today-area{padding-top:14px}
.today-area .today-tabs{margin:0 0 10px}
.today-head{margin:0 0 14px}.today-head .dateline{margin:0 0 4px}
.today-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.today-title .today-meta{flex-direction:column;align-items:flex-end;gap:4px;min-height:0;margin:0}
.today-title #stale{font-size:12px;color:var(--ink-2)}
/* The day select is swapped for the 46px filter picker when the scripts run;
   holding that height from the first paint stops the whole page dropping 3px. */
.today-title .today-archive{min-height:46px}
/* "Data as of" arrives after the first paint. On a mid-width screen it widened
   the right-hand column enough to wrap it under the title (a 73px drop for
   everything below); on a phone it wrapped onto its own line late. The
   column keeps its width from the start and the note always takes its own line. */
@media(min-width:701px){.today-title{flex-wrap:nowrap}.today-title>div:first-child{flex:1 1 auto;min-width:0}.today-title .today-meta{flex:none;min-width:250px}}
@media(max-width:700px){.today-title #stale{flex-basis:100%}}
@media(max-width:700px){.today-title .today-meta{flex-direction:row;align-items:center;justify-content:space-between;width:100%}}
/* The job line is rewritten once the edition loads. An older edition's
   wording ("What was new ... on October 6") is longer and wrapped one more
   line at 1024 and on phones, pushing the day picker and every card below it
   down. Hold the longer version's lines from the first paint, and the day
   picker's final width (its label grows when the dates arrive). */
@media(max-width:1199px){.today-title .today-job{min-height:3em;min-height:2lh}}
@media(max-width:700px){.today-title .today-job{min-height:4.5em;min-height:3lh}}
.today-title .today-archive{min-width:236px;justify-content:flex-end}
@media(max-width:700px){.today-title .today-archive{min-width:0;justify-content:flex-start}}
/* The site wraps native selects in a styled box; size the box, not just the select. */
.today-area .today-filters>:has(>select),.today-area .today-filters>:has(select):not(label.today-check){flex:0 1 230px;width:auto;min-width:160px;max-width:260px}
.today-area .today-filters>:has(select) select{width:100%}
@media(max-width:700px){.today-area .today-filters>:has(select):not(label.today-check){flex:1 1 150px;max-width:none}}
.today-area .today-filters>details.filter-picker{flex:0 1 230px;width:auto;min-width:170px;max-width:260px}
.today-area .today-filters>.today-result-count{margin-left:auto}
@media(max-width:700px){.today-area .today-filters>details.filter-picker{flex:1 1 150px;max-width:none}}

/* ---- Design batch 1 (2026-10-08): a shorter, calmer Today ----------------
   Three cards per section with "See all"; on phones those three sit in one
   sideways swipe row with the next card peeking. The beta invitation spans
   the full width. Most active brands are compact rows. */
.today-area #changed-pay .beta-soft,.today-area .beta-soft{width:100%;max-width:none;box-sizing:border-box}
.today-area #changed-pay:empty{display:none}
@media(max-width:700px){
  .today-area .today-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:2px 16px 10px;scrollbar-width:none}
  .today-area .today-cards::-webkit-scrollbar{display:none}
  .today-area .today-cards>*{scroll-snap-align:start;min-width:0}
  .today-area .today-cards:has(>.today-empty,>.beta-soft){grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  .today-area .today-cards>.brand-card:hover{transform:none}
}
@media(max-width:960px){
  .today-rows .brand-result.brand-card.is-row{gap:8px;padding:12px 14px}
  .today-rows .is-row .result-category{display:none}
  .today-rows .is-row .card-pay{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .today-rows .is-row .card-pay span{font-size:15px}
  .today-rows .is-row .card-meta{gap:8px}
  .today-rows .is-row .card-stats{padding-top:8px}
  .today-rows .sk-row{height:170px}
  /* The See all link keeps its row while hidden, so the section never grows after paint. */
  .today-section-head .today-all[hidden]{display:inline-flex!important;visibility:hidden}
}