:root {
  color-scheme: light dark;
  --brand: #0e8cb0;
  --brand-dark: #0a6f8c;
  --danger: #b3261e;
  --line: color-mix(in srgb, CanvasText 16%, Canvas);
  --soft: color-mix(in srgb, CanvasText 6%, Canvas);
  --muted: color-mix(in srgb, CanvasText 62%, Canvas);
}
* { box-sizing: border-box; }
/* The page shows one part at a time by hiding the others, whatever their own display is. */
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, "Segoe UI", Arial, sans-serif; line-height: 1.55; background: Canvas; color: CanvasText; }
button, input, select, textarea { font: inherit; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 4px; overflow-wrap: anywhere; }
a { color: var(--brand); }
.muted { color: var(--muted); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px max(20px, calc((100vw - 1000px) / 2)); border-bottom: 1px solid var(--line); }
.brand { font-size: 20px; font-weight: 800; }
.brand span { color: var(--brand); font-weight: 600; }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
main { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: Canvas; }
.narrow { max-width: 420px; margin: 40px auto; }
form { display: grid; gap: 10px; margin-top: 16px; }
form.inline { grid-template-columns: 1fr; max-width: 520px; margin-bottom: 20px; }
label { font-weight: 600; font-size: 14px; }
input, select, textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: Field; color: FieldText; min-height: 42px; }
button { padding: 10px 16px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; min-height: 42px; }
button:hover { background: var(--brand-dark); }
button:disabled { opacity: 0.5; cursor: default; }
button.quiet { background: transparent; color: var(--brand); border: 1px solid var(--line); }
button.quiet:hover { background: var(--soft); }
button.danger { background: var(--danger); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, Canvas); outline-offset: 2px; }
.message { min-height: 1.5em; font-weight: 600; margin: 12px 0; }
.message.error { color: var(--danger); }
/* The tabs stay at the top of the screen while a long list scrolls under them. */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 10px 0; position: sticky; top: 0; z-index: 5; background: Canvas; }
.tab { background: transparent; color: CanvasText; border: 1px solid transparent; font-weight: 600; }
.tab:hover { background: var(--soft); }
.tab[aria-current="true"] { background: color-mix(in srgb, var(--brand) 14%, Canvas); color: var(--brand-dark); }
.badge { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--danger); color: #fff; font-size: 12px; text-align: center; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 12px; }
.list { display: grid; gap: 12px; margin-top: 12px; }
.item { display: grid; grid-template-columns: 168px 1fr; gap: 16px; }
.item.plain { grid-template-columns: 1fr; }
.item img { width: 168px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--soft); }
.frames { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.item .frames img { width: 132px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--soft); display: block; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; font-size: 13px; }
.chip { padding: 2px 10px; border-radius: 12px; background: var(--soft); }
.chip.good { background: color-mix(in srgb, #2da44e 16%, Canvas); color: color-mix(in srgb, #2da44e 70%, CanvasText); font-weight: 700; }
.chip.note { background: color-mix(in srgb, #bf8700 18%, Canvas); color: color-mix(in srgb, #bf8700 65%, CanvasText); font-weight: 700; }
.chip.warn { background: color-mix(in srgb, var(--danger) 16%, Canvas); color: var(--danger); font-weight: 700; }
.notes { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.notes li { padding: 8px 10px; border-radius: 10px; background: var(--soft); overflow-wrap: anywhere; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.actions input { flex: 1; min-width: 200px; }
.row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.small { font-size: 13px; }
.search { grid-template-columns: 130px 1fr 190px auto; align-items: center; }
.search.two { grid-template-columns: 1fr auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.stat h2 { font-size: 15px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.stat dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.stat dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .big { font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.columns ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; }
.thread { display: grid; gap: 6px; margin: 10px 0; }
.bubble { padding: 8px 12px; border-radius: 12px; background: var(--soft); max-width: 85%; overflow-wrap: anywhere; white-space: pre-wrap; }
.sent { justify-self: end; font-size: 12px; color: var(--muted); margin-top: -2px; }
.bubble.admin { background: color-mix(in srgb, var(--brand) 14%, Canvas); justify-self: end; }
textarea { resize: vertical; width: 100%; }
.faq-item { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.check input { min-height: 0; width: 18px; height: 18px; }
.ai { margin: 8px 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line); font-size: 14px; }
.ai .facts { margin: 0 0 4px; }
.matrix { border-collapse: collapse; margin: 10px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: 4px 14px; border-bottom: 1px solid var(--line); text-align: start; }
.matrix th { font-weight: 600; color: var(--muted); }
.matrix td { font-weight: 700; }
#ai-policy-text { font-size: 14px; line-height: 1.6; }
.toolbar.section h1, .toolbar.section h2 { margin: 0; }
.section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }
@media (max-width: 640px) {
  .search, .search.two { grid-template-columns: 1fr; }
  .item { grid-template-columns: 1fr; }
  .item img { width: 100%; }
}
/* The menu button and the head of the side menu belong to phones only. */
.menu-button, .drawer-head { display: none; }
/* Phones: the parts of the desk are in a menu that slides in from the side, the header stays at
   the top, there is less padding, and nothing is wider than the screen. */
@media (max-width: 760px) {
  .top { padding: 8px 16px; justify-content: flex-start; position: sticky; top: 0; z-index: 20; background: Canvas; }
  .brand { font-size: 18px; }
  .top .who { display: none !important; }
  .menu-button:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; color: CanvasText; border: 1px solid var(--line); }
  .menu-button:hover { background: var(--soft); }
  .tabs {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 30; width: min(82vw, 300px); margin: 0;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 16px 12px; overflow-y: auto;
    border: 0; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgb(0 0 0 / 0.18);
    transform: translateX(105%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s;
  }
  /* Opening shows the menu at once, so that it can take the focus; closing hides it after the slide. */
  body.menu-open .tabs { transform: none; visibility: visible; transition: transform 0.2s ease; }
  body.menu-open { overflow: hidden; }
  .tab { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; font-size: 16px; text-align: start; }
  .drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
  .drawer-head button { min-height: 36px; padding: 6px 12px; }
  .scrim { position: fixed; inset: 0; z-index: 25; background: rgb(0 0 0 / 0.4); }
  main { padding: 8px 16px 48px; }
  /* The status line takes room only when it says something. */
  #message:empty { min-height: 0; margin: 0; }
  h1 { font-size: 20px; }
  .narrow { margin: 16px auto; }
  .card { padding: 14px; }
  select { max-width: 100%; }
  .toolbar select { flex: 1 1 100%; }
  .actions input { min-width: 0; flex-basis: 100%; }
  .actions button { flex: 1 1 auto; }
  .frames { flex-wrap: nowrap; }
  .frames a { flex: 1 1 0; min-width: 0; }
  .item .frames img { width: 100%; }
  .matrix { display: block; overflow-x: auto; font-size: 13px; }
  .matrix th, .matrix td { padding: 4px 8px; }
  /* A long email or link breaks only where it would not fit; table columns keep whole words. */
  .card, .notes li, .muted, strong { overflow-wrap: break-word; }
  .matrix th, .matrix td { overflow-wrap: normal; }
  .row > * { min-width: 0; }
  .bubble { max-width: 92%; }
  .stats, .columns { grid-template-columns: 1fr; }
}
.section-card { margin-top: 24px; }
/* Content approval: the filters, choosing many at once, and the parts that fold away. */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; }
button.filter { background: transparent; color: CanvasText; border: 1px solid var(--line); border-radius: 18px; font-weight: 600; font-size: 14px; min-height: 36px; padding: 6px 12px; }
button.filter:hover { background: var(--soft); }
button.filter[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 14%, Canvas); color: var(--brand-dark); border-color: color-mix(in srgb, var(--brand) 45%, Canvas); }
.bulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; }
.bulk .actions { margin-top: 0; margin-inline-start: auto; }
.pick-row { display: flex; gap: 10px; align-items: flex-start; }
.pick-row input.pick { min-height: 0; width: 20px; height: 20px; margin-top: 3px; flex: none; }
.link-form { margin-top: 12px; }
.link-form .search { display: grid; gap: 10px; }
.fold { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; }
.fold > summary { cursor: pointer; padding: 14px 0; font-size: 18px; font-weight: 700; }
.fold[open] { padding-bottom: 18px; }
.stats.metrics { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 760px) {
  .stats.metrics { grid-template-columns: 1fr 1fr; }
  .stats.metrics .stat dl { grid-template-columns: 1fr; gap: 0; }
  .bulk .actions { margin-inline-start: 0; width: 100%; }
  .fold { padding: 0 14px; }
}
fieldset.choice { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
fieldset.choice legend { font-weight: 600; font-size: 14px; margin-bottom: 4px; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .tabs { transition: none; }
}