/* ============================================================
   CaseChat theme  --  clean, compact, clinical.

   Design rules (so future edits stay consistent):
     1. Flat surfaces: 1px hairline borders, no shadows, no gradients.
     2. Colour carries meaning, never decoration:
          teal            = interactive (links, buttons, focus)
          red             = urgent (STAT)
          amber           = priority
          green           = resolved
          blue            = teaching case
          neutral grey    = everything informational (tags, meta)
     3. One breakpoint (768px). Mobile-first; desktop only tightens.
     4. Built on Pico CSS: we set Pico's variables rather than fighting
        its selectors wherever possible.

   Tokens are declared on `:root:not([data-theme])` (not plain `:root`)
   so they out-rank Pico's own `:root` defaults regardless of the order
   the stylesheets load in. Dark mode re-declares the same names.
   ============================================================ */

:root:not([data-theme]) {
  /* ---- Type ---- */
  --font-family-sans: Arial, Helvetica, sans-serif;
  --pico-font-family: var(--font-family-sans);
  --pico-font-size: 100%;
  /* Inputs must stay >= 16px on phones or iOS Safari zooms on focus,
     so we get "compact" from spacing, not from shrinking the base size. */
  --font-size-sm: 0.875rem;
  /* meta, tags, nav, buttons, helper text, section labels */
  --font-size-base: 1rem;
  /* body, inputs, h2, brand (and 16px stops iOS zooming on inputs) */
  --font-size-lg: 1.25rem;
  /* h1: the page title, nothing else */

  /* ---- Pico spacing, tightened (Pico defaults are 1rem everywhere) ---- */
  --pico-spacing: 1rem;   /* = --space-4: the field-to-field gap */
  --pico-typography-spacing-vertical: 0.75rem;   /* = --space-3: paragraph gap */
  --pico-block-spacing-vertical: 1rem;   /* panel padding = --space-4 */
  --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: 0.4rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --pico-border-radius: 0.25rem;

  /* ---- Surfaces ---- */
  --pico-background-color: #eef2f3;
  /* page: a light grey tint, so white panels stand out from it (batch 12) */
  --surface: #ffffff;
  /* cards: same as page, separated by border only */
  --surface-inset: #f5f7f8;
  /* filter bar, nested panels: barely-there grey */
  --pico-color: #1b2528;
  /* ink */
  --pico-muted-color: #5a6a70;
  /* secondary text */
  --pico-muted-border-color: #d8e1e4;
  /* hairlines */

  /* ---- Interactive (teal). #0f766e on white = 5.5:1 contrast. ---- */
  --pico-primary: #0f766e;
  --pico-primary-hover: #115e59;
  --pico-primary-focus: rgba(15, 118, 110, 0.3);
  --pico-primary-underline: rgba(15, 118, 110, 0.45);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --on-primary: #ffffff;

  --pico-form-element-background-color: #ffffff;
  --pico-form-element-active-background-color: #ffffff;
  --pico-form-element-border-color: #b9c5c9;

  /* ---- Shape ---- */
  --shape-sm: 0.25rem;
  --shape-md: 0.375rem;

  /* ---- Case states: background / foreground pairs ---- */
  --state-neutral-bg: #e6edef;
  --state-neutral-fg: #35484e;
  /* plain tags */
  --state-urgent-bg: #fde8e8;
  --state-urgent-fg: #9b1c1c;
  /* STAT */
  --state-priority-bg: #fdf0d5;
  --state-priority-fg: #7a4b00;
  --state-resolved-bg: #dff3e4;
  --state-resolved-fg: #1e5b32;
  --state-teaching-bg: #e4ebfb;
  --state-teaching-fg: #2c3f8f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: #0a0d0e;
    /* page: near-black; panels are a step lighter (batch 12) */
    --surface: #12171a;
    /* panels */
    --surface-inset: #171c1f;
    --pico-color: #e4ecee;
    --pico-muted-color: #93a4a9;
    --pico-muted-border-color: #28373c;

    --pico-primary: #2dd4bf;
    --pico-primary-hover: #5eead4;
    --pico-primary-focus: rgba(45, 212, 191, 0.35);
    --pico-primary-underline: rgba(45, 212, 191, 0.45);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --on-primary: #06201d;
    /* dark text on the bright dark-mode teal */

    --pico-form-element-background-color: #0c1113;
    --pico-form-element-active-background-color: #0c1113;
    --pico-form-element-border-color: #3a4a50;

    --state-neutral-bg: #22313a;
    --state-neutral-fg: #c3d2d7;
    --state-urgent-bg: #4a1d1d;
    --state-urgent-fg: #fecaca;
    --state-priority-bg: #46330c;
    --state-priority-fg: #fde3a3;
    --state-resolved-bg: #173a24;
    --state-resolved-fg: #bde8c8;
    --state-teaching-bg: #232e55;
    --state-teaching-fg: #c7d3f7;
  }
}

/* ============================================================
   Typography
   Headings are ink-coloured: teal is reserved for things you can
   click. Hierarchy comes from size and weight alone.
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--pico-color);
  font-weight: var(--weight-strong);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--font-size-lg);
  margin-block: 0 0.5rem;
}

h2 {
  font-size: var(--font-size-base);
  margin-block: 1rem 0.5rem;
}

/* same size as body, set apart by weight */

/* The ONE uppercase treatment: a small muted section label. It gives the
   case page its report-like structure (Clinical presentation / Laboratory
   findings / ...). Uppercase is used nowhere else, so it stays meaningful. */
h3 {
  font-size: var(--font-size-base);
  font-weight: var(--weight-strong);
  color: var(--pico-color);
  margin-block: var(--space-4) var(--space-1);
}

p {
  margin-block: 0 var(--pico-typography-spacing-vertical);
}

hr {
  margin-block: 0.75rem;
  border-color: var(--pico-muted-border-color);
}

/* Images (case attachments) never overflow the column. */
main img {
  max-width: 100%;
  height: auto;
  border-radius: var(--shape-sm);
}

/* Free-text clinical fields keep the author's line breaks. */
.prewrap {
  white-space: pre-wrap;
}

/* Small secondary text: "Posted by ... - 3h ago", "4 comments - 2d ago".
   (Name kept from MedConnect; it is used by the existing templates.) */
.profile-meta,
.meta {
  font-size: var(--font-size-sm);
  color: var(--pico-muted-color);
}

/* ============================================================
   Layout. Single column, narrow, centred.
   ============================================================ */
main,
header,
footer {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 1rem;
}

main {
  padding-block: 0.75rem 2rem;
}

/* The page chrome (top bar, left rail, bottom tab bar) is defined near the end of this file: "Page chrome". */

/* ============================================================
   Cards (Pico <article>): flat, bordered, tight.
   ============================================================ */
article {
  background: var(--surface);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-md);
  box-shadow: none;
  margin-block: 0 0.75rem;
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
}

/* A card inside a card (PHI warning on the new-case form) -> inset, not a second border. */
article article {
  background: var(--surface-inset);
  box-shadow: none;
}

.auth-card {
  max-width: 400px;
  margin-inline: auto;
}

/* ============================================================
   Forms
   ============================================================ */
label {
  font-size: var(--font-size-base);
}

/* The helper text under a label ("Brief, anonymized history ...") */
label>small {
  display: block;
  margin-block: 0.25rem 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--pico-muted-color);
}

fieldset {
  margin-block-end: 0.5rem;
}

legend {
  font-size: var(--font-size-base);
  font-weight: inherit;
  color: var(--pico-color);
  margin-bottom: 0.25rem;
}

textarea {
  resize: vertical;
}

/* Pico rounds search boxes into pills; keep them square like every other input. */
input[type="search"] {
  border-radius: var(--pico-border-radius);
}

.error {
  padding: 0.5rem 0.5rem;
  border-left: 3px solid var(--state-urgent-fg);
  border-radius: var(--shape-sm);
  background: var(--state-urgent-bg);
  color: var(--state-urgent-fg);
  font-size: var(--font-size-sm);
}

/* Pico makes search boxes pills by setting this VARIABLE, so override the variable. */
[type="search"] {
  --pico-border-radius: 0.25rem;
}

/* ============================================================
   Buttons. Two weights:
     default  = outlined (everything)
     .primary = filled   (the one action the page is for)
   Plain <a> stays a plain link: button = action, link = navigate.
   This single :is() rule covers every button-like element.
   ============================================================ */
:is(button, [type="submit"], [type="button"], [role="button"]):not(.nav-item) {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary);
  --pico-border-color: var(--pico-primary);
  border-radius: var(--shape-md);
  font-weight: var(--weight-strong);
  font-size: var(--font-size-sm);
  padding: 0.5rem 1rem;
  transition: background-color 0.12s ease;
}

:is(button, [type="submit"], [type="button"], [role="button"]).primary {
  --pico-background-color: var(--pico-primary);
  --pico-border-color: var(--pico-primary);
  --pico-color: var(--on-primary);
}

:is(button, [type="submit"], [type="button"], [role="button"]).primary:hover {
  --pico-background-color: var(--pico-primary-hover);
  --pico-border-color: var(--pico-primary-hover);
  --pico-color: var(--on-primary);
}

button[type="submit"],
button[type="button"],
input[type="submit"],
input[type="button"],
a[role="button"] {
  display: inline-block;
  width: auto;
}

/* Quiet in-text actions: "Delete" on a comment, "Reply" toggles.
   Deliberately NOT red: the confirm() dialog is where the warning lives. */
.link-button,
button.danger {
  --pico-background-color: transparent;
  --pico-border-color: transparent;
  --pico-color: var(--pico-muted-color);
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-regular);
  color: var(--pico-muted-color);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover,
button.danger:hover {
  color: var(--pico-primary);
  background: none;
}

/* Small inline SVG icon inside a button. */
.action-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-inline-end: 0.25rem;
}

/* ============================================================
   Lists
   ============================================================ */
ul {
  padding-left: 0;
}

ul li {
  list-style: none;
}

/* A page title with an action on the right ("Cases" + "Post a case"). */

/* The case feed: dense rows separated by hairlines, no cards. */
.result-list li {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.result-list li:first-child {
  padding-top: 0.25rem;
}

.result-list li:last-child {
  border-bottom: none;
}

.result-list li p {
  margin-block: 0.25rem 0;
}

/* Overrides the uppercase section-label h3 style: in the feed the h3 is a
   case TITLE, so it is normal-case, ink-coloured link text. */
.result-list li h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--weight-strong);
  text-transform: none;
  letter-spacing: 0;
  color: var(--pico-color);
}

.result-list li h3 a {
  color: var(--pico-primary);
  text-decoration: none;
}

.result-list li h3 a:hover {
  text-decoration: underline;
}

.empty-state {
  padding-block: 1.5rem;
  text-align: center;
  color: var(--pico-muted-color);
}

/* ============================================================
   Filters (search + discipline + urgency)
   ============================================================ */
/* Search on its own row; discipline and urgency side by side; button full width.
   On desktop it becomes one row: search (wide), discipline, urgency, button. */
/* Search stays visible and slim; discipline/urgency hide behind "Filters". */
.filter-bar {
  margin-block-end: 0.75rem;
}

.search-row {
  display: flex;
  gap: 0.5rem;
}

.search-row input {
  flex: 1;
  margin: 0;
}

.search-row button {
  flex: none;
  margin: 0;
}

.filters {
  margin: 0.5rem 0 0;
  border: none;
}

/* Pico draws a rule under <details> */
.filters summary {
  font-size: var(--font-size-sm);
  color: var(--pico-muted-color);
  list-style: none;
  cursor: pointer;
}

.filters summary::-webkit-details-marker {
  display: none;
}

.filters summary::after {
  display: none;
}

/* Pico's own chevron */
.filters summary::before {
  content: "+ ";
}

/* our plain marker: + closed, − open */
.filters[open] summary::before {
  content: "− ";
}

.filter-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  margin-block-start: 0.5rem;
}

.filter-fields label {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--pico-muted-color);
}

.filter-fields select {
  margin: 0.25rem 0 0;
}

/* ============================================================
   Tags. One shape; the colour says what it means.
   Usage:  <span class="tag tag-urgent">  /  tag-priority  /
           tag-resolved  /  tag-teaching  /  plain "tag" (informational)
   ============================================================ */
.tag {
  display: inline-block;
  margin-inline-end: 0.25rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--shape-sm);
  background: var(--state-neutral-bg);
  color: var(--state-neutral-fg);
  font-size: var(--font-size-sm);
  line-height: var(--lh-text);
}

.tag-urgent {
  background: var(--state-urgent-bg);
  color: var(--state-urgent-fg);
  font-weight: var(--weight-strong);
}

.tag-priority {
  background: var(--state-priority-bg);
  color: var(--state-priority-fg);
  font-weight: var(--weight-strong);
}

.tag-resolved {
  background: var(--state-resolved-bg);
  color: var(--state-resolved-fg);
  font-weight: var(--weight-strong);
}

.tag-teaching {
  background: var(--state-teaching-bg);
  color: var(--state-teaching-fg);
}

/* .tag-routine intentionally has no rule: routine is the unremarkable default. */

/* ============================================================
   Discussion thread
   Each reply is a .comment nested INSIDE its parent, so the left rule and
   indent stack automatically. (Replaces the old inline style, which used a
   hard-coded colour that broke dark mode.)
   ============================================================ */
.comment {
  margin-block: 0.5rem 0;
  padding-inline-start: 0.75rem;
  border-left: 2px solid var(--pico-muted-border-color);
}

.comment>p {
  margin-block: 0 0.25rem;
}

/* "Reply" toggle + "Delete" sit on one quiet line under the comment. */
.comment-actions {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 0.25rem;
  font-size: var(--font-size-sm);
}

.comment-actions form,
.comment-actions details {
  margin: 0;
}

.comment-actions details {
  border: none;
  padding: 0;
}

/* Pico draws a rule under <details> */
.comment-actions summary {
  margin: 0;
  padding: 0;
  color: var(--pico-muted-color);
  cursor: pointer;
  list-style: none;
  /* hide the default disclosure triangle */
}

.comment-actions summary::-webkit-details-marker {
  display: none;
}

.comment-actions summary::after {
  display: none;
}

/* Pico adds its own chevron here */
.comment-actions summary:hover {
  color: var(--pico-primary);
}

.comment-actions details[open] {
  flex-basis: 100%;
}

/* open form takes the full row */
.comment-actions details form {
  margin-block-start: 0.25rem;
}

/* ============================================================
   Attachments (non-image files)
   ============================================================ */

/* ============================================================
   Links in a sentence: "Don't have an account? Sign up"
   ============================================================ */
.link-row {
  font-size: var(--font-size-sm);
  color: var(--pico-muted-color);
  margin-block-end: 0;
}

footer {
  border-top: 1px solid var(--pico-muted-border-color);
  padding-block: 1rem;
  margin-block-start: 1.5rem;
  font-size: var(--font-size-sm);
  color: var(--pico-muted-color);
}

/* ============================================================
   Desktop (>= 768px): the ONLY breakpoint. On a wide screen we shrink
   Pico's root size a little (denser, more "workstation") and tighten
   form spacing. Layout itself does not change; it is single-column.
   ============================================================ */
@media (min-width: 768px) {
  :root:not([data-theme]) {
    --pico-font-size: 100%;
  }

  /* 15px base */

  main,
  footer {
    max-width: 720px;
  }

}

/* Resolution: the "Resolve this case" form and the teaching-mode reveal. */
.resolve summary,
.reveal summary {
  font-weight: var(--weight-strong);
  color: var(--pico-primary);
  cursor: pointer;
}

.reference-list li {
  margin-block: 0.25rem;
  font-size: var(--font-size-sm);
}

.reference-list a {
  margin-inline-start: 0.5rem;
}

.notice {
  padding: 0.5rem 0.75rem;
  margin-block: 0 0.75rem;
  border-left: 3px solid var(--pico-primary);
  background: var(--surface-inset);
  border-radius: var(--shape-sm);
  font-size: var(--font-size-sm);
}

/* ============================================================
   Feed layout. Phone: one column (search, collapsible filters, list).
   Desktop: filters become a sticky left sidebar and the list sits beside it.
   :has() lets only the feed page get the wider layout; forms and the
   case page stay in the narrow column. All inside the one 768px breakpoint.
   ============================================================ */
@media (min-width: 900px) {
  main:has(:is(.feed-layout, .case-layout)) {
    max-width: 1000px;
  }

  /* The feed: list in the middle, filters in the RIGHT-hand info panel (same side as the case page's details). */
  .feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1.5rem;
    align-items: start;
  }

  .feed-layout .filter-bar {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--topbar-h) + 1rem);
    margin: 0;
  }

  .feed-layout .result-list {
    grid-column: 1;
    grid-row: 1;
  }

  /* stays in view while scrolling */

  /* Sidebar: search box with its button underneath. */
  .search-row {
    flex-direction: column;
  }

  .search-row button {
    width: 100%;
  }

  /* Filters are always showing here, so the toggle becomes a plain heading.
     ::details-content is how CSS forces a <details> open; browsers that
     lack it just keep the collapsible version, which still works. */
  .filters::details-content {
    content-visibility: visible;
  }

  .filters summary {
    font-weight: var(--weight-strong);
    color: var(--pico-color);
    pointer-events: none;
  }

  .filters summary::before {
    content: none;
  }

  .filter-fields {
    grid-template-columns: 1fr;
  }

  /* stack the two selects */
}

/* ============================================================
   Case page. Phone: title, then a compact details block, then the case.
   Desktop: the details become a sticky right sidebar.
   ============================================================ */
.case-title {
  margin-block: 0 0.5rem;
}

/* On a phone the labels (Status, Discipline, ...) are hidden visually but stay
   in the page for screen readers. The values explain themselves in a compact block. */

/* The first section label shouldn't push the card's contents down. */

@media (min-width: 900px) {
  

  .case-title {
    grid-column: 1 / -1;
  }

  /* title spans both columns */
  

  

  /* Labels become visible, using the same uppercase section-label look as the case text. */
  

  

  
}

/* Admin cards */
.person-name {
  margin-block: 0 0.25rem;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  /* label column sized to its text */
  gap: 0.25rem 1rem;
  margin-block: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
}

.facts dt {
  color: var(--pico-muted-color);
}

.facts dd {
  margin: 0;
}

/* A row of buttons (Approve / Reject) */
.row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.row form {
  margin: 0;
}

.row button {
  margin: 0;
}

/* Report link beside Reply/Delete on a comment */
.comment-actions a {
  color: var(--pico-muted-color);
  text-decoration: none;
}

.comment-actions a:hover {
  color: var(--pico-primary);
}
/* ==========================================================================
   Profiles (profile.html, profile_edit.html)
   ========================================================================== */

/* A list with no bullets, used for credentials, expertise and recent cases. */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}
.plain-list li {
  padding: 0.25rem 0;
}

/* The bio is plain text: keep the author's line breaks. */
.bio {
  white-space: pre-line;
}

/* Expertise checklist on the edit form: a bordered, scrollable box so 60+
   disciplines don't push the Save button off the screen. */
.expertise-list {
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-sm);
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
}

/* One row: discipline name on the left, STAT checkbox on the right. */
.expertise-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0;
}
.expertise-row label {
  margin: 0; /* Pico adds bottom margin to labels; we don't want it here */
}
.expertise-stat {
  white-space: nowrap;
  color: var(--pico-muted-color);
}

/* Indent child disciplines so the tree structure is visible. */
.expertise-row.depth-1 { padding-left: 1rem; }
.expertise-row.depth-2 { padding-left: 2.5rem; }

/* Members admin page: breathing room between the search box and the first card. */
.member-search {
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Private messages
   ========================================================================== */

/* A button that looks like a quiet link (used for "Message" and "Block"). */
.link-button {
  all: unset;                       /* drop Pico's button styling completely */
  cursor: pointer;
  color: var(--pico-muted-color);
  font-size: var(--font-size-sm);
}
.link-button:hover,
.link-button:focus-visible {
  color: var(--pico-primary);
  text-decoration: underline;
}

/* Unread count in the nav bar. */
.nav-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--state-urgent-bg);
  color: var(--state-urgent-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-strong);
  text-align: center;
}

/* "Message author" button in the case sidebar. */

/* Conversation: my messages on the right, theirs on the left. */
.thread {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block: 1rem;
}
.bubble {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--shape-md);
}
.bubble p {
  margin: 0 0 0.25rem;
}
.bubble-mine {
  align-self: flex-end;
  background: var(--state-resolved-bg);
}
.bubble-theirs {
  align-self: flex-start;
  background: var(--surface-inset);
}

/* ==========================================================================
   Author actions in the case sidebar (Edit / Retract / Delete)
   ========================================================================== */

/* ==========================================================================
   Image viewer (static/viewer.js) and comment images
   ========================================================================== */

/* Pictures you can open: a pointer hints they are clickable. */
img[data-viewer] {
  cursor: zoom-in;
}
.comment-image {
  max-width: min(100%, 28rem);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-sm);
}

/* Picture chosen for a new comment (preview before posting). */
.image-attach {
  margin-block: 0.5rem;
}
.image-preview {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-block: 0.5rem;
}
.image-preview[hidden] {
  display: none;
}
.image-preview img {
  max-width: 12rem;
  max-height: 9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-sm);
}

/* ---- The viewer itself: always dark, whatever the site theme ---- */
dialog.vw {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #121416;
  color: #f2f4f5;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
dialog.vw[open] {
  display: flex;
  align-items: stretch;      /* Pico centres dialog contents; the stage must fill the width */
  justify-content: flex-start;
}
.vw-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.5rem 0.5rem;
  background: #1c1f22;
  border-bottom: 1px solid #343a3f;
}
.vw-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.vw-actions {
  margin-inline-start: auto;
}
.vw .vw-btn {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.5rem;
  background: #2a2f33;
  color: #f2f4f5;
  border: 1px solid #4a5258;
  border-radius: var(--shape-sm);
  font-size: var(--font-size-sm);
  line-height: var(--lh-tight);
  cursor: pointer;
}
.vw .vw-btn:hover {
  background: #343b40;
}
.vw .vw-btn[aria-pressed="true"] {
  background: #0f766e;
  border-color: #14b8a6;
}
.vw .vw-swatch {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 2px solid #4a5258;
  border-radius: 50%;
  cursor: pointer;
}
.vw .vw-swatch[aria-pressed="true"] {
  border-color: #ffffff;
}
.vw .vw-select {
  width: auto;
  margin: 0 0 0 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #2a2f33;
  color: #f2f4f5;
  border: 1px solid #4a5258;
  font-size: var(--font-size-sm);
}
.vw-zoom {
  min-width: 3.2rem;
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Stage: holds the picture (moved by transform) and the drawing canvas. */
.vw-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;       /* we handle pan / pinch ourselves */
  user-select: none;
  cursor: grab;
}
.vw-stage.vw-drawing {
  cursor: crosshair;
}
.vw-stage.vw-panning {
  cursor: grabbing;
}
.vw-content {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.vw .vw-img {
  display: block;
  max-width: none;          /* Pico caps images at 100% width; the viewer must not */
  height: auto;
  image-rendering: auto;
}
.vw-canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.vw .vw-text {
  position: absolute;
  width: 11rem;
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-sm);
}
.vw-error {
  padding: 1rem;
}

@media (max-width: 767px) {
  .vw-actions {
    margin-inline-start: 0;
  }
}
/* ==========================================================================
   Collections and Case of the Week
   ========================================================================== */

/* Case of the week banner on the feed: a quiet blue-edged card, same token as teaching cases. */
.featured {
  border: 1px solid var(--pico-muted-border-color);
  border-left: 4px solid #2563eb;
  border-radius: var(--shape-sm);
  padding: 0.75rem 1rem;
  margin-block: 0 1rem;
}
.featured h2 {
  margin: 0.25rem 0;
  font-size: var(--font-size-base);
}
.featured-label {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2563eb;
}
.featured p { margin-block: 0.25rem; }

/* "Save to collection" panel in the case sidebar. */

.save-list { list-style: none; margin: 0.5rem 0; padding: 0; }
.save-list li { margin: 0.25rem 0; }
.save-list form,
.save-new { margin: 0; }
.save-new input[type="text"] { margin-bottom: 0.5rem; }

.inline-action { display: inline; margin: 0; }

/* Tighten the link-style buttons so they line up flush-left with the text around them. */
.save-list li { margin: 0; padding: 0; }
.save-list .link-button,
.featured .link-button,
.inline-action .link-button {
  margin: 0;
  padding: 0.25rem 0;
}
/* ==========================================================================
   Institutional (private) cases and institution membership
   ========================================================================== */

/* "Institution only" tag: a violet token, distinct from urgency (red/amber), resolved (green)
   and teaching (blue), so a private case is recognisable at a glance in the feed. */
.tag-institution {
  background: #ede9fe;
  color: #5b21b6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag-institution { background: #3b2a6b; color: #ddd6fe; }
}
:root[data-theme="dark"] .tag-institution { background: #3b2a6b; color: #ddd6fe; }

/* Rows of buttons on the membership pages. */
.result-list .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.result-list .row form { margin: 0; }
.result-list .row .link-button { padding: 0.25rem 0; margin: 0; }
.result-list li > form .link-button { margin: 0; padding: 0.25rem 0; }
/* ==========================================================================
   Groups, and the "share with several places" picker
   ========================================================================== */

/* The list of institutions and groups under "Only the institutions and groups I tick below". */
.space-picks {
  margin: 0.25rem 0 0.75rem 1.5rem;
  display: grid;
  gap: 0.25rem;
}

/* Small heading inside a card (e.g. "Invitations waiting"). */
article h4 {
  margin: 1rem 0 0.25rem;
  font-size: var(--font-size-base);
}

/* A search box followed by a button on one line. */
form.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
form.row input[type="search"] { flex: 1 1 14rem; margin: 0; }
form.row button { margin: 0; width: auto; }
form.row button, form[role="search"].row button { flex: 0 0 auto; width: auto; }
/* The reassurance line under a form's button sits on its own line. */
article form > small:last-child { display: block; margin-top: 0.5rem; }

/* People directory, shared collections, and the case card in messages */
.case-card { margin-bottom: 1rem; }
.case-card h3 { text-transform: none; letter-spacing: normal; margin: 0.25rem 0 0.5rem; }
.case-card p { margin-bottom: 0.5rem; }

/* Message attachments: thumbnails and PDF links inside a message bubble */
.msg-files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.msg-thumb { max-width: 220px; max-height: 160px; border-radius: 6px; border: 1px solid var(--pico-muted-border-color, #ccd); display: block; }
.msg-pdf { display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid var(--pico-muted-border-color, #ccd); border-radius: 6px; font-size: var(--font-size-sm); }

/* Message pictures open in the zoom viewer like pictures in discussions */
.msg-thumb { cursor: zoom-in; }

/* Cases linked to conversations: pasted-link cards inside a message bubble */
.linked-case { display: block; margin-top: 0.5rem; padding: 0.5rem 0.5rem; border: 1px solid var(--pico-muted-border-color, #ccc); border-radius: 6px; text-decoration: none; font-size: var(--font-size-sm); }
.linked-case .tag { margin-left: 0.5rem; }
.linked-case .meta { display: block; }

/* --- batch7: tabs (Network, Reports, Members), page-head button --- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.tab {
  display: inline-block;
  padding: 0.25rem 0.25rem;
  margin-bottom: -1px;               /* the active tab's underline sits on the bar's border */
  border-bottom: 2px solid transparent;
  color: var(--pico-muted-color);
  text-decoration: none;
  font-size: var(--font-size-base);
}
.tab:hover,
.tab:focus-visible { color: var(--pico-primary); }
.tab.active {
  color: var(--pico-color);
  border-bottom-color: var(--pico-primary);
  font-weight: var(--weight-strong);
}
/* A small count inside a tab (pending registrations, open reports). */
.tab .nav-count { margin-left: 0.25rem; }

/* Title on the left, one action button on the right. */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; }
.page-head { margin-block-end: 0.75rem; }
.page-head-action { width: auto; margin: 0; }

/* --- batch9: select-and-act toolbars on lists --- */
.bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}
.bulkbar label, .bulkbar button { margin: 0; }
.bulkbar button { width: auto; padding-block: 0.25rem; }
/* "Select all" and the live count need the script; hide them when it isn't running. */
.bulkbar .bulk-all { display: none; }
.bulkbar.bulk-js .bulk-all { display: inline-flex; align-items: center; gap: 0.5rem; }
.bulk-count { color: var(--pico-muted-color); flex: 1 1 auto; }
.bulkbar button:disabled { opacity: 0.5; cursor: not-allowed; }
/* The row checkbox: a little breathing room before the title. */
.bulk-check { margin: 0 0.5rem 0 0; vertical-align: middle; }

/* ==========================================================================
   Page chrome (batch 11). Three parts, all drawn by the nav fragment (nav.go):
     .top-bar   icon/home, global search, menu button          (always)
     .rail      left menu, collapsible to icons                 (>= 768px)
     .tabbar    bottom bar: Cases, Messages, Network, Saved     (< 768px)
   Pages keep their single <main>; the right-hand info panel is each page's own <aside>
   (the feed's filters, the case page's details), shown beside the content from 900px.
   ========================================================================== */
:root { --topbar-h: 3.25rem; --rail-w: 4rem; --tabbar-h: 3.5rem; }
@media (min-width: 1200px) { :root { --rail-w: 13rem; } }
/* The person's own choice (the toggle in the rail) beats the screen-size default. */
:root.rail-narrow { --rail-w: 4rem; }
:root.rail-wide { --rail-w: 13rem; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; padding: 0.5rem 0.75rem; background: var(--surface); }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--topbar-h);
  max-width: none;
  margin: 0;
  padding: 0.25rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--pico-color);
  flex: 0 0 auto;
}
.brand img { width: 1.75rem; height: 1.75rem; display: block; }
.brand-name { display: none; }                       /* phone: just the icon */
.nav-search { flex: 1 1 auto; max-width: 30rem; margin: 0; }
.nav-search input[type="search"] { margin: 0; padding-block: 0.25rem; height: auto; }

.top-bar-links { display: flex; align-items: center; gap: 1rem; margin-inline-start: auto; }
.top-bar-links form { margin: 0; display: inline; }
.nav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: auto; margin: 0; padding: 0; border: none; background: none;
  font: inherit; font-size: var(--font-size-base);
  color: var(--pico-muted-color); text-decoration: none; cursor: pointer;
}
.nav-item:hover, .nav-item:focus-visible { color: var(--pico-primary); }
.nav-label { white-space: nowrap; }
.icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Menu button (hamburger). A <details>, so it opens without JavaScript. */
.menu { position: relative; margin: 0 0 0 auto; }
.menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border-radius: var(--shape-sm); color: var(--pico-color);
}
.menu > summary::-webkit-details-marker, .menu > summary::marker { display: none; content: ""; }
.menu > summary::after { content: none; }
.menu > summary:hover { background: var(--surface-inset); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.35rem); min-width: 12rem; z-index: 30;
  display: flex; flex-direction: column; gap: 0.25rem; padding: 0.25rem;
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md);
}
.menu-panel .nav-item { display: flex; padding: 0.5rem 0.75rem; border-radius: var(--shape-sm); width: 100%; text-align: left; }
.menu-panel .nav-item:hover { background: var(--surface-inset); }
.menu-panel form { margin: 0; display: block; }

/* Badges and the active link. */
.nav-count {
  display: inline-block; min-width: 1.25rem; padding: 0 0.25rem; border-radius: 999px; text-align: center;
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); line-height: var(--lh-tight); background: var(--pico-primary); color: #fff;
}
.nav-item[aria-current="page"], .tab-item[aria-current="page"] { color: var(--pico-primary); font-weight: var(--weight-strong); }

/* Bottom tab bar (phone). Fixed to the bottom; the page gets matching padding so nothing hides behind it. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--pico-muted-border-color);
}
.tab-item {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  font-size: var(--font-size-sm); color: var(--pico-muted-color); text-decoration: none;
}
.tab-item:hover, .tab-item:focus-visible { color: var(--pico-primary); }
.tab-item .nav-count { position: absolute; top: 0.3rem; left: calc(50% + 0.5rem); }
body:has(.tabbar) { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

/* Left rail (desktop). Hidden on a phone. */
.rail { display: none; }

@media (min-width: 768px) {
  .tabbar { display: none; }
  body:has(.tabbar) { padding-bottom: 0; }
  .menu { display: none; }                          /* desktop: the rail holds Profile, Admin and Log out */
  .brand-name { display: inline; }
  .top-bar { padding-inline: 1rem; }

  body:has(.rail) {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }
  body:has(.rail) .top-bar { grid-column: 1 / -1; grid-row: 1; }
  body:has(.rail) main { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; }

  .rail {
    grid-column: 1; grid-row: 2;
    display: flex; flex-direction: column; gap: 0.25rem;
    position: sticky; top: var(--topbar-h); align-self: start;
    height: calc(100vh - var(--topbar-h));
    padding: 0.5rem; overflow-y: auto;
    border-right: 1px solid var(--pico-muted-border-color);
    container-type: inline-size;                    /* lets the labels hide when the rail is narrow */
    background: var(--surface);
  }
  .rail .nav-item { padding: 0.5rem 0.75rem; border-radius: var(--shape-sm); display: flex; width: 100%; position: relative; justify-content: flex-start; text-align: left; }
  .rail .nav-item:hover { background: var(--surface-inset); }
  .rail form { margin: 0; display: block; }
  .rail-spacer { flex: 1 1 auto; }
  .rail .rail-toggle { width: 100%; margin: 0 0 0.25rem; padding: 0.5rem 0.75rem; display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 0.5rem;
    border: none; background: none; color: var(--pico-muted-color); font: inherit; font-size: var(--font-size-sm); cursor: pointer; border-radius: var(--shape-sm); }
  .rail .rail-toggle:hover { background: var(--surface-inset); }
  @container (max-width: 9rem) {
    .rail-label { display: none; }
    .rail .nav-count { position: absolute; top: 0.15rem; right: 0.2rem; }
    .rail .nav-item, .rail .rail-toggle { justify-content: center; }
  }
}

/* Desktop: the search box sits in the middle of the top bar (brand left, empty space right). */
@media (min-width: 768px) {
  .top-bar:has(.nav-search) { display: grid; grid-template-columns: 1fr minmax(0, 32rem) 1fr; }
  .top-bar:has(.nav-search) .nav-search { grid-column: 2; max-width: none; }
}

/* ==========================================================================
   Sections and panels (batch 12): ONE pattern for every page.

     page title (h1)  >  SECTION LABEL (small caps, above its panel)  >  item title (inside the panel)

   A SECTION is a label plus a panel. The label is the <h2> that sits directly under <main> or <section>
   (no extra markup needed). The PANEL is white with a hairline border on the grey page:
     - an <article>,
     - a result list that is a direct child of <main>, a <section> or the feed grid,
     - a collapsible <details class="resolve"> at that level.
   Variants:  .needs-action  (amber left edge: something is waiting for you)
              .count         (small number after a label:  <h2>Members <span class="count">4</span></h2>)
   Spacing: about 1.75rem between sections, about 0.75rem inside them.
   ========================================================================== */

/* The label. Only h2s that are direct children of main or a section; item headings elsewhere are unaffected. */
:is(main, section) > h2 {
  margin-block: 1.5rem 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pico-muted-color);
}
h1 + h2, :is(main, section):first-child > h2:first-child { margin-top: 0.75rem; }
.count {
  display: inline-block; margin-inline-start: 0.25rem; padding: 0 0.5rem; border-radius: 999px;
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); line-height: var(--lh-tight); letter-spacing: 0;
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color);
}

/* The panel: result lists become one white box with hairlines between rows. */
:is(main, section, .feed-layout, .case-main) > .result-list {
  background: var(--surface);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-md);
  padding: 0;
  margin-block: 0 0.75rem;
  list-style: none;
}
:is(main, section, .feed-layout, .case-main) > .result-list > li {
  padding: 0.75rem 0.75rem;
}
:is(main, section, .feed-layout, .case-main) > .result-list > li:first-child { padding-top: 0.75rem; }
/* Rows that are only an empty-state message shouldn't look like data rows. */
.result-list > li.empty-state { padding-block: 1rem; }

/* Needs-action: a warm edge on a panel that is waiting for you (requests to join, open reports ...). */
.result-list.needs-action, article.needs-action { border-left: 4px solid #d97706; }

/* Other things that sit on the grey page need to be white too. */
.featured, .bulkbar { background: var(--surface); }
main > .notice {
  background: var(--surface); border: 1px solid var(--pico-muted-border-color);
  border-left: 3px solid var(--pico-primary); border-radius: var(--shape-sm);
}
/* Collapsible extras ("Share this collection", "Edit or delete ..."): a quiet panel. */
:is(main, section, .case-main) > details:is(.resolve, .reveal) {
  background: var(--surface); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-md); padding: 0.5rem 0.75rem; margin-block: 0 0.75rem;
}
:is(main, section, .case-main) > details:is(.resolve, .reveal)[open] > summary { margin-bottom: 0.5rem; }

/* Inside the case and the profile (one panel with several parts): each part is divided from the one above. */
article > h3, .profile > h3 {
  margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color);
}
article > h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* The right-hand filter panel on the feed (desktop). */
@media (min-width: 900px) {
  .feed-layout .filter-bar {
    background: var(--surface); border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--shape-md); padding: 0.75rem 0.75rem;
  }
}

/* Discussion: each top-level comment is a white panel on the grey page; replies stay inside it with the thread line. */
section > .comment {
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md);
  padding: 0.75rem 0.75rem; margin-block: 0 0.5rem;
}

/* ==========================================================================
   Collapsed sub-sections (batch 13)
   A form asks for the one thing it needs, and folds the optional extras away:
     <details class="more"> <summary>Add a description <span class="hint">(optional)</span></summary> ...fields... </details>
   - Required fields and safety controls (PHI confirmations, visibility on cases) are NEVER folded.
   - The template opens it with `open` when the form comes back with an error or typed text.
   - The same <summary> + .hint style is used by the folded panels (details.resolve) on the profile page.
   ========================================================================== */
details.more {
  margin: 0 0 0.75rem; padding: 0; border: 0;
}
details.more > summary {
  display: inline-block; cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--weight-strong);
  color: var(--pico-primary); margin-bottom: 0.25rem;
}
details.more[open] > summary { margin-bottom: 0.5rem; }
/* Quiet text after a summary: "(optional)", "email shown, phone hidden". */
summary .hint { font-weight: var(--weight-regular); color: var(--pico-muted-color); }

/* Short group headings inside the sign-up card, divided like the parts of a case. */
.auth-card form > h3 {
  margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color);
}
.auth-card form > h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ==========================================================================
   Typography and actions (batch 15)
   ONE set of rules for type and for clickable things. Everything here comes last on purpose,
   so it wins over older one-off rules above (those can be deleted later without changing the look).
   ========================================================================== */

/* ---- 1. The font: Inter, served from our own /static/fonts (no third-party request, CSP-safe).
        Variable font: one file per script covers weights 400, 600 and 700.
        unicode-range means the browser downloads latin-ext / greek only if a page uses those characters. ---- */
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-greek-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* Tokens. Sizes: xs (labels, badges), sm (secondary text, buttons, tags), base (body, titles), lg (page title).
   Weights: 400 body, 600 titles/buttons/tags/active, 700 ONLY the small-caps section label. */
html:root, html:root:not([data-theme]), html[data-theme] {
  --font-family-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pico-font-family: var(--font-family-sans);
  --font-size-xs: 0.75rem;
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-label: 700;
  --state-institution-bg: #ede9fe;
  --state-institution-fg: #5b21b6;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) { --state-institution-bg: #3b2a6b; --state-institution-fg: #ddd6fe; }
}
html[data-theme="dark"] { --state-institution-bg: #3b2a6b; --state-institution-fg: #ddd6fe; }

/* ---- 2. Type roles ---- */

/* Secondary text: "meta" lines, hints, <small>, the old profile-meta. All one look. */
.meta, .profile-meta, .hint, small {
  font-size: var(--font-size-sm); font-weight: var(--weight-regular); color: var(--pico-muted-color);
}
.meta small, small small, .hint small { font-size: inherit; }

/* Emphasis is one thing: heavier, never a different colour. */
strong, b { font-weight: var(--weight-strong); }

/* Titles. h1 is the page title; an ITEM title (a person, case, group) is semibold body-size ink text.
   Admin cards used <h2> for a person's name, which is why the class exists. */
h1 { font-weight: var(--weight-strong); }
:is(h2, h3).person-name, .featured h2 {
  font-size: var(--font-size-base); font-weight: var(--weight-strong); text-transform: none; letter-spacing: 0;
  color: var(--pico-color); margin-block: 0 0.25rem;
}
.featured h2 { margin-block: 0.25rem; }
/* The small-caps label (one meaning only: it names the group of things below it). */
.featured-label {
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); letter-spacing: 0.06em;
  color: var(--pico-muted-color);
}
.featured { border-left-color: var(--state-teaching-fg); }

/* Pills and chips: one size scale. */
.tag { font-weight: var(--weight-strong); }
.count, .nav-count { font-weight: var(--weight-strong); font-size: var(--font-size-sm); }
.nav-count { color: var(--on-primary); }
.msg-pdf, .linked-case { font-size: var(--font-size-sm); }
.tag-institution { background: var(--state-institution-bg); color: var(--state-institution-fg); }

/* Active states are semibold, not bold. */
.tab.active, .nav-item[aria-current="page"], .tab-item[aria-current="page"], .brand, .comment-actions a {
  font-weight: var(--weight-strong);
}

/* Lab values: figures line up in columns, and a slashed zero can't be read as the letter O. */
.lab, .prewrap, .facts, .count, .nav-count, td, .comment .prewrap {
  font-variant-numeric: tabular-nums;
}
.lab { font-feature-settings: "zero" 1, "tnum" 1; }

/* ---- 4. Where actions sit.
          Form: the buttons are one row at the bottom (primary first, then the quieter ones).
          List row: the text is on the left, the actions are pushed to the right. Tags and meta are display only:
          no border on hover, no pointer. ---- */
.tag, .count, .nav-count, .meta, small { cursor: default; }
.result-list li.row { justify-content: space-between; }
.result-list li.row > :first-child { flex: 1 1 12rem; min-width: 0; }
.result-list li.row > :first-child + :is(form, button, a) { margin-inline-start: auto; }
.result-list li > .row { margin-top: 0.5rem; }
form > .row:last-child, article > .row:last-child { margin-top: 0.75rem; }
.row { flex-wrap: wrap; }

/* ==========================================================================
   Cards (batch 16): one anatomy for every item in a list.
     <li class="card">
       .card-head   title link on the left, ONE status badge on the right (optionally a tick box first)
       .pills       coloured state pills first, then quiet grey topic pills (one line; the rest is cut)
       .card-detail a short description, cut to two lines
       .card-foot   who and when on the left, counts (and at most one quiet action) on the right
     </li>
   Rows with nothing to say are simply not drawn. A card is DISPLAY ONLY: the title link is stretched over the
   whole card so the whole card is one tap target; the few real controls inside sit above it (z-index).
   Type: title = body size, semibold, ink. Detail = small, regular, ink. Pills and footer = extra small.
   ========================================================================== */
.card-list { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.5rem; }
.card-list > li { margin: 0; list-style: none; }
.card-list > li.empty-state {
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md);
  padding: 1rem 1rem;
}

.card {
  position: relative; display: grid; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md);
  padding: 0.75rem 1rem;
}
.card:hover { border-color: var(--pico-primary); }
.card:focus-within { outline: 2px solid var(--pico-primary-focus); outline-offset: 1px; }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card-head > .tag { flex: none; margin: 0.25rem 0 0; }
.card-head > input[type="checkbox"] { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.25rem 0 0; position: relative; z-index: 1; }
.card h3 {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--font-size-base); font-weight: var(--weight-strong); line-height: var(--lh-tight);
  text-transform: none; letter-spacing: 0; color: var(--pico-color);
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }   /* the stretched link: the whole card is the target */
.card:hover h3 a { color: var(--pico-primary); }

/* pills: ONE line. What does not fit is cut, never wrapped, so every card has the same height. */
.pills {
  display: flex; flex-wrap: nowrap; gap: 0.25rem; overflow: hidden;
  /* a soft fade on the right edge, so a pill that is cut off does not look like a mistake */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.pills:not(:has(.pill)) { display: none; }
.pill {
  flex: none; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.05rem 0.5rem; border-radius: 999px;
  font-size: var(--font-size-sm); line-height: var(--lh-tight); font-weight: var(--weight-strong);
  background: var(--state-neutral-bg); color: var(--state-neutral-fg);
}
.pill-quiet { font-weight: var(--weight-regular); color: var(--pico-muted-color); }
.pill-resolved { background: var(--state-resolved-bg); color: var(--state-resolved-fg); }
.pill-teaching { background: var(--state-teaching-bg); color: var(--state-teaching-fg); }
.pill-institution { background: var(--state-institution-bg); color: var(--state-institution-fg); }

.card-detail {
  margin: 0; font-size: var(--font-size-sm); line-height: var(--lh-text); color: var(--pico-color);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-size: var(--font-size-sm); color: var(--pico-muted-color);
}
.card-foot-end { display: inline-flex; align-items: center; gap: 0.75rem; }
.card-foot a { position: relative; z-index: 1; color: inherit; }
.card-foot a:hover { color: var(--pico-primary); }
/* the few controls allowed inside a card sit above the stretched title link */
.card :is(form, button, .row) { position: relative; z-index: 1; }
.card .row { margin-top: 0.25rem; }
.card-foot .inline-action .link-button { font-size: var(--font-size-sm); padding-block: 0; }
.card-foot .inline-action button.secondary { font-size: var(--font-size-sm); padding: 0.25rem 0.5rem; }

/* the filter panel on the search page (the feed has its own, in .feed-layout) */
form.filter-bar { margin-bottom: 0.75rem; }

/* ==========================================================================
   Cards, part 2 (batch 17): the same card for rows that have no page of their own
   (a member, a report, a pending request) and a few extras.
   ========================================================================== */
/* No link on the title, so no hover highlight and no stretched link. */
.card-static:hover { border-color: var(--pico-muted-border-color); }
.card-static h3 a::after { display: none; }
.card-static h3 a { position: relative; z-index: 1; }
/* Something is waiting for you (a request to join, a registration): the same amber edge as the panels. */
.card.needs-action { border-left: 4px solid #d97706; }
/* Pills that may wrap (a profile's expertise, an administrator's checklist): no one-line cut, no fade. */
.pills-wrap { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.pill-priority { background: var(--state-priority-bg); color: var(--state-priority-fg); }
.pill-urgent { background: var(--state-urgent-bg); color: var(--state-urgent-fg); }
/* Report details and other text that must be read in full: not cut to two lines. */
.card-detail-full { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* The profile header is one panel with the name, a row of pills and the member-since line. */
.profile-head h1 { margin-bottom: 0.5rem; }
.profile-head .pills { margin-bottom: 0.5rem; }
.card-list > li > .row, .card > .row { gap: 0.5rem; flex-wrap: wrap; }

/* ============================================================
   Post a case form (batch 18)
   The problem: Pico gave a label->input gap and a field->field gap that were nearly equal, so
   labels looked as close to the input ABOVE as to their own. Here the gap inside a field is
   small (0.25rem) and the gap between fields is large (1.25rem). Scoped to #case-form so the
   other forms in the app are not affected.
   ============================================================ */
#case-form .field { display: block; margin: 0 0 1rem; }
#case-form .field > input:not([type="checkbox"]):not([type="radio"]),
#case-form .field > textarea { margin: 0.25rem 0 0; }
#case-form .field > small { display: block; margin: 0.25rem 0 0; }

/* The small grey "Optional" beside a label: quiet, normal weight. */
#case-form .optional { margin-left: 0.5rem; font-size: var(--font-size-sm); font-weight: var(--weight-regular); color: var(--pico-muted-color); }
/* Two fields side by side on wide screens, stacked on a phone. */

/* Fieldset-based field (Urgency): drop Pico's fieldset margins, keep the same rhythm. */
#case-form fieldset.field { padding: 0; border: 0; }
#case-form fieldset.field legend { margin: 0; padding: 0; }
/* Radios on one line. */
#case-form .choice-row { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; }
#case-form .choice-row label { margin: 0; }
/* A lone checkbox row. */
#case-form .field-check { margin-bottom: 0; }
/* The thin rule above Attachments. */
#case-form .field-divided { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); }

/* ============================================================
   Post a case: inline hints (batch 19)
   Helper text now sits on the SAME line as its label (muted, small) instead of on a line of its
   own. Only the two patient-identifier warnings remain; everything else moved into placeholders.
   ============================================================ */
#case-form .field-hint { margin-left: 0.5rem; font-size: var(--font-size-sm); font-weight: var(--weight-regular); color: var(--pico-muted-color); }

/* ============================================================
   Post a case: Urgency on one line (batch 20)
   The legend and the three radios share one row; they wrap onto two lines only on a very narrow phone.
   Discipline | Tags use the same two-column .field-row as before, now with equal columns.
   ============================================================ */
/* A <legend> will not sit inside a flex row, so float it left and let the radios flow beside it. */
#case-form fieldset.field-inline { display: block; overflow: hidden; }
#case-form fieldset.field-inline legend { float: left; width: auto; margin: 0 1rem 0 0; line-height: var(--lh-text); }
#case-form fieldset.field-inline .choice-row { margin: 0; overflow: hidden; line-height: var(--lh-text); }

/* ============================================================
   Post a case: layout and typography (batch 21)
   - Labels: small (14px) and semibold, so a label stands apart from the value typed under it.
     Typed values stay 16px regular. Checkbox and radio rows keep normal weight.
   - Hints beside a label: 14px in a darker grey (they carry the patient-identifier warnings).
   - Placeholders: lighter than typed text, so a half-filled form is easy to read.
   - "Who can see it" now lives in "Before you post", separated from the notice by a thin rule.
   - The Post button is a full-size button, full width on a phone.
   ============================================================ */
#case-form label.field:not(.field-check),
#case-form fieldset.field > legend { font-size: var(--font-size-sm); font-weight: var(--weight-strong); }
#case-form .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#case-form .field > textarea { font-size: var(--font-size-base); font-weight: var(--weight-regular); }
#case-form .field-hint,
#case-form .optional { font-size: var(--font-size-sm); font-weight: var(--weight-regular); color: var(--pico-muted-color); }
#case-form .optional { color: var(--pico-muted-color); }
/* Checkbox / radio rows: normal weight, base size. */
#case-form .field-check, #case-form .choice-row label, #case-form .share > label { font-size: var(--font-size-base); font-weight: var(--weight-regular); }
/* Visibility block: thin rule under it, then the notice. */
#case-form fieldset.share { padding: 0 0 1rem; margin: 0 0 1rem; border: 0; border-bottom: 1px solid var(--pico-muted-border-color); }
#case-form fieldset.share legend { margin-bottom: 0.5rem; }
#case-form fieldset.share > small { display: block; margin-top: 0.5rem; color: var(--pico-muted-color); }
/* The STAT line shows only while "Only the institutions and groups I tick" is selected. */
#case-form .share-stat-note { display: none !important; }
#case-form:has(input[name="share"][value="spaces"]:checked) .share-stat-note { display: block !important; }
/* Confirmation and the button. */
#case-form .confirm { margin: 1rem 0 1rem; }
#case-form button.post-button { font-size: var(--font-size-base); min-height: 2.75rem; padding-inline: 1.5rem; }
@media (max-width: 640px) { #case-form button.post-button { width: 100%; } }

/* ============================================================
   Post a case: collapsible place list (batch 23)
   The list of institutions and groups only shows once "Only the institutions and groups I choose"
   is selected. Pure CSS (:has), so no script is needed. The @supports guard matters: in a browser
   without :has() the list simply stays visible rather than being hidden for good.
   ============================================================ */
@supports selector(:has(a)) {
  #case-form fieldset.share .space-picks { display: none; }
  #case-form fieldset.share:has(input[name="share"][value="spaces"]:checked) .space-picks { display: block; }
}

/* ============================================================
   Case page: header, Actions panel, comments, forms (batch 24)
   .case-head     display only: title + urgency badge, pills, by-line (same anatomy as a card).
   .case-actions  actions only. A section + panel like everywhere else; sticky on the right on desktop,
                  and on a phone it sits BELOW the case text (the order below), so nobody scrolls past
                  buttons to reach the clinical content.
   ============================================================ */
/* A bare <header> gets a 680px cap and side padding from the page layout; this one is part of the case grid. */

.case-head-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.case-head-title .case-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.case-head-title > .tag { flex: none; margin: 0.25rem 0 0; }
.case-head .pills { margin: 0.5rem 0 0; }
.case-byline { margin: 0.5rem 0 0; font-size: var(--font-size-sm); color: var(--pico-muted-color); }
.case-byline a { color: inherit; }
.case-byline a:hover { color: var(--pico-primary); }

/* Phone: ONE column. .case-main dissolves (display: contents) so its blocks can be ordered around the
   Actions panel: header, the case text, Actions, then everything else (resolve, references, related, discussion). */

@media (min-width: 900px) {
  /* Desktop: header across the top, case text left, Actions right. Explicit grid placement; order reset. */
  
  
  .case-head { grid-column: 1 / -1; grid-row: 1; }
  
  
}

/* Inside the Actions panel: groups separated by a thin rule; buttons fill the width; quiet links stay small. */

/* Comments: Reply, Message and Report are ONE kind of action (quiet teal text); Delete is red, on the right. */
.comment-head { margin: 0 0 0.25rem; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
html body .comment-actions :is(summary, a, button.link-button) {
  color: var(--pico-primary); font-size: var(--font-size-sm); font-weight: var(--weight-strong); text-decoration: none;
}
html body .comment-actions :is(summary, a, button.link-button):is(:hover, :focus-visible) { color: var(--pico-primary-hover); text-decoration: underline; }
html body .comment-actions form.comment-delete { margin-left: auto; }

/* Forms on this page (resolve, add publication, link a case, comments): the same field rhythm as Post a case. */
.stack-form label.field:not(.field-check) { display: block; margin: 0 0 1rem; font-size: var(--font-size-sm); font-weight: var(--weight-strong); }
.stack-form .field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.stack-form .field > textarea { margin: 0.25rem 0 0; font-size: var(--font-size-base); font-weight: var(--weight-regular); }
.stack-form label.field-check { display: block; margin: 0.25rem 0 1rem; font-size: var(--font-size-base); font-weight: var(--weight-regular); }
.stack-form .field-hint, .stack-form .optional { margin-left: 0.5rem; font-size: var(--font-size-sm); font-weight: var(--weight-regular); color: var(--pico-muted-color); }
.stack-form .optional { color: var(--pico-muted-color); }
.stack-form > textarea { margin: 0 0 0.75rem; }
.stack-form .image-attach { margin: 0.25rem 0 1rem; }
.stack-form .image-attach .field-label { display: block; margin-bottom: 0.25rem; font-size: var(--font-size-sm); font-weight: var(--weight-strong); }
.stack-form .image-attach > input[type="file"] { margin-bottom: 0.5rem; }

/* ============================================================
   Case page: ONE look for every action in the Actions panel (batch 25)
   Groups (Discuss, Contribute, Organise, Manage, Moderate) each get a small-caps label and a stack of
   full-width actions. Primary = filled, secondary = outlined, danger = red text, quiet = teal text.
   A FOLDED action (Save to collection, Case of the week) wears the secondary look, so it reads as a
   button that opens, not as a stray heading.
   ============================================================ */

/* every plain action fills the panel width (the general button rule sets width:auto, so this out-ranks it) */

/* a folded action looks like a secondary button. The :not() pairs only lift the specificity above Pico's
   own details/summary colours. */

/* the little arrow: inline, in the text line (Pico draws its own as a floating block, which wrapped) */

/* ============================================================
   Case page: Actions as icons (batch 26)
   Four short rows of 2.25rem icon buttons instead of a tall stack of full-width buttons.
     filled = .primary, outlined = .secondary, no box = .quiet (teal) and .danger (red).
   Desktop: icon only, the name shows as a tooltip on hover/focus (and is read aloud). Phone: no hover, so the
   name is shown beside the icon and the buttons wrap in rows.
   The long selectors out-rank the general button rules (batch 15 / 25); they are not decoration.
   ============================================================ */

/* quiet and destructive icons have no box */

/* a saved case, or a case that is the case of the week: the icon is filled */

/* folded actions (Save, Case of the week): the icon is the summary; when open, the list is a small popover over the
   row below (position: absolute inside the row), so the other icons do not move. */

/* no arrow: the older "folded action" rules (batch 25) drew one; these out-rank them */

/* tooltip (desktop only: a phone has no hover, and shows the name beside the icon instead) */

/* phone and tablet: icon plus name, wrapping */

/* ============================================================
   Case page: actions below the section they belong to (batch 27)
   ONE column. Each section (The case, Resolution, References, Related cases, Discussion) is a label plus a
   panel, with its own actions directly below it. The actions about the whole case are the last section.
   .abtn = an action with an icon and a short label:
        .secondary  outlined teal      .quiet  teal text, no box      .danger  red text, no box
   A button that needs a form is the <summary> of details.act-fold, so the form opens right under it.
   The long selectors out-rank the general button rules (batches 15 and 26); they are not decoration.
   The older .case-actions / .ibtn rules from batches 24 to 26 no longer match anything and can be deleted later.
   ============================================================ */
/* a bare <header> gets a 680px cap and side padding from the page layout; this one is part of the page flow */
.case-page > .case-head { max-width: none; margin: 0 0 0.75rem; padding-inline: 0; }
.case-page .act-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0.5rem 0 0; }
.case-page .act-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.case-page .act-group form { margin: 0; display: contents; }

.case-page .abtn .ico { width: 1.1rem; height: 1.1rem; flex: none; }
.case-page .is-saved > summary .ico, .case-page .abtn.is-on .ico { fill: currentColor; }

/* a folded action: the button is the summary, the form opens below it */
.case-page details.act-fold { margin: 0.5rem 0 0; padding: 0; border: 0; background: none; }
html body .case-page details.act-fold > summary.abtn::after, html body .case-page details.act-fold[open] > summary.abtn::after { content: none; display: none; }
.case-page details.act-fold > summary::-webkit-details-marker { display: none; }
.case-page details.act-fold > summary::marker { content: ""; }
html body .case-page details.act-fold[open] > summary.abtn.abtn { background: var(--surface-inset); }
.case-page details.act-fold > :not(summary):first-of-type { margin-top: 0.75rem; }
.case-page details.act-fold > .stack-form { padding: 1rem; background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md); margin-top: 0.75rem; }

/* inside the last section the folded actions (Save, Case of the week) open a small popover ABOVE the button */
.case-page .act-group > details.act-fold { margin: 0; position: relative; }
.case-page details.act-fold.pop > .fold-body {
  position: absolute; z-index: 20; left: 0; bottom: calc(100% + 0.4rem); width: min(17rem, 80vw); margin: 0;
  padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-md); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.case-page .fold-body .save-list { margin: 0 0 0.25rem; }
.case-page .fold-body .meta { margin: 0.25rem 0 0; }
.case-page .fold-body .save-new { display: grid; gap: 0.5rem; }
.case-page .fold-body .save-new input[type="text"] { margin: 0; }
.case-page .case-foot > h2 { margin-top: 1.5rem; }

/* ============================================================
   Case page: one button style in the last section (batch 28)
   Every action there is an outlined button: teal for normal actions, red for Retract and Delete (the two
   that destroy something). No plain-text actions in the row. Slightly tighter, so the row fits on fewer lines.
   ============================================================ */
.case-page .case-foot .act-row, .case-page .case-foot .act-group { gap: 0.5rem 0.5rem; }

/* Messaging: one layout for every conversation, inbox header, new-conversation form (batch 29)
   - .conv wraps the three conversation pages so these rules cannot touch anything else.
   - Header: back link, name + type badge, one line of context, the case it is about.
   - "Details" is ONE folded panel (cases, people, Block / Leave) so the messages start near the top.
   - The thread keeps its bubbles; each bubble gets a footer (who/when on the left, one quiet action on the right).
   - The reply bar sits directly under the thread: a short textarea, "Attach files" fold, Send. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Inbox: title on the left, its one primary action on the right. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head [role="button"] { margin: 0; }

/* Header */
.conv-head { margin-bottom: 1rem; }
.conv > .conv-head > header, .conv .conv-head { max-width: none; padding-inline: 0; }
.conv-back { display: inline-block; margin-bottom: 0.25rem; font-size: var(--font-size-sm); }
.conv-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.conv-title h1 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--weight-strong); }
.conv-head > .meta { margin: 0.25rem 0 0; font-size: var(--font-size-sm); }
.conv-head > h1 { margin: 0.25rem 0 0; font-size: var(--font-size-lg); font-weight: var(--weight-strong); }
.conv-case { margin: 0.5rem 0 0; font-size: var(--font-size-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }

/* Details: one white panel, folded. */
.conv .conv-details {
  background: #fff; border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
  padding: 0.5rem 1rem; margin: 0 0 1rem;
}
.conv .conv-details > summary { font-size: var(--font-size-sm); font-weight: var(--weight-strong); cursor: pointer; margin: 0; }
.conv .conv-details[open] > summary { margin-bottom: 0.75rem; }
.conv-sub { margin: 0 0 1rem; }
.conv-sub h3 {
  margin: 0 0 0.5rem; font-size: var(--font-size-sm); font-weight: var(--weight-strong);
  color: var(--pico-muted-color);
}
.conv-sub .result-list { margin-bottom: 0.75rem; }
.conv-danger { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color); }
.conv-danger form { margin: 0; }

/* A search box and its button on one row (cases, people). */
.search-row { display: flex; gap: 0.5rem; align-items: stretch; margin: 0 0 0.75rem; }
.search-row input { flex: 1 1 auto; margin: 0; min-width: 0; }
.search-row button { flex: 0 0 auto; margin: 0; width: auto; }

/* Bubble footer */
.bubble-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; margin-top: 0.25rem; }
.bubble-foot small { font-size: var(--font-size-sm); }
.bubble-foot .report-box { margin: 0; }
.bubble-foot .report-box > summary { font-size: var(--font-size-sm); color: var(--pico-muted-color); cursor: pointer; }
.bubble-foot .report-box[open] { flex-basis: 100%; }
.bubble-foot .inline-action { margin: 0; }

/* Reply bar */
.reply-bar { background: #fff; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; padding: 0.75rem 1rem; margin-top: 1rem; }
.reply-bar textarea { margin: 0 0 0.5rem; resize: vertical; }
.reply-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.reply-actions .reply-attach { margin: 0; flex: 1 1 14rem; }
.reply-actions .reply-attach > summary { font-size: var(--font-size-sm); }
.reply-actions button { margin: 0; width: auto; }
.reply-bar .needs-action { margin-bottom: 0.75rem; }
.conv-blocked { margin-top: 1rem; }

/* New conversation form: same field rhythm as Post a case. */
#new-chat .field { display: block; margin: 0 0 1rem; }
#new-chat .field > textarea, #new-chat .field > input { margin: 0.25rem 0 0; }
#new-chat .subhead { margin: 1rem 0 0.5rem; font-size: var(--font-size-sm); font-weight: var(--weight-strong); }
#new-chat .search-row { margin-bottom: 0.75rem; }

/* Groups: page heads, rows with actions on the right, "Manage" fold, topics (batch 32)
   - .g-row: a list row with the text on the left and its actions on the right (they wrap under on a phone).
   - .g-manage: ONE "Manage" fold per member; role changes and Remove are inside it, Remove last.
   - #new-group: the create form is hidden until "New group" is clicked (it is then the :target), or when
     the page came back with an error (class is-open).
   - .g-end: Leave / Delete group, the last thing on the page. */
.g-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.g-row > span:first-child { flex: 1 1 12rem; min-width: 0; }
.g-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin-left: auto; }
.g-actions form { margin: 0; }
.g-actions button { margin: 0; width: auto; }
.g-row .bulk-check { margin: 0 0.5rem 0 0; vertical-align: middle; }

details.g-manage { margin: 0; flex: 0 0 auto; }
details.g-manage > summary {
  list-style: none; cursor: pointer; font-size: var(--font-size-sm); color: var(--pico-primary);
  padding: 0.25rem 0; margin: 0; width: auto;
}
details.g-manage > summary::-webkit-details-marker { display: none; }
details.g-manage > summary::after { display: none; content: none; }
details.g-manage[open] { flex-basis: 100%; }
.g-manage-body {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.5rem 0 0.25rem;
  border-top: 1px solid var(--pico-muted-border-color); margin-top: 0.25rem;
}
.g-manage-body form { margin: 0; }

.g-invite { margin-top: 0.75rem; }
.g-invite .subhead { margin: 1rem 0 0.5rem; font-size: var(--font-size-sm); font-weight: var(--weight-strong); }

#new-group:not(:target):not(.is-open) { display: none; }

.group-form .field { display: block; margin: 0 0 1rem; }
.group-form .field > input, .group-form .field > textarea { margin: 0.25rem 0 0; }
.group-form details.more .field { margin-bottom: 1rem; }
.group-form button[type="submit"] { margin: 0; }

.g-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1.5rem 0 0.5rem; }
.g-end form { margin: 0; }
.g-end .meta { font-size: var(--font-size-sm); }

/* Account recovery, legal pages, footer (batch 35) */
.site-foot { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 1rem; text-align: center; font-size: var(--font-size-sm); color: var(--pico-muted-color); }
.site-foot a { color: inherit; }
@media (max-width: 899px) { .site-foot { padding-bottom: 5rem; } } /* clear of the bottom tab bar on phones */
.legal { max-width: 44rem; }
.legal article p:last-child, .legal article ul:last-child { margin-bottom: 0; }
.legal ul { padding-left: 1rem; }
.consent { display: block; margin: 0 0 1rem; font-size: var(--font-size-sm); }

/* ==========================================================================
   Batch 36: one small-caps label, a text-size floor, weights, bigger touch targets.
   Appended on purpose (nothing above was edited); each block says what it overrides.
   ========================================================================== */

/* ---- 1. Text size floor. The smallest text (--font-size-xs) was 0.75rem, which is 11.25px on desktop
        because the root is 93.75% there. max() keeps it at 12px or more on every screen. ---- */
html:root, html:root:not([data-theme]), html[data-theme] { --font-size-xs: max(0.75rem, 12px); }   /* same selector as the token block above, so this later line wins */
.nav-count, .count, .tab-item { font-size: var(--font-size-sm); }

/* ---- 2. Weights: 400 and 600 only (700 is for the small-caps label). Buttons inherited 500 from the
        general button rule near the top of this file; the nav items and the rail toggle stay as they were. ---- */
:is(button, [type="submit"], [type="button"], [role="button"]):not(.nav-item):not(.rail-toggle):not(.nav-item) {
  font-weight: var(--weight-strong);
}

/* ---- 3. Page titles use the same ink as the rest of the text (Pico's h1 grey #2d3138 was left over). ---- */
html:root, html:root:not([data-theme]), html[data-theme] { --pico-h1-color: var(--pico-color); }

/* ---- 4. Sign-in and recovery forms use the same field label as the case forms (14px, semibold).
        Check-box labels (the terms consent) stay regular. ---- */
.auth-card label:not(:has(> input[type="checkbox"])) {
  font-size: var(--font-size-sm); font-weight: var(--weight-strong);
}

/* ---- 5. ONE small-caps label. Five different treatments (size, weight and letter-spacing all varied) are now
        one: 14px, bold, 0.06em, muted. Position (section vs inside a panel) tells them apart, not the style. ---- */
:is(main, section) > h2,
.featured-label {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}
/* Card and row titles are h3s too: they are NOT labels, so they keep the normal look. */
.card h3, .g-row h3, li h3 {
  font-size: var(--font-size-base); font-weight: var(--weight-strong);
  letter-spacing: normal; text-transform: none; color: var(--pico-color);
}

/* ---- 6. Figures: tabular numerals only for lab values (.lab keeps them); badges and table cells don't need them. ---- */
.count, .nav-count, td { font-variant-numeric: normal; }

/* ---- 7. Touch screens (a finger, not a mouse): every control is about 44px tall to hit.
        Desktop (pointer: fine) is untouched. ---- */
@media (pointer: coarse) {
  /* text fields and selects: 39px -> 44px */
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
  select { min-height: 2.75rem; }

  /* folds (Filters, Attach files, Report, Invite a colleague ...): more room above and below the words */
  main details:not(.act-fold) > summary:not(.abtn):not(.ibtn) { padding-block: 0.75rem; min-height: 2.75rem; box-sizing: border-box; }
  details.g-manage > summary { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* check boxes and radios: the whole label row is 44px tall (inline-flex keeps rows side by side) */
  label:has(> input[type="checkbox"], > input[type="radio"]) {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  }
  label:has(> input[type="checkbox"], > input[type="radio"]) > input { margin: 0; flex: none; }
  input.bulk-check { width: 1.5rem; height: 1.5rem; }

  /* sub-tabs (Groups / Institutions / People, admin tabs) */
  .tab { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* top bar: brand mark and Menu button */
  .brand { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
  .menu > summary { width: 2.75rem; height: 2.75rem; }

  /* small text links: the look does not change; an invisible area around each one makes it easy to hit */
  .comment-actions a, .conv-back, .g-actions a, .auth-card a:not([role="button"]), .site-foot a, .card-foot a {
    position: relative;
  }
  .comment-actions a::after, .conv-back::after, .g-actions a::after, .auth-card a:not([role="button"])::after,
  .site-foot a::after, .card-foot a::after {
    content: ""; position: absolute; inset: -0.7rem -0.4rem;
  }
}

/* ==========================================================================
   Batch 38a: profile numbers, trending, following.
   ========================================================================== */

/* The row of numbers on a profile: Cases posted, Resolved ... Each is a small tile that wraps on a phone. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.75rem; margin: 0; }
.stat-row > div { background: var(--surface-inset); border-radius: var(--shape-sm); padding: 0.5rem 0.75rem; }
.stat-row dt { font-size: var(--font-size-sm); color: var(--pico-muted-color); margin: 0; }
.stat-row dd { margin: 0.25rem 0 0; font-size: var(--font-size-lg); font-weight: var(--weight-strong); }

/* "Trending this week" on the feed: a white panel with a small-caps label, like the other sections. */
.trending { background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md);
  padding: 0.75rem 1rem; margin-block: 0 1rem; }
.trending h2 { margin-top: 0; }
.trending-list { list-style: none; margin: 0; padding: 0; }
.trending-list li { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 0.5rem; }
.trending-list li + li { border-top: 1px solid var(--pico-muted-border-color); }

/* ==========================================================================
   Batch 38b: case summary and monthly theme banner.
   ========================================================================== */

/* The author's one-line summary, the first thing in "The case". */
.case-summary { font-size: var(--font-size-base); font-weight: var(--weight-strong); margin: 0 0 1rem; padding-left: 0.75rem;
  border-left: 3px solid var(--pico-primary); }

/* "November theme" on the feed: same shape as the Case of the Week banner, in the app's teal. */
.theme-banner { border: 1px solid var(--pico-muted-border-color); border-left: 4px solid var(--pico-primary);
  background: var(--surface); border-radius: var(--shape-sm); padding: 0.75rem 1rem; margin-block: 0 1rem; }
.theme-banner h2 { margin: 0.25rem 0; font-size: var(--font-size-base); text-transform: none; letter-spacing: 0; color: var(--pico-color); }
.theme-banner .featured-label { color: var(--pico-primary); }
.theme-banner p { margin-block: 0.25rem; }

/* ==========================================================================
   Batch 38c: polls on cases.
   ========================================================================== */

/* One row per choice: the label and "40% · 6" on one line, the bar under it. Uses the native <progress> element
   (no inline styles), which Pico already styles in the app's teal. */
.poll-results { list-style: none; margin: 0; padding: 0; }
.poll-results li { margin-bottom: 0.75rem; }
.poll-label { display: flex; justify-content: space-between; gap: 0.75rem; font-size: var(--font-size-sm); }
.poll-results progress { height: 0.6rem; margin: 0.25rem 0 0; }
.poll .field-check { display: block; margin-bottom: 0.5rem; }

/* ==========================================================================
   Batch 39: the type, spacing and action SYSTEM. This block comes last and is the single source of truth.
   (What it replaces was cut from the rules above, so there are no competing definitions.)

   TYPE      3 sizes: 14px (sm), 16px (base), 20px (lg).   2 weights: 400 and 600.
             Line height 1.5 for text, 1.25 for headings and controls.
   SPACING   one 4px scale: 4 / 8 / 12 / 16 / 24 / 32  (--space-1 .. --space-6).
             panel padding 16 | field to field 16 | label to control 4 | section to section 24 | label to panel 8
   CONTROLS  every input, select and filled button is 40px tall (44px on a touch screen).
   ACTIONS   three tiers (see section 4).
   ========================================================================== */

/* ---- 1. Tokens ---- */
html:root, html:root:not([data-theme]), html[data-theme] {
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --control-h: 2.5rem;               /* inputs, selects, filled buttons */
  --action-h: 2rem;                  /* text actions (no box) */
  --lh-text: 1.5;
  --lh-tight: 1.25;
  --font-size-xs: var(--font-size-sm);   /* there is no 12px size any more */
  --weight-label: var(--weight-strong);  /* nor a 700 */
  --warn-bg: var(--state-priority-bg);
  --warn-fg: var(--state-priority-fg);
  /* Pico paints headings and typed text in its own greys; use the one ink colour instead */
  --pico-h1-color: var(--pico-color);  --pico-h2-color: var(--pico-color);  --pico-h3-color: var(--pico-color);
  --pico-h4-color: var(--pico-color);  --pico-h5-color: var(--pico-color);  --pico-h6-color: var(--pico-color);
  --pico-form-element-color: var(--pico-color);
}
@media (pointer: coarse) {
  html:root, html:root:not([data-theme]), html[data-theme] { --control-h: 2.75rem; --action-h: 2.75rem; }
}

/* ---- 2. Text. Every piece of text is 14, 16 or 20px and 400 or 600. ---- */
body { line-height: var(--lh-text); }
h1, h2, h3, h4, h5, h6, button, [role="button"], summary, label, legend, th, .tag, .pill, .count { line-height: var(--lh-tight); }
h4, h5, h6 { font-size: var(--font-size-base); font-weight: var(--weight-strong); }
th { font-weight: var(--weight-strong); }
/* one muted look for hints and optional markers */
.optional, .field-hint { font-size: var(--font-size-sm); font-weight: var(--weight-regular); color: var(--pico-muted-color); }
/* case body: the section headings (Clinical presentation, Laboratory findings ...) are the one accent */
.case-page h3 { color: var(--pico-primary-hover); }
/* ...but a title of an item in a list stays ink */
.card h3, .g-row h3, li h3, .person-name { color: var(--pico-color); }
/* placeholders: ONE look everywhere (muted, regular; about 5.6:1 on white) */
::placeholder { color: var(--pico-muted-color); opacity: 1; font-weight: var(--weight-regular); }
/* the consent / disclaimer note on the post form uses the warning colour (red was too alarming for a reminder) */
.disclaimer, .case-disclaimer { color: var(--warn-fg); }

/* ---- 3. Spacing and controls ---- */
label { margin-bottom: var(--space-1); }
label > :is(input, select, textarea) { margin-top: var(--space-1); }
/* a label that WRAPS its control: the control's own 16px bottom margin is the field-to-field gap */
label:has(> :is(input:not([type="checkbox"], [type="radio"]), select, textarea)) { margin-bottom: 0; }
fieldset { margin-bottom: var(--space-4); }
legend { margin-bottom: var(--space-1); }
/* every single-line control is --control-h tall, so a search box and its button line up */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"]),
select {
  height: var(--control-h); min-height: var(--control-h); padding-block: 0; box-sizing: border-box;
}
textarea { min-height: calc(var(--control-h) * 2); }
.search-row, .search-row :is(input, button) { min-height: var(--control-h); }

/* ---- 4. Actions. Three tiers; the tier is the class on the element.
          PRIMARY      filled        .primary                     the one thing the page or form is for
          ACTION       teal, no box  .secondary .link-button .quiet .abtn      everything else (icon + label)
          DESTRUCTIVE  red, no box   .danger                      Delete, Retract, Suspend, Block ...
        A link (<a>) navigates; a button changes something; a link wears an action look only via role="button".
        Exception: a submit button right after a text field in a form (Search, Add, Invite) is filled,
        so it reads as the way to submit that field. ---- */
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn):is(.primary, .secondary, .danger, .link-button, .quiet, .abtn):not(.nav-item) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; width: auto; min-height: var(--action-h); margin: 0; padding: 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--shape-md);
  background: transparent; color: var(--pico-primary);
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--weight-strong); line-height: var(--lh-tight);
  text-decoration: none; text-align: center; cursor: pointer; list-style: none; box-shadow: none;
}
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn):is(.secondary, .link-button, .quiet, .abtn):not(.primary):not(.danger):not(.nav-item):is(:hover, :focus-visible) {
  background: var(--surface-inset); color: var(--pico-primary-hover); text-decoration: none;
}
/* destructive: same shape, red */
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn).danger:not(.nav-item) { color: var(--state-urgent-fg); }
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn).danger:not(.nav-item):is(:hover, :focus-visible) {
  background: var(--state-urgent-bg); color: var(--state-urgent-fg);
}
/* primary: filled */
html body :is(button, [type="submit"], [type="button"], a[role="button"]).primary:not(.nav-item) {
  min-height: var(--control-h); padding-inline: var(--space-4);
  background: var(--pico-primary); border-color: var(--pico-primary); color: var(--on-primary);
}
html body :is(button, [type="submit"], [type="button"], a[role="button"]).primary:not(.nav-item):is(:hover, :focus-visible) {
  background: var(--pico-primary-hover); border-color: var(--pico-primary-hover); color: var(--on-primary);
}
/* the exception: a submit button after a text field in a form is filled */
html body form:has(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) > button[type="submit"].secondary:last-child:not(.nav-item) {
  min-height: var(--control-h); padding-inline: var(--space-4);
  background: var(--pico-primary); border-color: var(--pico-primary); color: var(--on-primary);
}
html body form:has(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) > button[type="submit"].secondary:last-child:not(.nav-item):is(:hover, :focus-visible) {
  background: var(--pico-primary-hover); border-color: var(--pico-primary-hover); color: var(--on-primary);
}
/* keyboard focus ring, disabled state, icons */
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn):focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
html body :is(button, [type="submit"], [type="button"], a[role="button"]):disabled, html body [aria-disabled="true"][role="button"] { opacity: 0.5; cursor: not-allowed; }
.abtn .ico, .action-icon { width: 1.125rem; height: 1.125rem; flex: none; margin: 0; }
/* inside a sentence-like row (comment footer, message bubble) the action sits flush with the text */
:is(.comment-actions, .bubble-foot, .card-foot) :is(button, a[role="button"]).link-button { padding-inline: 0; }

/* ---- 5. Badges. ONE shape for the old "tag" and "pill": a small rounded label, never uppercase. ---- */
.tag, .pill {
  display: inline-block; padding: 0 var(--space-2); border-radius: 999px;
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); line-height: var(--lh-tight);
  text-transform: none; letter-spacing: 0;
}
.pill-quiet { font-weight: var(--weight-regular); }

/* ---- 6. Vertical rhythm leftovers (found by the spacing audit) ---- */
li { margin-bottom: var(--space-1); }                                   /* Pico used 3px here */
h4, h5, h6 { margin-block: var(--space-4) var(--space-1); }
/* helper text directly under a control sits 4px below it and 16px above the next field */
label > :is(input, select, textarea) + small { margin-top: calc(var(--space-3) * -1); margin-bottom: var(--space-4); }
/* the phone tab bar: five labels at 14px must fit in a 390px screen ("Discussions" is the longest) */
.tab-item { padding-inline: 0; letter-spacing: -0.02em; }

/* ==========================================================================
   Batch 40: case page and form.
   1. Collapsible case-page sections   2. Tags as links and the filter chip   3. Checkbox/radio rows that wrap cleanly
   4. Urgency stacked on phones        5. The disclaimer in the warning colour
   ========================================================================== */

/* ---- 1. A section is <section id> > <details class="sect"> > <summary><h2>Title</h2> chevron</summary> + body.
        The summary looks exactly like the small-caps section label, with a chevron on the right. ---- */
details.sect { margin: 0; padding: 0; border: 0; background: none; }
details.sect > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--action-h); margin: 0 0 var(--space-2); padding: 0; list-style: none; cursor: pointer;
}
details.sect[open] > summary { margin-bottom: var(--space-2); }
details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary::marker { content: ""; }
details.sect > summary::after { content: none; display: none; }       /* Pico draws its own arrow; ours is the .ico */
details.sect > summary > h2 {
  margin: 0; font-size: var(--font-size-sm); font-weight: var(--weight-strong); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--pico-muted-color);
}
details.sect > summary > .ico { width: 1.25rem; height: 1.25rem; flex: none; color: var(--pico-muted-color); transition: transform 0.15s ease; }
details.sect[open] > summary > .ico { transform: rotate(180deg); }
details.sect > summary:is(:hover, :focus-visible) > :is(h2, .ico) { color: var(--pico-primary-hover); }
details.sect > summary:focus-visible { outline: 2px solid var(--pico-primary); outline-offset: 2px; border-radius: var(--shape-sm); }
/* a folded section is one quiet line; a hairline separates the lines */
details.sect:not([open]) > summary { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 0; }
/* the section's own panel starts right under the label (the h2's old top margin is gone) */
details.sect > :is(article, ul, p, .act-row):first-of-type { margin-top: 0; }

/* ---- 2. A tag is a link to the cases that carry it. It stays a quiet pill; it turns teal when pointed at. ---- */
a.pill { text-decoration: none; position: relative; z-index: 1; }              /* above a card's stretched title link */
a.pill-quiet:is(:hover, :focus-visible) { color: var(--pico-primary-hover); text-decoration: underline; }
/* "Tag: X x": the active filter, with its remove button */
.filter-chips { margin: 0 0 var(--space-4); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2rem; padding: 0 var(--space-1) 0 var(--space-3);
  border-radius: 999px; background: var(--state-neutral-bg); color: var(--state-neutral-fg);
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); line-height: var(--lh-tight);
}
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; color: inherit; text-decoration: none; }
.chip-x .ico { width: 1rem; height: 1rem; }
.chip-x:is(:hover, :focus-visible) { background: rgba(0, 0, 0, 0.08); }
@media (pointer: coarse) { .chip { min-height: 2.75rem; } .chip-x { width: 2.75rem; height: 2.75rem; } }

/* ---- 3. A checkbox or radio with its text: the box hangs in the margin and wrapped lines line up under the first
        word (instead of running back under the box). Works with links and bold text inside the label. ---- */
label:has(> input[type="checkbox"], > input[type="radio"]) {
  display: block; padding: 0 0 0 1.5rem; text-indent: -1.5rem; line-height: var(--lh-text);
}
label:has(> input[type="checkbox"], > input[type="radio"]) > :not(input) { text-indent: 0; }
label:has(> input[type="checkbox"], > input[type="radio"]) > small { display: block; text-indent: 0; }
label:has(> input[type="checkbox"], > input[type="radio"]) > input[type="checkbox"],
label:has(> input[type="checkbox"], > input[type="radio"]) > input[type="radio"] {
  width: 1rem; height: 1rem; margin: 0 var(--space-2) 0 0; vertical-align: -0.2rem; text-indent: 0;
}
@media (pointer: coarse) {
  /* a 44px row to tap: 24px of text plus 10px above and below */
  label:has(> input[type="checkbox"], > input[type="radio"]) { display: block; min-height: 2.75rem; padding-block: 0.625rem; }
}

/* ---- 4. Urgency: legend and three radios on one row on a wide screen; on a phone the legend sits above and each
        choice is its own row (the three do not fit side by side at 390px). ---- */
@media (max-width: 767px) {
  #case-form fieldset.field-inline { overflow: visible; }
  #case-form fieldset.field-inline legend { float: none; margin: 0 0 var(--space-1); }
  #case-form fieldset.field-inline .choice-row { display: flex; flex-direction: column; gap: 0; overflow: visible; }
}

/* ---- 5. The disclaimer: amber, like the Priority badge. (Red was too alarming for a standing reminder.) ---- */
.notice.disclaimer { background: var(--warn-bg); color: var(--warn-fg); border: 0; border-left: 3px solid var(--warn-fg); }
.notice.disclaimer strong { color: inherit; }

/* ==========================================================================
   Batch 41: messages (linked cases, More menu), blocking, action rows outside the case page.
   ========================================================================== */

/* Rows of actions (they used to exist only on the case page). Left group = the main actions, right group = the rare ones. */
.act-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; }
.act-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.act-group form { margin: 0; display: contents; }
.profile-head .act-row { margin-top: var(--space-3); }

/* A folded action (a button that opens a form right under itself) and the small "More" menu: no Pico arrow, no marker. */
details:is(.act-fold, .more-menu) > summary::after { content: none; display: none; }
details:is(.act-fold, .more-menu) > summary::-webkit-details-marker { display: none; }
details:is(.act-fold, .more-menu) > summary::marker { content: ""; }
.conv details.act-fold { margin: var(--space-2) 0 0; padding: 0; border: 0; background: none; }
.conv details.act-fold[open] > summary.abtn { background: var(--surface-inset); }
.conv details.act-fold > :not(summary):first-of-type { margin-top: var(--space-3); }

/* Linked cases: a visible panel above the thread */
.conv-cases { margin: 0 0 var(--space-5); }
.conv-cases > article { margin-bottom: var(--space-2); }

/* Header: the name is a link; "More" sits at the far end of the title row and opens a small menu */
.conv-title h1 a { color: inherit; text-decoration: none; }
.conv-title h1 a:is(:hover, :focus-visible) { color: var(--pico-primary); text-decoration: underline; }
details.more-menu { position: relative; margin: 0 0 0 auto; padding: 0; border: 0; background: none; }
.more-body {
  position: absolute; z-index: 20; right: 0; top: calc(100% + var(--space-1)); min-width: 14rem; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.more-body form { margin: 0; }
.more-body button { width: 100%; justify-content: flex-start; }


/* Every icon has a size wherever it appears (it was only sized inside .abtn before). More specific rules (chevron, chip) win. */
.ico { width: 1.125rem; height: 1.125rem; flex: none; }
/* a message's Report is an action button: no Pico arrow after it */
details.report-box > summary::after { content: none; display: none; }

/* ==========================================================================
   Batch 42: discussions (replies, the New discussion form, People fold)
   ========================================================================== */

/* A reply quotes the message it answers: a slim bar, the sender in bold, one line of the text. Click = jump to it. */
.reply-quote {
  display: block; margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--pico-primary); border-radius: 0 var(--shape-md) var(--shape-md) 0;
  background: rgba(0, 0, 0, 0.05); color: var(--pico-muted-color); font-size: var(--font-size-sm); line-height: var(--lh-tight);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-quote strong { color: var(--pico-color); font-weight: 600; }
.reply-quote:is(:hover, :focus-visible) { background: rgba(0, 0, 0, 0.09); }

/* The message you jumped to from a quote is briefly outlined. */
.bubble:target { outline: 2px solid var(--pico-primary); outline-offset: 2px; }

/* "Replying to Ann: ..." above the message box, with Cancel at the end */
.replying {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--pico-primary); background: var(--surface-inset); border-radius: 0 var(--shape-md) var(--shape-md) 0;
  font-size: var(--font-size-sm);
}
.replying > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* People (private groups): same folded-action look as "Add case" */
.conv-people { margin-bottom: var(--space-5); }
.conv-people h3 { margin-top: var(--space-3); }

/* The Reply action sits with Report at the end of the footer, as a quiet action (no underline). */
.bubble-foot small { margin-right: auto; }
.bubble-foot a.abtn { text-decoration: none; }
/* Helper text under a field must not sit on top of the box above it (Pico pulls it up). */
label.field > small { display: block; margin-top: var(--space-1); }

/* ==========================================================================
   Batch 43: groups (filter control, card tags)
   ========================================================================== */

/* A two-way filter made of links: "All groups | My groups". The current one is filled. */
.seg { display: inline-flex; margin: var(--space-3) 0 var(--space-4); border: 1px solid var(--pico-muted-border-color); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg-item {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--space-4);
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); color: var(--pico-muted-color); text-decoration: none;
}
.seg-item:is(:hover, :focus-visible) { color: var(--pico-primary-hover); }
.seg-item.active { background: var(--pico-primary); color: var(--pico-primary-inverse); }
@media (pointer: coarse) { .seg-item { min-height: 2.75rem; } }

/* The "New" actions inside a group's Discussions and Cases sections */
details.sect > .act-row { margin: 0 0 var(--space-3); }

/* ==========================================================================
   Batch 44: institutions and people (filters, invite fold outside a .conv page)
   ========================================================================== */

/* The People filters: three selects side by side on a wide screen, stacked on a phone; the buttons take a full row. */
.filters { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.filters .field { margin: 0; }
@media (min-width: 768px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .filters .act-row { grid-column: 1 / -1; }
}

/* "Invite someone" on the institution's members page (it is not inside a .conv wrapper, so it needs its own fold style) */
details.act-fold.inst-invite { margin: 0 0 var(--space-4); padding: 0; border: 0; background: none; }
details.act-fold.inst-invite[open] > summary.abtn { background: var(--surface-inset); }
details.act-fold.inst-invite > :not(summary):first-of-type { margin-top: var(--space-3); }

/* ==========================================================================
   Batch 45: collections and saved cases
   - the radio group on the New collection page (fieldset.field outside #case-form)
   - the pinned "Saved cases" card sits above the filter, so it gets a little air below it
   ========================================================================== */
.conv fieldset.field { padding: 0; border: 0; margin: 0 0 var(--space-4); }
.conv fieldset.field legend { margin: 0 0 var(--space-2); padding: 0; font-weight: 600; }
.conv fieldset.field label { display: block; margin: 0 0 var(--space-2); font-weight: 400; }
.conv fieldset.field small { display: block; color: var(--muted); }
.card-list + nav.seg { margin-top: var(--space-4); }
.card-list .card h3 .ico { vertical-align: -0.15em; margin-right: var(--space-1); }

/* ==========================================================================
   Batch 47: the case page (comments first, author tools together, one More menu)
   ========================================================================== */

/* Author tools under The case: buttons sit in a row; a fold that is OPEN takes the whole line, so its form is
   as wide as the page instead of squeezing next to the other buttons. */
.case-page .act-group.tools > details.act-fold[open] { flex: 1 1 100%; }

/* "Attach an image" under the comment box: a fold whose body is the file picker + the identifier tick. */
.case-page details.attach-fold { margin: 0 0 var(--space-3); }
.case-page details.attach-fold > .image-attach {
  margin: var(--space-3) 0 0; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-md);
}

/* The headings inside The case ("Clinical presentation", "The question", ...) are labels, not links: normal text
   colour. Teal is kept for things you can click. */
.case-page .case-body h3 { color: var(--pico-color); }

/* A comment the author marked as the answer: teal rule instead of grey. */
.comment.is-answer { border-left-color: var(--pico-primary); }

/* ---- the "More" menu (on the case footer and on each comment) ----
   Items are .abtn (so they take the action tier: teal text, red with .danger) laid out as a vertical list. */
html body .more-body .more-item.more-item:not(.nav-item) {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--space-2);
  width: 100%; height: auto; min-height: 2.75rem; padding: var(--space-2); text-align: left;
}
.more-body .more-item small { display: block; margin-top: 0.125rem; font-weight: 400; color: var(--pico-muted-color); line-height: var(--lh-tight); }
.more-body .more-item .ico { margin-top: 0.1rem; }
.more-body details.more { margin: 0; }
.more-body details.more > summary { display: flex; }
.more-body details.more > .save-new { padding: 0 var(--space-2) var(--space-2); display: grid; gap: var(--space-2); }
.more-body details.more > .save-new input[type="text"] { margin: 0; }

/* On the case footer the menu opens UPWARD (it is the last thing on the page) and is as wide as its longest sentence. */
.case-page .case-more { margin: 0; }
.case-page .case-more > .more-body { top: auto; bottom: calc(100% + var(--space-1)); min-width: 17rem; max-width: min(22rem, 90vw); }

/* On a comment the menu is a small "..." at the end of the action line. */
.comment-actions details.comment-more { margin-left: auto; position: relative; }
.comment-actions details.comment-more[open] { flex-basis: auto; }
.comment-actions details.comment-more > summary { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--space-2); border-radius: var(--shape-md); }
.comment-actions details.comment-more > summary .ico { width: 1.25rem; height: 1.25rem; }
.comment-actions .comment-more .more-body { min-width: 13rem; }
/* the Mark as answer button reads as one of the line's quiet actions, with its check icon */
.comment-actions form button.link-button { display: inline-flex; align-items: center; gap: var(--space-1); }
.comment-actions form button.link-button .ico { width: 1rem; height: 1rem; }
html body .comment-actions .more-body form.comment-delete { margin-left: 0; }

/* The tools row spans the whole line, and the forms inside its folds are real boxes again (an earlier rule makes every
   form inside .act-group "display: contents", which is right for the one-click buttons but not for these). */
.case-page .act-row > .act-group.tools { flex: 1 1 100%; }
.case-page .act-group.tools form.stack-form { display: block; }

/* On a phone the More button can wrap to the left edge, so its menu opens toward the right instead of off-screen. */
@media (max-width: 640px) {
  .case-page .case-more > .more-body { left: 0; right: auto; }
}

/* ==========================================================================
   Batch 48: the feed (My cases tab, Show filter that applies itself, "N new" replies)
   ========================================================================== */

/* "2 new": replies from other people on my case that I have not seen. Uses the same colour pair as a filled button,
   so the text stays readable in light and dark mode. */
.pill.pill-new {
  background: var(--pico-primary-background); color: var(--pico-primary-inverse);
  font-weight: var(--weight-strong);
}

/* The filters have no Apply button now; "Clear filters" is a quiet link under the selects. */
.filter-fields .clear-filters { grid-column: 1 / -1; font-size: var(--font-size-sm); }
.filter-fields noscript { grid-column: 1 / -1; }

/* Three selects stack in one column (the old 2-column grid left one orphan select). */
.feed-layout .filter-fields { grid-template-columns: 1fr; }
@media (min-width: 600px) and (max-width: 899px) {
  .feed-layout .filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the Quiz link shown under the Teaching filter */
.card-list > li.quiz-hint { margin: 0 0 var(--space-2); list-style: none; }

/* The People page's ".filters" rule (batch 44: a 3-column grid for a <form>) also matched the feed's
   <details class="filters">, squeezing its selects into a thin strip beside the word "Filters". Here the details
   goes back to a normal block, and its fields fill the panel. */
details.filters { display: block; grid-template-columns: none; margin: var(--space-2) 0 0; }
details.filters > summary { margin-bottom: var(--space-2); }
.feed-layout .filter-fields select { width: 100%; }

/* ==========================================================================
   Batch 49: Saved (two tabs), the collection header, one Share panel, bulk bar.
   ========================================================================== */

/* The select-and-act bar is hidden by app.js when a list has fewer than two rows. The author rule
   .bulkbar { display:flex } would otherwise beat the browser's [hidden], so say it again with force. */
.bulkbar[hidden], .bulk-check[hidden] { display: none !important; }

/* --- the owner's / reader's action row on a collection ---------------------------------------------------------
   Same folded-action look as the case page (details.act-fold), here outside .case-page and .conv. */
.col-page { margin: 0 0 var(--space-4); }
.col-page details.act-fold { margin: 0; padding: 0; border: 0; background: none; position: static; }
.col-page details.act-fold[open] { flex: 1 1 100%; }
.col-page details.act-fold[open] > summary.abtn { background: var(--surface-inset); }
.col-page .act-group.tools { flex: 1 1 100%; align-items: flex-start; }
/* the panel an open fold shows: one calm box instead of two heavy ones at the bottom of the page */
.share-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-md);
}
.share-panel h4 { margin: 0 0 var(--space-2); }
.share-panel h4:not(:first-child) { margin-top: var(--space-4); }
/* .act-group form { display: contents } is right for one-click buttons, wrong for the forms inside the panel */
.col-page .share-panel form { display: block; margin: 0; }
.col-page .share-panel form.stack-form { display: block; }
.col-page .share-panel form + form { margin-top: var(--space-4); }
/* a share row: who, then the level menu, then Remove, wrapping on a phone */
.col-page .share-panel li.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.col-page .share-panel .share-who { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.col-page .share-panel form.share-level, .col-page .share-panel form.inline-action { display: block; margin: 0; width: auto; }
.col-page .share-panel form.share-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; }
.col-page .share-panel select { width: auto; margin: 0; min-width: 9rem; }
.col-page .share-panel li.share-row button { width: auto; margin: 0; }
.col-page .share-panel .search-row { margin-bottom: var(--space-3); }
/* the search box and its button stay on one row (the generic "form: block" above would stack them) */
.col-page .share-panel form.search-row { display: flex; }

/* "Select all": the batch-41 rule for checkbox labels ("the box hangs in the margin": padding-left 1.5rem and a
   negative text-indent) is right for a paragraph, but this label is a flex row, so the negative indent pulled the
   words back under the box. Switch the hanging indent off and let the flex gap do the spacing. */
html body .bulkbar label.bulk-all { gap: var(--space-2); padding-inline: 0; text-indent: 0; }
html body .bulkbar .bulk-all input[type="checkbox"] { margin: 0; flex: none; }

/* ==========================================================================
   Batch 50: polish. One height for every action, dark-mode fixes, touch targets, one fold, forms, error pages.
   ========================================================================== */

/* ---- 1. One height per tier -----------------------------------------------------------------------------------
   Text actions used to be 32px while filled buttons were 40px, so "secondary" came in two sizes. Every button-shaped
   action is now as tall as a text field (--control-h: 40px with a mouse, 44px on a touch screen), so a search box
   and its button, or a row of actions, line up. */
html:root, html:root:not([data-theme]), html[data-theme] { --action-h: var(--control-h); }
/* "Post case" is the standard primary now (it was 44px and 16px type, the only button that was). It still fills the
   width on a phone (the existing rule). */
#case-form button.post-button { font-size: var(--font-size-sm); min-height: var(--action-h); padding-inline: var(--space-4); }

/* ---- 2. Dark mode: two surfaces that stayed white, one text colour that was white on bright teal --------------- */
/* The active filter tab: Pico's "inverse" colour is white in dark mode, on a bright teal fill (1.9:1). --on-primary is
   dark text on the dark-mode teal and white on the light-mode teal, so it reads in both. */
.seg-item.active { color: var(--on-primary); }
/* The chat reply bar and the conversation's details panel had a fixed #fff background. */
.reply-bar, .conv .conv-details { background: var(--surface); }

/* ---- 3. Touch: tag pills on cards are links 18px tall. Keep the look, add an invisible area around each. -------- */
@media (pointer: coarse) {
  a.pill::after { content: ""; position: absolute; inset: -0.6rem -0.25rem; }
  /* the plain "Cancel" next to a Save button, and the "Discuss" link in a group's case rows */
  .row > a:not([role="button"]), .g-row a { position: relative; }
  .row > a:not([role="button"])::after, .g-row a::after { content: ""; position: absolute; inset: -0.7rem -0.4rem; }
}

/* ---- 4. One fold --------------------------------------------------------------------------------------------------
   Two variants only: SECTION (details.sect: a heading with a chevron, for content you read) and FOLD (details.act-fold:
   a button that opens its form right under itself). The plain "more" folds (More about you, Attach files, Filters...)
   now take the fold look: an action-height teal label, so they are easy to find and to tap. */
details.act-fold { margin: 0; padding: 0; border: 0; background: none; }
details.act-fold[open] > summary.abtn { background: var(--surface-inset); }
details.act-fold > :not(summary):first-of-type { margin-top: var(--space-3); }
/* the form inside a fold on a page that is not the case page: one calm box */
details.act-fold > form.stack-form {
  padding: var(--space-4); background: var(--surface); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-md); margin-top: var(--space-3);
}
details.more > summary, details.filters > summary {
  display: inline-flex; align-items: center; min-height: var(--action-h); box-sizing: border-box;
  padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2));
  border-radius: var(--shape-md); list-style: none; cursor: pointer;
}
details.more > summary::-webkit-details-marker, details.filters > summary::-webkit-details-marker { display: none; }
details.more > summary::marker, details.filters > summary::marker { content: ""; }
details.more > summary::after, details.filters > summary::after { content: none; display: none; }
details.more > summary:is(:hover, :focus-visible) { background: var(--surface-inset); color: var(--pico-primary-hover); }
details.more[open] > summary { background: var(--surface-inset); margin-bottom: var(--space-2); }

/* ---- 5. Forms: an error sits under the field it is about, and the field is marked ------------------------------- */
.field-error, small.field-error { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--state-urgent-fg); font-size: var(--font-size-sm); font-weight: var(--weight-strong); }
.field-hint { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--state-urgent-fg); }
/* Log in: the "Forgot your password?" line gets room above and below, and the button fills the card on a phone. */
.auth-card form .link-row { margin: var(--space-1) 0 var(--space-4); }
.auth-card .link-row:last-child { margin-top: var(--space-4); }
@media (max-width: 640px) { html body .auth-card form > button[type="submit"] { width: 100%; } }

/* ---- 6. The error page (404 / 500) -------------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: var(--space-6); }
.error-page .error-code { margin: 0; font-size: var(--font-size-lg); font-weight: var(--weight-strong); color: var(--pico-muted-color); }
.error-page h1 { margin: var(--space-2) 0 var(--space-3); }
.error-page .error-actions { margin-top: var(--space-5); }

/* ---- 7. The three action tiers, made visible (review G4/P2) -------------------------------------------------------
   PRIMARY is filled; SECONDARY is outlined teal; DANGER is outlined red. Until now "secondary" had no outline, so
   "Request to join" or "Leave group" read as plain text. Borderless text stays available as .link-button / .quiet
   (comment footers, rows), and menu items (.more-item) stay plain. The filled "submit after a text field" exception
   (above) is more specific and still wins, so Search/Add/Invite stay filled. */
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn):is(.secondary, .abtn):not(.primary, .danger, .link-button, .quiet, .more-item, .nav-item) {
  border-color: var(--pico-primary-underline);
}
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn).danger:not(.link-button, .more-item, .nav-item) {
  border-color: var(--state-urgent-fg);                                              /* fallback */
  border-color: color-mix(in srgb, var(--state-urgent-fg) 50%, transparent);
}
/* a fold's label ("Share", "Edit", "Attach files") keeps the outline while open, with the inset fill */
details.more > summary, details.filters > summary { gap: var(--space-1); }

/* ---- 8. A search box and its button sit on ONE row. A global "forms stack in a column" rule had turned them into a
        full-width input over a full-width button (Groups, Institutions). ---- */
html body form.search-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
html body form.search-row > input { flex: 1 1 auto; min-width: 0; margin: 0; }
html body form.search-row > button { flex: none; width: auto; margin: 0; }

/* ===== Batch 50b: your details, admin row badges ===== */
/* A "things waiting" badge beside a dashboard row title (same pill as the menu badge). */
.result-list h3 .nav-count { margin-inline-start: 0.5rem; vertical-align: middle; }
/* Account settings button beside its one-line hint on the profile page. */
p.actions .hint { margin-inline-start: 0.5rem; }

/* ===== Batch 52: quiet reading surface (case feed first) =====
   Inspired by a journal search-results page: a plain page, one hairline above each result, a serif title,
   whitespace instead of boxes. Only the CASE FEED rows change here; other lists keep their cards for now. */

/* ---- 1. A plain page. White in light mode; in dark mode the page and the panels are the same colour. ----
   (Panels keep their hairline borders, so they still read as panels.) */
:root:not([data-theme]) {
  --pico-background-color: #ffffff;
  /* A book-style serif from the system, so nothing is downloaded and the CSP is untouched. */
  --font-family-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --pico-background-color: var(--surface); }
}
:root[data-theme="light"] { --pico-background-color: #ffffff; --font-family-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif; }
:root[data-theme="dark"]  { --pico-background-color: var(--surface); --font-family-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif; }

/* ---- 2. Case feed rows: open rows divided by one hairline ---- */
.feed-layout .card-list { gap: 0; }
.feed-layout .card-list > li.card {
  background: transparent; border: 0; border-radius: 0;
  border-top: 1px solid var(--pico-muted-border-color);
  padding: 1.25rem 0 1.5rem;
  gap: 0.625rem;
}
.feed-layout .card-list > li.card:hover { border-top-color: var(--pico-muted-border-color); }  /* no box to light up */
.feed-layout .card-list > li.card:focus-within { outline-offset: 4px; }

/* The title: serif, regular weight, a little larger, with room to breathe. It turns teal on hover. */
.feed-layout .card-list .card h3 {
  font-family: var(--font-family-serif);
  font-size: 1.375rem; font-weight: 400; line-height: 1.3;
  max-width: 40rem;
}

/* The urgency label sits ON the hairline, flush right, like a tab (and stays above the stretched link). */
.feed-layout .card-list .card > .card-head > .tag {
  position: absolute; top: 0; right: 0; margin: 0; z-index: 1;
  border-radius: 0 0 var(--shape-sm, 0.25rem) var(--shape-sm, 0.25rem);
  padding: 0.1rem 0.6rem;
}

/* Reading measure: the description and footer never run wider than the title. */
.feed-layout .card-list .card .card-detail { max-width: 40rem; -webkit-line-clamp: 3; line-height: 1.5; }
.feed-layout .card-list .card .card-foot { max-width: 40rem; }
.feed-layout .card-list .card .pills { max-width: 40rem; }

/* The empty-state message is not a row: it keeps its box. */
.feed-layout .card-list > li.empty-state { background: transparent; border: 0; border-top: 1px solid var(--pico-muted-border-color); border-radius: 0; padding-inline: 0; }

/* ===== Batch 53: open case rows everywhere a case is listed =====
   Batch 52 styled the feed. Every list that uses the shared "caseitem" row (Saved, Collections, Search, Tags)
   now gets the same look through the data-row="case" attribute. People and Groups cards are untouched. */
.card-list:has(> li[data-row="case"]) { gap: 0; }
.card-list > li[data-row="case"] {
  background: transparent; border: 0; border-radius: 0;
  border-top: 1px solid var(--pico-muted-border-color);
  padding: 1.25rem 0 1.5rem;
  gap: 0.625rem;
}
.card-list > li[data-row="case"]:hover { border-top-color: var(--pico-muted-border-color); }
.card-list > li[data-row="case"]:focus-within { outline-offset: 4px; }
.card-list > li[data-row="case"] h3 {
  font-family: var(--font-family-serif);
  font-size: 1.375rem; font-weight: 400; line-height: 1.3;
  max-width: 40rem;
}
.card-list > li[data-row="case"] > .card-head > .tag {
  position: absolute; top: 0; right: 0; margin: 0; z-index: 1;
  border-radius: 0 0 var(--shape-sm, 0.25rem) var(--shape-sm, 0.25rem);
  padding: 0.1rem 0.6rem;
}
.card-list > li[data-row="case"] :is(.card-detail, .card-foot, .pills) { max-width: 40rem; }
.card-list > li[data-row="case"] .card-detail { -webkit-line-clamp: 3; line-height: 1.5; }
/* A row with a tick box (Saved, Collections): the box sits before the title, not on the line. */
.card-list > li[data-row="case"] .card-head > input[type="checkbox"] { margin-top: 0.4rem; }

/* ===== Headings are serif (one rule) =====
   Page titles (h1) and item titles (h3) are serif. The small-caps section labels (h2 such as "ABOUT YOU"),
   buttons, tabs, filters, pills and metadata stay sans: those are things you scan or act on, not headings. */
h1, .page-head h1, .conv-title h1, .conv-head > h1 {
  font-family: var(--font-family-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.25;
}
@media (max-width: 767px) { h1, .page-head h1, .conv-title h1, .conv-head > h1 { font-size: 1.5rem; } }
.card h3, .g-row h3, li h3 {
  font-family: var(--font-family-serif);
  font-weight: 400;
  font-size: 1.125rem;
}
/* Case rows are the main reading list, so their titles stay a step larger (set above). */
.card-list > li[data-row="case"] h3, .feed-layout .card-list .card h3 { font-size: 1.375rem; }

/* ===== Batch 54: minimalist pass =====
   Less ink: smaller text, no panel boxes, no button outlines, no inner divider lines. Sections are separated by ONE
   hairline each; actions are plain teal words separated by dots. Primary buttons stay filled (they are the one thing
   to press on a form). Everything below is an override on purpose, so undoing the batch = deleting from here down. */

/* ---- 1. Text a size smaller. Everything in the stylesheet is in rem, so one number scales it all: 16px -> 15px body,
        14px -> 13px small text, headings follow. Fields keep 16px on phones (below 16px iOS zooms the page on focus). ---- */
html { font-size: 93.75%; }
@media (pointer: coarse) {
  /* 2.95rem x 15px = 44px: the minimum comfortable touch target */
  html:root, html:root:not([data-theme]), html[data-theme] { --control-h: 2.95rem; --action-h: 2.95rem; }
}
@media (max-width: 767px), (pointer: coarse) {
  html body :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { font-size: 16px; }
}
/* Placeholder text: smaller and lighter than what you type, so an empty field does not shout. */
html body ::placeholder { font-size: var(--font-size-sm); opacity: 0.8; }

/* ---- 2. No panel boxes. A section is a heading, its content and a hairline above it. ---- */
html body main article:not(.auth-card) {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0;
}
/* no divider lines between the parts of a case (Clinical presentation / Laboratory findings / The question) */
html body article > h3, html body .profile > h3 { border-top: 0; }
html body article > h3 { padding-top: 0; margin-top: var(--space-4); }
html body article > h3:first-child { margin-top: 0; }
/* a form that opens from an action button: no box either, just the form */
html body details.act-fold > .stack-form, html body details.act-fold > form.stack-form,
html body .case-page details.act-fold > .stack-form {
  background: transparent; border: 0; border-radius: 0; padding: var(--space-3) 0 0;
}
/* case page sections: one hairline above each (the first, the case itself, has none) */
.case-page section[id] {
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: var(--space-5); padding-top: var(--space-4);
}
.case-page section#case { border-top: 0; margin-top: var(--space-4); padding-top: 0; }
.case-page section[id] > details.sect:not([open]) > summary { border-bottom: 0; }

/* ---- 3. Actions are plain teal words, not outlined buttons (primary stays filled). ---- */
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn):is(.secondary, .abtn):not(.primary, .danger, .link-button, .quiet, .more-item, .nav-item) {
  border-color: transparent;
}
html body :is(button, [type="submit"], [type="button"], a[role="button"], summary.abtn).danger:not(.link-button, .more-item, .nav-item) {
  border-color: transparent;
}
/* A row of actions: dots between them. The first action of a row has no dot; each later one starts with one.
   (A form around a button is display: contents, so the dot goes on the button itself.) */
.act-group > * ~ a.abtn::before,
.act-group > * ~ form > .abtn::before,
.act-group > * ~ details > summary.abtn::before,
.comment-actions > * ~ form > :is(.link-button, .abtn)::before {
  content: "\00b7"; flex: none; margin-inline-end: var(--space-2);
  color: var(--pico-muted-color); font-weight: var(--weight-strong);
}
.case-page .act-group, .case-page .case-foot .act-group { gap: var(--space-1) var(--space-2); }
/* the text of the first action lines up with the text above it (the action has inner padding for its hover fill) */
.case-page .act-group, .comment-actions { margin-inline-start: calc(-1 * var(--space-2)); }
/* a little less air between a section's heading and its content */
details.sect[open] > summary { margin-bottom: var(--space-1); }

/* ---- 4. Bug fix (since batch 50): a hint written INSIDE a label, before its field ("Clinical presentation  Anonymized: ...")
        had a negative top margin meant for a hint UNDER a field, so it printed on top of the label. ---- */
html body label .field-hint { margin: 0 0 var(--space-1); font-weight: var(--weight-regular); color: var(--pico-muted-color); }

/* ---- 5. The same open look for the other lists: result lists (Admin, requests, members) and People/Group cards
        lose their panel box; one hairline above each row instead. ---- */
html body :is(main, section, .feed-layout, .case-main) > .result-list {
  background: transparent; border-width: 1px 0 0 0; border-radius: 0;
}
html body :is(main, section, .feed-layout, .case-main) > .result-list > li { padding-inline: 0; }
html body .card-list > li.card:not([data-row]) {
  background: transparent; border: 0; border-top: 1px solid var(--pico-muted-border-color); border-radius: 0;
  padding: var(--space-3) 0;
}
html body .card-list > li.card:not([data-row]):hover { border-top-color: var(--pico-muted-border-color); }
html body .featured { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }

/* ===== Batch 55: comment byline under the text ===== */
/* Who and when: much smaller and quieter than the comment, under it. The name is still a link to the profile. */
.comment-meta { margin: var(--space-1) 0 var(--space-2); font-size: 0.75rem; line-height: 1.4; color: var(--pico-muted-color); }
.comment-meta a { color: inherit; text-decoration: none; }
.comment-meta a:hover { color: var(--pico-primary); text-decoration: underline; }
.comment-answer { margin: 0 0 var(--space-1); }

/* ===== Batch 56: the case as a printed sheet; quieter comment bylines ===== */

/* ---- 1. Comment byline: clearly NOT part of the comment. Much smaller, lighter, a gap above it, no link colour. ---- */
html body .comment-meta {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--pico-muted-color);
  opacity: 0.85;
}
html body .comment-meta a { color: inherit; }

/* ---- 2. The case details only: a sheet of paper. White, a hairline border, a soft shadow, generous padding.
        Serif text like a printed report, lab findings in a fixed-width face, field labels in a muted slate. ---- */
html body main .case-page article.case-body {
  background: var(--surface);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-sm);
  box-shadow: 0 1px 2px rgba(20, 35, 40, 0.06), 0 6px 18px -8px rgba(20, 35, 40, 0.10);
  padding: var(--space-5) var(--space-6);
}
html body .case-page article.case-body .prewrap {
  font-family: var(--font-family-serif);
  font-size: 1.0625rem; line-height: 1.65;
  max-width: 42rem;
}
/* Laboratory findings: the numbers line up like a printed result slip. */
html body .case-page article.case-body .prewrap.lab {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9375rem; line-height: 1.6;
  background: var(--surface-inset); padding: var(--space-3) var(--space-4); border-radius: var(--shape-sm);
}
/* Field labels (Clinical presentation, Laboratory findings, The question, Attachments): a different shade from the text. */
html body .case-page article.case-body > h3 {
  margin: var(--space-5) 0 var(--space-1);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm); font-weight: var(--weight-strong); letter-spacing: 0.03em;
  color: var(--pico-muted-color);
}
html body .case-page article.case-body > h3:first-of-type { margin-top: var(--space-4); }
@media (max-width: 767px) {
  html body main .case-page article.case-body { padding: var(--space-4); }
}
@media (prefers-color-scheme: dark) {
  html body main .case-page article.case-body { box-shadow: none; }
}

/* ---- 3. Printing: just the page content, no menus, buttons or comment form. ---- */
@media print {
  .top-bar, nav.rail, nav.tabbar, .site-foot, .act-row, .case-foot, #add-comment, .comment-actions, .bulkbar,
  details.sect > summary > .ico { display: none !important; }
  html body { background: #fff; color: #000; }
  html body main { margin: 0; max-width: none; }
  html body main .case-page article.case-body { box-shadow: none; border-color: #999; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ===== Batch 57: breadcrumbs =====
   One muted line, always the first thing on a page and always directly above the heading, replacing the
   mix of "← Back" links, small paragraphs and nothing at all. Markup (every page):
     <nav class="crumbs" aria-label="Breadcrumb"><a href="/groups">Groups</a><span class="sep">›</span><span aria-current="page">Name</span></nav>
   The current page is plain text (not a link), the trail never wraps awkwardly: the last item shortens with "…". */
html body nav.crumbs {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;        /* Pico spreads a <nav>'s children apart; keep the trail together */
  flex-wrap: nowrap;
  gap: 0 var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: 0.75rem;                 /* small, like the comment byline */
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--pico-muted-color);
  min-width: 0;                       /* lets the last item shrink inside a flex parent */
}
html body nav.crumbs a {
  color: inherit;                     /* muted, not the link colour */
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
html body nav.crumbs a:hover, html body nav.crumbs a:focus-visible { color: var(--pico-primary); text-decoration: underline; }
html body nav.crumbs .sep { flex: none; opacity: 0.6; }
html body nav.crumbs [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;            /* a long case or group name shortens instead of wrapping */
  white-space: nowrap;
}
/* Inside the profile header and the conversation headers the crumb takes its own full row. */
html body .profile-head > nav.crumbs, html body .conv-head > nav.crumbs, html body .case-page > nav.crumbs { flex-basis: 100%; }
/* The old back link is gone from every page; keep the class harmless if an old template still has it. */
html body .conv-back { color: var(--pico-muted-color); font-size: 0.75rem; }
/* Phones: the touch-target rule from batch 39 would make each crumb 44px tall; a breadcrumb is a quiet aid, so keep it slim. */
@media (max-width: 767px) { html body nav.crumbs a { min-height: 0; min-width: 0; display: inline; padding: 0; } }
@media print { nav.crumbs { display: none; } }

/* ===== Batch 58: main page titles in the breadcrumb style =====
   The titles of the top-level pages (Cases, Messages, Discussions, Groups, Institutions, People, Saved ...) are
   now small and muted, exactly like the breadcrumb trail on the pages below them, so the whole app has ONE quiet
   header voice. They stay real <h1> elements (screen readers and the browser tab rely on them); only the look
   changes. The class is "crumb-h1". The long selector beats the serif h1 rules and the phone size rule. */
html body h1.crumb-h1,
html body .page-head h1.crumb-h1 {
  font-family: var(--font-family-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--pico-muted-color);
  margin: 0 0 var(--space-2);
}
/* The row that holds the title and its action button: align them on the same line and keep the row slim. */
html body .page-head:has(> h1.crumb-h1) { align-items: center; margin-bottom: var(--space-3); }
html body h1.crumb-h1 + .meta { margin-top: 0; }

/* ===== Batch 59: final tweaks =====
   1. Cases feed: no title row; the theme banner is a feature panel; "Trending" is a row of cards; Filters fold away.
   2. Post a case: shaded information notes; the rule sits ABOVE "Before you post".
   3. ".sheet": the printed-sheet box (same look as the case details) for theme, group, institution and bio text.
   4. Action links separated by dots (".act-links"), collapsible-section helpers, info notes, small utilities.
   5. Collection pages: the select checkbox hangs in the margin so case rows line up with the feed. */

/* ---------- Shared pieces ---------- */

/* A shaded information note: not a field, not a warning, just a calm explanation. Used under Attachments, on
   Messages and on Discussions. */
html body .info-note {
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset);
  border-left: 3px solid var(--pico-muted-border-color);
  border-radius: 0 var(--shape-sm) var(--shape-sm) 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--pico-muted-color);
}
html body .info-note strong { color: var(--pico-color); font-weight: var(--weight-strong); }

/* The printed sheet: a softly bordered white box with serif text and small muted headings inside. The case details use
   the same look (batch 56); this class lets other pages share it. */
html body main article.sheet {
  background: var(--surface);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--shape-sm);
  box-shadow: 0 1px 2px rgba(20,35,40,.06), 0 6px 18px -8px rgba(20,35,40,.10);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-4);
}
html body article.sheet .prewrap, html body article.sheet .bio, html body article.sheet > p:not(.sheet-meta):not(.meta) {
  font-family: var(--font-family-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 42rem;
  margin: 0 0 var(--space-3);
}
html body article.sheet > h3 {
  margin: var(--space-5) 0 var(--space-1);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0.03em;
  color: var(--pico-muted-color);
}
html body article.sheet > h3:first-child { margin-top: 0; }
html body article.sheet .bio-line { font-family: var(--font-family-serif); margin: 0 0 var(--space-3); }
html body article.sheet .sheet-meta { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--pico-muted-border-color); font-size: var(--font-size-sm); color: var(--pico-muted-color); }
html body article.sheet .sheet-meta .tag { vertical-align: baseline; }
html body article.sheet > p.meta { margin: 0 0 var(--space-2); }
@media (max-width: 767px) { html body main article.sheet { padding: var(--space-4); } }
@media (prefers-color-scheme: dark) { html body main article.sheet { box-shadow: none; } }

/* A middle dot between inline links or phrases. */
html body .sep-dot { margin-inline: var(--space-2); color: var(--pico-muted-color); }
html body .actions-line { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); }
html body .actions-line .meta { color: var(--pico-muted-color); }
html body .profile-tags { margin: 0 0 var(--space-3); }

/* ---------- Action links: one row, dots between (the dots themselves come from batch 54's .act-group rule) ---------- */
html body .act-links { margin: 0 0 var(--space-5); }
html body .act-links .act-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
html body .act-links .act-group > form { display: inline-flex; margin: 0; }
html body .act-links .abtn.primary-link { color: var(--pico-primary); font-weight: var(--weight-strong); }
/* Edit opens its form on its own full-width row under the links. */
html body .act-links details.act-fold[open] { flex-basis: 100%; order: 99; }

/* ---------- Collapsible sections (details.sect) ---------- */
/* The quiet variant: a search/filter fold that should not compete with the page title. */
html body details.sect.sect-quiet > summary > h2 { font-weight: var(--weight-regular); letter-spacing: 0.03em; }
html body .filters-on {
  margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: 999px;
  background: var(--surface-inset); color: var(--pico-primary); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: none; font-weight: var(--weight-strong);
}

/* ---------- 1. Cases feed ---------- */
html body .page-head.page-head-end { justify-content: flex-end; margin-bottom: var(--space-3); }

/* 1.2 The theme banner: a tinted feature panel with an accent edge. The body text is the same size as the case text. */
html body .theme-banner {
  background: color-mix(in srgb, var(--pico-primary) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--pico-primary) 28%, var(--pico-muted-border-color));
  border-left: 5px solid var(--pico-primary);
  border-radius: var(--shape-sm);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
}
html body .theme-banner .featured-label { margin: 0; color: var(--pico-primary); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-strong); }
html body .theme-banner h2 { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-family-serif); font-size: 1.375rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; text-transform: none; }
html body .theme-banner h2 a { color: var(--pico-color); text-decoration: none; }
html body .theme-banner h2 a:hover { color: var(--pico-primary); }
html body .theme-banner .theme-banner-text {
  margin: 0 0 var(--space-2); font-size: var(--font-size-sm); line-height: 1.5; color: var(--pico-color); max-width: 40rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html body .theme-banner .theme-banner-links { margin: 0; font-size: var(--font-size-sm); }

/* 1.3 Trending this week: one small card per case, side by side; the row scrolls sideways if it must. */
html body .trending { background: transparent; border: 0; padding: 0; margin: 0 0 var(--space-5); }
html body .trending h2 { margin: 0 0 var(--space-2); }
html body .trending-list {
  display: flex; flex-wrap: nowrap; gap: var(--space-3);
  overflow-x: auto; padding: 0 0 var(--space-2); margin: 0;
  scroll-snap-type: x proximity;
}
html body .trending-list li.trend-card {
  flex: 0 0 15rem; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); margin: 0;
  background: var(--surface); border: 1px solid var(--pico-muted-border-color); border-radius: var(--shape-sm);
  scroll-snap-align: start;
}
html body .trending-list li.trend-card + li { border-top: 1px solid var(--pico-muted-border-color); }  /* keep the card border (old rule drew a top line only) */
html body .trending-list li.trend-card > a {
  font-family: var(--font-family-serif); font-size: 1rem; line-height: 1.3; color: var(--pico-color); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
html body .trending-list li.trend-card > a:hover { color: var(--pico-primary); }
html body .trending-list li.trend-card .meta { margin-top: auto; font-size: 0.75rem; }

/* 1.4 Filters: collapsible on every screen size. On wide screens batch 7 forced the panel open and turned the summary
   into a plain heading; here the folding works again (closed unless a filter is in use) and gets a chevron. */
@media (min-width: 900px) {
  html body .filters::details-content { content-visibility: auto; }
  html body details.filters:not([open])::details-content { content-visibility: hidden; }   /* closed means closed */
  html body .filters summary { pointer-events: auto; cursor: pointer; }
}
html body details.filters > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; }
html body details.filters > summary > .ico { width: 1.1rem; height: 1.1rem; color: var(--pico-muted-color); transition: transform .15s ease; }
html body details.filters[open] > summary > .ico { transform: rotate(180deg); }

/* ---------- 2. Post a case ---------- */
html body #case-form fieldset.share { border-bottom: 0; padding-bottom: 0; }                 /* the rule moves above the heading */
html body #case-form section.before-post { border-top: 1px solid var(--pico-muted-border-color); margin-top: var(--space-5); padding-top: var(--space-4); }
html body #case-form .field-divided + .info-note { margin-top: var(--space-2); }

/* ---------- 10. Collection (and any other case list with select boxes) ---------- */
@media (min-width: 768px) {
  html body .card-list > li[data-row="case"] { position: relative; }
  html body .card-list > li[data-row="case"] .card-head .bulk-check { position: absolute; left: -2rem; top: 0.45rem; margin: 0; }
}
html body .card-list > li[data-row="case"] .card-head > h3 { flex: 1 1 auto; min-width: 0; }
/* The "Remove from collection" link keeps its place in the footer, quiet like the comment count beside it. */
html body .card-list > li[data-row="case"] .card-foot .inline-action .link-button { font-size: var(--font-size-sm); }

@media print { .info-note, .act-links { display: none; } }

/* ===== Batch 60: final review. Filters above the list; one typographic scale across every page ===== */

/* ---- 1. Feed: the filters sit ABOVE the case list as a collapsible row of fields (no right-hand column) ---- */
@media (min-width: 900px) {
  /* the feed no longer needs the wide two-column page; the case page still does */
  html body main:has(.feed-layout):not(:has(.case-layout)) { max-width: 680px; }
  html body .feed-layout { display: block; }
  html body .feed-layout .filter-bar {
    position: static; background: none; border: 0; padding: 0; margin: 0 0 var(--space-3);
  }
  /* closed means closed on desktop too (batch 7 forced it open; batch 59 fixed the collapse) */
  html body .feed-layout details.filters > summary { pointer-events: auto; cursor: pointer; }
}
/* the fields run in a row: three across from 600px up, one column on a phone */
html body .feed-layout .filter-fields { grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 600px) {
  html body .feed-layout .filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
}
/* filter labels match every other field label: sans, 13px, strong */
html body .feed-layout .filter-fields label {
  font-family: var(--font-family-sans); font-size: var(--font-size-sm); font-weight: var(--weight-strong);
}
html body .feed-layout .filter-fields select { font-weight: var(--weight-regular); }

/* ---- 2. Section labels (h2 in folds): one weight everywhere ---- */
html body details.sect.sect-quiet > summary > h2 { font-weight: var(--weight-strong); }

/* ---- 3. Sub-headings inside a page or card (h3 that is not a card title): one style ---- */
html body :is(article, section, .case-main, .chat-side, form) > h3:not(.card-title),
html body .fold-body > h3 {
  font-family: var(--font-family-sans); font-size: var(--font-size-sm); font-weight: var(--weight-strong);
  letter-spacing: 0.03em; color: var(--pico-muted-color); line-height: 1.3;
}

/* ---- 4. .meta is always the sans face (a <span class="meta"> beside a serif name used to inherit Charter) ---- */
html body .meta { font-family: var(--font-family-sans); }
html body .trending-list li.trend-card .meta { font-size: var(--font-size-sm); }

/* ---- 5. Nothing is smaller than 12px: comment bylines, the featured label, small chips ---- */
html body .comment-meta { font-size: 0.75rem; }
html body .theme-banner .featured-label { font-size: 0.75rem; }
html body details.sect .count, html body .sect .count { font-size: 0.75rem; }

/* ---- 6. Card titles in the admin area match every other card title ---- */
html body main article > .card-head > h3:not(.person-name) {
  font-family: var(--font-family-serif); font-size: 1.0546875rem; font-weight: var(--weight-regular);
}

/* ---- 7. Links styled as buttons (e.g. Manage members, Edit profile) look like every other button ---- */
html body a.abtn { text-decoration: none; }

/* ---- 8. Help page ---- */
html body .help { max-width: 680px; }
html body .help h2 { margin-top: var(--space-5); }
html body .help .help-toc { columns: 2; column-gap: var(--space-4); padding-left: 1.1rem; font-size: var(--font-size-sm); }
html body .help .help-toc li { margin-bottom: var(--space-1); break-inside: avoid; }
html body .help dt { font-weight: var(--weight-strong); margin-top: var(--space-2); }
html body .help dd { margin: 0 0 var(--space-1) 0; color: var(--pico-muted-color); }
html body .help kbd { font-size: 0.85em; }
@media (max-width: 599px) { html body .help .help-toc { columns: 1; } }
@media print { html body .help .help-toc { columns: 1; } }

/* Filters bar: label on the left, "active" chip beside it, chevron at the far right; no stray dash */
html body details.filters > summary { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); text-align: left; }
html body details.filters > summary::before { content: none; display: none; }
html body details.filters > summary > .icon, html body details.filters > summary > svg { margin-left: auto; }