/* ===========================================================================
   CABBI Data Hub — design system
   ---------------------------------------------------------------------------
   Built on the CABBI brand palette (COLORPALETTE-2). The center's mark is three
   interleaved leaf/flame forms in green, olive and gold on a charcoal wordmark.
   The page language is a research record: white paper, square corners, charcoal
   rules instead of boxes and shadows (a heavy rule over a table, thin ones between
   rows), plain-case labels, and the brand green kept for the main action and the
   current place, so it still means something where it appears.

   Class names are kept stable from the previous stylesheet — .wrap, .stat,
   .card, table.grid, dl.meta, .filters, .badge and friends all still exist, so
   every existing template re-skins rather than breaks.
   =========================================================================== */

:root {
  /* --- CABBI brand palette, verbatim from the style guide ---------------- */
  --cabbi-green:      #007f3d;   /* primary  — the mark's leading leaf       */
  --cabbi-green-mid:  #3ba459;
  --cabbi-olive:      #8ead3e;   /* the mark's middle leaf                   */
  --cabbi-teal:       #00a996;
  --cabbi-teal-deep:  #1a8476;
  --cabbi-sky:        #82cfd0;
  --cabbi-sky-pale:   #b2e0e5;
  --cabbi-gold:       #fcb813;   /* the mark's trailing leaf                 */
  --cabbi-gold-soft:  #ffdd50;
  --cabbi-stone:      #e1deda;   /* warm neutral                             */
  --cabbi-taupe:      #98876e;
  --cabbi-charcoal:   #403a48;   /* the wordmark ink — warm, slightly plum   */

  /* --- Semantic tokens --------------------------------------------------- */
  --ink:        #2a2530;         /* the charcoal, a step darker: text and rules */
  --ink-soft:   #5d5666;
  --muted:      #7a7385;
  --line:       #d9d4cf;         /* the thin rule between rows               */
  --line-soft:  #e9e6e2;
  --bg:         #ffffff;
  --bg-sunk:    #f3f1ee;
  --card:       #ffffff;
  --green:      var(--cabbi-green);
  --green-dark: #00622f;
  --accent:     var(--cabbi-gold);
  /* Where a collection's data is: held in the Hub's lake (a CABBI green, dark enough
     for white text on it) or external at a repository (deep blue). */
  --held:          #2b7f45;
  --held-dark:     #1f6435;
  --held-soft:     #e3f1e7;
  --held-line:     rgba(43,127,69,.5);
  --external:      #0b5672;
  --external-dark: #073d52;
  --external-soft: #dcebf0;
  --external-line: rgba(11,86,114,.55);

  --radius:     0;
  --radius-lg:  0;
  --radius-sm:  0;
  --shadow:     none;
  --shadow-lift:none;

  /* Typefaces (loaded from Google Fonts in base.html), shared with Mint Your Metadata:
     Atkinson Hyperlegible for text, Bricolage Grotesque for headings, JetBrains Mono for code. */
  --font: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* A plain link in the page's text is underlined, so it reads as one without color. */
main a:not([class]) { text-decoration: underline; text-decoration-color: rgba(42,37,48,.35); text-underline-offset: 3px; }
main a:not([class]):hover { color: var(--green); text-decoration-color: currentColor; }
table.grid a:not([class]) { text-decoration: none; font-weight: 600; }
img { max-width: 100%; }

/* --- Typography ------------------------------------------------------------
   Headings run heavy and tight; the line above a page's heading (its "eyebrow")
   is a quiet mono note, not a spaced-out capital label. */

h1, h2, h3, h4 { color: var(--ink); font-family: var(--display); font-weight: 700; letter-spacing: -.018em; }
h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; line-height: 1.0; letter-spacing: -.03em; margin: 6px 0 16px; }
h2 { font-size: clamp(21px, 2.4vw, 26px); line-height: 1.22; margin: 40px 0 14px; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; }

.lede { font-size: 18.5px; line-height: 1.62; color: var(--ink-soft); max-width: 68ch; }
.muted { color: var(--muted); }
em.muted { font-style: italic; }
.small { font-size: 14px; }

.eyebrow {
  font-family: var(--mono); font-size: 13.5px; font-weight: 400;
  color: var(--ink-soft); margin: 0 0 10px;
}
.eyebrow.gold { color: #a8780a; }
/* A deposit's collection (staging/_deposit_collection.html): under its name in the list, and under the
   deposit page's heading, so a second deposit into the same collection is plain to see. */
.dep-coll { margin-top: 4px; font-size: 13px; white-space: normal; }
table.grid td.dep-cell { white-space: normal; min-width: 280px; }   /* long titles wrap rather than widen the table */
.deposits-table tbody tr:nth-child(even) td { background: #f6f3ee; }   /* every other deposit shaded */
.dep-coll-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--ink-soft); margin-right: 4px; }
/* The collection's name in Held green, still bold, so it stands apart from the deposit's own black title. */
.dep-coll a, table.grid .dep-coll a:not([class]) { font-weight: 650; color: var(--held-dark); }
.dep-coll a:hover, table.grid .dep-coll a:not([class]):hover { color: var(--held); text-decoration: underline; }
.dep-coll-count { color: var(--ink-soft); }
.dep-coll-new { color: var(--ink-soft); font-style: italic; }
.dep-coll-head { margin: -6px 0 16px; padding: 8px 12px; font-size: 15px; border-left: 3px solid var(--held);
                 background: rgba(43,127,69,.06); }
.dep-coll-head .dep-coll-label { font-size: 12px; }
.eyebrow.teal { color: var(--cabbi-teal-deep); }
.eyebrow.on-dark { color: var(--cabbi-gold-soft); }

/* Numbers are data — always tabular so columns line up. */
.num, .k, .stat .num, td.num, th.num { font-variant-numeric: tabular-nums; }

/* --- Top bar ---------------------------------------------------------------
   White, so the full-color logo can be used; the brand's three colors appear
   as a hairline rule across the very top of every page. */

.brandline { height: 4px; display: flex; }
.brandline i { flex: 1; }
.brandline i:nth-child(1) { background: var(--cabbi-green); }
.brandline i:nth-child(2) { background: var(--cabbi-olive); }
.brandline i:nth-child(3) { background: var(--cabbi-gold); }

/* A Leaflet map's panes and controls carry z-indexes up to 1000: kept inside the map, so the
   sticky header and its menus stay above a map scrolled under them. */
.leaflet-container { isolation: isolate; }
/* Leaflet's controls and popups, squared like the rest of the site. */
.leaflet-bar, .leaflet-bar a, .leaflet-control-layers, .leaflet-popup-content-wrapper,
.leaflet-control-attribution, .leaflet-tooltip { border-radius: 0 !important; }
.leaflet-bar, .leaflet-control-layers { border: 1.5px solid var(--ink) !important; box-shadow: none !important; }
.leaflet-popup-content-wrapper { box-shadow: 0 0 0 1.5px var(--ink); }

.topbar {
  background: #fff;
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 40px; width: auto; display: block; }
.brand .product-mark { height: 28px; width: 28px; margin-right: -5px; }   /* the Data leaf mark, tight to the name */
.brand .rule { width: 1px; height: 26px; background: var(--line); }
.brand .product {
  font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap;
}

/* Twelve items now (Quick links, Sign in); the header may run a little wider
   than the page column and the links sit a touch tighter so it stays one row
   on a laptop. It still wraps gracefully below that. */
.topbar .wrap { max-width: 1280px; }   /* v2's labels (Facilities, Study Logs) run a little longer */
.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--ink); font-weight: 550; font-size: 15px;
  padding: 7px 9px; border-radius: var(--radius-sm);
}
.topbar nav a:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--line); text-decoration: none; }
.topbar nav a.is-active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--cabbi-green); }
.topbar .admin-link { color: #a8780a; }
.topbar .admin-link:hover { background: rgba(252,184,19,.14); color: #8a6208; }
/* the sign-out is a POST, so it is a button dressed as the nav links */
.topbar .signout-form { display: inline; margin: 0; }
.topbar nav button.admin-link {
  font: inherit; font-weight: 550; font-size: 15px; background: none; border: 0; cursor: pointer;
  padding: 7px 9px; border-radius: var(--radius-sm);
}

/* --- The menu button (narrow screens) --------------------------------------
   Below 960px the links fold behind a labelled "Menu" button; the logos stay.
   Only with the script (`js-nav` on the header): without it the links wrap. */
.nav-toggle { display: none; }
@media (max-width: 960px) {
  /* Padding of its own: open, the bar wraps to two rows and loses its centring. */
  .topbar .wrap { flex-wrap: wrap; gap: 8px 12px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
    min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 0;
    background: var(--card); color: var(--ink); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
  }
  .nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--cabbi-green); color: var(--cabbi-green); }
  .nav-toggle-icon { flex: none; }
  .nav-toggle .icon-close, .topbar.nav-open .nav-toggle .icon-menu { display: none; }
  .topbar.nav-open .nav-toggle .icon-close { display: block; }
  .topbar.nav-open .nav-toggle { background: var(--bg-sunk); }
  .topbar.js-nav nav { display: none; }
  /* Open: the links as one column under the bar, each menu opening in place. */
  .topbar.js-nav.nav-open nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%;
    padding: 4px 0 8px; border-top: 1px solid var(--line);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .topbar.nav-open nav > a, .topbar.nav-open .navmenu summary, .topbar.nav-open nav button.admin-link {
    display: flex; width: 100%; padding: 7px 10px; font-size: 15px; text-align: left; }
  .topbar.nav-open .navmenu summary { justify-content: space-between; }
  .topbar.nav-open .navmenu-linked summary a { padding: 0; }   /* the link's own padding would indent it */
  .topbar.nav-open .navmenu-list {
    position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
    margin: 0 0 4px 12px; padding: 0 0 0 6px; min-width: 0; background: transparent;
  }
  .topbar.nav-open .navmenu-list a { white-space: normal; padding: 5px 10px; font-size: 14.5px; }
  .topbar.nav-open .navmenu-sep { margin: 3px 10px; }
  .topbar.nav-open .signout-form { display: block; }
}

main.wrap { padding-top: 30px; padding-bottom: 56px; min-height: 58vh; }
main.full { max-width: none; padding: 0; }

.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--green); }

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 20px; border-radius: 0; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--cabbi-green); border-color: var(--cabbi-green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--bg-sunk); color: var(--ink); }
.btn-on-dark { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-on-dark:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
/* A small outlined action beside a row's name: View, Edit, Download. */
a.btn-act { font-size: 12px; font-weight: 500; line-height: 1; padding: 3px 8px; text-decoration: none; white-space: nowrap;
            border: 1px solid var(--ink-soft); color: var(--ink-soft); background: #fff;
            display: inline-flex; align-items: center; gap: 4px; }
a.btn-act .icon { width: 12px; height: 12px; flex: none; }
a.btn-act:hover { background: var(--ink); color: #fff; }
.btn-acts { display: inline-flex; gap: 4px; }

/* --- Stat blocks ----------------------------------------------------------- */

.stats { display: flex; gap: 14px; margin: 20px 0 10px; flex-wrap: wrap; }
.stat {
  flex: 1 1 160px; border-top: 2px solid var(--ink); padding: 12px 4px 4px 0;
  display: flex; flex-direction: column;
}
a.stat:hover { text-decoration: none; }
a.stat:hover .num { color: var(--cabbi-green); }
.stat .num { font-family: var(--display); font-size: 36px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.stat .lbl { color: var(--muted); font-size: 14px; }

/* --- Cards ----------------------------------------------------------------- */

.cards {
  list-style: none; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
a.card:hover, .card a:hover { text-decoration: none; }
a.card { display: block; transition: border-color .12s; }
a.card:hover { border-color: var(--ink); }
.card-title { font-weight: 650; font-size: 16px; color: var(--ink); }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 26px;
}

/* --- Tables ---------------------------------------------------------------- */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border-top: 2.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
table.grid th, table.grid td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid th:first-child, table.grid td:first-child { padding-left: 0; }
table.grid thead th {
  font-size: 14px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: #faf9f7; }
table.grid td.num, table.grid th.num { text-align: right; }
/* A cell whose text may wrap: long names stay readable without stretching the table. */
/* Datasets page header: the heading text, with a small featurette beside it. */
.ds-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.ds-head-text { flex: 999 1 460px; min-width: 0; }
.ds-head-text .lede { margin-bottom: 0; }
/* The hero heading's gold highlight (.home-hero h1 .hl), pale, so the card reads the same
   on the light datasets page and the dark home hero. */
.featurette { flex: 1 1 280px; max-width: 340px; border: 1px solid rgba(252, 184, 19, .35); opacity: 0.75;
  background: #fff6dc;
  border-radius: 0; padding: 12px 14px 8px; box-shadow: none; }
.featurette-slides { list-style: none; margin: 0; padding: 0; min-height: 104px; }
.featurette-slide { display: flex; gap: 12px; align-items: flex-start; }
.featurette-slide:not(.is-active) { display: none; }
.featurette-slide.is-active { animation: featurette-in .35s ease-out; }
@keyframes featurette-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .featurette-slide.is-active { animation: none; } }
.featurette-art { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 0;
  background: var(--bg-sunk); color: var(--cabbi-green); }
.featurette-art img { display: block; }
.featurette-map { background: #f2f8f3; color: #00622f; }
.featurette-title { margin: 0 0 2px; font-weight: 700; font-size: 14px; color: var(--ink); }
.featurette-text { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.featurette-go { display: inline-block; margin-right: 10px; font-size: 13px; font-weight: 650; }
.featurette-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.featurette-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; }
.featurette-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line);
  transition: background .15s, transform .15s; }
.featurette-dots button[aria-current="true"]::before { background: var(--cabbi-green); transform: scale(1.25); }
.featurette-dots button:focus-visible { outline: 2px solid var(--cabbi-green); outline-offset: -2px; border-radius: 50%; }
@media (max-width: 720px) { .featurette { max-width: none; } }

/* Where a collection's data is (datasets list): held in the Hub, or external at a repository. */
table.grid td.ds-where { white-space: normal; }
.ds-chip { display: inline-flex; align-items: center; gap: 5px; margin: 1px 4px 1px 0; padding: 2px 9px 2px 7px;
  border-radius: 0; font-size: 12.5px; font-weight: 650; white-space: nowrap; border: 1px solid transparent; }
.ds-chip .ds-icon { flex: none; }
.ds-held { background: var(--held); border-color: var(--held); color: #fff; }
.ds-external { background: var(--external); border-color: var(--external); color: #fff; }
/* An external's DOI under its collection: the external chip's blue, not the Hub's green links. */
.ds-doi { font-size: 12.5px; font-weight: 600; color: var(--external); text-decoration: underline; text-decoration-color: var(--external-line); text-underline-offset: 2px; }
.ds-doi:hover { color: var(--external-dark); text-decoration-color: currentColor; }
.ds-where-toggle { display: inline-flex; margin: 0; padding: 0; border: 1.5px solid var(--ink);
  border-radius: 0; background: var(--card); gap: 2px; }
.ds-where-toggle label { position: relative; display: inline-flex; cursor: pointer; }
.ds-where-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ds-where-toggle span { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 11px;
  border-radius: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.ds-where-toggle label:hover span { background: var(--bg-sunk); }
.ds-where-toggle input:checked + span { background: var(--ink); color: #fff; }
.ds-where-toggle input[value="held"]:checked + span { background: var(--held); }
.ds-where-toggle input[value="external"]:checked + span { background: var(--external); }
.ds-where-toggle input:focus-visible + span { outline: 2px solid var(--cabbi-green); outline-offset: 1px; }
/* An instant tooltip for [data-tip] (title waits about a second), on hover or keyboard focus. */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-within::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  z-index: 50; padding: 5px 9px; border-radius: 0; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none;
  box-shadow: none; }
table.grid td.wrap-cell { white-space: normal; min-width: 11rem; max-width: 18rem; line-height: 1.4; }
table.grid td.wrap-cell.wrap-wide { min-width: 16rem; max-width: 26rem; }
table.grid td.wrap-cell.wrap-narrow { min-width: 8rem; max-width: 12rem; }
.go { font-size: 14px; font-weight: 600; }

/* --- Definition lists ------------------------------------------------------ */

dl.meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 28px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin: 0 0 18px;
}
dl.meta dt {
  font-size: 14px; font-weight: 700;
  color: var(--ink);
}
dl.meta dd { margin: 3px 0 0; font-size: 16px; color: var(--ink); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* --- Filters --------------------------------------------------------------- */

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 20px; align-items: center; }
.filters input, .filters select {
  padding: 9px 12px; border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.filters input:focus, .filters select:focus { outline: 2px solid var(--cabbi-green); outline-offset: 1px; }
.filters input[type=search] { min-width: 250px; }
.filters button {
  padding: 9px 18px; background: var(--ink); color: #fff; border: 0;
  border-radius: 0; cursor: pointer; font: inherit; font-weight: 600;
}
.filters button:hover { background: #000; }
.filters .clear { align-self: center; font-size: 14px; }

/* --- Tabs: pill buttons over panes (role="tablist"; a pane is hidden until its tab is picked) --- */

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.tabs [role="tab"] { font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 0; border: 1.5px solid var(--ink);
  background: var(--card); color: var(--ink); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-pane[hidden] { display: none; }

/* --- Badges & status pills ------------------------------------------------- */

.badge {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 0;
  vertical-align: middle; margin-left: 6px;
}
.badge.draft { background: #fff3d4; color: #8a6208; }
.badge.live  { background: rgba(0,127,61,.10); color: var(--green-dark); }
.badge.planned { background: var(--bg-sunk); color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 0; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.now       { background: rgba(0,127,61,.10);  color: var(--green-dark); }
.pill.building  { background: rgba(252,184,19,.16); color: #8a6208; }
.pill.planned   { background: var(--bg-sunk);       color: var(--muted); }
/* "held elsewhere" is a different statement from "planned" — it means the data
   lives in a purpose-built system on purpose, not that we haven't got to it. */
.pill.elsewhere { background: rgba(152,135,110,.16); color: #6d5f4c; }

/* --- Footer ---------------------------------------------------------------- */

.sitefoot { background: var(--cabbi-charcoal); color: #cfc9d6; margin-top: 60px; }
.sitefoot .wrap { padding-top: 40px; padding-bottom: 36px; }
.sitefoot a { color: #fff; }
.foot-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; align-items: start;
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 24px; } }
.sitefoot img.footmark { height: 40px; width: auto; opacity: .95; margin-bottom: 12px; }
.sitefoot h4 {
  color: #fff; font-size: 15px;
  margin: 0 0 10px;
}
.sitefoot ul { list-style: none; padding: 0; margin: 0; }
.sitefoot li { margin-bottom: 6px; font-size: 14.5px; }
.sitefoot p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.foot-legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 18px;
  font-size: 13px; color: #a49dae; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* ===========================================================================
   Landing page
   =========================================================================== */

/* A miscanthus field under the charcoal, dimmed most behind the text on the left.
   Phones get the 953px photo; wider screens the 1993px one. */
.home-hero {
  background:
    linear-gradient(90deg, rgba(64,58,72,.86) 0%, rgba(64,58,72,.72) 55%, rgba(64,58,72,.55) 100%),
    url("images/miscanthus-hero.0807d5ffd89b.jpg") center bottom / cover no-repeat,
    var(--cabbi-charcoal);
  color: #fff; position: relative; overflow: hidden;
}
@media (min-width: 700px) {
  .home-hero {
    background:
      linear-gradient(90deg, rgba(64,58,72,.86) 0%, rgba(64,58,72,.72) 55%, rgba(64,58,72,.55) 100%),
      url("images/miscanthus-hero-lg.14e4f6257962.jpg") center bottom / cover no-repeat,
      var(--cabbi-charcoal);
  }
}
.home-hero .wrap { position: relative; z-index: 2; padding-top: 78px; padding-bottom: 78px; }
.home-hero .hero-mark {
  position: absolute; right: -70px; top: -60px; width: 460px; opacity: .09;
  pointer-events: none; user-select: none; z-index: 1;
}
.home-hero h1 {
  color: #fff; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.06;
  letter-spacing: -.028em; margin: 0 0 18px; max-width: 17ch;
}
.home-hero h1 .hl { box-shadow: inset 0 -.28em 0 rgba(252,184,19,.55); padding: 0 3px; }
.home-hero .lede { color: #ddd8e4; font-size: 19px; max-width: 60ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
/* Signed in, the hero carries the featurette (templates/_featurette.html) beside its text. */
.home-hero .hero-row { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
.home-hero .hero-text { flex: 999 1 520px; min-width: 0; }
.home-hero .featurette { flex: 0 1 320px; box-shadow: none; border-color: transparent; }

/* Live figures, sitting across the hero's lower edge */
.figstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  margin: -38px 0 0; position: relative; z-index: 3;
}
.figstrip .fig { background: var(--card); padding: 18px 20px; }
a.figstrip-link { display: block; color: inherit; }
a.figstrip-link:hover { text-decoration: none; }
a.figstrip-link:hover .fig { background: #fcfbfa; }
a.figstrip-link:hover .fig .n { color: var(--cabbi-green); }
.figstrip .n {
  font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink); transition: color .12s;
}
.figstrip .l { font-size: 13.5px; color: var(--muted); }

.section { padding: 8px 0 6px; }
.section-head { max-width: 72ch; margin-bottom: 22px; }
.section-head p { color: var(--ink-soft); font-size: 17px; margin: 0; }

/* Research themes — the three CABBI pillars, using the center's own badges */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .themes { grid-template-columns: 1fr; } }
.theme {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; transition: box-shadow .14s, transform .14s;
}
.theme:hover { border-color: var(--ink); }
/* Each theme carries one of the mark's three colors as a rule across its top. */
.theme::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.theme.t-feedstock::before { background: var(--cabbi-green); }
.theme.t-sustainability::before { background: var(--cabbi-olive); }
.theme.t-conversion::before { background: var(--cabbi-gold); }

/* The integration claim, sitting under the row it describes. */
.themes-note {
  margin: 18px 0 0; padding: 16px 20px; font-size: 15px; color: var(--ink-soft);
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 0;
}
.themes-note strong { color: var(--ink); font-weight: 650; }
/* No nowrap here — site names run long ("Sustainable Advanced Bioeconomy
   Research Farm") and an unbreakable link overflows a phone viewport. */
.themes-note a { font-weight: 600; }
.theme img { width: 54px; height: 54px; margin-bottom: 14px; }
.theme h3 { font-size: 19px; margin-bottom: 8px; }
.theme .role { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; flex: 1; }
.theme ul { list-style: none; padding: 0; margin: 0 0 16px; }
.theme li {
  font-size: 14.5px; padding: 7px 0; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.theme li.plain { display: block; }
.theme li.plain b { display: block; font-weight: 650; }
.theme li.plain span { color: var(--muted); font-size: 13.5px; }
.theme .note {
  font-size: 13.5px; color: var(--muted); margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.theme .head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}

/* Capability cards */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.cap {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px; display: flex; flex-direction: column;
  transition: border-color .12s;
}
a.cap:hover { border-color: var(--ink); text-decoration: none; }
.cap .ico {
  width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center;
  margin-bottom: 14px; background: rgba(0,127,61,.13); color: var(--cabbi-green);
}
.cap .ico svg { width: 21px; height: 21px; stroke-width: 1.9; }
.cap.c-teal .ico { background: rgba(0,169,150,.18); color: var(--cabbi-teal-deep); }
.cap.c-gold .ico { background: rgba(252,184,19,.26); color: #96690a; }
.cap.c-olive .ico { background: rgba(142,173,62,.26); color: #55691f; }
.cap h3 { font-size: 17px; }
.cap p { color: var(--ink-soft); font-size: 14.8px; margin: 0 0 14px; flex: 1; }
.cap .cta { color: var(--cabbi-green); font-weight: 650; font-size: 14.5px; }

/* "Built for machine-readable discovery" — dark band, honest status pills */
.band {
  background: var(--bg-sunk); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin: 56px 0 0; padding: 56px 0;
}
.band-dark {
  background: var(--cabbi-charcoal);
  color: #fff; border: 0;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .section-head p, .band-dark .lede { color: #ddd8e4; }

.ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 16px; }
.ready .r {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 20px 21px;
}
.ready .r-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ready h3 { font-size: 16.5px; margin: 0; }
.ready p { color: #c9c3d2; font-size: 14.6px; margin: 0; }
.ready .pill.now      { background: rgba(59,164,89,.20);  color: #a8e6bd; }
.ready .pill.building { background: rgba(252,184,19,.18); color: var(--cabbi-gold-soft); }
.ready .pill.planned  { background: rgba(255,255,255,.10); color: #b0a9bb; }

/* Direct-query access — the collaborator-facing half of the dark band.
   Text left, a concrete snippet right, stacking on narrow screens. */
.access {
  margin-top: 22px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 26px 28px; align-items: start;
}
@media (max-width: 860px) { .access { grid-template-columns: 1fr; } }
.access h3 { font-size: 20px; margin: 6px 0 10px; letter-spacing: -.015em; }
.access p { color: #c9c3d2; font-size: 15px; margin: 0 0 12px; }
.access p:last-child { margin-bottom: 0; }
.access strong { color: #fff; font-weight: 650; }
.access .head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.access .head-row .eyebrow { margin: 0; }
.access code {
  font-family: var(--mono); font-size: .92em;
  background: rgba(255,255,255,.10); padding: 1px 5px; border-radius: 0;
}
.access-code {
  margin: 0; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius); padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.8px; line-height: 1.75; color: #ddd8e4;
}
.access-code .c { color: #9a93a6; }
.access-code .kw { color: var(--cabbi-sky); }
.access-code .st { color: #a8e6bd; }

/* Closing call to action */
.cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 44px 0 10px;
}
.cta-row h2 { margin: 0 0 6px; }
.cta-row p { margin: 0; color: var(--ink-soft); }

@media (max-width: 620px) {
  .brand img { height: 28px; }
  .brand .product { font-size: 15px; }
  .home-hero .lede { font-size: 17px; }
  .home-hero .wrap { padding-top: 52px; padding-bottom: 60px; }
  .home-hero .hero-mark { width: 300px; right: -80px; }
  .figstrip { margin-top: -20px; }
}

/* ===========================================================================
   Data entry — the event form on a unit page
   =========================================================================== */

.flash {
  padding: 12px 16px; border-radius: var(--radius-sm); margin: 0 0 16px;
  font-size: 15px; border: 1px solid transparent;
}
/* An action done ("Mappings saved") in light blue, so green stays for a state worth noticing (Ready, In the lake). */
.flash.success { background: #eaf3fb; border-color: #c4dbef; color: #1d4e78; }
.flash.error   { background: #fdeceb; border-color: #f3c6c2; color: #8c2f27; font-weight: 550; }
.flash.warning { background: #fff6e0; border-color: #f3dca0; color: #7a5600; }
.flash.info    { background: rgba(0,169,150,.08); border-color: rgba(0,169,150,.25); color: var(--cabbi-teal-deep); }

/* A deposit's or a file's state, said once at the top of its page (staging). */
.state { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 16px;
  border-radius: var(--radius-sm); border: 1.5px solid transparent; font-size: 15px; line-height: 1.45; }
.state b { font-weight: 700; }
.state a { font-weight: 600; }
.state code { font-size: 13px; }
.state-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 800; background: currentColor; }
.state-mark::before { content: ""; }
.state-info    { background: rgba(0,169,150,.07); border-color: rgba(0,169,150,.30); color: var(--cabbi-teal-deep); }
.state-busy    { background: rgba(0,169,150,.07); border-color: rgba(0,169,150,.30); color: var(--cabbi-teal-deep); }
.state-ready   { background: rgba(0,127,61,.07); border-color: rgba(0,127,61,.35); color: var(--green-dark); }
.state-success { background: rgba(0,127,61,.10); border-color: var(--cabbi-green); color: var(--green-dark); }
.state-warning { background: #fff6e0; border-color: #e3b84a; color: #7a5600; }
.state-error   { background: #fdeceb; border-color: #d9534f; color: #8c2f27; }
.state .state-mark { color: #fff; }
.release-guard-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.release-guard-form input[type="text"] { flex: 1 1 18rem; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }

/* The file review page (staging): the action bar's note, where the rows go, and the header rows. */
.action-note, .destination input, .destination select, .header-rows input, .dataset-mappings input,
.dataset-mappings select {
  font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); }
.action-note { field-sizing: content; min-width: 14rem; max-width: min(40rem, 100%); min-height: 2.15em; resize: none;
  line-height: 1.4; vertical-align: middle; }
/* A column's description in the mappings table: one line that grows as it is typed. */
textarea.col-desc { font: inherit; font-size: 13.5px; field-sizing: content; min-width: 14rem; max-width: 26rem;
  min-height: 2.15em; resize: vertical; line-height: 1.4; padding: 4px 8px; }
.destination, .header-rows { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 18px;
  font-size: 14.5px; }
.destination label { display: inline-flex; gap: 8px; align-items: center; }
.dataset-mappings { margin: 14px 0 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); }
.dataset-mappings form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 14.5px; }
.dataset-mappings form + form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.dataset-mappings label { display: inline-flex; gap: 8px; align-items: center; }
.dataset-mappings input[type=text] { flex: 1 1 16rem; min-width: 0; }
.dataset-mappings .muted { font-size: 13.5px; }
.destination-key { flex: 1 1 22rem; }
.destination-key input { flex: 1; min-width: 0; font-family: var(--mono); }
.destination-note { flex-basis: 100%; margin: 0; font-size: 13.5px; }
.header-rows input { width: 4.5em; }
.header-rows-note { font-size: 13.5px; }
.file-head { margin: -8px 0 18px; font-size: 14px; }
.file-head summary { cursor: pointer; color: var(--muted); }
table.grid.head-grid { width: auto; min-width: 0; font-size: 13px; }
table.grid.head-grid th, table.grid.head-grid td { padding: 3px 10px; white-space: nowrap; }
table.grid.head-grid th { color: var(--muted); font-weight: 500; text-align: right; }
.head-grid tr.is-names td { background: rgba(0,127,61,.10); font-weight: 700; color: var(--green-dark); }
.head-grid tr.is-dropped td { color: var(--muted); text-decoration: line-through; }
.head-key { font-size: 13px; margin: 6px 0 0; }
.head-key span { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 10px; vertical-align: -1px;
  border: 1px solid var(--line); border-radius: 0; }
.head-key span:first-child { margin-left: 0; }
.head-key-names { background: rgba(0,127,61,.25); }
.head-key-dropped { background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 5px); }
.state-info .state-mark, .state-busy .state-mark { background: var(--cabbi-teal-deep); }
.state-ready .state-mark, .state-success .state-mark { background: var(--cabbi-green); }
.state-warning .state-mark { background: #c98a06; }
.state-error .state-mark { background: #c0392b; }
.spin { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 3px solid rgba(0,169,150,.25);
  border-top-color: var(--cabbi-teal-deep); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Findings and validation lines: errors in red, warnings in amber, notes muted — never plain text. */
.findings { list-style: none; margin: 0 0 14px; padding: 0; }
.findings .finding { padding: 8px 12px; margin: 0 0 6px; border-radius: var(--radius-sm); border-left: 4px solid var(--line);
  background: var(--bg-sunk); font-size: 14.5px; }
.findings .finding b { font-size: 11px; }
.findings .finding.error   { background: #fdeceb; border-left-color: #c0392b; color: #8c2f27; }
.findings .finding.warning { background: #fff6e0; border-left-color: #e3b84a; color: #7a5600; }
.findings .finding.info    { color: var(--ink-soft); }
li.error, span.error, small.error { color: #b3392e; font-weight: 600; }

/* Staging status badges, by state. */
.badge.uploaded, .badge.submitted { background: rgba(0,169,150,.10); color: var(--cabbi-teal-deep); }
.badge.needs_review { background: #fff3d4; color: #8a6208; }
.badge.approved { background: #e3f1e8; color: #00622f; }
.badge.published, .badge.committed, .badge.released { background: var(--cabbi-green); color: #fff; }
.badge.rejected { background: #fdeceb; color: #8c2f27; }
/* Ready to commit: outlined with a check, not filled, so it never reads as Committed. */
.badge.ready-to-commit { background: #fff; color: var(--held-dark); box-shadow: inset 0 0 0 1.5px var(--held); }
.badge.ready-to-commit::before { content: "✓ "; }
/* Errors to fix before it can be committed: outlined in red with a mark, not filled like Rejected. */
.badge.needs-fixing { background: #fff; color: #8c2f27; box-shadow: inset 0 0 0 1.5px #c9584c; }
.badge.needs-fixing::before { content: "! "; font-weight: 800; }
.badge.deprecated { background: #f0edea; color: #5d5666; }

.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 22px;
}
.field-wide { grid-column: 1 / -1; }
.field label {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.field .req { color: #b3392e; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cabbi-green); outline-offset: 1px; }
.field .hint { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
/* A dataset's released versions under its row on the collection page, and the staff form that makes one. */
.ds-releases td { background: #fafaf8; font-size: 13.5px; }
/* Versions and "Release a version" under a wide table: held at the left edge of the
   scrolling table and no wider than the screen, so the button is never scrolled out of sight. */
.scroll-x:has(.ds-release-box) { container-type: inline-size; }   /* the box below sizes to what is in view */
.ds-release-box { position: sticky; left: 14px; max-width: min(760px, calc(100cqw - 28px)); overflow-x: auto; }
.ds-release-list { list-style: none; margin: 0; padding: 0; }
.ds-release-list li + li { margin-top: 4px; }
.ds-release-why::before { content: "· "; color: var(--muted); }
.ds-release-list + .ds-release-new { margin-top: 6px; }
.ds-release-new > summary { cursor: pointer; list-style: none; width: fit-content; }
.ds-release-new > summary::-webkit-details-marker { display: none; }
.ds-release-open { color: var(--green-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ds-release-new[open] .ds-release-open { color: var(--muted); }
.ds-release-note { margin: 6px 0 0; font-size: 12.5px; }
.ds-release-form { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; }
.ds-release-form input { flex: 1 1 240px; padding: 6px 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* "Cite" reads as a link at the end of the line; the citation opens on its own full line below. */
.ds-cite, .ds-cite summary { display: inline; }
.ds-cite summary { cursor: pointer; color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.ds-cite code { display: block; margin: 4px 0; white-space: normal; overflow-wrap: anywhere; }
/* The deposit form's + next to a picker, and the row it opens to add a plot or a line. */
.with-add { display: flex; gap: 8px; align-items: stretch; }
.with-add select { flex: 1 1 auto; min-width: 0; }
.btn-add { flex: 0 0 auto; padding: 0 14px; font-size: 20px; line-height: 1; }
.with-add .add-tip { display: inline-flex; flex: 0 0 auto; }
.with-add .add-tip > .btn-add { width: 100%; }
.btn-add:disabled { opacity: .45; cursor: not-allowed; }
.with-add .add-tip[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px;
  padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: #fafaf8; }
.add-row input { flex: 1 1 160px; }
.add-row select { flex: 0 1 180px; }
.add-row .err { flex-basis: 100%; margin: 0; }
.field .err, .values-table .err {
  font-size: 13px; color: #8c2f27; margin: 5px 0 0; font-weight: 550;
}

.values-table td { white-space: normal; vertical-align: top; }
.values-table select, .values-table input {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14.5px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: #fff;
}
.values-table select:focus, .values-table input:focus { outline: 2px solid var(--cabbi-green); outline-offset: 1px; }
.values-table th:nth-child(1) { width: 40%; }

.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; align-items: center; }

/* The entry point on the unit profile */
.section-actions {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* Raster catalog — the featured live preview above the table */
.raster-demo { margin: 4px 0 12px; }
.raster-demo-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.raster-demo-head .eyebrow { margin-bottom: 6px; }
.raster-demo-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px;
}
.raster-demo-foot label { display: inline-flex; align-items: center; gap: 8px; }
.raster-demo-foot input[type=range] { accent-color: var(--cabbi-green); }
table.grid tr.is-featured td { background: rgba(0,127,61,.045); }
table.grid tr.is-featured td:first-child { box-shadow: inset 3px 0 0 var(--cabbi-green); }

/* Sites list — the CONUS locator thumbnail beside each row */
.locator {
  width: 64px; height: 28px; display: block;
  overflow: visible;  /* a marker near the coast must not be clipped */
}
.locator use {
  fill: #efebe6; stroke: #b5aca1; stroke-width: 0.8px;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.locator circle {
  fill: var(--cabbi-green); stroke: #fff; stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
table.grid tr:hover .locator use { fill: #eae6e1; }
table.grid tr:hover .locator circle { fill: var(--cabbi-teal); }

/* ===========================================================================
   Map popups — shared by the geospatial dashboard and the profile maps
   ---------------------------------------------------------------------------
   These live here rather than in geo_dashboard.html because three maps now use
   the overlap-aware popup from static/core/featuremap.js.
   =========================================================================== */

.hitlist { margin: 0; padding: 0; list-style: none; min-width: 230px; }
.hitlist li { padding: 7px 0; border-top: 1px solid var(--line); }
.hitlist li:first-child { border-top: 0; }
.hitlist .lvl {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted);
}
.hitorg {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.hitlist .nm { font-weight: 640; }
.hitlist .meta { color: var(--muted); font-size: 12px; }
.hitlist .here {
  font-weight: 400; font-size: 11px;
  color: var(--cabbi-teal-deep); background: rgba(0,169,150,.12);
  border-radius: 0; padding: 1px 7px; margin-left: 4px;
}
.stacknote {
  background: rgba(252,184,19,.16); border: 1px solid rgba(252,184,19,.55);
  color: #7a5606; border-radius: 0; padding: 5px 8px; font-size: 12px; margin-bottom: 8px;
}

/* Funding attribution — DOE requires funded centers to acknowledge the award.
   The logo renders only when DOE_LOGO names a file that has been supplied;
   see core/context_processors.py. */
.foot-funding {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 22px;
}
.foot-funding .doe-mark {
  /* The reverse (all-white) lockup sits directly on the charcoal, matching the
     CABBI reverse mark above it — no white plate interrupting the dark ground.
     Swap DOE_LOGO to `doe-logo.png` (full colour) and this needs a white field
     again; see config settings. */
  height: 46px; width: auto; flex: none;
}
.foot-funding p {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: #b8b1c4;
  flex: 1 1 380px; max-width: 78ch;
}
.foot-funding strong { color: #fff; font-weight: 600; }
.foot-funding .award { font-family: var(--mono); font-size: .95em; color: #ddd8e4; }
.sitefoot .foot-legal { margin-top: 20px; }

/* Variable catalog — a method's formula sits under its name */
.mono-sm { font-family: var(--mono); font-size: 11.5px; }
table.grid td .mono-sm { white-space: normal; }

/* ===========================================================================
   Germplasm — lineage strip and construct cassette maps
   =========================================================================== */

.lineage {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px;
  align-items: center; margin: 18px 0 8px;
}
@media (max-width: 820px) {
  .lineage { grid-template-columns: 1fr; }
  .lin-arrow { transform: rotate(90deg); justify-self: center; }
}
.lin-label {
  font-size: 13.5px; font-weight: 700;
  color: var(--ink-soft); margin: 0 0 8px;
}
.lin-node {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px;
  color: var(--ink);
}
a.lin-node:hover { border-color: var(--cabbi-green); text-decoration: none; }
.lin-node.is-self { border-color: var(--cabbi-green); background: rgba(0,127,61,.05); }
.lin-node .mono { display: block; font-family: var(--mono); font-weight: 600; font-size: 14.5px; }
.lin-node .muted { font-size: 12.5px; }
.lin-node:last-child { margin-bottom: 0; }
.lin-empty { font-size: 14px; margin: 0; }
.lin-arrow { color: var(--muted); font-size: 20px; }

.relations { list-style: none; padding: 0; margin: 14px 0 0; }
.relations li {
  padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 15px;
  color: var(--ink-soft);
}
.relations .mono { font-family: var(--mono); font-weight: 600; color: var(--ink); }

/* A cassette reads left to right: promoter → gene → terminator. Not to scale —
   no element length is recorded, and drawing one would invent data. */
.cassettes { display: flex; flex-direction: column; gap: 12px; }
.cassette { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cas-seq {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  width: 18px; flex: none; text-align: right;
}
.cas-map { display: flex; align-items: stretch; gap: 3px; flex-wrap: wrap; }
.cas-part {
  font-family: var(--mono); font-size: 12.5px; font-weight: 550;
  padding: 8px 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid; white-space: nowrap;
}
/* Promoter drawn pointed, the conventional signal for direction of transcription. */
.cas-part.promoter {
  background: rgba(0,169,150,.12); border-color: rgba(0,169,150,.45);
  color: var(--cabbi-teal-deep); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  padding-right: 20px;
}
.cas-part.gene {
  background: rgba(0,127,61,.10); border-color: rgba(0,127,61,.40);
  color: var(--green-dark); font-weight: 700;
}
.cas-part.terminator {
  background: var(--bg-sunk); border-color: var(--line); color: var(--ink-soft);
  border-radius: 0;
}
.cas-tag {
  font-size: 10.5px; font-weight: 700;
  background: rgba(252,184,19,.30); color: #7a5606; padding: 1px 6px; border-radius: 0;
}
.cas-source { font-size: 13px; color: var(--muted); }

/* Variable detail — bar chart with SEM whiskers, drawn as plain SVG */
.chartwrap { padding: 18px 20px 10px; margin-bottom: 16px; }
.barchart { width: 100%; height: auto; display: block; overflow: visible; }
.barchart .grid { stroke: var(--line-soft); stroke-width: 1; }
.barchart .axis { stroke: var(--line); stroke-width: 1.5; }
.barchart .bar { fill: var(--cabbi-green); fill-opacity: .82; }
.barchart .bar:hover { fill-opacity: 1; }
.barchart .whisker { stroke: var(--ink-soft); stroke-width: 1.4; }
/* The published mean, so a bar landing on it reads as agreement at a glance. */
.barchart .claim { stroke: var(--cabbi-gold); stroke-width: 2.4; stroke-linecap: round; }
.barchart .tick { fill: var(--muted); font-size: 10.5px; text-anchor: end;
                  font-family: var(--mono); }
.barchart .barlabel { fill: var(--ink-soft); font-size: 12px; text-anchor: middle;
                      font-family: var(--sans); font-weight: 550; }

/* Unit hierarchy — indentation carries the depth, so the design reads at a glance */
.unit-tree td { vertical-align: middle; }
.unit-tree .tw {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: calc(var(--depth) * 22px);
}
.unit-tree .tw-elbow {
  width: 12px; height: 12px; flex: none;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
   margin-bottom: 5px;
}
.unit-tree tr.is-current td { background: rgba(0,127,61,.06); }
.unit-tree tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--cabbi-green); }

/* --- Splash / sign-in page (the front door for anyone not signed in) ----- */

.splash { position: relative; overflow: hidden; background: var(--bg); }
.splash-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 42%;
  background-size: cover; background-position: center;
}
/* the photo fades into the page on its left edge so the copy stays legible */
.splash-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(251,250,249,.55) 22%, rgba(251,250,249,0) 55%);
}
.splash-grid {
  position: relative; z-index: 2; display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px);
  align-items: center; padding-top: 64px; padding-bottom: 72px; min-height: 560px;
}
.splash-copy h1 { font-size: 40px; line-height: 1.12; margin: 6px 0 16px; max-width: 16ch; }
.splash-copy .lede { margin: 0 0 14px; max-width: 54ch; }
.splash-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px 22px; box-shadow: none;
}
.splash-card h2 { font-size: 22px; margin: 0 0 16px; }
.signin-cta { width: 100%; justify-content: center; font-size: 16px; padding: 13px 20px; }
.signin-or { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: 13.5px; margin: 14px 0 12px; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.signin-form .field { margin-bottom: 14px; }
.signin-hint { font-size: 13px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
/* "No account yet?" call to action under the sign-in form (sso/login.html). */
.signin-cta-box { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(252,184,19,.12); border: 1px solid rgba(252,184,19,.55); font-size: 13.5px; line-height: 1.5; }
.signin-cta-box p { margin: 0; color: var(--ink-soft); }
.signin-cta-box .signin-cta-title { margin-bottom: 3px; font-weight: 700; color: var(--ink); font-size: 14.5px; }
.signin-cta-box a { font-weight: 650; }
@media (max-width: 860px) {
  .splash-photo { position: static; width: auto; height: 200px; }
  .splash-photo::before { background: linear-gradient(180deg, rgba(251,250,249,0) 40%, var(--bg) 100%); }
  .splash-grid { grid-template-columns: 1fr; padding-top: 28px; min-height: 0; }
  .splash-copy h1 { font-size: 32px; }
}

/* --- Nav dropdown ("Quick links") ------------------------------------------ */

.navmenu { position: relative; }
.navmenu summary {
  list-style: none; cursor: pointer; color: var(--ink); font-weight: 550; font-size: 15px;
  padding: 7px 9px; border-radius: var(--radius-sm); white-space: nowrap; user-select: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.navmenu summary::-webkit-details-marker { display: none; }
/* A menu whose summary is itself a link: the word navigates, the caret beside it opens the list. */
.navmenu-linked summary a { color: inherit; text-decoration: none; }
.navmenu summary::marker { content: ""; }
.navmenu summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .65;
}
.navmenu[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.navmenu summary:hover, .navmenu[open] summary { color: var(--ink); box-shadow: inset 0 -3px 0 var(--line); }
.navmenu summary.is-active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--cabbi-green); }
.navmenu-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 200px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
}
.navmenu-list a { padding: 8px 12px; border-radius: 0; white-space: nowrap; }
.navmenu-sep { margin: 5px 8px; border: 0; border-top: 1px solid var(--line); }   /* a thin rule between groups */
/* Mint Your Metadata carries its mark (templates/_mint_icon.html) so it stands out in Quick links. */
.navmenu-list a.navlink-mint, .navmenu-list a.navlink-icon, .navmenu-list a.navlink-cta { display: flex; align-items: center; gap: 8px; }
.navmenu-list a.navlink-icon .icon { flex: none; color: var(--muted); }
.navmenu-list a.navlink-icon:hover .icon, .navmenu-list a.navlink-icon.is-active .icon { color: inherit; }
/* The map, highlighted in its menu: green, as the header's own map pill. */
.navmenu-list a.navlink-map, .navmenu-list a.navlink-map .icon { color: var(--cabbi-green); }
/* The menu's call to action, in the Hub's teal. */
.navmenu-list a.navlink-cta { color: var(--cabbi-teal-deep); background: rgba(0,169,150,.11); font-weight: 650; margin: 2px 0; }
.navmenu-list a.navlink-cta .icon { flex: none; }
.navmenu-list a.navlink-cta .cta-arrow { margin-left: auto; padding-left: 10px; transition: transform .15s; }
.navmenu-list a.navlink-cta:hover .cta-arrow { transform: translateX(3px); }
.navmenu-list a.navlink-cta:hover { background: rgba(0,169,150,.20); color: var(--cabbi-teal-deep); }
.navmenu-list a.navlink-cta.is-active { background: var(--cabbi-teal-deep); color: #fff; }
.mint-icon { flex: none; color: var(--cabbi-green); }
.navmenu-empty { padding: 8px 12px; color: var(--muted); font-size: 14px; white-space: nowrap; }

/* --- Quick-link pages -------------------------------------------------------- */

.links-panel { max-width: 76ch; margin-bottom: 22px; display: flex; gap: 14px; align-items: flex-start; }
.links-panel .card-logo { flex: none; }
.links-panel p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.links-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 0; }
.links-cards .card > p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 6px 0 10px; }
.links-cards .card-title { margin: 0; }
/* Each link card leads with a mark: a logo image, or a stroke icon in the brand green. */
.links-cards .card { display: grid; grid-template-columns: 48px 1fr; gap: 2px 14px; align-items: start; }
.links-cards .card-logo, .links-panel .card-logo { grid-row: 1 / span 2; width: 48px; height: 48px; display: flex; align-items: center;
  justify-content: center; border-radius: 0; background: rgba(0,127,61,.08); color: var(--cabbi-green); }
.links-cards .card-logo-img { background: #fff; border: 1px solid var(--line); }
.links-cards .card-logo img { max-width: 36px; max-height: 36px; }
.links-cards .card-logo-ink, .links-panel .card-logo-ink { color: var(--ink); background: var(--bg-sunk); }
.links-cards .card > p, .links-cards .card > .links-list { grid-column: 2; }

/* Quick links › Glossary (pages/glossary.html): letter index, then terms in two columns. */
.glossary-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.glossary-index a {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  font-weight: 700; color: var(--green); text-decoration: none;
}
.glossary-index a:hover { border-color: var(--green); }
.glossary {
  columns: 2 340px; column-gap: 48px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 32px 26px; margin-bottom: 40px;
}
.glossary-group { break-inside: avoid-column; }
.glossary-group h2 { margin: 20px 0 2px; font-size: 22px; color: var(--green); scroll-margin-top: 90px; }
.glossary-group dl { margin: 0; }
.glossary-group dt { font-weight: 700; margin-top: 14px; color: var(--ink); scroll-margin-top: 90px; }
.glossary-group dd { margin: 4px 0 0; line-height: 1.6; color: var(--ink-soft); }
.links-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.links-list li { padding-left: 14px; position: relative; font-size: 15px; line-height: 1.5; }
.links-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--cabbi-green); }
.timeline-sites { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.timeline-site h2 { font-size: 21px; margin: 0 0 12px; }
.timeline-site img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 14px; }
.station-kind { font-size: 20px; margin: 6px 0 12px; }

/* --- Error pages ------------------------------------------------------------ */

.errpage { max-width: 42rem; margin: 9vh auto 12vh; }
.errpage h1 { font-size: 34px; margin: 6px 0 12px; }
.errpage p:last-child { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* A field trial linked by its short description, its name underneath
   (studylog/_study_link.html — on trial lists and germplasm pages). */
.study-link-name { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.study-link-trial { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
/* A dataset's downloads under its name (core/_datasets_here.html): the small boxed action
   buttons of the Study Log tables, after a download icon. */
.get-it { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--ink-soft); }
.get-it .act { font-size: 12px; font-weight: 500; line-height: 1; padding: 3px 8px; text-decoration: none;
               border: 1px solid var(--ink-soft); color: var(--ink-soft); background: #fff; }
.get-it .act:hover { background: var(--ink); color: #fff; }
.study-link-trial a, table.grid .study-link-trial a:not([class]) { color: var(--muted); font-weight: 400; }
.study-link-trial a:hover, table.grid .study-link-trial a:not([class]):hover { color: var(--ink); }

/* Dataset detail (catalog/dataset_detail.html): compact, links first. */
.ds-compact .ds-eyebrow { margin: 0 0 2px; }
.ds-compact h1 { font-size: clamp(24px, 3vw, 31px); margin: 2px 0 6px; }
.ds-compact h2 { font-size: 18px; margin: 22px 0 8px; }
.ds-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
/* An external's link: the external chip's blue, so it reads as "at a repository", not the Hub. */
.btn-external { display: inline-flex; align-items: center; gap: 6px; background: var(--external); border-color: var(--external); color: #fff; }
.btn-external:hover { background: var(--external-dark); border-color: var(--external-dark); color: #fff; }
.ds-external-link { color: var(--external); }
.ds-external-link:hover { color: var(--external-dark); }
.ds-where-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ds-where-h .ds-chip { font-size: 13px; }
.ds-description { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); max-width: 80ch; margin: 0 0 8px; }
/* The facts as one wrapping line of "label value" pairs, not a grid of boxes: the header stays short. */
dl.ds-meta { display: flex; flex-wrap: wrap; gap: 3px 22px; padding: 8px 0; margin-bottom: 4px; border-top: 1px solid var(--line); }
dl.ds-meta > div { display: flex; flex-wrap: wrap; gap: 0 7px; align-items: baseline; min-width: 0; }
dl.ds-meta dt { font-size: 13px; }
dl.ds-meta dd { font-size: 14px; margin-top: 0; line-height: 1.45; }
dl.ds-meta .ds-wide { flex-basis: 100%; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-table th, .ds-table td { padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.ds-related { list-style: none; padding: 0; margin: 0; }
.ds-related li { padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.ds-related li:first-child { border-top: 0; }
.ds-type { display: inline-block; min-width: 7.5em; font-size: 12px; color: var(--muted); }
.ds-note { font-size: 13px; margin: 8px 0 0; }
.ds-pages { border-top: 1px solid var(--line-soft); padding-top: 8px; }
.ds-pages dd { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ds-page-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; color: var(--external); }   /* off the Hub: the external blue */
.ds-page-link:hover { color: var(--external-dark); }
.ds-ext { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-edit {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.ds-edit:hover { border-color: var(--green); color: var(--green-dark); }

/* Staff Site usage page (core/usage.py) */
.usage-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 8px 0 20px; }
.usage-totals .panel { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; }
.usage-n { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 28px; }
.usage-grid h2 { font-size: 19px; margin: 16px 0 8px; }
.usage-table td, .usage-table th { white-space: normal; padding: 7px 10px; font-size: 13.5px; }
.usage-table td small { display: block; font-size: 12px; }

/* Catalog staff pages (catalog/staff.py) */
/* Staff home: the service a group of lists is for (Bioenergy.org, OSTI, DOE CODE), to break up the page. */
.staff-service { display: flex; align-items: center; gap: 14px; margin: 36px 0 -6px; padding-top: 16px; border-top: 2px solid var(--line); }
.staff-service-logo { flex: 0 0 72px; display: flex; justify-content: center; }
.staff-service-logo img { display: block; }
.staff-service p { margin: 0; font-size: 14px; color: var(--muted); max-width: 72ch; }
.staff-service-name { font-weight: 700; margin-right: 4px; }
.staff-status-help { margin: -4px 0 12px; font-size: 13.5px; max-width: 72ch; }
.staff-status-help > summary { cursor: pointer; width: fit-content; color: var(--green-dark); font-weight: 600; }
.staff-status-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 8px 0; }
.staff-status-help dt { font-weight: 700; }
.staff-status-help dd { margin: 0; }
.staff-status-help p { margin: 8px 0 0; overflow-wrap: anywhere; }
.staff-count { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 15px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.staff-service-warning { margin: 12px 0 -6px 86px; max-width: 72ch; font-size: 14px; font-weight: 700; color: #b3392e; }
.staff-service-warning a { color: inherit; }
@media (max-width: 600px) { .staff-service-warning { margin-left: 0; } }
.staff-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 18px; }
.staff-actions form { margin: 0; }
.staff-search { margin: 0 0 0 auto; }
.staff-messages { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.staff-messages .flash { position: relative; margin: 0; padding-right: 44px; }
.staff-messages .flash.warning { background: rgba(252,184,19,.12); border-color: rgba(252,184,19,.5); color: #6b4e00; }
.staff-messages .flash.info { background: rgba(0,169,150,.08); border-color: rgba(0,169,150,.28); color: #155f56; }
.staff-messages .msg-close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 26px;
  height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.staff-messages .msg-close:hover { background: rgba(0,0,0,.08); }
.staff-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.staff-title-open { font-size: 15px; font-weight: 600; }
.staff-form { display: grid; gap: 14px; }
.staff-section { padding: 14px 18px; }
.staff-section h2 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; margin: 0 0 10px; }
.sec-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cabbi-green); color: #fff; font-size: 12.5px; font-weight: 700; }
.staff-form .field-grid { gap: 10px 16px; }
.staff-form .field input, .staff-form .field select, .staff-form .field textarea { padding: 7px 10px; font-size: 14px; }
.staff-form .field label { font-size: 13.5px; margin-bottom: 4px; }
/* A field that can't be changed (e.g. a released dataset's identifier, catalog/forms.py): look fixed. */
.staff-form .field input:disabled, .staff-form .field select:disabled, .staff-form .field textarea:disabled {
  background: var(--bg-sunk); color: var(--ink-soft); border-color: var(--line-soft); cursor: not-allowed; }
.staff-form .field-check label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; }
.staff-form .field-check input { width: auto; }
.staff-form .field-open { display: inline-block; margin-top: 5px; font-size: 13px; font-weight: 600; }
/* What needs fixing on a staff form: red and bold, with a red box round the field, so it can't be missed. */
.staff-form .err { margin: 5px 0 0; color: #c81e1e; font-size: 14px; font-weight: 700; }
.staff-form .has-error > label { color: #c81e1e; }
.staff-form .has-error input, .staff-form .has-error select, .staff-form .has-error textarea { border-color: #c81e1e; }
.staff-form .flash.error, .staff-messages .flash.error { color: #c81e1e; font-weight: 700; }
.staff-feedid { margin: 8px 0 0; font-size: 13.5px; }
.staff-note { margin: 6px 0 0; font-size: 13.5px; }
.staff-more { margin-top: 10px; }
.staff-more > summary { cursor: pointer; font-weight: 600; color: var(--green-dark); font-size: 14px; }
.staff-more[open] > summary { margin-bottom: 8px; }
details.panel.staff-more > summary { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ink); }
.staff-rows { margin: 6px 0; font-size: 13.5px; }
.staff-rows td { white-space: normal; padding: 6px 8px; }
.staff-rows input, .staff-rows select { width: 100%; padding: 5px 8px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.staff-rows input[type=checkbox] { width: auto; }
.staff-typeahead, .typeahead { position: relative; }   /* .typeahead/.suggest: the same widget outside the staff area */
.staff-pair { display: grid; grid-template-columns: 1fr 2fr; gap: 10px 16px; }   /* e.g. a page's title, then its URL */
@media (max-width: 640px) { .staff-pair { grid-template-columns: 1fr; } }
/* New deposit: the collection search is where to start, before naming a new one. */
.staff-start { padding: 14px 16px; background: rgba(0,127,61,.06); border: 2px solid var(--green);
  border-radius: var(--radius-sm); }
.staff-start input { border-color: var(--green); background: #fff; font-size: 15px; }
.staff-start input::placeholder { color: var(--ink-soft); }
.staff-start-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 0;
  background: var(--green); color: #fff; font-size: 11px; }
.staff-suggest, .suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px;
  list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: none; max-height: 260px; overflow: auto; }
.staff-suggest button, .suggest button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0;
  background: transparent; border-radius: 0; font: inherit; font-size: 14px; cursor: pointer; }
.staff-suggest button:hover, .staff-suggest button:focus, .suggest button:hover, .suggest button:focus { background: rgba(0,127,61,.08); }
.staff-checks > div, .staff-checks ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 14px; list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.staff-checks label { display: flex; gap: 6px; align-items: baseline; font-size: 13.5px; text-transform: none;
  letter-spacing: 0; font-weight: 400; color: var(--ink); }
.staff-filter { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; width: min(320px, 100%); }
.staff-table td { white-space: normal; font-size: 13.5px; }
/* A list of deposits: the date and feed stay on one line; Deposit takes up to half the table and wraps. */
table.grid.staff-deposits td { white-space: normal; }
/* The same widths in every list on the page, so Deposit starts at the same place in each. */
table.grid.staff-deposits th:nth-child(1), table.grid.staff-deposits td:nth-child(1) { width: 6rem; min-width: 6rem; box-sizing: border-box; }
table.grid.staff-deposits th:nth-child(2), table.grid.staff-deposits td:nth-child(2) { width: 7.5rem; min-width: 7.5rem; box-sizing: border-box; }
table.grid.staff-deposits td.staff-deposit-fixed { white-space: nowrap; }
table.grid.staff-deposits td.staff-deposit-title { width: 50%; min-width: 16rem; line-height: 1.4; }
.badge.feed-staging { background: #fff4d6; color: #7a5600; }
.badge.feed-released { background: #e3f1e8; color: #00622f; }
.badge.feed-withdrawn { background: #f0edea; color: #5d5666; }
/* Checkboxes as compact pills (topics, themes on the staff deposit page) */
.staff-pills > div { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-pills > div > div > label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px;
  border: 1px solid var(--line); border-radius: 0; background: #fff; cursor: pointer; font-size: 13.5px;
  font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.staff-pills > div > div > label:has(input:checked) { background: rgba(0,127,61,.10); border-color: rgba(0,127,61,.45);
  color: var(--green-dark); }
.staff-pills input[type=checkbox] { width: auto; margin: 0; accent-color: var(--cabbi-green); }
.feed-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 0; background: #e3f1e8;
  color: #00622f; font-size: 10px; vertical-align: 1px; }
.staff-summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 13.5px; }
.staff-summary dt { color: var(--muted); }
.staff-summary dd { margin: 0; }
.staff-summary .warn { color: #8c2f27; font-weight: 600; }
.staff-form .select2-container .select2-selection--multiple, .staff-form .select2-container .select2-selection--single {
  min-height: 36px; border-color: var(--line); border-radius: var(--radius-sm); }
/* Collapsible parts that hold key data (other identifiers, a new collection's people and
   classification): headed like the page's sections, so they read as part of it. */
.staff-more.staff-big { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.staff-more.staff-big > summary { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.staff-more.staff-big > summary::marker { color: var(--cabbi-green); }
.staff-newcoll { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.staff-newcoll h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.staff-meta { margin: -4px 0 12px; font-size: 13px; }
/* The deposit page's Save bar: pinned to the bottom of the window while the form scrolls. */
.staff-savebar { position: sticky; bottom: 0; z-index: 30; margin: 0; padding: 10px 14px;
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: none; backdrop-filter: blur(4px); }
.staff-savebar .btn-primary { min-width: 240px; justify-content: center; text-align: center; }
.staff-savebar .btn-check { margin-left: auto; }
.staff-savebar .btn-check-next { margin-left: 0; }
.btn-check { background: #fff3d4; color: #7a5600; border-color: #f3dca0; }
.btn-check:hover { background: #ffeab0; border-color: #e3b84a; }
.staff-top-actions { margin: 0 0 16px; }
/* A long list on the staff home (the OSTI ones): scrolls in its own box, headings kept in view. */
.staff-capped { max-height: 26rem; overflow-y: auto; border-bottom: 1px solid var(--line); background: var(--bg); }
.staff-capped thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
.staff-top-actions .staff-admin-link { margin-left: auto; }
/* A small (i) with an instant tooltip (staff field labels). */
.info-tip { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%;
  border: 1.5px solid currentColor; color: #7a7385; font: italic 700 10px/1 Georgia, serif; text-transform: none;
  cursor: help; vertical-align: 1px; }
.info-tip[data-tip]:hover::after, .info-tip[data-tip]:focus::after { white-space: normal; width: 300px;
  font: 400 12.5px/1.4 system-ui, sans-serif; text-transform: none; letter-spacing: 0; text-align: left; }

/* Password reset pages (templates/registration/) */
.account-page { display: flex; justify-content: center; padding: 48px 16px 64px; }
.account-card { width: 100%; max-width: 460px; }
.account-note { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.signin-forgot { display: block; text-align: right; font-size: 13px; margin: -6px 0 12px; }

/* A group's header row inside a table (facilities by organization). */
table.grid tr.group-row th { background: #f2f8f3; color: var(--ink); font-size: 13.5px; font-weight: 650;
  text-transform: none; letter-spacing: 0; padding: 8px 14px; border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line); }
table.grid tbody:first-of-type tr.group-row th { border-top: 0; }
table.grid tr.group-row th .muted { font-weight: 400; font-size: 12.5px; }

/* Lake previews (catalog/static/catalog/lake_preview.js): the Browse data page and a collection's page. */
.lake-preview-row > td { background: var(--bg-sunk); padding: 12px 14px 16px; white-space: normal; }
.lake-preview-row table.grid { font-size: 13px; margin-top: 8px; }
.lake-preview-row table.grid td { white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.lake-preview-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 13px; color: var(--muted); }
.lake-preview-head .mono-sm { color: var(--ink-soft); }
/* The preview's own width must not widen the table it sits in (its first column
   stretched to fit): it takes the row's width and scrolls inside it. */
.lake-preview-row > td > .scroll-x { contain: inline-size; }
.lake-close { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; cursor: pointer; }
.lake-close:hover, .lake-close:focus-visible { border-color: var(--ink-soft); }
.lake-toggle { font: inherit; font-size: 14px; font-weight: 600; color: var(--held); background: none; border: 0; padding: 0; cursor: pointer; }
.lake-toggle:hover { text-decoration: underline; }
.lake-toggle[aria-expanded="true"] { color: var(--ink); }
.lake-error { color: #8a2d1a; font-size: 14px; }
/* An asset with many items behind its one row (an image collection, a folder). */
table.grid tr.ds-many > td { background: color-mix(in srgb, var(--held-soft) 60%, var(--bg)); }
table.grid tr.ds-many > td:first-child { box-shadow: inset 3px 0 0 var(--held); padding-left: 13px; }
.ds-many-tag { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--held-dark);
  border: 1px solid var(--held-line); border-radius: 999px; padding: 0 7px; }
.lake-links { white-space: nowrap; font-size: 14px; }
.lake-links a { color: var(--held); font-weight: 600; }
.lake-links a:hover { color: var(--held-dark); }
.lake-links .lake-toggle { display: block; margin-bottom: 4px; }

/* A long page in numbered sections (the deposit form, a study, a collection): the
   number, heading and what the section is for on the left, its content on the right,
   each section under a charcoal rule. A section of wide tables (.record-wide) puts its
   content under the heading instead, at the page's full width. Stacks on a phone. The
   numbers count the sections on the page, so one that is left out leaves no gap. */
main { counter-reset: record; }
.record-section { counter-increment: record; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 14px 32px;
  padding: 30px 0; border-top: 1px solid var(--ink); }
.record-section.record-wide { grid-template-columns: minmax(0, 1fr); }
.record-head h2 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 24px; }
.record-num { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 400; color: var(--cabbi-green); }
.record-num::before { content: counter(record, decimal-leading-zero); }
.record-intro { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.record-wide .record-intro { max-width: 80ch; }
.record-cols .record-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
.record-cols .record-head h2 { grid-column: 1 / -1; }
.record-cols .record-intro { max-width: none; }
@media (max-width: 860px) { .record-cols .record-head { grid-template-columns: minmax(0, 1fr); } }
.record-body { min-width: 0; margin: 0; padding: 0; border: 0; }
.record-body > :first-child { margin-top: 0; }
.record-end { margin-top: 0; padding-top: 24px; border-top: 2px solid var(--ink); }   /* closes the last section */
@media (max-width: 860px) { .record-section { grid-template-columns: minmax(0, 1fr); padding: 24px 0; } }

/* The deposit form (staging/deposit_form.html): its sections' fields in a grid. */
/* Starting a collection or adding to one (the form's .adding, set by its script). */
.deposit-form .when-adding, .deposit-form.adding .when-new, .deposit-form.adding .new-only { display: none; }
.deposit-form.adding .when-adding { display: revert; }
.deposit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.deposit-grid .field-wide { grid-column: 1 / -1; }
.deposit-grid .field input, .deposit-grid .field select, .deposit-grid .field textarea { padding: 7px 10px; font-size: 14px; }
.deposit-grid #id_collection_choice, .deposit-grid #id_visibility, .deposit-grid #id_groups { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.deposit-grid #id_collection_choice label, .deposit-grid #id_visibility label, .deposit-grid #id_groups label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; }
.deposit-grid #id_collection_choice input, .deposit-grid #id_visibility input, .deposit-grid #id_groups input { width: auto; }
.deposit-form [hidden] { display: none !important; }

/* A place map (facility and unit pages): satellite by default, resizable by the grip
   under it (featuremap.js heightGrip; the same grip as the Study Log's form). */
.place-map { height: 380px; border: 1.5px solid var(--ink);
  position: relative; z-index: 0; }
.map-grip { height: 14px; margin-top: 2px; cursor: ns-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.map-grip::before { content: ""; width: 44px; height: 4px; border-radius: 0; background: var(--line);
  transition: background .15s; }
.map-grip:hover::before, .map-grip:focus-visible::before, .map-grip.is-dragging::before { background: var(--cabbi-green, #007f3d); }
.map-grip:focus-visible { outline: 2px solid var(--cabbi-green, #007f3d); outline-offset: 1px; }

/* The timeline (templates/core/timeline.html): a label column and a year track per row. */
.timeline-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 0 0 16px; padding: 12px 16px; }
.timeline-filters label { display: grid; gap: 4px; font-size: 14px; font-weight: 700;
  color: var(--ink-soft); }
.timeline-filters select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; min-width: 180px; max-width: 320px; }
.timeline { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  max-height: calc(100vh - 150px); overflow: auto; }   /* the year header stays put while the list scrolls */
.tl-head, .tl-row, .tl-place-name { display: grid; grid-template-columns: minmax(220px, 32%) 1fr; align-items: stretch; }
.tl-head { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); background: #faf9f6; }
.tl-head .tl-label { padding: 10px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.tl-head .tl-track { height: 34px; }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.tl-tick span { position: absolute; top: 9px; left: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tl-place-name { font-weight: 700; font-size: 14.5px; border-top: 1px solid var(--line); background: #fcfbf8;
  cursor: pointer; list-style: none; }
.tl-place-name::-webkit-details-marker { display: none; }
.tl-place-name .tl-label { padding: 9px 12px; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.tl-caret { display: inline-block; width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--muted);
  margin-right: 4px; transition: transform .15s; }
.tl-place[open] > .tl-place-name .tl-caret { transform: rotate(90deg) translateX(-2px); }
.tl-count { font-weight: 500; font-size: 13px; }
.tl-place:first-of-type > .tl-place-name { border-top: 0; }
.tl-seg-group { height: 6px; margin-top: -3px; opacity: .75; }
/* Units nest inside their facility: a lighter header, indented, their rows indented further. */
.tl-unit > .tl-unit-name { background: #fff; font-size: 14px; border-top: 1px dashed #ece9e2; }
.tl-unit > .tl-unit-name .tl-label { padding-left: 26px; }
.tl-row-unit .tl-label { padding-left: 40px; }
.tl-row-facility .tl-label { padding-left: 26px; }
.tl-row { border-top: 1px dashed #ece9e2; }
.tl-row .tl-label { padding: 7px 12px; font-size: 14px; line-height: 1.3; min-width: 0; }
.tl-row .tl-label a { overflow-wrap: anywhere; }
.tl-sub { font-size: 12px; }
.tl-track { position: relative; min-height: 34px; }
.tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid #f1efe9; }
.tl-span { position: absolute; top: 50%; height: 8px; margin-top: -4px; border: 1px solid #8fae96; border-radius: 0; background: rgba(0,127,61,.10); }
.tl-span.has-data { background: transparent; }
.tl-seg { position: absolute; top: 50%; height: 10px; margin-top: -5px; background: var(--cabbi-green); border-radius: 0; }
.tl-undated { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; }
.tl-legend { font-size: 13px; margin: 8px 0 0; display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.tl-key { display: inline-block; width: 26px; height: 10px; border-radius: 0; vertical-align: middle; }
.tl-key-seg { background: var(--cabbi-green); }
.tl-key-span { border: 1px solid #8fae96; background: rgba(0,127,61,.10); height: 8px; border-radius: 0; }
@media (max-width: 640px) { .tl-head, .tl-row { grid-template-columns: 1fr; } .tl-head .tl-track { display: none; } .tl-track { min-height: 24px; margin: 0 12px 8px; } }

/* The deposit form's file picker: picks add up; the list says what will go. */
.filepick { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: #fafaf8; }
.filepick.is-over { border-color: var(--cabbi-green); background: rgba(0,127,61,.06); }
.filepick input[type=file] { width: auto; padding: 4px 0; border: 0; background: transparent; }
.filepick-hint { font-size: 13px; margin: 4px 0 0; }
.file-list { list-style: none; margin: 8px 0 0; padding: 0; }
.file-list:empty { display: none; }
.file-list li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid #ece9e2; font-size: 14px; }
.file-list li:first-child { border-top: 0; }
.file-total { font-size: 13px; margin: 6px 0 0; color: var(--muted); }
.file-total.err { color: #8c2f27; font-weight: 600; }
/* The deposit's upload, under the buttons while it goes up. */
.upload-progress { margin: 10px 0 0; max-width: 560px; }
.upload-progress progress { width: 100%; height: 10px; accent-color: var(--cabbi-green); }
.upload-progress p { margin: 4px 0 0; font-size: 14px; }
.upload-note { font-size: 13px; }
.file-list li > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.file-remove { margin-left: auto; font: inherit; font-size: 13px; color: #8c2f27; background: transparent; border: 1px solid transparent;
  border-radius: 0; padding: 2px 8px; cursor: pointer; }
.file-remove:hover { border-color: #f3c6c2; background: #fdeceb; }
/* Discarding a deposit that went nowhere (staging/deposit_detail.html). */
.discard-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 22px 0 6px; font-size: 14px; }
.btn-danger { color: #8c2f27; border-color: #f3c6c2; }
.btn-danger:hover { color: #fff; background: #c0392b; border-color: #c0392b; }
.discard-note { font-size: 13px; margin: 22px 0 6px; }
/* The review queue, grouped by deposit. */
/* One deposit's set (its header row, then its files) reads as a group: one set blue (a blue header over
   light blue files), the next gray (a gray header over light gray files), and so on, with a firm line
   above each header where a new deposit starts. Blue, not green: green is ready and committed. */
.review-queue .queue-deposit th { text-align: left; background: #cfe2ee; font-weight: 700; padding: 10px 12px 6px;
                                  border-top: 2px solid #c3cdd4; }
.review-queue tbody.queue-set td { background: #eef5fa; }
.review-queue tbody.queue-set:nth-of-type(even) td { background: #f2f0ec; }
.review-queue tbody.queue-set:nth-of-type(even) .queue-deposit th { background: #ddd8cf; }
/* A deposit's facts (staging/deposit_detail.html): bold label, lighter value beside it, two pairs a row. */
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
           gap: 0 18px; margin: 0 0 18px; font-size: 14px; border-top: 1px solid var(--line); }
dl.facts dt, dl.facts dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
dl.facts dt { font-weight: 700; color: var(--ink); white-space: nowrap; }
dl.facts dd { color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 760px) { dl.facts { grid-template-columns: max-content minmax(0, 1fr); } }
.queue-empty { margin: 0 0 8px; padding: 12px 14px; border: 1px dashed var(--line); color: var(--ink-soft); font-size: 14.5px; }
.review-queue .queue-deposit th .muted { font-weight: 500; font-size: 13px; }
.review-queue td.queue-file { padding-left: 28px; }

/* A unit page's "Over time" chart (templates/core/unit_detail.html, static/core/unitchart.js). */
.unit-chart { margin: 18px 0; padding: 14px 18px 12px; }
.unit-chart h2 { margin: 0 0 6px; font-size: 18px; }
.chart-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.chart-picker .btn[aria-pressed="true"] { border-color: var(--cabbi-green); color: var(--cabbi-green); background: rgba(0,127,61,.08); }
.chart-box svg { width: 100%; height: auto; display: block; font-family: inherit; }
.chart-note { font-size: 13px; margin: 6px 0 0; }
.datasets-here .badge { margin-left: 4px; }

/* The depositor's column picker (staging/deposit_detail.html). */
.column-picker { margin: 18px 0; padding: 14px 18px 16px; }
.column-picker h2 { margin: 0 0 6px; font-size: 18px; }
.column-picker p { margin: 0 0 10px; font-size: 14px; max-width: 85ch; }
.column-picker-table td, .column-picker-table th { white-space: normal; padding: 6px 10px; font-size: 13.5px; vertical-align: middle; }
.column-picker-table select { padding: 5px 8px; font-size: 13.5px; min-width: 240px; }
.column-picker .btn { margin-top: 10px; }

/* A collapsed guidance panel (staging review page: "Curation guidance"). */
details.guidance { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
details.guidance > summary { cursor: pointer; padding: 8px 12px; font-weight: 650; font-size: 14px; color: var(--green-dark); }
details.guidance[open] > summary { border-bottom: 1px solid var(--line); }
.guidance-body { padding: 8px 14px 12px; font-size: 14px; max-width: 95ch; }
.guidance-body p { margin: 6px 0 10px; }
.guidance-body dl { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.guidance-body dt { font-weight: 650; }
.guidance-body dd { margin: 0; }
@media (max-width: 640px) { .guidance-body dl { grid-template-columns: 1fr; } .guidance-body dd { margin-bottom: 6px; } }

/* (i) beside a table heading: its explanation on hover or keyboard focus, shown
   below the heading (a scrolling table box would clip it above) and wrapped. */
.info-tip { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px;
  border: 1px solid currentColor; border-radius: 50%; font: italic 700 10px/1 Georgia, serif;
  color: var(--muted); cursor: help; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.info-tip:hover, .info-tip:focus-visible { color: var(--green-dark); outline: none; }
.info-tip[data-tip]:hover::after, .info-tip[data-tip]:focus::after {
  top: calc(100% + 6px); bottom: auto; left: 0; transform: none; width: 260px; white-space: normal;
  font: 500 12px/1.4 system-ui, sans-serif; font-style: normal; text-align: left; }

/* The hover tips drawn by core/tips.js: one floating label on <body>, above any scroll box.
   With the script on, the CSS ::after version is switched off so there is only one. */
.js-tips [data-tip]::after, .js-tips [data-tip]:hover::after, .js-tips [data-tip]:focus::after,
.js-tips [data-tip]:focus-within::after { content: none; display: none; }
.tip-pop { position: fixed; z-index: 2000; max-width: min(320px, calc(100vw - 16px)); padding: 7px 10px;
  border-radius: 0; background: var(--ink); color: #fff; font: 400 12.5px/1.45 system-ui, sans-serif;
  box-shadow: none; pointer-events: none; white-space: normal; }
.guidance-body table.date-formats { width: auto; margin: 6px 0 8px; font-size: 13px; }
.guidance-body table.date-formats th, .guidance-body table.date-formats td { padding: 4px 12px; white-space: nowrap; }

/* "Under development" on the data lake pages (templates/_lake_dev_banner.html): the same strip, colors
   and label as Mint your metadata's banner (pages/mint_your_metadata.html, .mym .devbanner). */
.dev-banner { background: #F7EDCF; color: #17221B; border-bottom: 1px solid #8A6100; font-size: 14px; line-height: 1.5; }
.dev-banner .wrap { padding-block: 10px; }
.dev-banner b { color: #8A6100; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }
.dev-banner a { color: #17221B; font-weight: 700; }

/* Mint your metadata: its heading styled and spaced like every other page's (eyebrow,
   h1, lede). Here rather than in the page, which is generated from its design
   artifact; `main.mym-main` outranks the page's own .mym rules. */
main.mym-main .mym header.top { padding-block: 30px 22px; }
main.mym-main .mym header.top .masthead-text { gap: 0; }
main.mym-main .mym header.top .eyebrow {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--cabbi-green); margin: 0 0 10px; }
main.mym-main .mym header.top h1 {
  font-family: var(--display); font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1.13;
  letter-spacing: -.018em; color: var(--cabbi-charcoal); margin: 6px 0 14px; }   /* the page redefines --ink */
main.mym-main .mym header.top p.sub { font-size: 18.5px; line-height: 1.62; color: var(--ink-soft); max-width: 68ch; }