/* Direction F (ADR 0054; spec/portal-direction-f.md). Loaded after site.css by _LayoutF only. It adds no colours
   and no typefaces: every value is a site.css token or a transparency of one. Admin pages render inside this chrome
   with site.css alone; everything here is prefixed f- so nothing classic changes. */

/* ---- Chrome ---- */
body.f { padding-bottom: 0; }
.f-top {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1.75rem; border-bottom: 1px solid var(--line); background: var(--bg);
}
.f-logo img { height: 24px; display: block; }
.f-divider { width: 1px; height: 22px; background: rgba(125, 165, 145, 0.25); }
.f-switch, .f-avatar { position: relative; }
.f-switch > summary, .f-avatar > summary { list-style: none; cursor: pointer; }
.f-switch > summary::-webkit-details-marker, .f-avatar > summary::-webkit-details-marker { display: none; }
.f-switch > summary {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.4rem;
  font-weight: 500; color: var(--text); border-radius: 8px;
}
.f-switch > summary:hover, .f-switch[open] > summary { background: var(--surface); }
.f-switch-title { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-menu { left: 0; right: auto; }
.f-menu-right { left: auto; right: 0; }
.f-topsearch {
  flex: 0 1 320px; display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.75rem;
  border-radius: 9px; border: 1px solid rgba(125, 165, 145, 0.2); background: var(--panel); color: var(--muted);
}
.f-topsearch input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; outline: none; }
.f-nav { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }
.f-nav a { padding: 0.6rem 0.75rem; border-radius: 8px; color: var(--muted); }
.f-nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.f-nav a.active { color: var(--green); font-weight: 500; }
.f-gear {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-button); color: var(--muted);
}
.f-gear:hover, .f-gear.active { color: var(--green); background: var(--surface); text-decoration: none; }
.f-initials {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid rgba(125, 165, 145, 0.22);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--green-soft);
}
.f-viewas {
  display: flex; align-items: center; gap: 0.75rem; justify-content: center; padding: 0.45rem 1rem;
  background: rgba(231, 178, 76, 0.12); border-bottom: 1px solid rgba(231, 178, 76, 0.35); color: var(--gold); font-size: 0.9rem;
}
.f-main { max-width: 1200px; margin: 0 auto; padding: 2rem 1.75rem 3.5rem; }
.f-bottom { display: none; }

/* ---- Shared bits ---- */
.f-muted { color: var(--muted); }
.f-small { font-size: 0.82rem; }
.f-bad { color: var(--red-soft); }
.f-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.1rem 1.25rem; }
.f-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.f-sechead h2, .f-card h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0; }
.f-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.f-actions .inline-form { margin: 0; }
.f .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.f .btn.small { min-height: 0; }

/* ---- Home ---- */
.f-ask { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; margin-bottom: 1.6rem; }
.f-ask h1 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.f-ask p { margin: 0; }
.f-bigsearch { display: flex; gap: 0.5rem; width: 100%; max-width: 720px; }
.f-bigsearch input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 1.1rem; border-radius: 12px;
  border: 1px solid rgba(125, 165, 145, 0.3); background: var(--panel); color: var(--text); font: inherit; font-size: 1rem;
}
.f-bigsearch .btn { min-height: 52px; padding: 0 1.4rem; }
.f-offer { margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; }
.f-offer p { margin: 0; }
.f-needs { margin-bottom: 1.6rem; }
.f-needgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.f-need {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0.9rem; align-items: start; color: inherit;
  background: var(--panel); border: 1px solid rgba(229, 72, 77, 0.4); border-radius: 14px; padding: 0.9rem; min-width: 0;
}
.f-need:hover { text-decoration: none; border-color: var(--red); }
.f-need-cover { width: 72px; height: 72px; border-radius: 9px; object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.f-need-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.f-need-title { font-weight: 500; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.f-tabs {
  display: flex; gap: 0.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.f-tabs a { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 9px; color: var(--muted); }
.f-tabs a:hover { color: var(--text); text-decoration: none; }
.f-tabs a.active { background: var(--surface); color: var(--text); }
.f-tabs .n, .f-facets .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.f-tabs a.active .n { color: var(--green-soft); }

.f-browse { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.f-facets { flex: 0 0 200px; display: flex; flex-direction: column; }
.f-facets h3 {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 1rem 0 0.25rem;
}
.f-facets h3:first-child { margin-top: 0.25rem; }
.f-facets a { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.4rem; border-radius: 6px; color: var(--muted); font-size: 0.85rem; }
.f-facets a::before {
  content: ""; width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(144, 168, 155, 0.5); flex: none;
}
.f-facets a.active { color: var(--text); }
.f-facets a.active::before { background: var(--green); border-color: var(--green); }
.f-facets a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.f-facets .n { margin-left: auto; }

.f-gridwrap { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.f-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.f-tile { display: flex; flex-direction: column; gap: 0.45rem; color: inherit; min-width: 0; }
.f-tile:hover { text-decoration: none; }
.f-tile:hover .f-cover { border-color: rgba(125, 165, 145, 0.45); }
.f-cover {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); display: block;
}
.f-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-badge {
  position: absolute; left: 0.6rem; bottom: 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 999px; max-width: calc(100% - 1.2rem);
  background: rgba(5, 12, 10, 0.88); color: var(--text); border: 1px solid rgba(125, 165, 145, 0.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.f-badge .d { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-dim); flex: none; }
.f-badge.live { color: var(--green-soft); } .f-badge.live .d { background: var(--green); }
.f-badge.bad { color: var(--red-soft); border-color: rgba(229, 72, 77, 0.5); } .f-badge.bad .d { background: var(--red); }
.f-badge.down .d { background: var(--muted); }
.f-badge.progress { color: var(--cyan-soft); } .f-badge.progress .d { background: var(--cyan); }
.f-tile-title { font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-tile-artist { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1em; }
.f-pips { display: flex; gap: 3px; }
.f-pips span { width: 16px; height: 4px; border-radius: 2px; background: rgba(144, 168, 155, 0.3); }
.f-pips .l { background: var(--green); } .f-pips .b { background: var(--red); }
.f-pips .x { background: var(--muted-dim); } .f-pips .s { background: var(--cyan); }
.f-more { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
.f-empty { text-align: center; }

/* ---- Release ---- */
.f-hero { display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.5rem; }
.f-hero-cover { width: 200px; height: 200px; flex: none; border-radius: 12px; object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.f-hero-main { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.f-crumb { font-size: 0.82rem; color: var(--muted); }
.f-hero h1 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.f-hero .f-artist { margin: 0.35rem 0 0; font-size: 1.05rem; color: var(--muted); }
.f-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.9rem; font-size: 0.85rem; margin: 0; }
.f-kv dt { color: var(--muted); margin: 0; }
.f-kv dd { margin: 0; overflow-wrap: anywhere; }
.f-where { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 0.5rem; }
.f-where h2, .f-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.15rem;
}
.f-pill {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 12px; color: inherit;
  background: var(--panel); border: 1px solid var(--line); min-width: 0;
}
.f-pill:hover { text-decoration: none; border-color: rgba(125, 165, 145, 0.45); }
.f-pill .d { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-dim); flex: none; }
.f-pill .nm { font-weight: 500; }
.f-pill .s { color: var(--muted); font-size: 0.8rem; }
.f-pill.live { border-color: rgba(35, 217, 124, 0.35); } .f-pill.live .d { background: var(--green); }
.f-pill.bad { border-color: rgba(229, 72, 77, 0.45); } .f-pill.bad .d { background: var(--red); } .f-pill.bad .s { color: var(--red-soft); }
.f-pill.progress .d { background: var(--cyan); }
.f-pill.down .d { background: var(--muted); }

.f-body { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.f-journeys { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.f-side { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.f-catalog-head { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 0.5rem 0 0; }
.f-dsp { display: flex; flex-direction: column; gap: 0.9rem; scroll-margin-top: 1rem; }
.f-dsp.bad { border-color: rgba(229, 72, 77, 0.4); }
.f-dsp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.f-dsp-head h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0; }
.f-dsp p { margin: 0; }
.f-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f-step { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; position: relative; padding: 0 0.35rem; }
.f-step .k {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(144, 168, 155, 0.45); background: var(--panel);
  display: flex; align-items: center; justify-content: center; color: var(--muted); position: relative; z-index: 1; font-size: 0.75rem;
}
.f-step .t { font-size: 0.82rem; color: var(--muted); }
.f-step .w { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); }
.f-step.done .k { border-color: var(--green); background: var(--green); color: var(--on-green); }
.f-step.bad .k { border-color: var(--red); background: var(--red); color: var(--text); }
.f-step.down .k { border-color: var(--muted); background: var(--muted); color: var(--bg); }
.f-step.done .t, .f-step.bad .t, .f-step.down .t { color: var(--text); }
.f-step.bad .w { color: var(--red-soft); }
.f-step:not(:first-child)::before {
  content: ""; position: absolute; left: -50%; right: 50%; top: 12px; height: 2px; background: rgba(144, 168, 155, 0.3);
}
.f-step.done:not(:first-child)::before { background: var(--green); }
.f-step.bad:not(:first-child)::before { background: linear-gradient(90deg, var(--green), var(--red)); }
.f-step.down:not(:first-child)::before { background: var(--muted); }
.f-more-dsps > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-family: var(--font-display); font-weight: 600;
}
.f-more-dsps > summary::-webkit-details-marker { display: none; }
.f-more-dsps[open] > summary { margin-bottom: 1rem; }
.f-more-dsps .f-journeys { gap: 1rem; }
.f-ev { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 0.9rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(125, 165, 145, 0.1); font-size: 0.85rem; }
.f-ev:last-of-type { border-bottom: 0; }
.f-ev time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.f-ev.success span { color: var(--green-soft); } .f-ev.failure span { color: var(--red-soft); } .f-ev.warning span { color: var(--gold-soft); }
.f-side h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; }
.f-tracks { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0.3rem 0.6rem; font-size: 0.85rem; }
.f-tracks .mono { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.f-files { display: flex; flex-direction: column; gap: 0.4rem; }
.f-files div { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; }
.f-files a { font-family: var(--font-mono); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.f-files span { color: var(--muted); white-space: nowrap; }
.mono { font-family: var(--font-mono); }

/* ---- Phone (≤ 767 px): nav to a bottom bar, two-column grid, the hero stacks ---- */
@media (max-width: 767px) {
  .f-top { padding: 0.75rem 1rem; gap: 0.6rem; }
  .f-nav, .f-topsearch, .f-divider { display: none; }
  .f-switch { margin-left: auto; }
  .f-main { padding: 1.25rem 1rem 6rem; }
  .f-bottom {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--panel); border-top: 1px solid var(--line); padding: 0.25rem 0.5rem 0.6rem;
  }
  .f-bottom a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    min-height: 44px; color: var(--muted); font-size: 0.7rem;
  }
  .f-bottom a.active { color: var(--green); }
  .f-bottom a:hover { text-decoration: none; }
  .f-ask h1 { font-size: 1.5rem; }
  .f-needgrid { grid-template-columns: minmax(0, 1fr); }
  .f-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .f-tabs a { white-space: nowrap; }
  .f-facets { flex-basis: 100%; }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 0.75rem; }
  .f-hero-cover { width: 140px; height: 140px; }
  .f-where, .f-side { max-width: none; }
  .f-step .t { font-size: 0.72rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f-needgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Catalogs & Reports (ADR 0054, increment 3) ---- */
.f-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.f-pagehead h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin: 0; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.f-pagehead > div { min-width: 0; }
.f-pagehead p { margin: 0.4rem 0 0; max-width: 760px; }
.f-scope { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.f-scope select { min-height: 40px; width: auto; min-width: 12rem; max-width: 18rem; }
.f-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; padding: 0.25rem 0.55rem; border-radius: 999px;
  background: var(--panel); border: 1px solid rgba(125, 165, 145, 0.2); color: var(--muted);
}
.f-chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-dim); }
.f-chip.live { color: var(--green-soft); } .f-chip.live .d { background: var(--green); }
.f-catrow { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.5rem; }
.f-catcard { flex: 999 1 560px; min-width: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.f-catmark {
  width: 120px; height: 120px; flex: none; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  color: rgba(144, 168, 155, 0.3);
}
.f-catmain { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.f-cattitle { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.f-cattitle h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 0; }
.f-catside { flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.f-panel { display: flex; flex-direction: column; gap: 0.6rem; }
.f-panel h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0; }
.f-panel p { margin: 0; }
.f-panel-sep { height: 1px; background: var(--line); margin: 0.35rem 0; }
.f-panel-sep:first-child { display: none; }
.f-inline { display: flex; gap: 0.5rem; margin: 0; }
.f-field {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 0.75rem; border-radius: 9px; border: 1px solid rgba(125, 165, 145, 0.22);
  background: var(--bg); color: var(--text); font: inherit;
}
.f-headline { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.25rem; }
.f-bigline { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; font-size: 1rem; }
.f-big { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.f-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.f-bar.small { height: 10px; border-radius: 5px; }
.f-bar > div { min-width: 4px; }
.f-bar .seg.live { background: var(--green); } .f-bar .seg.down { background: var(--muted-dim); }
.f-bar .seg.bad { background: var(--red); } .f-bar .seg.progress { background: var(--cyan); }
.f-bar .seg.gold { background: var(--gold); }
.f-bar .seg.ready { background: var(--surface); border: 1px dashed rgba(144, 168, 155, 0.45); }
.f-bar .seg.other { background: var(--surface); }
.f-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.85rem; }
.f-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.f-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.f-dspgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.f-dspcard { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.f-dspcard p { margin: 0; }
.f-share { color: var(--text); }
.f-share.bad { color: var(--red-soft); }
.f-share:hover { color: var(--green-soft); }
.f-table { margin-bottom: 1.25rem; padding: 0; overflow: hidden; }
.f-table h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0; padding: 0.9rem 1.1rem 0.25rem; }
.f-table .tablewrap { overflow-x: auto; }
.f-table th:first-child, .f-table td:first-child { padding-left: 1.1rem; }
.f-table th:last-child, .f-table td:last-child { padding-right: 1.1rem; }
@media (max-width: 767px) {
  .f-dspgrid { grid-template-columns: minmax(0, 1fr); }
  .f-catmark { width: 72px; height: 72px; font-size: 1.4rem; }
  .f-catside { max-width: none; }
}

/* ---- Send a batch (ADR 0054, increment 2) ---- */
.f-accent { color: var(--green); }
.f-pagehead h1 .f-small { margin-left: 0.5rem; font-weight: 400; }
.f-tabs .f-tabs-cta { margin-left: auto; min-height: 40px; }
.f-wiz { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
.f-wiz li { display: flex; align-items: center; gap: 0.5rem; }
.f-wiz li + li::before { content: ""; width: 40px; height: 1.5px; background: rgba(144, 168, 155, 0.3); margin-right: 0.6rem; }
.f-wiz .k {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(144, 168, 155, 0.45);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.7rem;
}
.f-wiz li.on { color: var(--text); } .f-wiz li.on .k { background: var(--green); border-color: var(--green); color: var(--on-green); }
.f-wiz li.done .k { border-color: var(--green); color: var(--green); }
.f-lead { margin: 0 0 1.2rem; max-width: 820px; }
.f-sendform { padding-bottom: 5.5rem; }
.f-sendrail { gap: 0.15rem; }
.f-pickbtn {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 0.45rem 0.4rem; border-radius: 6px; color: var(--muted); font: inherit; font-size: 0.85rem;
}
.f-pickbtn::before { content: ""; width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(144, 168, 155, 0.5); flex: none; }
.f-pickbtn:hover { background: var(--surface); color: var(--text); }
.f-pickbtn.active { color: var(--text); } .f-pickbtn.active::before { background: var(--green); border-color: var(--green); }
.f-pickbtn .n { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.f-paste {
  width: 100%; min-height: 84px; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid rgba(125, 165, 145, 0.22);
  background: var(--panel); color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; resize: vertical;
}
.f-pickable { cursor: pointer; }
.f-pickable .f-cover input { position: absolute; top: 0.6rem; left: 0.6rem; width: 22px; height: 22px; margin: 0; accent-color: var(--green); z-index: 1; }
.f-pickable.sel .f-cover { border-color: var(--green); box-shadow: 0 0 0 2px rgba(35, 217, 124, 0.35); }
.f-badge.ok { color: var(--green-soft); } .f-badge.ok .d { background: var(--green); }
.f-badge.warn { color: var(--gold-soft); } .f-badge.warn .d { background: var(--gold); }
.f-sendbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel);
  border-top: 1px solid rgba(125, 165, 145, 0.2); padding: 0.8rem 1.75rem; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.4);
}
.f-sendbar-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.f-sendbar .btn:disabled { opacity: 0.45; cursor: default; }
.f-picklist { display: flex; flex-direction: column; gap: 0.5rem; }
.f-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 12px;
  color: inherit; background: var(--bg); border: 1px solid var(--line);
}
.f-pick:hover { text-decoration: none; border-color: rgba(125, 165, 145, 0.45); }
.f-pick .nm { font-weight: 500; }
.f-group { margin-bottom: 1rem; }
.f-group.held { border-color: rgba(229, 72, 77, 0.4); }
.f-group.warning { border-color: rgba(231, 178, 76, 0.4); }
.f-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.f-item { display: grid; grid-template-columns: 22px 56px minmax(0, 1fr); gap: 0.8rem; align-items: start; padding: 0.7rem 0; border-top: 1px solid rgba(125, 165, 145, 0.1); }
.f-item:first-child { border-top: 0; }
.f-item input[type="checkbox"] { width: 22px; height: 22px; margin: 0.9rem 0 0; accent-color: var(--green); }
.f-item-spacer { width: 22px; }
.f-item-cover { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.f-item-body { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.f-item-title { color: var(--text); font-weight: 500; }
.f-gold { color: var(--gold-soft); }
.f-live { color: var(--green-soft); }
.f-findings summary { cursor: pointer; color: var(--muted); }
.f-findings ul { margin: 0.3rem 0 0; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.f-force { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.85rem; color: var(--red-soft); text-transform: none; letter-spacing: 0; }
.f-force input { width: 16px; height: 16px; margin: 0; accent-color: var(--red); }
@media (max-width: 767px) {
  .f-wiz li + li::before { width: 16px; }
  .f-sendbar { padding: 0.7rem 1rem 4.6rem; }
  .f-sendform { padding-bottom: 9rem; }
}
/* The grid tile is a <label> so a tap anywhere selects it; undo site.css's form-label typography on it. */
.f-pickable { display: flex; text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; margin: 0; }

/* ---- Settings (ADR 0054, increment 4) ---- */
.f-setgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.f-grp { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.f-grp h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0; padding: 0.9rem 1.1rem 0.4rem; display: flex; align-items: center; gap: 0.6rem; }
.f-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1.1rem; border-top: 1px solid var(--line); color: inherit; }
a.f-row:hover { background: var(--surface); text-decoration: none; }
.f-row .t { font-weight: 500; }
.f-row .s { color: var(--muted); font-size: 0.82rem; }
.f-row .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.f-adm {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-soft);
  border: 1px solid rgba(231, 178, 76, 0.45); border-radius: 5px; padding: 0.15rem 0.4rem; white-space: nowrap;
}
@media (max-width: 767px) {
  .f-setgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phone: the facet rail folds behind a disclosure (CSS only; the hidden checkbox is the state) ---- */
.f-narrow-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.f-narrow { display: none; }
@media (max-width: 767px) {
  .f-narrow {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.9rem; margin: 0; width: max-content;
    border-radius: 999px; border: 1px solid rgba(125, 165, 145, 0.3); background: var(--panel); color: var(--text);
    font: inherit; font-size: 0.85rem; text-transform: none; letter-spacing: 0; cursor: pointer;
  }
  .f-narrow::after { content: "▾"; color: var(--muted); }
  .f-narrow-toggle:checked ~ .f-narrow::after { content: "▴"; }
  .f-narrow-toggle:focus-visible ~ .f-narrow { outline: 2px solid var(--green); outline-offset: 2px; }
  .f-facets { display: none; }
  .f-narrow-toggle:checked ~ .f-facets { display: flex; }
}

/* ---- Increment 5: DSP history, drill-down list, UPC / import lists, people, batches ---- */
.f-gold { color: var(--gold-soft); }
.f-chip.bad { color: var(--red-soft); border-color: rgba(229, 72, 77, 0.45); } .f-chip.bad .d { background: var(--red); }
.f-chip.warn { color: var(--gold-soft); border-color: rgba(231, 178, 76, 0.45); } .f-chip.warn .d { background: var(--gold); }
.f-chip.info .d { background: var(--cyan); }
.f-chip.down { color: var(--muted-dim); } .f-chip.down .d { background: var(--muted); }
.f-verdicts { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: 0.88rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.2rem; }
.f-finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.f-finding > span:last-child { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.f-finding .m { overflow-wrap: anywhere; }
.f-run { border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.4rem; }
.f-run + .f-run, .f-run + .timeline, .timeline + .f-run { margin-top: 0.7rem; }
.f-run-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.f-run-head .chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; line-height: 1.4; }
.f-run .timeline.activity { font-size: 0.85rem; }
.f-run .f-files { font-size: 0.8rem; }
.f-card .timeline.activity { font-size: 0.85rem; }
.f-side .f-table h2 { padding-left: 1.1rem; }
.f-side .f-table p { padding: 0; }
@media (max-width: 767px) {
  .timeline.activity li { grid-template-columns: 6.5rem 0.8rem 1fr; }
}
.f-block { margin-bottom: 1.25rem; }
.f-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.8rem; margin-bottom: 1.25rem; }
.f-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.f-stat .l { font-size: 0.8rem; color: var(--muted); }
.f-stat .v { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.f-stat .s { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }
.f-stat.warn { border-color: rgba(231, 178, 76, 0.4); } .f-stat.warn .v { color: var(--gold-soft); }
.f-form label { display: block; margin: 0.8rem 0 0.3rem; }
.f-form label:first-child { margin-top: 0; }
.f-form .f-field { width: 100%; box-sizing: border-box; }
.f-form select.f-field { appearance: auto; }
.f-area {
  width: 100%; box-sizing: border-box; min-height: 8rem; padding: 0.7rem 0.8rem; border-radius: 9px; resize: vertical;
  border: 1px solid rgba(125, 165, 145, 0.22); background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 0.85rem;
}
.f-formrow { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.f-formrow label { margin: 0; color: var(--muted); font-size: 0.82rem; text-transform: none; letter-spacing: 0; }
.f-formrow .f-field { width: auto; }
.f-details { margin-top: 0.6rem; }
.f-details > summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.f-pager { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1.1rem; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); }
.f-pager .inline-form { margin: 0; }
.f-table .f-sechead h2 { padding: 0; }
.f-grp-wide { grid-column: 1 / -1; }
.f-people .f-formcard { max-width: 560px; }
.f-rowchips { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.f-rowchips .inline-form { margin: 0; }
.f-rowlist .f-row { padding-left: 0; padding-right: 0; }
.f-rowlist .f-row:first-child { border-top: 0; }
.f-formcard .f-kv { font-size: 0.9rem; }
@media (max-width: 767px) {
  .f-rowchips { justify-content: flex-start; }
  .f-row { grid-template-columns: minmax(0, 1fr); }
  .f-row .n { white-space: normal; }
}

/* ---- Support (ADR 0054, increment 6) ---- */
.f-chip.new { color: var(--cyan-soft); } .f-chip.new .d { background: var(--cyan); }
.f-chip.proc { color: var(--gold-soft); } .f-chip.proc .d { background: var(--gold); }
.f-chip.wait { color: var(--gold-soft); border-style: dashed; } .f-chip.wait .d { background: var(--gold); }
.f-chip.done { color: var(--green-soft); } .f-chip.done .d { background: var(--green); }
.f-chip.cat { font-size: 0.7rem; }
.f-tkbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.f-tkbar .f-tabs { margin: 0; }
.f-tkbar form { margin: 0; }
.f-filters { margin-bottom: 1rem; }
.f-filters > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.9rem;
  border-radius: 999px; border: 1px solid rgba(125, 165, 145, 0.3); background: var(--panel); color: var(--text); font-size: 0.85rem;
}
.f-filters > summary::-webkit-details-marker { display: none; }
.f-filters > summary::after { content: "▾"; color: var(--muted); }
.f-filters[open] > summary::after { content: "▴"; }
.f-filters .f-formrow { margin-top: 0.75rem; }
.f-filters .f-formrow .f-field { min-width: 9rem; }
.f-tkrow .t .no { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-right: 0.3rem; }
.f-tkrow.unread .t::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 0.5rem; vertical-align: middle; }
.f-tkrow.unread .t { font-weight: 600; }
.f-grp-dim { opacity: 0.85; }
.f-grp-dim h2 { color: var(--muted); font-size: 0.95rem; }
.f-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.f-choice {
  display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid rgba(125, 165, 145, 0.2);
  background: var(--bg); cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--text); min-height: 44px;
}
.f-choice:has(input:checked) { border-color: rgba(35, 217, 124, 0.55); background: var(--surface); }
.f-choice input { margin: 0.25rem 0 0; accent-color: var(--green); flex: none; }
.f-choice strong { display: block; font-weight: 500; }
.f-choice .help { color: var(--muted); font-size: 0.8rem; }
.f-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.f-pills.col { flex-direction: column; align-items: stretch; }
.f-pill-pick {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0 0.9rem; border-radius: 999px;
  border: 1px solid rgba(125, 165, 145, 0.25); background: var(--bg); color: var(--muted); cursor: pointer; margin: 0;
  text-transform: none; letter-spacing: 0; font-size: 0.88rem;
}
.f-pill-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-pill-pick:has(input:checked) { border-color: rgba(35, 217, 124, 0.55); background: var(--surface); color: var(--text); }
.f-pill-pick:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.f-pill-pick .d { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-dim); flex: none; }
.f-pill-pick.warn .d { background: var(--gold); } .f-pill-pick.bad .d { background: var(--red); }
.f-pill-pick .help { color: var(--muted); font-size: 0.8rem; }
.f-tkgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.f-tkgrid > div, .f-tkgrid > aside { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.f-tkgrid aside { position: sticky; top: 1rem; }
.f-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.f-msg:first-of-type { border-top: 0; }
.f-msg .av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid rgba(125, 165, 145, 0.22);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--green-soft);
}
.f-msg.own .av { background: var(--green); color: var(--on-green); border-color: var(--green); }
.f-msg .who { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.f-msg .who strong { font-weight: 500; }
.f-msg .when { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.f-msg .body { margin: 0.25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.f-msg.internal { background: rgba(231, 178, 76, 0.06); border: 1px solid rgba(231, 178, 76, 0.3); border-radius: 12px; padding: 0.75rem 0.9rem; margin: 0.4rem 0; }
.f-msg .tag { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-soft); border: 1px solid rgba(231, 178, 76, 0.45); border-radius: 5px; padding: 0.1rem 0.4rem; }
.f-msg .f-files { margin-top: 0.4rem; }
.f-ev { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.35rem 0 0.35rem 3rem; color: var(--muted); font-size: 0.82rem; }
.f-ev.internal { color: var(--gold-soft); }
.f-ev .when { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-dim); }
.f-reply { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.f-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.f-people li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.f-people .inline-form { margin: 0; }
.f-setrow { display: flex; gap: 0.5rem; align-items: center; }
.f-setrow .f-field { flex: 1; min-width: 0; }
.f-refchip { font-family: var(--font-mono); color: var(--green-soft); background: var(--surface); border-color: rgba(35, 217, 124, 0.3); }
@media (max-width: 767px) {
  .f-choices { grid-template-columns: minmax(0, 1fr); }
  .f-tkgrid { grid-template-columns: minmax(0, 1fr); }
  .f-tkgrid aside { position: static; }
  .f-ev { padding-left: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .f-tkgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Front door (ADR 0054, increment 7): the anonymous pages — sign-in, links, invitation, Denied — and the legal and
   spec reading pages, in the F tokens. One set of views; the layout of the day picks the chrome. ---- */
body.f .login-wrap { min-height: calc(100vh - 8rem); }
body.f .login-card {
  width: 400px; max-width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 2.4rem 2.2rem 2rem;
}
body.f .login-card img { height: 56px; margin-bottom: 1.2rem; }
body.f .login-tag { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--text); line-height: 1.4; }
body.f .login-tag strong { color: var(--green-soft); font-weight: 600; }
body.f .login-card label {
  display: block; margin: 0.9rem 0 0.35rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
body.f .login-card input:not([type="hidden"]) {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 0.8rem; border-radius: 9px;
  border: 1px solid rgba(125, 165, 145, 0.22); background: var(--bg); color: var(--text); font: inherit;
}
body.f .login-card input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
body.f .login-tabs {
  display: flex; gap: 0.25rem; justify-content: center; margin: 1.1rem 0 0; padding: 0.25rem;
  border-bottom: 0; background: var(--bg); border-radius: 999px;
}
body.f .login-tabs a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 0.75rem; margin: 0;
  border-bottom: 0; border-radius: 999px; font-family: inherit; font-size: 0.88rem; letter-spacing: 0; color: var(--muted);
}
body.f .login-tabs a[aria-current] { background: var(--surface); color: var(--text); }
body.f .login-help { font-size: 0.8rem; }
body.f .login-note { font-size: 0.85rem; }
body.f .login-foot a { color: var(--muted); }
body.f .login-card .flash { text-align: left; }
body.f .legal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 2rem 2.2rem; }
body.f .legal h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 0; }
body.f .legal h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
body.f .legal-foot { padding-bottom: 1rem; }
@media (max-width: 767px) {
  body.f .login-card { padding: 1.8rem 1.2rem 1.5rem; }
  body.f .legal { padding: 1.4rem 1rem; }
  body.f .spec-toc { columns: 1; }
}

/* ---- Admin suite (ADR 0054, increment 8): the classic primitives the admin pages are built from, in the F kit.
   One set of views; the breadcrumb partial and these rules do the rest. ---- */
body.f h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.9rem; overflow-wrap: anywhere; }
body.f .f-crumb + h1, body.f .f-crumb + .detail-head { margin-top: 0.3rem; }
body.f .detail-head { align-items: flex-end; margin-bottom: 0.9rem; }
body.f .detail-head h1 { margin-bottom: 0; }
body.f h2 { font-size: 1.1rem; font-weight: 600; }
body.f .card { padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
body.f .cards { gap: 1rem; }
body.f .card.stat { gap: 0.2rem; }
body.f .stat .n { font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.1; }
body.f .stat .l { text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
body.f .stat .l .chip { font-size: 0.7rem; }
body.f label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; }
body.f input[type="text"], body.f input[type="password"], body.f input[type="email"], body.f input[type="number"], body.f input[type="search"],
body.f input[type="url"], body.f select, body.f textarea {
  min-height: 44px; padding: 0.55rem 0.8rem; border-radius: 9px; border: 1px solid rgba(125, 165, 145, 0.22); background: var(--bg);
  box-sizing: border-box; font-size: 0.92rem;
}
body.f select { min-height: 44px; }
body.f input:focus, body.f select:focus, body.f textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
body.f .filters { gap: 0.6rem; align-items: flex-end; }
body.f .filters select, body.f .filters input[type="text"], body.f .filters input[type="search"], body.f .filters .btn { height: 44px; }
body.f .filters label { margin-bottom: 0.3rem; }
body.f .pager { font-family: inherit; font-size: 0.85rem; gap: 0.75rem; }
body.f .pager .btn.small { min-height: 36px; }
body.f .btn.small { min-height: 36px; }
body.f .btn.ghost.small, body.f .btn.danger.small { min-height: 34px; }
body.f .empty { padding: 1.6rem 0; }
body.f .chip { font-size: 0.72rem; }
body.f .kv { font-size: 0.9rem; }
body.f .flash { border-radius: 10px; }
/* The top-bar search is its own control; the admin field rules above must not reach into it. */
body.f .f-topsearch input { min-height: 0; padding: 0; border: 0; background: transparent; border-radius: 0; }
body.f .f-topsearch input:focus { outline: none; }
body.f .f-topsearch:focus-within { border-color: var(--green); }

/* ---- Authoring pages (ADR 0054, increment 9): the form in a main column, the save and the facts in a sticky aside ---- */
.f-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.f-formgrid > div, .f-formgrid > aside { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.f-formgrid > aside { position: sticky; top: 1rem; }
.f-formgrid .card { margin-bottom: 0; max-width: none; }
.f-formgrid .card.step-card { margin-bottom: 0; }
.f-formgrid #step-editor { display: flex; flex-direction: column; gap: 0.9rem; }
.f-formgrid .f-sticky-actions .btn { width: 100%; box-sizing: border-box; }
.f-formgrid .f-sticky-actions .btn + .btn { margin-top: 0.5rem; }
body.f .step-head select { min-height: 44px; }
body.f .step-settings { gap: 0.1rem 1rem; }
body.f .step-statusmap select { min-height: 40px; }
@media (max-width: 1023px) {
  .f-formgrid { grid-template-columns: minmax(0, 1fr); }
  .f-formgrid > aside { position: static; }
}

/* ---- Admin entity pages as rows (the Settings / People pattern) ---- */
.f-grp h2 .f-small { margin-left: auto; text-align: right; }
.f-row .inline-form { margin: 0; }
.f-row .t a { color: inherit; }
.f-row .t a:hover { color: var(--green-soft); text-decoration: none; }
.f-row .t .f-chip { margin-left: 0.4rem; vertical-align: middle; }
.f-grp .f-pager { border-top: 1px solid var(--line); }
.f-formgrid .f-grp { margin-bottom: 0; }
.f-formgrid .f-tkbar { margin-bottom: 0; }
.f-formgrid .f-tkbar .f-inline { min-width: 0; }
body.f label.choice { font-family: inherit; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--text); }
body.f label.choice input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0.2rem 0 0; accent-color: var(--green); }