/* Story feed table and the record-detail dialog. */
/* ---------- table ----------
   Always a real <table>, at every width, with no horizontal scroll: nine
   fixed percentage-width columns (summing to 100%) rather than a min-width
   floor plus overflow-x. table-layout:fixed is what makes a percentage on
   <th> actually bind the column below it instead of the "automatic"
   algorithm growing every column to its content's natural width - which is
   also why every cell that used to be white-space:nowrap (company name,
   location, status pill, tag chips, the consent/press-ready labels) now
   wraps or takes overflow-wrap:anywhere instead: nowrap content is exactly
   what forces a fixed-layout column's row taller instead of the table
   wider, so wrapping is what keeps the table's total width pinned to 100%
   of its card at every viewport - none of these labels are so short they
   can be assumed to always fit their column, especially once BAR's
   clamp(120px,...)-style narrowing or a genuinely narrow phone is in play.
   The one thing that stays nowrap is `.t-num` (Usages/Est. reach): a
   handful of digits never needs to wrap and forcing it to would misalign
   the tabular-nums column for no reason. */
.tablewrap{ overflow-x:visible; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); }
table.feed{ width:100%; table-layout:fixed; border-collapse:collapse; }
table.feed th:nth-child(1){ width:20%; } /* Story   */
table.feed th:nth-child(2){ width:13%; } /* Company */
table.feed th:nth-child(3){ width:7%; }  /* Location */
table.feed th:nth-child(4){ width:10%; } /* Status  - a padded uppercase pill needs
                                            more room than plain text of the same
                                            character count; measured wrapping to
                                            two lines at the old 7% even on a
                                            1440px desktop. */
table.feed th:nth-child(5){ width:14%; } /* Topics  */
table.feed th:nth-child(6){ width:9%; }  /* Impact  */
table.feed th:nth-child(7){ width:11%; } /* Consent */
table.feed th:nth-child(8){ width:6%; }  /* Usages  */
table.feed th:nth-child(9){ width:10%; } /* Est. reach - "(people)" in the header
                                            and values like "121.5K" need more
                                            than the number columns' plain digits. */
table.feed thead th{ text-align:left; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); font-weight:400; padding:12px 10px; border-bottom:1px solid var(--border-strong); background:var(--surface-sunken); white-space:normal; overflow-wrap:anywhere; position:sticky; top:0; }
table.feed tbody td{ padding:14px 10px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:top; overflow-wrap:anywhere; }
table.feed tbody tr[data-story]{ cursor:pointer; }
table.feed tbody tr[data-story]:hover,table.feed tbody tr[data-story]:focus{ background:var(--row-hover-accent); outline:none; }
.t-id{ font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); }
.t-story{ font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.4; color:var(--text-primary); }
.t-company{ font-weight:400; color:var(--text-primary); }
.t-loc{ font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); }
.t-topics{ display:flex; flex-wrap:wrap; gap:5px; }
.tag-chip{ font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--tag); border:1px solid var(--tag); padding:2px 6px 3px; line-height:1.3; overflow-wrap:anywhere; }
/* One shape and weight for all three states (padding/radius/font/weight are
   the base rule, never overridden). New needed no override at all - the
   rule that used to restate it verbatim was dead CSS, deleted here.
   Reviewed only swaps the border/text colour. Used is a solid fill, so its
   border is explicitly removed - it used to silently inherit the base
   rule's border-strong border, which put an outline around what was meant
   to read as a clean fill. */
.status-pill{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:var(--radius-pill); display:inline-block; max-width:100%; overflow-wrap:anywhere; border:1px solid var(--border-strong); color:var(--text-secondary); }
.status-Reviewed{ border-color:var(--chart-hue); color:var(--chart-hue); }
.status-Used{ background:var(--blue-01); border-color:var(--blue-01); color:var(--on-brand); }
.flag-icon{ display:inline-flex; align-items:center; gap:4px; font-size:11px; overflow-wrap:anywhere; }
.flag-icon svg{ width:14px; height:14px; }
.flag-icon.ok{ color:var(--good); }
.flag-icon.risk{ color:var(--critical); font-weight:700; }
.flag-icon.warn{ color:var(--amber-text); }
.t-num{ font-family:var(--mono); font-size:12.5px; text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.empty-row td{ text-align:center; padding:40px; color:var(--text-secondary); font-size:13px; }
.load-more-row{ text-align:center; padding:18px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 20px; border:2px solid var(--blue-01); border-radius:var(--radius-sm); background:transparent; color:var(--text-primary); font-family:var(--sans); font-weight:300; font-size:14.5px; cursor:pointer; transition:background-color .2s,color .2s,border-color .2s; }
.btn:hover{ background:var(--blue-01); color:var(--on-brand); }

/* ---------- story detail ---------- */
dialog.story-dialog{ width:min(760px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-dialog); }
dialog.story-dialog::backdrop{ background:var(--scrim-strong); }
.story-detail{ padding:28px; }
.story-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.story-detail-title{ font-family:var(--sans); font-size:24px; font-weight:700; line-height:1.15; }
.icon-btn{ display:grid; width:36px; height:36px; place-items:center; flex:none; padding:0; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-primary); cursor:pointer; }
.icon-btn:hover{ background:var(--surface-sunken); }
.icon-btn svg{ width:18px; height:18px; }
.story-detail-text{ margin:24px 0; font-family:var(--serif); font-size:20px; font-style:italic; line-height:1.5; }
.story-detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 0; border-top:1px solid var(--border); }
.story-detail-grid div{ min-width:0; }
.story-detail-grid dt{ margin-bottom:5px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); }
.story-detail-grid dd{ margin:0; font-size:14px; line-height:1.35; }
.detail-topics{ display:flex; flex-wrap:wrap; gap:6px; }
.usage-list{ display:grid; gap:8px; margin-top:12px; }
.usage-item{ display:grid; grid-template-columns:110px 1fr auto; gap:12px; padding:10px 0; border-top:1px solid var(--border); font-size:13px; }
.usage-item span:first-child{ font-family:var(--mono); font-size:11px; color:var(--text-secondary); }
.usage-item span:last-child{ font-family:var(--mono); font-size:12px; white-space:nowrap; }
@media (max-width:600px){ .story-detail{ padding:20px; }.story-detail-title{ font-size:21px; }.story-detail-text{ font-size:18px; }.story-detail-grid{ grid-template-columns:repeat(2,1fr); }.usage-item{ grid-template-columns:1fr auto; }.usage-item span:nth-child(2){ grid-column:1/-1; grid-row:2; } }