/*
Theme Name: StorybankHQ
Theme URI: https://storybankhq.com
Author: BC/DC Ideas
Description: Purpose-built theme for StorybankHQ, a private archive for the human stories nonprofits collect. No parent theme: the app owns its own shell so nothing has to be overridden.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storybank
*/

/* ============================================================
   RESET
   Replaces the normalization Kadence used to provide. Kept small
   and deliberate: only what the app actually relies on.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { margin: 0; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }

svg { fill: currentColor; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Form controls inherit type instead of falling back to the UA's 13px Arial.
   Kadence did this for us; nothing else will. */
button, input, select, optgroup, textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  border: 0;
  background: none;
  cursor: pointer;
}
textarea { resize: vertical; }
[type="search"] { -webkit-appearance: textfield; appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { margin: 0; border: 0; padding: 0; }
legend { padding: 0; }

/* WordPress core classes the editor can still emit */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.alignleft  { float: left;  margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .8rem; opacity: .75; }

/* ============================================================
   DESIGN SYSTEM
   Ported from the Storybank-HQ-Standalone prototype.
   --tenant is the per-organization accent: white-labelling hook.
   ============================================================ */
:root {
  --tenant: oklch(45% 0.088 190);
  --tenant-dark: oklch(34% 0.07 190);
  --tenant-soft: oklch(94% 0.022 190);
  --ink: oklch(23% 0.022 326);
  --muted: oklch(45% 0.018 326);
  --paper: oklch(98.5% 0.008 72);
  --surface: oklch(95.5% 0.012 72);
  --line: oklch(88% 0.012 72);
  --coral: oklch(91% 0.055 34);
  --yellow: oklch(95% 0.05 88);
  --blue: oklch(93% 0.04 233);
  --lavender: oklch(93% 0.04 300);
  --sage: oklch(93% 0.04 142);
  --shadow: 0 18px 44px oklch(23% 0.022 326 / 0.11);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The focus ring, derived from the tenant accent rather than frozen.
     It used to be written out as var(--focus-ring) in twelve separate
     rules — hue 190 being the *default* tenant hue. Since --tenant is the
     white-labelling hook, that meant an organization could set its own accent
     and every input in the app would still focus in the stock teal. Twelve
     copies is why nobody would have caught it. */
  --focus-ring: color-mix(in oklch, var(--tenant) 24%, transparent);
}

html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 Geist, system-ui, -apple-system, "Segoe UI", sans-serif; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid oklch(67% 0.15 190 / .65); outline-offset: 3px; }
h1, h2 { text-wrap: balance; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; inset: 10px auto auto 10px; z-index: 1000; transform: translateY(-160%); border-radius: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip-link:focus { transform: translateY(0); }

.brand > span:last-child { display: flex; min-width: 0; flex-direction: column; line-height: 1.14; }
.nav-item, .secondary-nav button { display: flex; min-height: 44px; width: 100%; align-items: center; justify-content: space-between; border-radius: 10px; background: transparent; padding: 10px 12px; color: var(--muted); font-size: .88rem; text-align: left; }
.nav-item:hover, .secondary-nav button:hover { background: var(--surface); color: var(--ink); }
.profile > span:last-child { display: flex; flex-direction: column; }
.profile strong { font-size: .78rem; }
.profile small { color: var(--muted); font-size: .7rem; }
.sb-main { min-height: 100vh; margin-left: 236px; }
.view { display: none; animation: enter .35s var(--ease) both; }
.active-view { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(7px); } }

#homeView, #storyView { width: min(100%, 1560px); margin: auto; padding: 36px clamp(24px, 4vw, 64px) 80px; }
.eyebrow { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-top, .section-heading, .story-toolbar, .results-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.page-top { margin-bottom: 24px; }
.page-top h1 { margin-top: 4px; font: 500 clamp(2rem, 4vw, 3.25rem)/1.03 Georgia, serif; letter-spacing: -.04em; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: 10px; padding: 10px 16px; font-size: .86rem; font-weight: 750; }
.primary { background: var(--tenant); color: var(--paper); box-shadow: 0 6px 18px oklch(45% .088 190 / .18); }
.primary:hover { background: var(--tenant-dark); }
.secondary { border: 1px solid var(--line); background: var(--paper); }
.secondary:hover { background: var(--surface); }
.text-button, .back-button { min-height: 44px; background: transparent; color: var(--tenant-dark); font-size: .82rem; font-weight: 750; }
.text-button:hover, .back-button:hover { text-decoration: underline; text-underline-offset: 4px; }

.portrait-hero { position: relative; overflow: hidden; min-height: 340px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.portrait-ribbon { display: grid; height: 260px; grid-template-columns: 1.1fr .9fr 1fr 1.15fr; }
.portrait-ribbon img { width: 100%; height: 100%; object-fit: cover; }
.search-table { position: absolute; inset: auto 7% 26px; display: grid; grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr); align-items: end; gap: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); padding: 22px 24px; box-shadow: var(--shadow); }
.search-table h1 { margin-top: 5px; font: 500 clamp(1.35rem, 2.2vw, 2rem)/1.08 Georgia, serif; letter-spacing: -.025em; }
.search-box input::placeholder, .filter-search::placeholder { color: oklch(49% .014 326); }
.section { margin-top: 52px; }
.section-heading { margin-bottom: 18px; }
.section-heading h2 { margin-top: 3px; font: 500 1.7rem Georgia, serif; letter-spacing: -.025em; }
.story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.story-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 0; text-align: left; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.story-card .image-wrap { position: relative; display: block; aspect-ratio: 1.45; overflow: hidden; }
.story-card img { width: 100%; height: 100%; object-fit: cover; }
.story-card .flag { position: absolute; inset: 10px auto auto 10px; border-radius: 999px; background: var(--lavender); padding: 4px 8px; font-size: .66rem; font-weight: 750; }
.story-card .card-copy { display: grid; gap: 6px; padding: 14px; }
.story-card .card-copy > strong { font: 600 1.02rem/1.22 Georgia, serif; }
.story-card .card-copy > span { color: var(--muted); font-size: .72rem; }
.story-card .card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.release.missing { background: var(--yellow); color: oklch(39% .12 65); }
.browse-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.browse { display: flex; min-height: 166px; flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: 16px; padding: 22px; text-align: left; transition: transform .18s var(--ease); }
.browse:hover { transform: translateY(-3px); }
.browse.lavender { background: var(--lavender); }
.browse.yellow { background: var(--yellow); }
.browse.coral { background: var(--coral); }
.browse.blue { background: var(--blue); }
.browse span { display: grid; gap: 8px; }
.browse strong { font: 600 1.22rem Georgia, serif; }
.browse small { max-width: 27ch; color: var(--muted); }
.browse b { font-size: .74rem; }
.project-list { border-block: 1px solid var(--line); }
.project-list button { display: grid; width: 100%; grid-template-columns: 96px minmax(230px, 1.4fr) minmax(150px, .6fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 8px; text-align: left; }
.project-list button:last-child { border-bottom: 0; }
.project-list button:hover { background: var(--surface); }
.project-list img { width: 96px; height: 64px; border-radius: 8px; object-fit: cover; }
.project-list button > span { display: grid; color: var(--muted); font-size: .72rem; }
.project-list strong, .project-list b { color: var(--ink); }

.active-filters button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); padding: 7px 10px; font-size: .74rem; }
.filters label { display: flex; min-height: 38px; align-items: center; gap: 9px; border-radius: 8px; padding: 6px 8px; font-size: .76rem; }
.filters label:hover { background: var(--surface); }
.filters label small { margin-left: auto; color: var(--muted); }
.filters input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--tenant); }
.filter-search { width: 100%; min-height: 40px; margin: 7px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); padding: 8px 10px; }
.location-tree details { padding: 4px 0; }
.location-tree details > summary { color: var(--muted); font-size: .76rem; }
.location-tree details > div { margin-left: 12px; border-left: 1px solid var(--line); padding-left: 10px; }
.location-tree b { display: block; padding: 6px 8px; color: var(--muted); font-size: .7rem; }
.result-row > img { width: 100%; height: 150px; border-radius: 12px; object-fit: cover; }
.result-copy > small { color: var(--tenant-dark); font-weight: 750; }
.topic:nth-child(2) { background: var(--blue); }
.topic:nth-child(3) { background: var(--sage); }
.result-meta span { display: grid; }

.story-toolbar > div { display: flex; gap: 10px; }
.action-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; border-block: 1px solid var(--line); background: var(--tenant-soft); padding: 20px; }
.action-panel button { min-height: 52px; border-radius: 9px; background: var(--paper); padding: 10px 12px; text-align: left; }
.action-panel button strong, .action-panel button small { display: block; }
.action-panel button small { color: var(--tenant-dark); }
.media-strip img:first-child { outline: 2px solid var(--tenant); outline-offset: 2px; }
.story-copy cite { display: block; margin-top: 10px; color: var(--muted); font: normal .75rem Geist, system-ui, -apple-system, "Segoe UI", sans-serif; }
.tab-content { padding: 34px 0; }
.prose .lead { color: var(--tenant-dark); font-size: 1.28rem; line-height: 1.55; }
.transcript p, .usage-row { display: grid; grid-template-columns: 110px 1fr; gap: 18px; border-bottom: 1px solid var(--line); padding: 18px 0; }
.transcript time, .usage-row time { color: var(--tenant-dark); font-size: .75rem; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 700; max-width: min(380px, calc(100vw - 32px)); transform: translateY(24px); border-radius: 12px; background: var(--ink); color: var(--paper); padding: 13px 16px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), transform .22s var(--ease); }
.toast.visible { transform: translateY(0); opacity: 1; }

@media (max-width: 1180px) {
  .story-grid, .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-row { grid-template-columns: 160px 1fr; }
  .result-meta { grid-column: 2; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  .sidebar { transform: translateX(-104%); box-shadow: var(--shadow); transition: transform .24s var(--ease); }
  .sidebar.open { transform: translateX(0); }
  .mobile-header { position: sticky; top: 0; z-index: 180; display: flex; min-height: 68px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--paper); padding: 10px 18px; }
  .mobile-header .brand { padding: 0; }
  .mobile-header .org-mark { width: 38px; height: 38px; }
  .menu-button { min-height: 44px; border-radius: 8px; background: var(--tenant-soft); padding: 8px 12px; color: var(--tenant-dark); font-size: .8rem; font-weight: 750; }
  .sb-main { margin-left: 0; }
  .search-header { top: 68px; }
  .filter-summary { top: 149px; }
  .search-layout { display: block; }
  .filter-button { display: inline-flex; }
  .filters { position: fixed; inset: 0 auto 0 0; z-index: 310; width: min(360px, 90vw); max-height: none; transform: translateX(-105%); box-shadow: var(--shadow); transition: transform .24s var(--ease); }
  .filters.open { transform: translateX(0); }
  .filter-title > button { display: block; }
  .story-hero { grid-template-columns: 1fr; }
  .stewardship { grid-template-columns: 1fr; }
  .stewardship > div + div { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 700px) {
  #homeView, #storyView { padding: 24px 16px 64px; }
  .page-top { align-items: center; }
  .page-top h1 { font-size: 2rem; }
  .portrait-hero { min-height: 430px; }
  .portrait-ribbon { height: 230px; grid-template-columns: 1fr 1fr; }
  .portrait-ribbon img:nth-child(n+3) { display: none; }
  .search-table { inset: auto 12px 14px; grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .search-box { display: grid; }
  .story-grid { display: flex; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x mandatory; }
  .story-card { width: 78vw; flex: 0 0 auto; scroll-snap-align: start; }
  .browse-grid { grid-template-columns: 1fr; }
  .project-list button { grid-template-columns: 72px 1fr; }
  .project-list img { width: 72px; height: 72px; }
  .project-list button > span:nth-child(n+3) { grid-column: 2; }
  .search-header { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 16px; }
  .search-header .search-box { grid-column: 1/-1; }
  .filter-summary { top: 173px; padding-inline: 16px; }
  .results { padding: 26px 16px 64px; }
  .results-heading { align-items: start; flex-direction: column; }
  .result-row { grid-template-columns: 106px 1fr; gap: 14px; padding: 16px 0; }
  .result-row > img { height: 120px; }
  .result-copy > strong { font-size: 1.06rem; }
  .result-copy > p, .result-copy .topics { display: none; }
  .result-meta { grid-column: 1/-1; padding-left: 120px; }
  .story-toolbar { align-items: start; flex-direction: column; }
  .story-toolbar > div { width: 100%; }
  .story-toolbar .button { flex: 1; }
  .action-panel { grid-template-columns: 1fr; }
  .story-image { aspect-ratio: 1; }
  .story-copy h1 { font-size: 2.75rem; }
  .story-copy dl div { grid-template-columns: 1fr; gap: 4px; }
  .stewardship > div { padding-inline: 8px; }
  .media-library { grid-template-columns: 1fr; }
  .toast { inset: auto 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   TOKEN ALIASES  (--sb-* onto the palette)
   The MU-plugins emit .sb-* markup and reference --sb-* names; the design
   system above defines the palette. This maps one onto the other.

   It was written as a temporary bridge, to be deleted a slice at a time as
   screens were converted. That did not happen and is no longer the plan:
   92 declarations still resolve through these names and renaming them all
   would be churn for no gain. This is an alias layer, not a migration
   artefact — worth saying plainly, because the "(temporary)" label invited
   people to treat live tokens as disposable.
   ============================================================ */
:root{
  --sb-ink:            var(--ink);
  --sb-ink-soft:       var(--muted);
  --sb-ink-muted:      var(--muted);
  --sb-surface:        var(--paper);
  --sb-surface-raised: var(--paper);
  --sb-surface-sunken: var(--surface);
  --sb-border:         var(--line);
  --sb-border-strong:  var(--line);
  --sb-accent:         var(--tenant);
  --sb-accent-deep:    var(--tenant-dark);
  --sb-accent-wash:    var(--tenant-soft);
  --sb-accent-edge:    var(--tenant-soft);
  --sb-accent-shade:   var(--tenant-dark);
  --sb-ok:             oklch(36% .1 145);
  --sb-ok-wash:        var(--sage);
  --sb-ok-edge:        var(--sage);
  --sb-caution:        oklch(39% .12 65);
  --sb-caution-wash:   var(--yellow);
  --sb-caution-edge:   var(--yellow);
  --sb-danger:         oklch(40% .13 25);
  --sb-danger-wash:    var(--coral);
  --sb-danger-edge:    var(--coral);
  --sb-r-sm:           8px;
  --sb-r-md:           12px;
  --sb-r-lg:           16px;
  --sb-r-pill:         999px;
  --sb-font-display:   Georgia, serif;
  --sb-font-body:      Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-shadow-raised:  var(--shadow);
  --sb-shadow-floating: var(--shadow);
}

/* What used to follow here — an APP NAV banner and sixteen section comments,
   plus .sb-release-status and @keyframes sb-notice-in — was the residue of
   Stage 2. Each screen's rules were deleted as it was converted; the headings
   were not, so the file carried a table of contents for a section that no
   longer existed. Both surviving rules were checked against every PHP and JS
   file in the theme and the MU-plugins and appear in neither. */

/* ============================================================
   DASHBOARD ([storybank_dashboard])
   ============================================================ */

.sb-dash{
  width: min(92vw, 1200px);
  margin: 0 auto;
  padding: 8px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Banner --------------------------------------------------- */
.sb-dash__banner{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--sb-accent-wash) 0%, var(--sb-surface-sunken) 100%);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-r-lg);
}
.sb-dash__banner-logo{
  flex-shrink: 0;
}
.sb-dash__banner-logo img{
  height: 96px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  border-radius: var(--sb-r-sm);
  background: var(--sb-surface-raised);
  padding: 8px;
  border: 1px solid var(--sb-border);
}
.sb-dash__banner-text{ min-width: 0; }
.sb-dash__greeting{
  font-size: 14px;
  color: var(--sb-ink-muted);
  margin-bottom: 4px;
}
.sb-dash__org-name{
  font-family: 'Georgia', serif;
  font-size: 32px;
  line-height: 1.15;
  color: var(--sb-ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.sb-dash__org-tagline{
  font-size: 16px;
  color: var(--sb-ink-soft);
  margin: 0;
  line-height: 1.45;
}

/* CTAs ----------------------------------------------------- */
.sb-dash__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sb-dash__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--sb-r-sm);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .05s ease, background .15s ease;
}
.sb-dash__cta:hover{ text-decoration: none; transform: translateY(-1px); }
.sb-dash__cta svg{ width: 16px; height: 16px; flex-shrink: 0; }
.sb-dash__cta--primary{ background: var(--sb-ink); color: var(--sb-surface-raised); }
.sb-dash__cta--primary:hover{ background: var(--sb-ink-soft); color: var(--sb-surface-raised); }
.sb-dash__cta--secondary{ background: var(--sb-surface-raised); color: var(--sb-ink); border-color: var(--sb-border); }
.sb-dash__cta--secondary:hover{ background: var(--sb-surface-sunken); color: var(--sb-ink); }
.sb-dash__cta--ghost{ background: transparent; color: var(--sb-ink-soft); border-color: transparent; }
.sb-dash__cta--ghost:hover{ background: var(--sb-surface-sunken); color: var(--sb-ink); }

/* Stats ---------------------------------------------------- */
.sb-dash__stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.sb-dash__stat{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  background: var(--sb-surface-raised);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .05s ease;
}
a.sb-dash__stat:hover{ border-color: var(--sb-accent); transform: translateY(-1px); text-decoration: none; }
.sb-dash__stat--accent{ background: var(--sb-accent-wash); border-color: var(--sb-accent-edge); }
.sb-dash__stat-num{
  font-family: 'Georgia', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--sb-ink);
  line-height: 1;
}
.sb-dash__stat-label{
  font-size: 13px;
  color: var(--sb-ink-muted);
}

/* Sections ------------------------------------------------- */
.sb-dash__section{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sb-dash__section-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sb-dash__section-head h2{
  font-family: 'Georgia', serif;
  font-size: 22px;
  margin: 0;
  color: var(--sb-ink);
}
.sb-dash__see-all{
  font-size: 14px;
  color: var(--sb-accent);
  text-decoration: none;
}
.sb-dash__see-all:hover{ text-decoration: underline; }

/* Pending queue -------------------------------------------- */
.sb-dash__queue{
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--sb-surface-raised);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-r-md);
  overflow: hidden;
}
.sb-dash__queue-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sb-border);
}
.sb-dash__queue-item:last-child{ border-bottom: 0; }
.sb-dash__queue-main{ min-width: 0; flex: 1; }
.sb-dash__queue-title{
  display: block;
  font-weight: 600;
  color: var(--sb-ink);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 2px;
}
.sb-dash__queue-title:hover{ color: var(--sb-accent); text-decoration: none; }
.sb-dash__queue-meta{
  font-size: 13px;
  color: var(--sb-ink-muted);
}
.sb-dash__queue-action{
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--sb-accent-wash);
  color: var(--sb-accent);
  border-radius: var(--sb-r-sm);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.sb-dash__queue-action:hover{ background: var(--sb-accent); color: var(--sb-surface-raised); text-decoration: none; }

/* Recent stories ------------------------------------------- */
.sb-dash__recent{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.sb-dash__recent-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.sb-dash__recent-card:hover{ text-decoration: none; }
.sb-dash__recent-card:hover .sb-dash__recent-title{ color: var(--sb-accent); }
.sb-dash__recent-media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sb-surface-sunken);
  border-radius: var(--sb-r-sm);
  overflow: hidden;
  border: 1px solid var(--sb-border);
}
.sb-dash__recent-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-dash__recent-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-ink-muted);
  font-size: 13px;
}
.sb-dash__recent-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: var(--sb-r-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--sb-ink);
  color: var(--sb-surface-raised);
}
.sb-dash__recent-badge--pending{ background: var(--sb-accent); }
.sb-dash__recent-badge--draft{ background: var(--sb-ink-muted); }
.sb-dash__recent-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-ink);
  line-height: 1.35;
  transition: color .15s ease;
}

/* Empty state ---------------------------------------------- */
.sb-dash__empty{
  padding: 32px;
  text-align: center;
  background: var(--sb-surface-raised);
  border: 1px dashed var(--sb-border);
  border-radius: var(--sb-r-md);
  color: var(--sb-ink-muted);
}
.sb-dash__empty p{ margin: 0 0 12px; }
.sb-dash__empty p:last-child{ margin-bottom: 0; }

/* Responsive ----------------------------------------------- */
@media (max-width: 700px){
  .sb-dash__banner{ flex-direction: column; text-align: center; gap: 16px; padding: 24px; }
  .sb-dash__banner-logo img{ height: 72px; }
  .sb-dash__org-name{ font-size: 26px; }
  .sb-dash__org-tagline{ font-size: 14px; }
  .sb-dash__ctas{ flex-direction: column; }
  .sb-dash__cta{ justify-content: center; }
  .sb-dash__section-head h2{ font-size: 18px; }
}

/* Pending-review banner above the library (Org Admin only) */

/* Pending-review notice variant (post-submit confirmation, B3) */

/* Location chip variant (single-story header, library cards) */

/* Library sidebar: Media filter check-group (Has photo / Has video) */

/* "Showing your drafts & pending" banner (Contributor, sbmine view) */

/* "Recently added" strip above the library (Viewers, first page only).
   Small, compact cards — closer to dashboard recent-stories density. */

/* ============================================================
   C3 — Per-quote consent badges
   ============================================================ */

/* ============================================================
   C4 — Vetting history log (sidebar panel)
   ============================================================ */

/* Show more / less expander */

/* ============================================================
   TOKEN PASS ADDENDA
   ============================================================ */

/* Warm page background (never pure white) */
body{ background: var(--sb-surface); }

/* Display face on the things that carry the editorial signal */

/* Card summary: readable, clamped to two lines so cards stay scannable */

/* Consistent focus ring across the app (keyboard users, a11y best effort) */
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Status tag on the card image (published gets none: it's the expected state) */

/* Topic overflow indicator */

/* Card media is a link, so stop theme link colours leaking into its contents */

/* ============================================================
   SETTINGS PAGE
   Markup existed since B1 but was never styled; controls were
   falling back to browser defaults.
   ============================================================ */




/* Field primitives */

/* Toggle switch (was an unstyled checkbox next to an empty label) */
/* A bare `.sb-toggle-info` selector sat here with no block of its own — an
   editing slip predating this pass. It silently made the rule below into a
   descendant selector, so this focus ring only applied inside .sb-toggle-info.
   Removed; the rule now reads as it behaves. .sb-toggle-info keeps its real
   declaration further down. */
.sb-toggle__input:focus-visible + .sb-toggle__slider{
  outline: 2px solid color-mix(in oklch, var(--sb-accent) 55%, transparent);
  outline-offset: 2px;
}

/* Radio group */
.sb-radio input[type="radio"]{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--sb-accent);
  cursor: pointer;
}
.sb-radio:has(input:checked) .sb-radio__label{
  color: var(--sb-ink);
  font-weight: 500;
}

/* Logo preview */

/* Submit row */

@media (max-width: 640px){
  .sb-settings-section{ padding: 20px 18px; }
  .sb-toggle-group{ flex-direction: column; gap: 12px; }
}

/* ============================================================
   LOGIN SCREEN
   The first thing every beta tester sees. No sidebar, no app
   shell: a single centred card on paper.
   ============================================================ */
body.sb-login-screen { background: var(--surface); }
body.sb-login-screen .sb-main {
  display: grid;
  min-height: 100vh;
  margin-left: 0;
  place-items: center;
  padding: 32px 20px 64px;
}

.sb-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px 0;
}
.sb-login-brand .org-mark {
  width: 48px; height: 48px;
  font-size: 1.5rem;
}
.sb-login-brand img {
  max-height: 64px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
}
.sb-login-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sb-login-brand-text strong { color: var(--tenant-dark); font: 600 1.15rem/1.15 Georgia, serif; }
.sb-login-brand-text small { margin-top: 5px; color: var(--muted); font-size: .72rem; }

/* The WP User Frontend login styles lived here. The plugin was removed
   during the plugin audit and [storybank_login] replaced it, so the markup
   they targeted (#wpuf-login-form, .wpuf-message, .wpuf-user-loggedin) is
   no longer emitted anywhere. The login screen is .auth-card now. */

/* ============================================================
   APP SHELL — sidebar, mobile drawer, brand
   Stage 2a. Replaces the .sb-nav top bar.
   ============================================================ */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  display: flex;
  width: 236px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: oklch(97.4% .012 72);
  padding: 24px 16px 18px;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 20px; }
.brand-text { display: flex; min-width: 0; flex-direction: column; line-height: 1.14; }
.brand strong { color: var(--tenant-dark); font: 600 1.05rem/1.15 Georgia, serif; }
.brand small { margin-top: 5px; color: var(--muted); font-size: .7rem; }
.brand-logo { max-height: 42px; max-width: 92px; width: auto; object-fit: contain; }
.org-mark {
  display: grid;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px 12px 12px 4px;
  background: var(--tenant);
  color: var(--paper);
  font: 700 1.35rem Georgia, serif;
}

.sidebar-cta { width: 100%; margin-bottom: 18px; }

.sidebar nav { display: grid; gap: 4px; }
.nav-item {
  display: flex;
  min-height: 44px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: transparent;
  padding: 10px 12px;
  color: var(--muted);
  font-size: .88rem;
  text-align: left;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-item:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--tenant-soft); color: var(--tenant-dark); font-weight: 700; }
.nav-item small { border-radius: 999px; background: var(--paper); padding: 2px 7px; font-size: .72rem; }

.sidebar-spacer { flex: 1; }
.secondary-nav { display: grid; border-top: 1px solid var(--line); padding-top: 10px; }

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding: 16px 8px 0;
}
.profile-text { display: flex; min-width: 0; flex-direction: column; }
.profile-text strong { font-size: .78rem; }
.profile-text small { color: var(--muted); font-size: .7rem; }
.avatar {
  display: grid;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: oklch(38% .12 34);
  font-size: .75rem;
  font-weight: 800;
}
.profile-logout {
  display: grid;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  margin-left: auto;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}
.profile-logout:hover { background: var(--surface); color: var(--ink); }
.profile-logout svg { width: 17px; height: 17px; }

.mobile-header { display: none; }
.menu-button {
  min-height: 44px;
  border-radius: 8px;
  background: var(--tenant-soft);
  padding: 8px 12px;
  color: var(--tenant-dark);
  font-size: .8rem;
  font-weight: 700;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  border: 0;
  background: oklch(23% .022 326 / .42);
}
.scrim[hidden] { display: none; }

/* Content sits beside the rail on desktop. */
body.sb-authed .sb-main { min-height: 100vh; margin-left: 236px; }
body.sb-login-screen .sb-main { margin-left: 0; }

/* Conflict #5 resolved: collapse at 1040px (authored value) rather than the
   prototype's 940. The results list needs a 190px thumbnail plus two columns,
   which gets cramped once the 236px rail eats into a sub-1040 viewport. */
@media (max-width: 1040px) {
  .sidebar {
    transform: translateX(-104%);
    box-shadow: var(--shadow);
    transition: transform .24s var(--ease);
  }
  .sidebar.is-open { transform: translateX(0); }
  body.sb-authed .sb-main { margin-left: 0; }

  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 180;
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    padding: 10px 18px;
  }
  .mobile-header .brand { padding: 0; }
  .mobile-header .org-mark { width: 38px; height: 38px; font-size: 1.2rem; }
  .mobile-header .brand-logo { max-height: 36px; }
  body.sb-drawer-open { overflow: hidden; }
}
@media (min-width: 1041px) {
  .scrim { display: none; }
}

/* ============================================================
   THE READING ROOM — library search + results
   Stage 2b. Replaces the .sb-lib card grid.
   ============================================================ */
.reading-room-shell { min-width: 0; }

/* Org-admin nudge toward the review queue */
.review-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--tenant-soft);
  padding: 14px clamp(20px, 3vw, 44px);
  color: var(--ink);
  font-size: .88rem;
}
.review-nudge:hover { background: oklch(91% .032 190); text-decoration: none; }
.review-nudge-icon {
  display: grid;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--tenant);
  color: var(--paper);
}
.review-nudge-icon svg { width: 17px; height: 17px; }
.review-nudge > span:nth-child(2) { flex: 1; }
.review-nudge-action { color: var(--tenant-dark); font-size: .82rem; font-weight: 700; white-space: nowrap; }

/* Sticky search bar */
.search-header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding: 16px clamp(20px, 3vw, 44px);
}
.search-box {
  display: flex;
  align-items: center;
  min-height: 52px;              /* conflict #7: authored value */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 5px;
  /* carried forward from a superseded earlier rule */
  border: 1px solid var(--line);
}
.search-box:focus-within { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 10px 12px; }
.search-box input::placeholder { color: oklch(49% .014 326); }
.search-box button {
  min-height: 40px;
  border-radius: 8px;
  background: var(--tenant);
  padding: 8px 16px;
  color: var(--paper);
  font-size: .8rem;
  font-weight: 700;
}
.search-box button:hover { background: var(--tenant-dark); }
.result-count { color: var(--muted); font-size: .8rem; white-space: nowrap; }

/* Active filter summary bar */
.filter-summary {
  position: sticky;
  top: 85px;
  z-index: 110;
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: oklch(97.4% .012 72);
  padding: 8px clamp(20px, 3vw, 44px);
}
.filter-button {
  display: none;
  min-height: 40px;
  border-radius: 8px;
  background: var(--tenant-soft);
  padding: 8px 12px;
  color: var(--tenant-dark);
  font-size: .78rem;
  font-weight: 700;
}
.active-filters { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 8px; overflow-x: auto; color: var(--muted); font-size: .76rem; }
.active-filters-hint { color: var(--muted); font-size: .78rem; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  padding: 6px 11px;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
}
.filter-chip:hover { border-color: var(--tenant); text-decoration: none; }
.filter-chip span { color: var(--muted); }

.mine-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  padding: 12px clamp(20px, 3vw, 44px);
  color: var(--muted);
  font-size: .85rem;
}
.mine-banner a { color: var(--tenant-dark); font-weight: 700; }
.mine-banner a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Layout: filter rail + results */
.search-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); }
.filters {
  position: sticky;
  top: 143px;
  overflow-y: auto;
  align-self: start;
  max-height: calc(100vh - 143px);
  border-right: 1px solid var(--line);
  background: oklch(97.4% .012 72);
  padding: 26px 22px 44px;
}
.filter-title { display: flex; align-items: start; justify-content: space-between; }
.filter-title h2 { font: 500 1.35rem Georgia, serif; }
.filter-title > button { display: none; min-height: 44px; background: transparent; color: var(--tenant-dark); font-weight: 700; }
.filters > details { border-top: 1px solid var(--line); padding-block: 12px; }
.filters summary { display: flex; min-height: 36px; align-items: center; justify-content: space-between; font-size: .84rem; font-weight: 700; }
.filters .location-tree details > summary { padding: 0; font-weight: 400; }
.filters .location-tree details > summary::marker { color: var(--muted); }
.location-tree > details > div { margin-left: 14px; padding-left: 10px; border-left: 1px solid var(--line); }

.filter-option {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--ink);
  font-size: .78rem;
}
.filter-option:hover { background: var(--surface); text-decoration: none; }
.filter-box {
  display: grid;
  width: 17px; height: 17px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.filter-option.is-on .filter-box { border-color: var(--tenant); background: var(--tenant); }
.filter-option.is-on .filter-box::after {
  width: 9px; height: 5px;
  border: 2px solid var(--paper);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
  content: "";
}
.filter-option.is-on { font-weight: 600; }

/* Results */
.results { min-width: 0; padding: 30px clamp(22px, 3vw, 48px) 80px; }
.results-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.results-heading h1 { margin-top: 4px; font: 500 clamp(1.7rem, 3vw, 2.5rem) Georgia, serif; letter-spacing: -.03em; }
.sort-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .74rem; }
.sort-label select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 7px 10px;
}

.results-list { border-top: 1px solid var(--line); }
.result-row {
  display: grid;
  grid-template-columns: 190px minmax(220px, 1.2fr) minmax(210px, .75fr);
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 20px 8px;
  color: var(--ink);
  /* carried forward from a superseded earlier rule */
  width: 100%; background: transparent; text-align: left;
}
.result-row:hover { background: var(--surface); text-decoration: none; }
.result-media { position: relative; display: block; }
.result-media img { width: 100%; height: 150px; border-radius: 12px; object-fit: cover; }
.result-media-empty {
  display: grid;
  width: 100%; height: 150px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: .74rem;
}
.result-flag {
  position: absolute;
  inset: 8px auto auto 8px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .66rem;
  font-weight: 700;
}
.result-flag--pending { background: var(--tenant-soft); color: var(--tenant-dark); }
.result-flag--draft   { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }

.result-copy { display: flex; min-width: 0; flex-direction: column; }
.result-copy > strong { font: 600 1.32rem/1.15 Georgia, serif; margin: 4px 0 7px; }
.result-headline { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.result-copy > p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 7px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* Conflict #8: the Library Label Rule assigns coral to topic families, so every
   topic chip is coral. Stable, semantic, and it stops a five-topic story
   turning into a rainbow. */
.topic {
  border-radius: 999px;
  background: var(--coral-soft, oklch(91% .055 34));
  padding: 4px 9px;
  color: oklch(38% .12 34);
  font-size: .66rem;
  font-weight: 700;
}
.topic--more { background: var(--surface); color: var(--muted); }

.result-meta { display: grid; align-content: start; gap: 9px; color: var(--muted); font-size: .74rem; }
.result-meta > span { display: grid; }
.result-meta small { color: oklch(50% .012 326); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.release {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: .66rem;
  font-weight: 700;
  /* carried forward from a superseded earlier rule */
  background: var(--sage); color: oklch(36% .1 145);
}
.release--ok        { background: oklch(94% .04 145); color: oklch(48% .11 145); }
/* Amber at the same lightness as green or red reads brighter, and someone
   compensated by lifting this one to 54% — which cost it the contrast. At 48%
   it clears AA at 5.53:1 and sits level with its siblings (ok 48%, blocked
   47%), which is also why the three badges no longer look uneven. */
.release--attention { background: oklch(94% .06 76);  color: oklch(48% .14 76); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 28px 0 0; color: var(--muted); font-size: .8rem; }
.pagination a { color: var(--tenant-dark); font-weight: 700; }
.pagination a:hover { text-decoration: underline; text-underline-offset: 3px; }

.empty-state { display: grid; max-width: 520px; gap: 12px; margin: 56px auto; border-block: 1px solid var(--line); padding: 40px 0; }
.empty-state > span {
  display: grid;
  width: 50px; height: 50px;
  place-items: center;
  border-radius: 50%;
  background: var(--lavender-soft, oklch(93% .04 300));
  color: oklch(40% .08 300);
  font: 500 1.3rem Georgia, serif;
}
.empty-state h2 { font: 500 1.7rem Georgia, serif; }
.empty-state p { color: var(--muted); }
.empty-state .button { width: fit-content; }

@media (max-width: 1040px) {
  .search-layout { display: block; }
  .filter-button { display: inline-flex; }
  .filters {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 310;
    width: min(360px, 90vw);
    max-height: none;
    /* The base rule sets align-self: start so the desktop sticky column does
       not stretch down its grid track. It survives into this drawer, where it
       stops the box growing to meet `bottom: 0` — so instead of being viewport
       height with its own scrollbar, the drawer sized to its content (1756px
       against an 844px screen) and everything past the fold was unreachable.
       Nothing scrolled because, as far as the box was concerned, it all fit. */
    align-self: stretch;
    transform: translateX(-105%);
    box-shadow: var(--shadow);
    transition: transform .24s var(--ease);
  }
  .filters.is-open { transform: translateX(0); }
  .filter-title > button { display: block; }
}
@media (max-width: 760px) {
  .search-header { grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; }
  .filter-summary { top: 118px; padding-inline: 16px; }
  .results { padding: 24px 16px 64px; }
  .results-heading { align-items: start; flex-direction: column; gap: 12px; }
  .result-row { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .result-media img, .result-media-empty { height: 120px; }
  .result-copy > strong { font-size: 1.06rem; }
  .result-copy > p, .result-copy .topics { display: none; }
  .result-meta { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
}

/* Conflict #8 enforcement: the ported prototype cycled topic chips by position
   (.topic:nth-child(2)/(3)), which outranks the plain .topic rule. Topics are
   coral per the Library Label Rule, so neutralise the cycling explicitly. */
.topic:nth-child(n) { background: var(--coral-soft, oklch(91% .055 34)); color: oklch(38% .12 34); }
.topic--more:nth-child(n) { background: var(--surface); color: var(--muted); }

/* Third consent state. "No release" is prohibitive, not cautionary, so it gets
   its own token rather than sharing amber with "Unknown". Pastel, per the
   Consent Color Rule, and always paired with a glyph and plain language. */
:root {
  --consent-blocked:      oklch(47% 0.15 25);
  --consent-blocked-soft: oklch(94% 0.045 25);
}
.release--blocked { background: var(--consent-blocked-soft); color: var(--consent-blocked); }

/* ============================================================
   STORY VIEW
   Stage 2c. A dedicated page, not a quick-view panel.
   ============================================================ */
.story { width: min(100%, 1560px); margin: auto; padding: 30px clamp(20px, 4vw, 64px) 80px; }

.story-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.back-button { min-height: 44px; display: inline-flex; align-items: center; color: var(--tenant-dark); font-size: .82rem; font-weight: 700; }
.back-button:hover { text-decoration: underline; text-underline-offset: 4px; }

.story-notice, .story-status {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 20px; border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; font-size: .86rem;
}
.story-notice strong, .story-status strong { font-weight: 700; }
.story-notice--ok        { background: oklch(94% .04 145); border-color: oklch(86% .06 145); color: oklch(38% .1 145); }
.story-notice--attention { background: oklch(94% .06 76);  border-color: oklch(86% .08 76);  color: oklch(44% .12 76); }
.story-status            { background: var(--tenant-soft); border-color: oklch(88% .035 190); color: var(--tenant-dark); }
.story-status--draft     { background: var(--surface); border-color: var(--line); color: var(--muted); }
.story-status span, .story-notice span { color: inherit; opacity: .85; }

.story-hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: start; gap: clamp(32px, 5vw, 72px); }
.story-image { width: 100%; aspect-ratio: 1.22; border-radius: 16px; object-fit: cover; }
.story-image--empty { display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .84rem; }
.media-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.media-strip img { width: 100%; aspect-ratio: 1.5; border-radius: 8px; object-fit: cover; }
.media-strip img.is-current { outline: 2px solid var(--tenant); outline-offset: 2px; }

.story-copy { padding-top: 12px; }
.story-copy h1 { max-width: 14ch; margin: 8px 0 0; font: 500 clamp(2.4rem, 4.6vw, 4.6rem)/.98 Georgia, serif; letter-spacing: -.045em; }
.story-headline { margin-top: 14px; color: var(--tenant-dark); font: 500 clamp(1.15rem, 1.7vw, 1.5rem)/1.3 Georgia, serif; }
.story-excerpt { margin-top: 14px; color: var(--muted); line-height: 1.65; }
.story-copy .topics { margin-top: 16px; }
.story-copy dl { margin: 22px 0 0; border-block: 1px solid var(--line); }
.story-copy dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; border-bottom: 1px solid var(--line); padding: 12px 0; }
.story-copy dl div:last-child { border-bottom: 0; }
.story-copy dt { color: var(--muted); font-size: .76rem; }
.story-copy dd { margin: 0; color: var(--tenant-dark); font-size: .82rem; font-weight: 700; }
.story-copy blockquote { margin: 24px 0 0; border-top: 1px solid var(--line); padding-top: 22px; font: 500 clamp(1.25rem, 2vw, 1.75rem)/1.3 Georgia, serif; }
.story-copy blockquote cite { display: block; margin-top: 10px; color: var(--muted); font: 400 .75rem Geist, system-ui, sans-serif; }

/* Rights, collection and contacts.
   The three columns are rarely the same height — Contacts is routinely three
   times Collection — and the vertical rules that used to separate them ran on
   through the empty space below the shorter two, drawing attention to a gap
   rather than to a boundary. The eyebrow labels and the column gap do that
   job without a line that can point at nothing. */
.stewardship {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px clamp(32px, 4vw, 64px);
  margin-top: 48px;
  border-block: 1px solid var(--line);
  padding: 26px 0;
}
.stewardship > div { padding: 0; }
/* The prototype-port block near the top of this file sets this too, and it is
   not overridden by anything above — it has to be turned off by name. */
.stewardship > div + div { border-left: 0; }
.stewardship h2 { margin: 4px 0 6px; font-size: 1rem; }
.stewardship h2.stack { margin-top: 16px; }
.stewardship p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.stewardship a { display: inline-flex; min-height: 44px; align-items: center; color: var(--tenant-dark); font-size: .78rem; font-weight: 700; text-decoration: none; }
.stewardship a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The tab row is navigation and belongs on the page's own left edge. Only the
   prose inside a panel wants a reading measure, and .prose supplies it — this
   used to cap the whole region at 980px and centre it, which pulled the tabs
   in 226px from everything above them and then centred .prose again inside
   that, giving the narrative a third left edge of its own. */
.reading-room { max-width: none; margin: 42px 0 0; }
/* Room for the mobile header when a "Used in" link scrolls the tab strip
   into view, so the tabs do not land underneath it. */
.tabs { scroll-margin-top: 84px; }
/* The tabs wrap rather than scroll.
   They used to sit in an overflow-x: auto strip, which meant two of the six —
   Vetting and Usage — were off-screen on a phone. The interaction was awkward
   (overflow-x forces the other axis to `auto`, and the active underline at
   `bottom: -1px` gave exactly one pixel of vertical overflow, enough to drag
   the strip up and down), but the real cost was discoverability: someone who
   never thinks to swipe never learns those tabs exist.

   Wrapping needs no breakpoint. At any width where the six fit on one line
   this changes nothing; below that they fold onto a second row and stay
   visible. It also retires the scroll machinery — overflow, overscroll and
   the compensating padding all existed to manage a scroll that no longer
   happens. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--line);
}
.tabs button { position: relative; min-height: 50px; background: transparent; padding: 10px 16px; color: var(--muted); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--tenant-dark); }
.tabs button.active::after { position: absolute; inset: auto 12px -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tenant); content: ""; }
/* Capped, but left-aligned rather than centred — so a panel keeps a sensible
   measure without inventing a second left edge. Full width was worse for the
   panels that are not prose: the video embed filled 1432px and the usage rows
   stranded their right-hand column a page away from its label. */
.tab-panel { max-width: 980px; padding: 32px 0; }
.tab-panel[hidden] { display: none; }

.prose { max-width: 68ch; margin: 0; font: 1.08rem/1.8 Georgia, serif; }
.prose p + p { margin-top: 1.3em; }

.quote-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.quote-card { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 20px 22px; }
.quote-card p { font: 500 1.12rem/1.45 Georgia, serif; }
.quote-card cite { display: block; margin-top: 10px; color: var(--muted); font: 400 .75rem Geist, system-ui, sans-serif; }
.consent { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; border-radius: 999px; padding: 4px 10px; font-size: .66rem; font-weight: 700; }
.consent--ok       { background: oklch(94% .04 145); color: oklch(48% .11 145); }
/* Same pair, same fix — the per-quote badge had inherited it. */
.consent--internal { background: oklch(94% .06 76);  color: oklch(48% .14 76); }

.story-embed { position: relative; padding-bottom: 56.25%; }
.story-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; }
.story-video { width: 100%; border-radius: 16px; }
.media-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.media-library figure { margin: 0; }
.media-library img { width: 100%; aspect-ratio: 1.2; border-radius: 10px; object-fit: cover; }
.media-library figcaption { padding: 8px 2px; color: var(--muted); font-size: .72rem; }

.file-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.file-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line); padding: 14px 4px; font-size: .88rem; }
.file-type { border-radius: 999px; background: var(--surface); padding: 3px 9px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.file-list a { color: var(--tenant-dark); font-weight: 600; }
.file-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.file-list small { width: 100%; color: var(--muted); font-size: .74rem; }

.vetting-log { border-top: 1px solid var(--line); }
.vetting-row { display: grid; grid-template-columns: 120px 1fr; gap: 18px; border-bottom: 1px solid var(--line); padding: 16px 4px; }
.vetting-row time { color: var(--tenant-dark); font-size: .75rem; font-weight: 700; }
.vetting-person { margin-left: 8px; color: var(--muted); font-size: .75rem; }
.vetting-row p { margin-top: 6px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.outcome { border-radius: 999px; padding: 3px 9px; font-size: .66rem; font-weight: 700; }
.outcome--ok      { background: oklch(94% .04 145); color: oklch(48% .11 145); }
.outcome--blocked { background: oklch(94% .045 25); color: oklch(47% .15 25); }
.outcome--neutral { background: var(--surface); color: var(--muted); }

@media (max-width: 940px) {
  .story-hero { grid-template-columns: 1fr; }
  .stewardship > div + div { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 760px) {
  .story { padding: 22px 16px 64px; }
  .story-copy h1 { font-size: 2.4rem; max-width: none; }
  .story-copy dl div { grid-template-columns: 1fr; gap: 4px; }
  .quote-list { grid-template-columns: 1fr; }
}

/* ============================================================
   SETTINGS
   Field primitives were removed with the library bridge; restored
   here on the current tokens. Plus the required-fields list.
   ============================================================ */
.sb-settings-wrap { width: min(92vw, 820px); margin: 0 auto; padding: 30px 0 72px; }
.sb-settings-form { display: flex; flex-direction: column; gap: 22px; }

.sb-settings-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  padding: 24px 26px;
}
.sb-settings-section__header { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sb-settings-section__title { font: 500 1.35rem/1.2 Georgia, serif; letter-spacing: -.02em; margin: 0 0 6px; color: var(--sb-ink); }
.sb-settings-section__desc { max-width: 64ch; color: var(--muted); font-size: .84rem; line-height: 1.55; margin: 0; }
.sb-settings-fields { display: grid; gap: 22px; flex-direction: column; }

.sb-field { display: grid; gap: 7px; }
.sb-field__label { font-size: .8rem; font-weight: 700; color: var(--ink); }
.sb-field__required { color: oklch(47% .15 25); margin-left: 3px; }
.sb-field__optional { color: var(--muted); font-weight: 400; margin-left: 4px; }
.sb-field__input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: oklch(99% .004 72);
  padding: 11px 13px;
  font-size: .9rem;
  color: var(--ink);
}
.sb-field__input:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.sb-field__help { max-width: 64ch; color: var(--muted); font-size: .74rem; line-height: 1.5; margin: 6px 0 0; }
.sb-field input[type="file"] { max-width: 100%; font-size: .82rem; }
.sb-logo-preview img {
  max-height: 76px; max-width: 220px; width: auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); padding: 5px;
  /* carried forward from a superseded earlier rule */
  height: auto;
}
.sb-logo-remove { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; cursor: pointer; }
.sb-logo-remove input { width: 16px; height: 16px; accent-color: var(--tenant); }

/* Toggle */
.sb-toggle-group { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sb-toggle-info { flex: 1; min-width: 0; }
.sb-toggle { position: relative; flex-shrink: 0; padding-top: 2px; }
.sb-toggle__input { position: absolute; width: 44px; height: 26px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.sb-toggle__slider {
  display: block; width: 44px; height: 26px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-deep, oklch(95.5% .012 72));
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.sb-toggle__slider::after {
  content: ""; position: absolute; top: 5px; left: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px oklch(23% .022 326 / .25);
  transition: transform .18s var(--ease);
}
.sb-toggle__input:checked + .sb-toggle__slider { background: var(--tenant); border-color: var(--tenant-dark); }
.sb-toggle__input:checked + .sb-toggle__slider::after { transform: translateX(18px); }

/* Radios */
.sb-radio-group { display: grid; gap: 2px; flex-direction: column; }
.sb-radio {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.sb-radio:hover { background: var(--surface); }
.sb-radio input { width: 16px; height: 16px; accent-color: var(--tenant); flex-shrink: 0; }
.sb-radio:has(input:checked) { background: var(--tenant-soft); border-color: oklch(84% .03 190); }
.sb-radio__label { font-size: .88rem; color: var(--ink); line-height: 1.4; }

/* Required-fields list */
.sb-required-group + .sb-required-group { margin-top: 22px; }
.sb-required-group__title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sb-required-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 8px; }
.sb-required-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper);
  padding: 10px 12px;
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.sb-required-item:hover { background: var(--surface); }
.sb-required-item.is-on { border-color: oklch(84% .03 190); background: var(--tenant-soft); }
.sb-required-item input { width: 17px; height: 17px; accent-color: var(--tenant); flex-shrink: 0; }
/* One line, not two: the field type used to sit under the label and was
   removed, so the row no longer needs to stack. */
.sb-required-item span { display: block; min-width: 0; }
.sb-required-item strong { font-size: .82rem; line-height: 1.35; color: var(--ink); }

.sb-settings-actions { display: flex; justify-content: flex-end; gap: 12px; }
.sb-btn--primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  border-radius: 10px;
  background: var(--tenant);
  padding: 12px 22px;
  color: var(--paper);
  font-size: .86rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px oklch(45% .088 190 / .18);
  transition: background .15s var(--ease);
  /* carried forward from a superseded earlier rule */
  border: 1px solid var(--sb-ink);
}
.sb-btn--primary:hover { background: var(--tenant-dark); transform: translateY(-1px); }

.sb-notice { display: flex; align-items: center; gap: 10px; border: 1px solid; border-radius: 12px; padding: 12px 18px; margin-bottom: 20px; font-size: .86rem; }
.sb-notice svg { width: 18px; height: 18px; flex-shrink: 0; }
.sb-notice--success { background: oklch(94% .04 145); border-color: oklch(84% .06 145); color: oklch(44% .11 145); }

@media (max-width: 640px) {
  .sb-settings-section { padding: 20px 18px; }
  .sb-toggle-group { flex-direction: column; gap: 12px; }
  .sb-required-list { grid-template-columns: 1fr; }
}

/* ============================================================
   STORY ENTRY WIZARD
   Five server-rendered steps. Two columns on desktop: the form,
   and a readiness rail that stays honest about what is missing.
   ============================================================ */
.entry-page { width: min(100%, 1180px); margin: auto; padding: 32px clamp(20px, 4vw, 56px) 140px; }

.entry-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.entry-exit { display: inline-block; margin-bottom: 8px; color: var(--muted); font-size: .8rem; font-weight: 650; }
.entry-exit:hover { color: var(--tenant-dark); text-decoration: underline; text-underline-offset: 4px; }
.entry-title-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entry-title-line h1 { font: 500 clamp(1.75rem, 3.2vw, 2.6rem)/1.05 Georgia, serif; letter-spacing: -.035em; }
.entry-status { border-radius: 999px; background: var(--surface); padding: 5px 12px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.entry-status.new { background: var(--yellow); color: oklch(38% .1 88); }
.autosave-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.autosave-icon.saved-check { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--sage); color: oklch(35% .1 142); font-size: .65rem; }

/* Progress: buttons, because each one is a save-then-jump. */
.entry-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 32px; }
.entry-progress button {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 11px 13px;
  color: var(--muted); font-size: .8rem; text-align: left;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.entry-progress button span {
  display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center;
  border-radius: 50%; background: var(--surface); font-size: .7rem; font-weight: 800;
}
.entry-progress button strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-progress button:disabled { cursor: default; opacity: .5; }
.entry-progress button:not(:disabled):hover { border-color: var(--tenant); background: var(--surface); }
.entry-progress button.visited { color: var(--ink); }
.entry-progress button.visited span { background: var(--sage); color: oklch(35% .1 142); }
.entry-progress button.active { border-color: var(--tenant); background: var(--tenant-soft); color: var(--tenant-dark); }
.entry-progress button.active strong { font-weight: 800; }
.entry-progress button.active span { background: var(--tenant); color: var(--paper); }

.entry-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 34px; }

.entry-form { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); padding: clamp(22px, 3vw, 36px); }
.entry-step-heading { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.entry-step-heading h2 { margin-top: 6px; font: 500 clamp(1.4rem, 2.4vw, 1.95rem)/1.1 Georgia, serif; letter-spacing: -.025em; }
.entry-step-heading > p:last-child { margin-top: 9px; max-width: 58ch; color: var(--muted); font-size: .9rem; line-height: 1.55; }

.entry-fields { display: grid; gap: 26px; }
.entry-empty { color: var(--muted); font-size: .84rem; }

/* One field */
.entry-field { display: grid; gap: 7px; }
.entry-field > span:first-child,
.entry-choice-group legend,
.taxonomy-picker legend,
.media-primary > span:first-child { font-size: .84rem; font-weight: 750; }
.entry-field b, .entry-choice-group b, .taxonomy-picker b, .media-primary b,
.material-heading b {
  margin-left: 5px; border-radius: 999px; background: var(--coral);
  padding: 2px 8px; color: oklch(38% .12 34); font-size: .62rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.entry-field i, .entry-choice-group i, .taxonomy-picker i, .media-primary i,
.material-heading i {
  margin-left: 5px; color: var(--muted); font-size: .7rem; font-style: normal; font-weight: 500;
}
.entry-field input[type="text"], .entry-field input[type="email"],
.entry-field input[type="url"], .entry-field input[type="date"],
.entry-field input[type="number"], .entry-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 12px 14px; font-size: .92rem;
}
.entry-field textarea { line-height: 1.65; }
.entry-field input:focus, .entry-field textarea:focus {
  border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0;
}
.entry-field small { max-width: 62ch; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.narrative-field textarea { min-height: 300px; font: 400 1rem/1.7 Georgia, serif; }

/* Choice grids: release status and the like */
.entry-choice-group { display: grid; gap: 11px; }
.choice-grid { display: grid; gap: 10px; }
.choice-grid.two { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.choice-grid label {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 14px 16px; font-size: .88rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.choice-grid label:hover { border-color: var(--tenant); background: var(--surface); }
.choice-grid label.selected { border-color: var(--tenant); background: var(--tenant-soft); }
.choice-grid input[type="radio"] { flex: 0 0 auto; accent-color: var(--tenant); width: 18px; height: 18px; }

/* Taxonomy chips */
.taxonomy-picker { display: grid; gap: 11px; }
.taxonomy-picker > p { color: var(--muted); font-size: .76rem; }
.taxonomy-results { display: flex; flex-wrap: wrap; gap: 8px; }
.taxonomy-option {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); padding: 8px 14px; font-size: .82rem;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.taxonomy-option:hover { border-color: var(--tenant); }
.taxonomy-option.is-on { border-color: var(--tenant); background: var(--tenant-soft); color: var(--tenant-dark); font-weight: 650; }
.taxonomy-option input { accent-color: var(--tenant); }

/* Media */
.media-primary { display: grid; gap: 12px; }
.drop-zone {
  position: relative;
  display: grid; justify-items: center; gap: 5px; cursor: pointer;
  border: 2px dashed var(--line); border-radius: 16px;
  background: var(--surface); padding: 30px 20px; text-align: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.drop-zone:hover { border-color: var(--tenant); background: var(--tenant-soft); }
.drop-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--paper); font-size: 1.3rem; color: var(--tenant-dark); }
.drop-zone strong { font-size: .88rem; }
.drop-zone small { color: var(--muted); font-size: .74rem; }
.drop-zone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* min-width: 0 is load-bearing. As a grid item this defaults to `min-width:
   auto`, meaning it refuses to shrink below its own min-content — and its
   min-content is set by the filename inside, which is `white-space: nowrap`.
   A long upload name therefore widened the card, the card widened the grid
   track, and the whole wizard step overflowed: 553px of content in a 375px
   phone on step 3, and 544px on step 2 from the signed release card. The
   ellipsis could never engage because nothing ever imposed a width. */
.uploaded-photo { display: flex; min-width: 0; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 16px; }
.uploaded-photo img { width: 62px; height: 62px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.uploaded-photo .asset-kind { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--lavender); font-size: .7rem; font-weight: 750; }
.uploaded-photo > span:not(.asset-kind) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.uploaded-photo strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-photo small { color: var(--muted); font-size: .72rem; }
.sb-remove { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .74rem; cursor: pointer; white-space: nowrap; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.gallery-item { display: grid; gap: 5px; align-content: start; }
.gallery-item img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.gallery-item label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--muted); font-size: .72rem; }
.gallery-item .tray-action { padding: 3px 0; font-size: .71rem; }
.gallery-item .tray-action:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* Quotes */
.material-section { display: grid; gap: 14px; }
.material-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.material-heading strong { display: block; font-size: .84rem; font-weight: 750; }
.material-heading small { display: block; margin-top: 4px; max-width: 52ch; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.button.compact { min-height: 38px; padding: 8px 13px; font-size: .78rem; white-space: nowrap; }
.quote-collection { display: grid; gap: 14px; }
.quote-entry { display: grid; gap: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 18px; }
.quote-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.quote-entry-heading > div { display: flex; align-items: center; gap: 14px; }
.quote-entry-heading strong { font-size: .78rem; }
.featured-quote-choice { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--muted); font-size: .74rem; }
.featured-quote-choice input { accent-color: var(--tenant); }
.sb-remove-quote { color: var(--muted); font-size: .74rem; }
.sb-remove-quote:hover { color: oklch(47% .15 25); text-decoration: underline; text-underline-offset: 3px; }
.quote-entry textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 12px 14px; font: 400 1rem/1.55 Georgia, serif; }
.quote-entry textarea:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }

/* Review */
.entry-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.review-story, .review-readiness { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px 24px; }
.review-story h3, .review-readiness h3 { margin-top: 7px; font: 500 1.4rem/1.15 Georgia, serif; letter-spacing: -.02em; }
.review-headline { margin-top: 8px; color: var(--tenant-dark); font: 500 1rem/1.4 Georgia, serif; }
.review-story > p:last-of-type { margin-top: 12px; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.review-readiness dl { display: grid; gap: 9px; margin-top: 16px; }
.review-readiness dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.review-readiness dt { color: var(--muted); font-size: .78rem; }
.review-readiness dd { font-size: .82rem; font-weight: 700; text-align: right; }
.approval-note { display: flex; gap: 11px; margin-top: 16px; border-radius: 12px; background: var(--yellow); padding: 13px 15px; }
.approval-note span { flex: 0 0 auto; }
.approval-note strong { display: block; font-size: .8rem; }
.approval-note p { font-size: .78rem; line-height: 1.55; }

/* Readiness rail */
.ready-checklist { position: sticky; top: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 22px 20px; }
.ready-checklist h2 { margin-top: 6px; margin-bottom: 16px; font: 500 1.15rem/1.2 Georgia, serif; }
.requirement-list { display: grid; gap: 4px; }
.requirement-list button {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  border-radius: 10px; padding: 9px 10px; text-align: left;
}
.requirement-list button:hover { background: var(--paper); }
.requirement-list button > span:first-child {
  display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center;
  margin-top: 1px; border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--paper); font-size: .62rem;
}
.requirement-list button > span:first-child.complete { border-color: transparent; background: var(--sage); color: oklch(35% .1 142); }
.requirement-list button > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.requirement-list strong { font-size: .81rem; font-weight: 650; }
.requirement-list small { color: var(--muted); font-size: .71rem; }
.draft-note { display: flex; gap: 10px; margin-top: 16px; border-radius: 12px; background: var(--paper); padding: 13px 14px; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.draft-note span { flex: 0 0 auto; }
.missing-summary { display: inline-block; margin-top: 14px; border-radius: 999px; background: var(--yellow); padding: 6px 12px; color: oklch(38% .1 88); font-size: .72rem; font-weight: 750; }

/* Footer: sticky, because "save and finish later" must never be hunted for. */
.entry-footer {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 28px; border: 1px solid var(--line); border-radius: 16px;
  background: oklch(98.5% .008 72 / .93); padding: 14px 18px;
  backdrop-filter: blur(10px); box-shadow: var(--shadow);
}
.entry-footer > div { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.entry-footer .button:disabled { cursor: not-allowed; box-shadow: none; opacity: .45; }

@media (max-width: 1080px) {
  .entry-workspace { grid-template-columns: minmax(0, 1fr); }
  /* `order: -1` used to lift the rail above the form here, so on a phone you
     scrolled past "Person and story: Still needed" before reaching the field
     to type a name into — a list of what is missing from a story you have not
     started. It also split the orders: the eye read rail-then-form while Tab
     followed the DOM and went form-then-rail.

     The rail keeps its job below the form. What is still needed is already
     carried above the fold by the stepper and the "Draft · Needs N details"
     chip, so nothing about readiness is lost by putting the work first. */
  .ready-checklist { position: static; }
}
@media (max-width: 860px) {
  .entry-page { padding: 22px 18px 120px; }
  .entry-progress { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .entry-progress button { flex-direction: column; align-items: center; gap: 5px; padding: 9px 5px; }
  .entry-progress button strong { max-width: 100%; font-size: .66rem; }
  .entry-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .entry-footer { flex-direction: column; align-items: stretch; }
  .entry-footer > div { margin-left: 0; }
  .entry-footer .button { flex: 1; }
}

/* Media removal: immediate on screen, undoable, committed on save.
   The tile is swapped in place so the grid never reflows. */
.sb-hidden { display: none !important; }   /* beats a component's own display */
.sb-remove-media { color: var(--muted); font-size: .74rem; font-weight: 650; text-align: left; white-space: nowrap; }
.sb-remove-media:hover { color: oklch(47% .15 25); text-decoration: underline; text-underline-offset: 3px; }

.sb-removed { display: none; }
.is-removed .sb-removed {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--surface);
  padding: 12px 14px; color: var(--muted); font-size: .76rem; text-align: center;
}
.gallery-item.is-removed .sb-removed { aspect-ratio: 1; flex-direction: column; gap: 4px; font-size: .72rem; }
.sb-undo-media { color: var(--tenant-dark); font-weight: 750; }
.sb-undo-media:hover { text-decoration: underline; text-underline-offset: 3px; }
.is-removed > img, .is-removed > .sb-remove-media,
.is-removed > .asset-kind, .is-removed > span:not(.sb-removed) { display: none; }
.uploaded-photo.is-removed { display: block; border: 0; background: none; padding: 0; }

/* Saving state: a step post can be slow when it carries uploads. */
.button.is-working { position: relative; color: transparent; }
.button.is-working::after {
  content: ""; position: absolute; width: 17px; height: 17px;
  border: 2px solid oklch(98.5% .008 72 / .45); border-top-color: var(--paper);
  border-radius: 50%; animation: sb-spin .7s linear infinite;
}
.button.secondary.is-working::after { border-color: oklch(45% .018 326 / .3); border-top-color: var(--ink); }
.entry-saving {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: oklch(98.5% .008 72 / .72); color: var(--muted);
  font-size: .88rem; opacity: 0; transition: opacity .25s var(--ease);
  backdrop-filter: blur(2px);
}
.entry-saving.is-on { opacity: 1; }
.entry-spinner {
  width: 22px; height: 22px; border: 2.5px solid var(--line);
  border-top-color: var(--tenant); border-radius: 50%; animation: sb-spin .7s linear infinite;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .entry-spinner, .button.is-working::after { animation-duration: 2s; }
}

/* Section break: whose details are these? */
.entry-section-break { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 22px; }
.entry-section-break h3 { font: 500 1.12rem/1.2 Georgia, serif; }
.entry-section-break p { margin-top: 5px; max-width: 56ch; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.entry-fields > .entry-section-break:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* Grouped places, inline term creation, and the "did you mean" question. */
.taxonomy-groups { display: grid; gap: 16px; }
.taxonomy-group h4 { margin-bottom: 8px; color: var(--muted); font: 700 .7rem/1 Geist, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.taxonomy-add { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 16px; }
.taxonomy-add label { display: grid; flex: 1 1 200px; gap: 6px; }
.taxonomy-add span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.taxonomy-add input, .taxonomy-add select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 11px 13px; font-size: .88rem;
}
.taxonomy-add input:focus, .taxonomy-add select:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.taxonomy-add-note { display: block; margin-top: 8px; color: var(--muted); font-size: .73rem; }

.term-suggestion { margin-top: 16px; border: 1px solid oklch(80% .08 88); border-radius: 14px; background: var(--yellow); padding: 16px 18px; }
.term-suggestion-lede { font-size: .88rem; line-height: 1.5; }
.term-suggestion-why { margin-top: 5px; color: oklch(40% .06 88); font-size: .78rem; }
.term-suggestion-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.term-suggestion-actions .button { min-height: 38px; }

/* Upload queue: determinate, because for an upload the percentage is real. */
.upload-queue { display: grid; gap: 8px; margin-top: 10px; }
.upload-row { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px 13px; }
.upload-name { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.upload-bar { display: block; overflow: hidden; height: 5px; border-radius: 999px; background: var(--line); }
.upload-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--tenant); transition: width .2s linear; }
.upload-row.is-done .upload-bar i { background: oklch(62% .12 142); }
.upload-row.is-failed { border-color: oklch(70% .12 25); background: oklch(96% .03 25); }
.upload-row.is-failed .upload-bar { display: none; }
.upload-row.is-failed .upload-name { color: oklch(45% .15 25); white-space: normal; }

/* The story's own tray. Not a library: these files belong to this story. */
.asset-tray { margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 18px; }
.asset-tray summary { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; cursor: pointer; padding: 14px 0; list-style: none; }
.asset-tray summary::-webkit-details-marker { display: none; }
.asset-tray summary strong { font-size: .84rem; font-weight: 750; }
.asset-tray summary strong::before { content: "\25B8"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .2s var(--ease); }
.asset-tray[open] summary strong::before { transform: rotate(90deg); }
.asset-tray summary span { color: var(--muted); font-size: .76rem; }
.asset-tray-lede { max-width: 60ch; padding-bottom: 4px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.asset-tray > *:last-child { padding-bottom: 18px; }
.tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 14px; }
.tray-item { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tray-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tray-item .asset-kind { display: grid; aspect-ratio: 4 / 3; place-items: center; background: var(--lavender); font-size: .74rem; font-weight: 750; }
.tray-item figcaption { display: grid; gap: 2px; padding: 8px; }
.tray-action { border-radius: 8px; padding: 6px 8px; color: var(--tenant-dark); font-size: .72rem; font-weight: 650; text-align: left; }
.tray-action:hover { background: var(--tenant-soft); }

.tray-governance { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 16px 18px; }
.tray-governance h4 { font-size: .84rem; font-weight: 750; }
.tray-governance p { margin-top: 5px; max-width: 60ch; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.tray-governance ul { margin-top: 10px; display: grid; gap: 5px; }
.tray-governance a { color: var(--tenant-dark); font-size: .8rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Deleting is deliberate: never the first press, and never the quiet option. */
.tray-action.is-danger { color: oklch(47% .15 25); }
.tray-action.is-danger:hover { background: oklch(95% .04 25); }
.tray-item.is-confirming { border-color: oklch(70% .12 25); background: oklch(96% .03 25); }
.tray-confirm-lede { padding: 2px 0 4px; color: oklch(40% .12 25); font-size: .71rem; line-height: 1.4; }
.tray-confirm { display: block; margin-top: 6px; border-radius: 10px; background: oklch(96% .03 25); padding: 10px 12px; color: oklch(40% .12 25); font-size: .74rem; line-height: 1.5; }
.tray-confirm strong { display: block; }
.tray-confirm .tray-action { display: inline-block; margin-top: 6px; margin-right: 10px; }
.tray-governance li { display: grid; gap: 4px; }

/* Live term feedback: the answer arrives where you typed the question. */
.term-live { margin-top: 12px; font-size: .8rem; }
.term-live.is-done { color: oklch(38% .09 142); }
.term-live.is-failed { color: oklch(45% .15 25); }
.term-live.is-asking { border: 1px solid oklch(80% .08 88); border-radius: 14px; background: var(--yellow); padding: 14px 16px; color: var(--ink); }
.term-live-why { margin-top: 4px; color: oklch(40% .06 88); font-size: .76rem; }
.term-live-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Places: a search box and chips, instead of a wall of checkboxes. */
.place-search { position: relative; }
.place-search label { display: grid; gap: 6px; }
.place-search span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.place-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 11px 13px; font-size: .88rem;
}
.place-search input:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.place-results {
  position: absolute; z-index: 30; inset: auto 0 auto 0; top: 100%;
  max-height: 260px; overflow-y: auto; margin-top: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  box-shadow: var(--shadow);
}
.place-result { display: block; width: 100%; padding: 10px 14px; text-align: left; }
.place-result:hover { background: var(--tenant-soft); }
.place-result strong { display: block; font-size: .86rem; font-weight: 600; }
.place-result small { color: var(--muted); font-size: .74rem; }
.place-none { padding: 12px 14px; color: var(--muted); font-size: .8rem; }

.place-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.place-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--tenant); border-radius: 999px;
  background: var(--tenant-soft); padding: 7px 8px 7px 14px;
  color: var(--tenant-dark); font-size: .82rem; font-weight: 650;
}
.place-chip button { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--tenant-dark); font-size: .9rem; line-height: 1; }
.place-chip button:hover { background: var(--paper); }
.place-empty { color: var(--muted); font-size: .78rem; }

/* The create affordance lives inside the results, so finding and adding
   read as one action rather than two controls doing one job. */
.place-add { border-top: 1px solid var(--line); padding: 14px; }
.place-add > p { color: var(--muted); font-size: .78rem; }
.place-add > p strong { color: var(--ink); }
.place-add-state { display: grid; gap: 5px; margin: 10px 0; }
.place-add-state span { color: var(--muted); font-size: .74rem; font-weight: 650; }
.place-add-state select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); padding: 9px 11px; font-size: .84rem;
}
.place-add .term-live { margin-top: 10px; }

/* Recording a vetting attempt, where the log of attempts already lives. */
.vetting-form { margin-bottom: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 20px 22px; }
.vetting-form h3 { font: 500 1.1rem/1.2 Georgia, serif; }
.vetting-form-lede { margin-top: 6px; max-width: 62ch; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.vetting-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 16px; }
.vetting-form label { display: grid; gap: 6px; }
.vetting-form span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.vetting-form input, .vetting-form select, .vetting-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 10px 13px; font-size: .88rem;
}
.vetting-form textarea { line-height: 1.6; }
.vetting-form input:focus, .vetting-form select:focus, .vetting-form textarea:focus {
  border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0;
}
.vetting-form-notes { margin-top: 14px; }
.vetting-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.vetting-form-actions small { color: var(--muted); font-size: .75rem; }
.vetting-saved { margin-bottom: 16px; border-radius: 12px; background: var(--sage); padding: 12px 15px; color: oklch(32% .09 142); font-size: .82rem; font-weight: 650; }
.vetting-saved.is-failed { background: oklch(95% .04 25); color: oklch(42% .14 25); }
.vetting-empty { color: var(--muted); font-size: .84rem; }

/* ============================================================
   ARCHIVE
   Two stages, and the destructive one never looks like the
   ordinary one.
   ============================================================ */
.button.danger { background: oklch(52% .17 25); color: var(--paper); box-shadow: 0 6px 18px oklch(52% .17 25 / .2); }
.button.danger:hover { background: oklch(45% .17 25); }
.button.danger-link { border: 1px solid oklch(80% .09 25); background: var(--paper); color: oklch(47% .15 25); }
.button.danger-link:hover { background: oklch(96% .03 25); }

.story-danger { width: min(100%, 1560px); margin: 40px auto 0; border-top: 1px solid var(--line); padding: 24px clamp(24px, 4vw, 64px) 0; }
/* Findable without being in the way: last on the page, labelled, and
   never sitting next to an action anyone performs routinely. */
.story-danger-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.story-danger-head h3 { font: 500 1.05rem/1.2 Georgia, serif; }
.story-danger-head p { margin-top: 5px; max-width: 58ch; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.story-danger-head .button { flex: 0 0 auto; }
.story-danger form { max-width: 62ch; border: 1px solid oklch(80% .09 25); border-radius: 16px; background: oklch(97% .02 25); padding: 20px 22px; }
.story-danger form p { margin-bottom: 14px; color: var(--ink); font-size: .86rem; line-height: 1.6; }
.story-danger form .button { margin-right: 10px; }

.archive-page { width: min(100%, 1100px); margin: auto; padding: 36px clamp(24px, 4vw, 64px) 80px; }
.archive-lede { max-width: 68ch; margin-top: 6px; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.archive-notice { margin-bottom: 18px; border-radius: 12px; background: var(--sage); padding: 13px 16px; color: oklch(32% .09 142); font-size: .84rem; font-weight: 650; }
.archive-empty { margin-top: 24px; color: var(--muted); }

.archive-list { display: grid; gap: 10px; margin-top: 26px; }
.archive-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 16px 18px; }
.archive-row.is-confirming { border-color: oklch(75% .12 25); background: oklch(97% .02 25); }
.archive-row-what strong { display: block; font: 500 1.05rem/1.25 Georgia, serif; }
.archive-row-what small { display: block; margin-top: 4px; color: var(--muted); font-size: .75rem; }
.archive-row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.archive-row-actions .button { min-height: 38px; padding: 8px 14px; font-size: .8rem; }
.archive-warn { color: oklch(42% .14 25); font-size: .8rem; font-weight: 650; }

.archive-flush { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.archive-flush form { max-width: 62ch; border: 1px solid oklch(80% .09 25); border-radius: 16px; background: oklch(97% .02 25); padding: 20px 22px; }
.archive-flush form p { margin-bottom: 14px; font-size: .86rem; line-height: 1.6; }
.archive-flush form .button { margin-right: 10px; }

/* ============================================================
   WELCOME
   The Welcome Table: search over a ribbon of faces. Search is
   the strongest thing on the page by design — the job people
   arrive with is finding a person, not reading a dashboard.
   ============================================================ */
.welcome-page { width: min(100%, 1560px); margin: auto; padding: 36px clamp(24px, 4vw, 64px) 80px; }

.portrait-ribbon--empty { background: linear-gradient(120deg, var(--coral), var(--yellow) 40%, var(--blue) 75%, var(--lavender)); opacity: .5; }
.search-table-tagline { margin-top: 8px; max-width: 40ch; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.search-table-form { display: grid; gap: 8px; }
.search-table-form > label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.search-table-form input[type="search"] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 12px; font-size: .95rem; }
.search-table-form input[type="search"]:focus { outline: 0; }
.search-table-form small { color: var(--muted); font-size: .76rem; }

/* The Welcome search card, narrow.
   Two faults, both invisible on a desktop and both clipped rather than
   scrolled, because .portrait-hero is overflow: hidden — which is why the
   automated sweep called this page clean while a phone showed the org name
   and the Search button cut in half.

   1. The card's desktop grid is minmax(240px,.72fr) minmax(420px,1.28fr):
      a hard 688px minimum before gap, padding and the 7% insets. The rule
      that collapses it to one column sat at max-width: 700px, so everything
      from 701px to about 1000px — every tablet — kept a layout that could
      not fit and got its right-hand column sliced off.

   2. Below 700px that same rule sets .search-box { display: grid } to stack
      the field above the button, but the app's own .search-box base rule
      further down this file sets display: flex and, coming later, wins. The
      button therefore stayed beside the input at 320px and pushed out of the
      card. Restated here so it lands after that base rule.

   Both live in the WELCOME section rather than the prototype block above,
   so cascade order works for us instead of against us. */
@media (max-width: 940px) {
  .search-table {
    inset: auto 12px 14px;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }
  .search-box { display: grid; }
}

/* One nudge at most: whichever thing is actually waiting on this person. */
.welcome-nudge {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; border: 1px solid oklch(80% .08 88); border-radius: 14px;
  background: var(--yellow); padding: 15px 18px;
}
.welcome-nudge strong { font-size: .92rem; }
.welcome-nudge span { color: oklch(40% .06 88); font-size: .84rem; }
.welcome-nudge:hover { border-color: oklch(70% .1 88); }

.welcome-section { margin-top: 46px; }
.welcome-section .section-heading { margin-bottom: 20px; }
.welcome-section .section-heading h2 { margin-top: 4px; font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.1 Georgia, serif; letter-spacing: -.025em; }

/* Three stories, so the layout must never offer two columns.
   At minmax(260px, …) a tablet fitted exactly two tracks and the third story
   sat alone on a second row — the one arrangement that reads as a mistake
   rather than a choice. Dropping the floor to 220px means three columns hold
   from 760px up, and below that it goes straight to one. There is no
   two-column state left for an odd count to fall out of.

   auto-fit rather than repeat(3, …) on purpose: a new organization with one
   or two stories gets one or two full tracks, not a third of a row floating
   against empty space. */
.recent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
@media (max-width: 760px) { .recent-grid { grid-template-columns: 1fr; } }
.recent-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.recent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.recent-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.recent-card-noimage { display: grid; aspect-ratio: 16 / 10; place-items: center; background: var(--surface); color: var(--muted); font-size: .76rem; }
.recent-card-body { display: grid; gap: 7px; padding: 16px 18px 18px; }
.recent-card-body strong { font: 500 1.15rem/1.2 Georgia, serif; }
.recent-card-body em { color: var(--tenant-dark); font: 400 .88rem/1.45 Georgia, serif; font-style: italic; }
.recent-card-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }

/* Semantic colour, per the Library Label Rule. */
.browse-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.browse-tile { display: grid; gap: 6px; align-content: start; min-height: 128px; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.browse-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.browse-tile strong { font: 500 1.2rem/1.2 Georgia, serif; }
.browse-tile span { max-width: 30ch; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.browse-tile--coral { background: var(--coral); }
.browse-tile--sky { background: var(--blue); }
.browse-tile--sage { background: var(--sage); }
.browse-tile--lavender { background: var(--lavender); }

.welcome-invite {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin-top: 46px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); padding: 30px clamp(22px, 3vw, 38px);
}
.welcome-invite h2 { font: 500 clamp(1.3rem, 2.2vw, 1.8rem)/1.15 Georgia, serif; letter-spacing: -.02em; }
.welcome-invite p { margin-top: 8px; max-width: 52ch; color: var(--muted); font-size: .9rem; line-height: 1.6; }

@media (max-width: 860px) {
  .welcome-page { padding: 22px 18px 70px; }
  .welcome-invite { flex-direction: column; align-items: stretch; }
  .welcome-invite .button { width: 100%; }
}

/* Fewer than four portraits share the width instead of leaving blank columns. */
.portrait-ribbon[data-count="1"] { grid-template-columns: 1fr; }
.portrait-ribbon[data-count="2"] { grid-template-columns: 1fr 1fr; }
.portrait-ribbon[data-count="3"] { grid-template-columns: 1.05fr .95fr 1fr; }

/* First run: the screen has nothing to show, so it says what to do next. */
.welcome-firstrun { margin-top: 46px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: clamp(28px, 4vw, 46px); text-align: center; }
.welcome-firstrun h2 { margin-top: 6px; font: 500 clamp(1.5rem, 3vw, 2.3rem)/1.1 Georgia, serif; letter-spacing: -.03em; }
.welcome-firstrun > p:not(.eyebrow) { margin: 12px auto 0; max-width: 56ch; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.welcome-firstrun .button { margin: 22px 6px 0; }

/* Story pictures: the thumbnails are controls, so they look and behave like it. */
.media-thumb { display: block; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; transition: border-color .2s var(--ease), opacity .2s var(--ease); }
.media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-thumb:hover { opacity: .85; }
.media-thumb.is-current { border-color: var(--tenant); opacity: 1; }
.media-thumb:focus-visible { outline: 3px solid oklch(67% 0.15 190 / .65); outline-offset: 2px; }

.media-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.media-caution { max-width: 46ch; color: oklch(45% .13 40); font-size: .76rem; line-height: 1.5; }

.media-library figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.media-library figcaption a { color: var(--tenant-dark); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Editing alerts: unmissable without being a wall in the way. */
.entry-alerts:not(:empty) { display: grid; gap: 10px; margin-bottom: 22px; }
.entry-alert {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-radius: 14px; padding: 14px 18px;
  font-size: .86rem; line-height: 1.55;
}
.entry-alert--presence { border: 1px solid oklch(80% .08 88); background: var(--yellow); color: oklch(34% .07 88); }
/* Stale is louder than presence: one is co-ordination, the other is about to
   cost somebody their work. */
.entry-alert--stale { border: 1px solid oklch(72% .13 25); background: oklch(96% .04 25); color: oklch(38% .14 25); font-weight: 600; }
.entry-alert-action { color: inherit; font-size: .84rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.entry-alert-action:hover { text-decoration-thickness: 2px; }

/* ============================================================
   ORGANIZING — collections and communication projects
   Two screens with the same bones: an index of containers, and
   one opened. Colour separates them: lavender is collaborative
   work, per the Library Label Rule; collections stay quiet
   because they are nobody's business but yours.
   ============================================================ */
.organize-page, .organize-detail { width: min(100%, 1180px); margin: auto; padding: 36px clamp(24px, 4vw, 64px) 80px; }

.organize-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 34px; }
.organize-heading h1 { margin-top: 4px; font: 500 clamp(2rem, 4vw, 3rem)/1.03 Georgia, serif; letter-spacing: -.04em; }
.organize-intro { margin-top: 10px; max-width: 56ch; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.privacy-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; border-radius: 999px; background: var(--surface); padding: 6px 12px; color: var(--muted); font-size: .76rem; font-weight: 650; }

.organize-notice { margin-bottom: 20px; border-radius: 12px; background: var(--sage); padding: 13px 16px; color: oklch(32% .09 142); font-size: .84rem; font-weight: 650; }
.organize-notice.is-failed { background: oklch(95% .04 25); color: oklch(42% .14 25); }

.inline-create-panel { display: grid; gap: 14px; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 24px clamp(20px, 3vw, 30px); }
.inline-create-panel h2 { margin-top: 5px; font: 500 1.35rem/1.2 Georgia, serif; }
.inline-create-panel label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; }
.inline-create-panel label b { margin-left: 5px; color: var(--tenant-dark); font-size: .68rem; }
.inline-create-panel label i { margin-left: 5px; color: var(--muted); font-size: .7rem; font-style: normal; font-weight: 500; }
.inline-create-panel input[type="text"], .inline-create-panel textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); padding: 11px 13px; font: 400 .92rem/1.5 Geist, system-ui, sans-serif;
}
.inline-create-panel input:focus, .inline-create-panel textarea:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }
.inline-create-panel .button { justify-self: start; }

.member-picker { display: grid; gap: 8px; }
.member-picker legend { font-size: .82rem; font-weight: 700; }
.member-picker legend i { margin-left: 5px; color: var(--muted); font-size: .7rem; font-style: normal; font-weight: 500; }
.member-picker > p { color: var(--muted); font-size: .76rem; }
.member-options { display: flex; flex-wrap: wrap; gap: 8px; }
.member-option { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); padding: 7px 13px; font-size: .82rem; font-weight: 500; }
.member-option input { accent-color: var(--tenant); }

.index-summary { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.index-summary h2 { margin-top: 4px; font: 500 1.5rem/1.15 Georgia, serif; }

.organize-rows { display: grid; gap: 10px; }
.organize-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 24px; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 18px 20px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
/* With a portrait stack, and members on a project. */
.organize-row.has-stack { grid-template-columns: 40px minmax(0, 1fr) auto auto 24px; }
.organize-row.has-stack:has(.member-faces) { grid-template-columns: 40px minmax(0, 1fr) auto auto auto 24px; }
.organize-row:hover { transform: translateY(-1px); border-color: var(--tenant); box-shadow: var(--shadow); }
.organize-row-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; font-size: .95rem; }
.project-mark { background: var(--lavender); color: oklch(38% .1 300); }
.collection-mark { background: var(--surface); color: var(--tenant-dark); }
.collection-mark svg { width: 17px; height: 17px; }
.organize-row-copy { display: grid; gap: 4px; min-width: 0; }
.organize-row-copy strong { font: 500 1.2rem/1.2 Georgia, serif; }
.organize-row-copy small { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.organize-row-meta { display: grid; gap: 2px; justify-items: end; text-align: right; white-space: nowrap; }
.organize-row-meta b { font-size: 1.1rem; font-weight: 700; }
.organize-row-meta small { color: var(--muted); font-size: .72rem; }
.row-arrow { color: var(--muted); }

.organize-empty { border: 1px dashed var(--line); border-radius: 18px; background: var(--surface); padding: 40px 32px; text-align: center; }
.organize-empty strong { display: block; font: 500 1.25rem/1.2 Georgia, serif; }
.organize-empty p { margin: 10px auto 0; max-width: 52ch; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.organize-empty .button { margin-top: 20px; }
.organize-empty-inline { color: var(--muted); font-size: .86rem; }

/* Complete work folds away rather than leaving. */
.organize-complete { margin-top: 36px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 4px 20px; }
.organize-complete summary { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; cursor: pointer; padding: 16px 0; list-style: none; }
.organize-complete summary::-webkit-details-marker { display: none; }
.organize-complete summary strong { font-size: .9rem; }
.organize-complete summary strong::before { content: "\25B8"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .2s var(--ease); }
.organize-complete[open] summary strong::before { transform: rotate(90deg); }
.organize-complete summary span { color: var(--muted); font-size: .78rem; }
.organize-complete-lede { padding-bottom: 12px; color: var(--muted); font-size: .8rem; }
.organize-complete .organize-rows { padding-bottom: 20px; }
.organize-complete .organize-row { background: var(--paper); opacity: .82; }
.organize-complete .organize-row:hover { opacity: 1; }

/* One container, opened */
.detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin: 18px 0 30px; }
.detail-hero h1 { margin-top: 5px; font: 500 clamp(1.9rem, 3.6vw, 2.8rem)/1.05 Georgia, serif; letter-spacing: -.035em; }
.detail-hero > div > p:not(.eyebrow):not(.privacy-note) { margin-top: 10px; max-width: 60ch; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.shared-note { display: inline-block; margin-top: 12px; color: var(--muted); font-size: .78rem; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-edit { display: grid; gap: 12px; max-width: 46ch; margin-top: 8px; }
.detail-edit label { display: grid; gap: 5px; font-size: .78rem; font-weight: 650; }
.detail-edit input, .detail-edit textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 10px 12px; font: 400 .9rem/1.5 Geist, system-ui, sans-serif; }
.detail-edit .button { justify-self: start; }

.detail-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.detail-section-heading h2 { margin-top: 4px; font: 500 1.4rem/1.15 Georgia, serif; }

.project-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 36px; }

.organized-list { display: grid; gap: 8px; }
.organized-story { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 10px 16px 10px 10px; }
.organized-story-open { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.organized-story img, .organized-story-noimage { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.organized-story-noimage { background: var(--surface); }
.organized-story-open > span { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.organized-story-open strong { font: 500 1.05rem/1.25 Georgia, serif; }
.organized-story-remove { color: var(--muted); font-size: .76rem; font-weight: 650; }
.organized-story-remove:hover { color: oklch(47% .15 25); text-decoration: underline; text-underline-offset: 3px; }
.status-pill.draft { border-radius: 999px; background: var(--yellow); padding: 3px 9px; color: oklch(38% .1 88); font-size: .68rem; font-style: normal; font-weight: 700; }

.story-adder { margin-bottom: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 22px clamp(18px, 3vw, 26px); }
.story-adder-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.story-adder-head h2 { margin-top: 4px; font: 500 1.3rem/1.2 Georgia, serif; }
.story-adder-head form { display: flex; gap: 8px; }
.story-adder-head input[type="search"] { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 9px 12px; font-size: .85rem; }
.story-adder-list { display: grid; gap: 6px; max-height: 460px; overflow-y: auto; }
.story-adder-row { display: flex; align-items: center; gap: 14px; border: 1px solid transparent; border-radius: 12px; background: var(--paper); padding: 8px 12px 8px 8px; }
.story-adder-row.is-in { border-color: oklch(80% .05 142); background: var(--sage); }
.story-adder-row img, .story-adder-noimage { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; }
.story-adder-noimage { background: var(--surface); }
.story-adder-row > span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.story-adder-row strong { overflow: hidden; font-size: .9rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.story-adder-row small { color: var(--muted); font-size: .72rem; }

.project-members-panel { position: sticky; top: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 22px 20px; }
.members-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.members-heading h2 { margin-top: 4px; font: 500 1.15rem/1.2 Georgia, serif; }
.members-heading > span { border-radius: 999px; background: var(--lavender); padding: 4px 11px; color: oklch(38% .1 300); font-size: .8rem; font-weight: 750; }
.members-note { margin-top: 10px; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.member-list { display: grid; gap: 6px; margin-top: 16px; }
.member-list article { display: flex; align-items: center; gap: 11px; border-radius: 12px; background: var(--paper); padding: 9px 11px; }
.member-list article > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; flex: 1; }
.member-list strong { font-size: .84rem; }
.member-list small { color: var(--muted); font-size: .71rem; }
.member-list button { color: var(--muted); font-size: .73rem; font-weight: 650; }
.member-list button:hover { color: oklch(47% .15 25); text-decoration: underline; text-underline-offset: 3px; }
.member-adder { display: grid; gap: 8px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.member-adder label { display: grid; gap: 5px; }
.member-adder span { color: var(--muted); font-size: .74rem; font-weight: 650; }
.member-adder select { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 9px 11px; font-size: .85rem; }
.member-adder .button { justify-self: start; }
.project-status-form { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.project-status-form small { display: block; margin-top: 8px; color: var(--muted); font-size: .73rem; line-height: 1.5; }

@media (max-width: 1000px) {
  .project-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .project-members-panel { position: static; }
}
@media (max-width: 720px) {
  .organize-row { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  /* nowrap is right on a wide row, where this sits in its own right-hand
     column and must not fold. Here the row has collapsed to two columns and
     the meta has moved under the title, so the same nowrap pushed "Updated 1
     week ago by Demo Org Admin · 2 members" straight off the screen — the
     only horizontal overflow anywhere in the app at 375px. */
  .organize-row-meta { grid-column: 2; justify-items: start; text-align: left; white-space: normal; }
  .row-arrow { display: none; }
}

/* Organizing, from the story page: the moment you decide a story is useful
   is the moment you are reading it. */
/* Sits inside <article class="story">, which is already the page container.
   Repeating width and padding here added a second 64px gutter and pushed the
   bar 64px right of the photograph and the back link above it. */
.story-organize { margin: 0 0 24px; }
.story-organize-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 13px 18px; }
.story-organize-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.organize-label { color: var(--muted); font-size: .76rem; font-weight: 650; }
.chip { border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 650; }
.chip--project { background: var(--lavender); color: oklch(36% .1 300); }
.chip--collection { background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
.chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-organize-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.organize-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 20px clamp(18px, 3vw, 24px); }
.organize-panel-lede { margin-top: 5px; margin-bottom: 14px; color: var(--muted); font-size: .8rem; }
.organize-panel-list { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.organize-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid transparent; border-radius: 12px; background: var(--surface); padding: 10px 12px; }
.organize-panel-row.is-in { border-color: oklch(80% .05 142); background: var(--sage); }
.organize-panel-row > span { display: grid; gap: 2px; min-width: 0; }
.organize-panel-row strong { font-size: .9rem; font-weight: 600; }
.organize-panel-row small { color: var(--muted); font-size: .74rem; }
.organize-panel-create { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.organize-panel-create label { display: grid; gap: 5px; flex: 1 1 260px; }
.organize-panel-create span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.organize-panel-create input { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 10px 12px; font-size: .88rem; }
.organize-panel-create input:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }

/* A few faces from what a container holds. Uneven heights on purpose: three
   identical rectangles read as a filmstrip, which is a different idea. */
.portrait-stack { display: flex; align-items: center; flex: 0 0 auto; }
.portrait-stack img {
  width: 42px; height: 56px; border: 2px solid var(--paper); border-radius: 10px;
  object-fit: cover; box-shadow: 0 2px 6px oklch(23% .022 326 / .1);
}
.portrait-stack img + img { margin-left: -13px; }
.portrait-stack img:nth-child(1) { height: 48px; }
.portrait-stack img:nth-child(2) { height: 62px; z-index: 1; }
.portrait-stack img:nth-child(3) { height: 52px; }

/* Who is on a project. Initials, because this product has no profile photos
   and a roster of broken image icons would be worse than none. */
.member-faces { display: flex; align-items: center; flex: 0 0 auto; }
.member-face {
  display: grid; width: 32px; height: 32px; place-items: center;
  border: 2px solid var(--paper); border-radius: 50%;
  background: var(--coral); color: oklch(38% .12 34);
  font-size: .72rem; font-weight: 800;
}
.member-face + .member-face { margin-left: -9px; }
.member-face:nth-child(2) { background: var(--blue); color: oklch(36% .1 233); }
.member-face:nth-child(3) { background: var(--sage); color: oklch(34% .09 142); }
.member-face:nth-child(4) { background: var(--lavender); color: oklch(36% .1 300); }
.member-face--more { background: var(--surface); color: var(--muted); font-size: .68rem; }

@media (max-width: 900px) {
  .organize-row.has-stack,
  .organize-row.has-stack:has(.member-faces) { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .portrait-stack, .member-faces { display: none; }
}

/* Where a story already sits, on a result row. Projects are named; a
   collection is only marked, because the useful signal is "have I saved
   this" and naming your own shelves would spend a dense row on your filing. */
.result-organize { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.result-organize .chip { font-size: .68rem; padding: 3px 9px; }
.saved-mark { display: inline-flex; align-items: center; gap: 5px; color: var(--tenant-dark); font-size: .68rem; font-weight: 700; }
.saved-mark svg { width: 11px; height: 11px; }

/* Facet counts sit right, like the term counts already do. */
.filter-option small { margin-left: auto; color: var(--muted); font-size: .72rem; }

/* Completed projects stay filterable, one step back from the live ones. */
.filter-subhead { margin: 14px 0 6px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-option.is-quiet span:not(.filter-box) { color: var(--muted); }

/* Usage: the count this product exists to make visible. */
.dd-quiet { color: var(--muted); font-weight: 500; }

.usage-notice { margin-bottom: 16px; border-radius: 12px; background: var(--sage); padding: 12px 15px; color: oklch(32% .09 142); font-size: .82rem; font-weight: 650; }
.usage-notice.is-failed { background: oklch(95% .04 25); color: oklch(42% .14 25); }
.usage-empty { max-width: 64ch; color: var(--muted); font-size: .9rem; line-height: 1.65; }

.usage-list { display: grid; gap: 0; margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.usage-entry { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--line); padding: 16px 4px; }
.usage-entry time { color: var(--tenant-dark); font-size: .75rem; font-weight: 700; }
.usage-entry div { font-size: .92rem; line-height: 1.5; }
.usage-entry strong { font-weight: 600; }
.usage-entry a { color: var(--tenant-dark); text-decoration: underline; text-underline-offset: 3px; }
.usage-entry--project div { color: var(--muted); }
.usage-entry--project div a { color: var(--tenant-dark); font-weight: 600; }
.usage-entry button { color: var(--muted); font-size: .74rem; font-weight: 650; }
.usage-entry button:hover { color: oklch(47% .15 25); text-decoration: underline; text-underline-offset: 3px; }
.usage-auto { color: var(--muted); font-size: .7rem; }

.usage-form { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 22px 24px; }
.usage-form h3 { font: 500 1.1rem/1.2 Georgia, serif; }
.usage-form-lede { margin-top: 6px; max-width: 62ch; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.usage-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0; }
.usage-form label { display: grid; gap: 6px; }
.usage-form label > span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.usage-form label b { margin-left: 4px; color: oklch(45% .13 34); font-size: .64rem; }
.usage-form label i { margin-left: 4px; font-size: .68rem; font-style: normal; font-weight: 500; }
.usage-form input { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 10px 13px; font-size: .88rem; }
.usage-form input:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }

@media (max-width: 640px) {
  .usage-entry { grid-template-columns: minmax(0, 1fr) auto; }
  .usage-entry time { grid-column: 1 / -1; }
}

/* ============================================================
   AVATARS AND PROFILE
   One renderer decides picture-or-initials, so these rules only
   have to make both fit the same circle.
   ============================================================ */
.avatar.has-photo, .member-face.has-photo, .profile-avatar.has-photo { padding: 0; background: none; }
.avatar img, .member-face img, .profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.member-face.has-photo { background: var(--paper); }

.profile-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; border-radius: 10px; padding: 4px; margin: -4px; transition: background .18s var(--ease); }
.profile-link:hover { background: var(--surface); }

.profile-page { width: min(100%, 900px); margin: auto; padding: 36px clamp(24px, 4vw, 64px) 80px; }
.profile-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 40px; }

.profile-photo { display: grid; justify-items: start; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 24px; }
.profile-avatar { display: grid; width: 128px; height: 128px; place-items: center; border-radius: 50%; background: var(--coral); color: oklch(38% .12 34); font: 800 2.4rem Geist, system-ui, sans-serif; }
.profile-upload { display: grid; gap: 6px; width: 100%; }
.profile-upload span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.profile-upload input { width: 100%; font-size: .78rem; }
.profile-photo form { display: grid; gap: 10px; width: 100%; justify-items: start; }
.profile-remove { color: var(--muted); font-size: .76rem; font-weight: 650; }
.profile-remove:hover { color: oklch(47% .15 25); text-decoration: underline; text-underline-offset: 3px; }
.profile-note { max-width: 52ch; color: var(--muted); font-size: .75rem; line-height: 1.55; }

.profile-details { display: grid; gap: 30px; }
.profile-details form { display: grid; gap: 12px; justify-items: start; }
.profile-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; width: 100%; }
.profile-details label { display: grid; gap: 6px; }
.profile-details label span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.profile-details input[type="text"] { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 11px 13px; font-size: .9rem; }
.profile-details input:focus { border-color: var(--tenant); box-shadow: 0 0 0 3px var(--focus-ring); outline: 0; }

.profile-facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.profile-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 12px 2px; }
.profile-facts dt { color: var(--muted); font-size: .8rem; }
.profile-facts dd { font-size: .86rem; font-weight: 600; text-align: right; }

@media (max-width: 720px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ---------------------------------------------------------------------
   People & access
   Container, heading and type all come from .organize-page /
   .organize-heading, the same as Projects, Collections and Profile. Only
   what is genuinely particular to this screen lives here.
   --------------------------------------------------------------------- */

/* Role key ------------------------------------------------------------
   Sits above the table, beside the column where a role is chosen. Three
   columns on a wide screen, stacked when there is no room. */

.people-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px 28px;
  margin: 0 0 22px;
  border-block: 1px solid var(--line);
  padding: 16px 2px;
}
.people-legend dt { font-size: .84rem; font-weight: 750; }
.people-legend dd { margin: 2px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.legend-row { position: relative; padding-left: 20px; }
.legend-row::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
}
/* Three hues far enough apart to survive a 10px dot, and all darker than the
   band behind them. The contributor dot used to be hue 233 — the same hue as
   the blue band it sits on — so it read as the same colour as Admin. */
.legend-row.is-admin::before       { background: var(--tenant); }
.legend-row.is-contributor::before { background: oklch(55% .14 40); }
.legend-row.is-viewer::before      { background: oklch(48% .13 300); }


/* Directory ---------------------------------------------------------- */

.people-directory-head {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: end; justify-content: space-between;
  margin-bottom: 26px;
}
.people-directory-head h2 {
  margin: 4px 0 8px;
  font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.08 Georgia, serif;
  letter-spacing: -.03em;
}
.people-count { margin: 0; color: var(--muted); font-size: .86rem; }

/* Form controls -------------------------------------------------------
   The border / radius / paper / teal-focus convention was restated on eight
   separate components, so any screen that forgot to restate it fell back to
   the browser's own widget — which is what happened to every control on this
   page. This is that convention in one place; reach for .sb-control on new
   screens rather than restating it.

   The parts every control needs whether or not it remembers to ask — the
   select appearance reset and the file-input button — are applied by element
   at the end of this file instead, because an enumerated list is exactly how
   four selects got missed. */

.sb-control,
.people-filters input[type="search"],
.people-filters select,
.people-role select,
.people-invite-grid input,
.people-invite-grid select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--paper);
  padding: 9px 12px;
  color: var(--ink);
  font: inherit;
  font-size: .86rem;
}
.sb-control:focus,
.people-filters input[type="search"]:focus,
.people-filters select:focus,
.people-role select:focus,
.people-invite-grid input:focus,
.people-invite-grid select:focus {
  border-color: var(--tenant);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: 0;
}

.people-filters { display: flex; gap: 10px; align-items: center; }
.people-filters input[type="search"] { min-width: 260px; width: auto; }
.people-filters select { width: auto; }

.people-empty { margin: 0; border-block: 1px solid var(--line); padding: 40px 0; color: var(--muted); }

/* Table -------------------------------------------------------------- */

.people-table { width: 100%; border-collapse: collapse; }
.people-table th {
  border-bottom: 1px solid var(--line);
  padding: 0 12px 12px;
  color: var(--muted); font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
}
.people-table td { border-bottom: 1px solid var(--line); padding: 18px 12px; vertical-align: middle; }
.people-table tbody tr:hover { background: var(--surface); }
.people-table tr.is-inactive td { opacity: .5; }

.people-person { display: flex; align-items: center; gap: 14px; }
.people-avatar {
  display: grid; place-items: center; overflow: hidden;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%; background: var(--coral);
  color: oklch(38% .12 34); font-size: .78rem; font-weight: 800;
}
.people-avatar img { width: 100%; height: 100%; object-fit: cover; }
.people-identity { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.people-name { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 700; }
.people-email { color: var(--muted); font-size: .84rem; }
.people-you {
  border-radius: 999px; background: var(--tenant-soft); padding: 2px 8px;
  color: var(--tenant-dark); font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}

.people-role select { min-width: 156px; width: auto; }

.people-status { white-space: nowrap; }
.people-state { position: relative; display: block; padding-left: 18px; font-size: .88rem; font-weight: 700; }
.people-state::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--muted);
}
tr.is-active   .people-state::before { background: var(--sb-ok); }
tr.is-pending  .people-state::before { background: var(--sb-caution); }
.people-state-detail { display: block; padding-left: 18px; color: var(--muted); font-size: .82rem; }

/* Row menu ----------------------------------------------------------- */

.people-actions { position: relative; text-align: right; }
.people-menu > summary {
  display: inline-flex; width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%; color: var(--muted); cursor: pointer;
  list-style: none; letter-spacing: 1px;
}
.people-menu > summary::-webkit-details-marker { display: none; }
.people-menu > summary:hover,
.people-menu[open] > summary { background: var(--tenant-soft); color: var(--tenant-dark); }
.people-menu-panel {
  position: absolute; right: 12px; z-index: 20; min-width: 268px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); padding: 14px; text-align: left;
  box-shadow: var(--shadow);
}
.people-menu-title {
  margin: 0 0 10px; color: var(--muted); font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.people-menu-item {
  display: block; width: 100%; min-height: 40px;
  border: 0; border-radius: 9px; background: transparent;
  padding: 9px 10px; font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
}
.people-menu-item:hover { background: var(--surface); }
.people-menu-item.is-destructive { color: var(--sb-danger); }
.people-menu-item.is-destructive:hover { background: var(--coral); }
.people-menu-blocked { margin: 0; padding: 2px 6px 4px; color: var(--muted); font-size: .84rem; line-height: 1.5; }

@media (max-width: 760px) {
  .people-directory-head { flex-direction: column; align-items: stretch; }
  .people-filters { flex-wrap: wrap; }
  .people-filters input[type="search"] { min-width: 0; flex: 1 1 200px; }
  .people-table thead { display: none; }
  .people-table tbody tr { display: grid; gap: 10px; border-bottom: 1px solid var(--line); padding: 18px 0; }
  .people-table tbody tr:hover { background: transparent; }
  .people-table td { border: 0; padding: 0 2px; }
  .people-actions { text-align: left; }
  .people-menu-panel { right: auto; left: 2px; }
}

/* Invite panel + accept screen ---------------------------------------- */

.people-invite {
  margin-bottom: 32px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--paper); padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow);
}
.people-invite h2 { margin: 0 0 6px; font: 500 1.5rem/1.1 Georgia, serif; letter-spacing: -.03em; }
.people-invite-lede { margin: 0 0 22px; max-width: 54ch; color: var(--muted); font-size: .9rem; }
.people-invite-grid {
  display: grid; gap: 16px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.people-invite-grid label { display: grid; gap: 6px; }
.people-invite-grid label > span { font-size: .82rem; font-weight: 700; }
.people-invite-grid label em { color: var(--muted); font-style: normal; font-weight: 400; }
.people-invite-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.accept-screen {
  width: min(100%, 520px); margin: auto;
  padding: clamp(40px, 8vh, 88px) clamp(24px, 5vw, 40px) 80px;
}
.accept-screen h1 { margin: 6px 0 14px; font: 500 clamp(1.9rem, 4vw, 2.6rem)/1.05 Georgia, serif; letter-spacing: -.04em; }
.accept-lede { margin: 0 0 26px; color: var(--muted); }
.accept-form { display: grid; gap: 8px; }
.accept-form label { font-size: .82rem; font-weight: 700; }
.accept-form input { margin-bottom: 10px; }
.accept-form .button { margin-top: 8px; justify-self: start; }
.accept-hint { margin: 2px 0 8px; color: var(--muted); font-size: .82rem; line-height: 1.5; }

/* Auth screens — sign in, lost password, set password ------------------
   One card for all of them. They are the same moment in different words,
   and a person who resets a password should not feel they have left. */

.auth-card {
  width: min(100%, 440px); margin: auto;
  padding: clamp(36px, 7vh, 72px) 0 64px;
}
.auth-card h1 {
  margin: 8px 0 14px;
  font: 500 clamp(1.9rem, 4vw, 2.6rem)/1.05 Georgia, serif;
  letter-spacing: -.04em;
}
.auth-lede { margin: 0 0 26px; color: var(--muted); line-height: 1.55; }
.auth-aside { margin: -12px 0 26px; color: var(--muted); font-size: .86rem; line-height: 1.55; }

.auth-form { display: grid; gap: 6px; }
.auth-form label { font-size: .82rem; font-weight: 700; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] { margin-bottom: 14px; }
.auth-form .button { margin-top: 10px; justify-self: stretch; }

.auth-remember {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 4px; font-size: .88rem; font-weight: 400;
}
/* An explicit size does the job `width: auto` was doing, and the accent makes
   this match the other five checkboxes in the app. Without it this rendered
   at 13px in the browser's default blue — on the first screen anyone sees. */
.auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--tenant); }

.auth-hint { margin: 0 0 6px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.auth-alt { margin: 22px 0 0; font-size: .88rem; }
.auth-alt a { text-decoration: underline; text-underline-offset: 3px; }

/* A recorded permission with nothing behind it ------------------------ */
/* Amber callouts use a full border, not a side stripe.
   The app had both: .story-notice--attention and .entry-alert--presence drew
   a 1px border all the way round, while these four drew a 3px stripe down the
   left. Two treatments for one job. The full border wins because the notices
   using it are the more prominent components, so the quieter ones move. */
.release-gap,
.entry-nudge {
  margin: 10px 0 0;
  border: 1px solid oklch(86% .08 76);
  background: var(--yellow);
  padding: 10px 14px;
  color: var(--ink);
  font-size: .85rem;
  line-height: 1.5;
  border-radius: 12px;
}
.entry-nudge { margin: -6px 0 18px; }

/* Share a story publicly --------------------------------------------- */

.share-page { width: min(100%, 1180px); margin: auto; padding: 36px clamp(24px, 4vw, 64px) 80px; }

.share-blocked {
  margin-bottom: 28px; border: 1px solid var(--sb-danger); border-radius: 14px;
  background: var(--coral); padding: 20px 24px;
}
.share-blocked h2 { margin: 0 0 10px; font: 500 1.25rem/1.2 Georgia, serif; }
.share-blocked ul { margin: 0 0 10px; padding-left: 20px; }
.share-blocked li { margin-bottom: 6px; }
.share-blocked-note { margin: 0; font-size: .85rem; opacity: .8; }

.share-live {
  margin-bottom: 28px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--sage); padding: 20px 24px;
}
.share-url { margin: 4px 0 8px; font-size: 1rem; word-break: break-all; }
.share-url a { text-decoration: underline; text-underline-offset: 3px; }
.share-frozen { margin: 0 0 14px; font-size: .85rem; opacity: .8; max-width: 62ch; }

.share-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 36px; align-items: start; }

.share-group { margin: 0 0 22px; border: 0; padding: 0; }
.share-group legend { margin-bottom: 10px; font-size: .82rem; font-weight: 800; letter-spacing: .04em; }
.share-group label { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: .92rem; }
.share-group label input { width: auto; margin: 0; }
.share-fixed { opacity: .6; }
.share-fixed em { font-style: normal; font-size: .8rem; }
.share-hint { margin: 8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; max-width: 46ch; }

.share-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.share-thumb { position: relative; display: block !important; margin: 0 !important; cursor: pointer; }
.share-thumb img { display: block; width: 78px; height: 78px; object-fit: cover; border-radius: 8px; opacity: .35; transition: opacity .15s; }
.share-thumb input { position: absolute; top: 6px; left: 6px; z-index: 2; }
.share-thumb input:checked ~ img { opacity: 1; outline: 2px solid var(--tenant); outline-offset: 2px; }
.share-thumb-tag {
  position: absolute; right: 4px; bottom: 4px; border-radius: 4px;
  background: var(--ink); padding: 1px 5px; color: var(--paper); font-size: .6rem; font-weight: 700;
}
.share-quote span { font-size: .88rem; line-height: 1.45; }

.share-warnings {
  margin: 0 0 22px; border: 1px solid oklch(86% .08 76);
  background: var(--yellow); padding: 12px 16px; border-radius: 12px;
}
.share-warnings ul { margin: 6px 0 0; padding-left: 18px; }
.share-warnings li { margin-bottom: 5px; font-size: .84rem; line-height: 1.45; }

.share-commit { border-top: 1px solid var(--line); padding-top: 18px; }
.share-truth { margin: 0 0 14px; font-size: .85rem; line-height: 1.55; max-width: 48ch; }

.share-frame {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fdfcf9; box-shadow: var(--shadow);
}
.share-frame iframe { display: block; width: 100%; height: 620px; border: 0; }

@media (max-width: 940px) {
  .share-layout { grid-template-columns: 1fr; }
  .share-frame iframe { height: 460px; }
}

/* Embed codes -------------------------------------------------------- */
.share-embeds { margin: 18px 0 20px; display: grid; gap: 16px; }
.share-embed { display: grid; gap: 6px; }
.share-embed > span { font-size: .82rem; font-weight: 700; }
.share-embed textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); padding: 10px 12px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.share-embed small { color: var(--muted); font-size: .8rem; line-height: 1.45; }

/* Share state ---------------------------------------------------------- */
.story-toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button.is-stale { border-color: var(--sb-caution); background: var(--yellow); }
.share-stale {
  margin: 0 0 14px; border: 1px solid oklch(86% .08 76);
  background: var(--yellow); padding: 10px 14px;
  font-size: .86rem; line-height: 1.55; border-radius: 12px; max-width: 62ch;
}

/* Copy buttons --------------------------------------------------------- */
.share-embed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.share-embed-head label { font-size: .82rem; font-weight: 700; }
.share-copy {
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  padding: 4px 11px; font: inherit; font-size: .76rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.share-copy:hover { background: var(--surface); }
.share-copy.is-copied { border-color: var(--sb-ok); background: var(--sage); color: var(--sb-ok); }
.share-url { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.usage-entry--share time { font-variant-numeric: tabular-nums; }

/* Plan & usage --------------------------------------------------------- */
.sb-plan {
  margin: 0 0 32px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); padding: 22px 24px;
}
.sb-plan-head h2 { margin: 4px 0 16px; font: 500 1.4rem/1.15 Georgia, serif; letter-spacing: -.02em; }
.sb-plan-usage { display: grid; gap: 14px; margin: 0; }
.sb-plan-row { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 14px; align-items: baseline; }
.sb-plan-row dt { color: var(--muted); font-size: .86rem; }
.sb-plan-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .9rem; }
.sb-plan-row dd span { color: var(--muted); font-size: .84rem; }
.sb-plan-bar { flex: 1 1 140px; height: 6px; min-width: 100px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.sb-plan-bar > span { display: block; height: 100%; background: var(--tenant); }
.sb-plan-row.is-close .sb-plan-bar > span { background: var(--sb-caution); }
.sb-plan-row.is-full  .sb-plan-bar > span { background: var(--sb-danger); }
.sb-plan-note { margin: 16px 0 0; color: var(--muted); font-size: .8rem; }
@media (max-width: 640px) { .sb-plan-row { grid-template-columns: 1fr; gap: 4px; } }

.media-about { margin-left: 10px; color: var(--muted); font-size: .78rem; }

/* The quiet one of the four. It joins the same convention but keeps no
   background tint and muted text, so it still reads as an annotation rather
   than a warning. */
.source-note {
  margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; color: var(--muted); font-size: .82rem; line-height: 1.5;
}

/* ---------------------------------------------------------------------
   404, and the moment a facet is jumped to
   --------------------------------------------------------------------- */

.sb-404 {
  width: min(100%, 560px); margin: auto;
  padding: clamp(56px, 12vh, 120px) clamp(24px, 5vw, 40px) 100px;
  text-align: left;
}
.sb-404 h1 {
  margin: 8px 0 14px;
  font: 500 clamp(1.8rem, 4vw, 2.5rem)/1.08 Georgia, serif;
  letter-spacing: -.04em;
}
.sb-404 p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.sb-404 .button { margin-top: 4px; }

/* Arriving from a Welcome tile, the named facet should be findable rather
   than merely present. A brief tint does that without moving anything. */
.filters details:target > summary,
.filters details:target { scroll-margin-top: 90px; }
.filters details:target > summary {
  border-radius: 6px;
  animation: sb-facet-found 2.4s var(--ease) 1;
}
@keyframes sb-facet-found {
  0%, 60% { background: var(--yellow); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .filters details:target > summary { animation: none; background: var(--yellow); }
}

/* ============================================================
   CONTROL PRIMITIVES — by element, deliberately last
   Two things every control needs whether or not its component remembered to
   ask for them.

   Last in the file on purpose. A component that sets `padding` with the
   shorthand would otherwise wipe the padding-right that keeps option text
   from running under the chevron. Coming afterwards, these win the one
   property they have to and leave each component's own metrics alone.

   Scoped to .sb-main so nothing reaches wp-admin or the block editor.
   ============================================================ */

/* A select keeps the operating system's widget until its appearance is
   reset, and then needs a chevron of its own. Enumerating the selects that
   deserved this is precisely how the library sort, the taxonomy picker, the
   vetting outcome and the project member adder kept OS chevrons while the
   three on People got styled ones. */
.sb-main select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
.sb-main select:disabled { opacity: .55; }

/* Only the button half of a file input is styled. The input's own box is left
   alone so the entry wizard's drop zones — which hide their input at 1px and
   zero opacity and draw their own target — keep working. */
.sb-main input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 8px 14px;
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s var(--ease);
}
.sb-main input[type="file"]::file-selector-button:hover { background: var(--surface); }