@charset "UTF-8";

/* ===========================================================================
   CADEL video portal
   ---------------------------------------------------------------------------
   One stylesheet. The product is a public video list, a watch page and an
   administration area, and splitting three screens across a build step would
   cost more than it saves.

   The palette is the one the existing CADEL system uses, so the two look
   related without this one inheriting a design system built for four roles
   and twenty screens.

   Colour is never the only thing carrying a meaning: every category has a
   word as well as a hue, every chart writes its figures out, and the one
   hatched fill is repeated in its own key.
   =========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Taken from the logo, not chosen beside it.

     The artwork was sampled rather than eyeballed. Its two real colours are a
     muted sage green (#6E8C6E, 31% of the opaque pixels) and a slate blue
     (#3C5774, 26% across two shades), with a peach from the figure and a warm
     grey behind it. The palette this replaced was a bright navy and an amber,
     neither of which appears anywhere in the mark, which is why the site sat
     next to its own logo looking borrowed.

     Every pair below clears 4.5:1. The raw sage is the one exception and is
     used only at display size or as a fill, never as body text on the ground.
     --------------------------------------------------------------------- */

  /* Slate, from the logo's darkest tone. Structure, links, controls. */
  --primary: #3C5774;
  --primary-dark: #2E4661;
  --primary-deep: #1F3247;
  --primary-tint: #E9EFF5;
  --primary-border: #BCCBDB;

  /* Sage, the logo's dominant colour. The second voice, not a highlighter. */
  --accent: #6E8C6E;
  --accent-dark: #3A553A;
  --accent-mid: #4A6B4A;
  --accent-tint: #E8EFE8;

  /* The warm tone from the figure in the mark. Used once, sparingly, so it
     stays a warm note rather than becoming a third system colour. */
  --warm: #F8C7AB;
  --warm-deep: #8A5433;

  --ink-band: #1F3247;

  /* The ground is warm, echoing the grey the logo sits on. A cool grey beside
     this slate reads as blue and makes the page look cold, which is the
     opposite of what a page about caring for somebody at home should feel. */
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface-sunk: #F1EFEA;
  --text: #1A1F23;
  --text-muted: #565C61;
  --border: #E3E0DA;
  --border-strong: #8A867F;
  --on-fill: #FFFFFF;
  --on-band: #FFFFFF;
  --on-band-dim: #C8D3E0;

  /* Charts tell the two audiences apart with these, and the pair is the
     logo's own two colours, so a chart looks like it belongs to the mark. */
  --good: #6E8C6E;
  --good-dark: #3A553A;

  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows tinted with the slate rather than pure black: a neutral shadow on
     a warm ground is the grey smudge that makes a page look dated. */
  --shadow-sm: 0 1px 2px rgba(31, 50, 71, .10), 0 2px 6px rgba(31, 50, 71, .06);
  --shadow-md: 0 2px 4px rgba(31, 50, 71, .10), 0 8px 24px rgba(31, 50, 71, .10);
  --shadow-lg: 0 4px 8px rgba(31, 50, 71, .08), 0 18px 48px rgba(31, 50, 71, .14);

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 21px;
  --fs-xl: 26px;
  --fs-2xl: 33px;
  --fs-3xl: 46px;

  --fw-semibold: 600;
  --fw-bold: 700;

  --col: 1140px;
  /* The admin area's own column. Without it a table on a 2100px screen
     puts the title at one edge and its buttons at the other. */
  --admin-col: 1320px;
  --gutter: 24px;

  /* The floor for anything you press. The audience includes people with a
     tremor, and a 32px target is a target they miss. */
  --touch: 48px;
}

/* ---------------------------------------------------------------- resets -- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; }
img { height: auto; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0; text-wrap: balance; }

a { color: var(--primary-dark); }

/* One visible focus ring for the whole product. Removing it is how a keyboard
   becomes unusable, so it is defined once, here, and never unset. */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.pc-icon { flex: none; vertical-align: middle; }

.pc-wrap {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  /* padding-block, never a shorthand: a shorthand here zeroes the side gutter
     and the text runs into the edge of a phone. */
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ bar -- */

.pc-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.pc-bar-in {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}
.pc-bar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: opacity .15s ease;
}
.pc-bar-brand:hover { opacity: .78; }

.pc-brand { display: inline-flex; align-items: center; }
.pc-brand-art { display: block; width: auto; height: 5.4em; }
.pc-brand-sm .pc-brand-art { height: 3.2em; }

/* The one control in the bar. Pushed right, sized for a finger, and it names
   its audience so the 99% of visitors it is not for do not press it. */
.pc-bar-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--touch);
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pc-bar-btn:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------------- hero -- */

/* A soft wash rather than a flat block of tint. The gradient runs from the
   sage side of the palette to the slate side, which is the logo read left to
   right, and it is what stops the band reading as a grey slab. */
.pc-hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 88% 12%, rgba(110, 140, 110, .20), transparent 62%),
    radial-gradient(760px 380px at 4% 92%, rgba(248, 199, 171, .26), transparent 60%),
    linear-gradient(168deg, #F2F5F9 0%, #EAF0F2 52%, #EFF2EC 100%);
  border-bottom: 1px solid var(--border);
  padding-block: 64px 58px;
  overflow: hidden;
}
.pc-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: center;
  gap: 48px;
}
.pc-hero-art { display: flex; justify-content: center; }
.pc-brand-xl .pc-brand-art {
  height: auto;
  width: 100%;
  max-width: 280px;
  /* Lifted off the wash so it reads as the mark rather than as a watermark. */
  filter: drop-shadow(0 12px 28px rgba(31, 50, 71, .16));
}
.pc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.pc-hero h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; margin-bottom: 18px; }
.pc-lead {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: balance;
}

/* Jump links, shaped like the category badges they lead to. */
.pc-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pc-jump > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--touch);
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.pc-jump > a:hover { border-color: var(--primary); color: var(--primary-dark); }
.pc-jump > a span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

/* -------------------------------------------------------------- sections -- */

.pc-section { padding-block: 44px; }
/* Sticky bar, so an anchor jump would otherwise land with the heading tucked
   underneath it. */
.pc-section[id] { scroll-margin-top: 90px; }

.pc-section-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.pc-section-head h2 { font-size: var(--fs-2xl); }
.pc-section-head p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
  /* Wide enough that both blurbs, which are one sentence each, sit on one
     line at desk width instead of breaking after "the signs to" and leaving
     a three word orphan under a column half empty. Still capped, so a longer
     blurb written later does not run the full width of the page. */
  max-width: 90ch;
  text-wrap: pretty;
}
/* The icon on its own plate, tinted to its category. It is the one place the
   two hues appear at any size, so the sections are told apart before a word
   is read. */
.pc-section-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
}
.pc-section-ico.is-educational { background: var(--primary-tint); color: var(--primary-dark); }
.pc-section-ico.is-practice { background: var(--accent-tint); color: var(--accent-dark); }

/* Nothing here, said as a thing rather than as a missing thing.
   It was a dashed outline with a grey icon and a sentence running along one
   line, the way a page marks a slot waiting to be filled. But this slot is
   not waiting: the portal is working and the answer is genuinely none, so it
   gets a card like every other answer on the page, with the one thing there
   is to do sitting in it as a button rather than as a word underlined in the
   middle of a sentence. */
.pc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 34rem;
  margin: 0 auto;
  padding: 40px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.pc-empty-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: var(--radius-lg);
  background: var(--primary-tint);
  color: var(--primary);
}
.pc-empty-head {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  text-wrap: balance;
}
.pc-empty-note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-wrap: pretty;
}
.pc-empty .pc-btn { margin-top: 18px; }

/* ------------------------------------------------------------- filters -- */

/* Both filters, as two segmented controls on one line.
   It was six separately outlined pills, each carrying a filled count chip,
   under two icons, in two rows divided by a rule: twenty odd pieces of
   drawing to say "pick one of three, twice". A segment group is one outline
   holding three choices, which is the same control with a twentieth of the
   ink, and it is the shape the period selector in the admin area already
   uses. */
.pc-filters-wrap { padding-top: 34px; scroll-margin-top: 90px; }
.pc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
}
.pc-filter-group { display: flex; align-items: center; gap: 12px; }
.pc-filter-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.pc-filter-set {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.pc-filter-set > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Still a full touch target. This is a portal for older adults, so the
     segments keep the height the loose pills had even though they have lost
     their outlines. */
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.pc-filter-set > a:hover { background: var(--surface-sunk); color: var(--text); }
.pc-filter-set > a.is-on { background: var(--primary); color: var(--on-fill); }
.pc-filter-set > a.is-on:hover { background: var(--primary-dark); color: var(--on-fill); }

/* The count as a number, not as a badge. Six filled chips were the loudest
   thing in the control and they are the least important thing in it. */
.pc-filter-set > a span {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--border-strong);
}
.pc-filter-set > a.is-on span { color: rgba(255, 255, 255, .72); }

@media (max-width: 700px) {
  /* The label goes above the segments and the group takes the width.
     Inline, the label pushed a group of three nowrap segments past the edge
     of the screen: an inline-flex box will not shrink below its contents, so
     the control simply ran off. */
  .pc-filters { gap: 16px; }
  .pc-filter-group { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .pc-filter-set {
    width: 100%;
    flex-wrap: wrap;
    /* Not a full pill any more: a wrapped two line group inside a 999px
       radius reads as a lozenge somebody sat on. */
    border-radius: var(--radius-lg);
  }
  .pc-filter-set > a { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
}


/* ---------------------------------------------------------------- cards -- */

.pc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Three tracks, counted rather than fitted.
     auto-fit was wrong because a lone card would stretch the width of the
     page and read as a banner. auto-fill was wrong too: it laid four 255px
     tracks in a 1092px column, so the educational row of three always had a
     gap at the end and a single related video sat as a small card marooned
     in three quarters of empty row. Three is the number the library is
     actually shaped like, and at this width it gives a card a 349px poster
     rather than a 255px one. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.pc-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pc-card > a:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .pc-card > a:hover { transform: none; }
}
.pc-card-poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--primary-tint);
  overflow: hidden;
}
.pc-card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-card-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--primary);
  opacity: .5;
}
.pc-card-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 39, 71, .82);
  color: var(--on-band);
}
.pc-card-time {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(15, 39, 71, .82);
  color: var(--on-band);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
/* Grows to fill whatever the poster leaves, so the auto margin below has a
   card's worth of space to push the view count into. Without it the count
   sits directly under a one line title while its neighbour's sits two lines
   lower, and a row of cards has its feet at three different heights. */
.pc-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
/* Pushed to the foot of the card with an auto margin, so the counts line up
   across a row however long the titles above them run. */
.pc-card-views {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pc-card-title { font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1.3; }
.pc-card-blurb {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  /* Two lines. The titles alone do not say enough to choose between five
     clips, and a whole paragraph on a card is not read. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The two categories carry different hues because they ask different things
   of the viewer: one is watched, the other is done along with. Both clear
   4.5:1 on their own tint, and both say their name in words. */
.pc-kind {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.pc-kind.is-educational { background: var(--primary-tint); color: var(--primary-dark); }

/* The language a video is spoken in. Deliberately quieter than the category
   chip beside it: the category decides which section a video is in, the
   language only narrows a list somebody already chose to look at. */
.pc-lang {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.pc-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pc-head .pc-lang { background: transparent; border-color: var(--primary-border); }
.pc-kind.is-practice { background: var(--accent-tint); color: var(--accent-dark); }

/* ------------------------------------------------------------ watch page -- */

.pc-head {
  background: var(--primary-tint);
  border-bottom: 1px solid var(--border);
  padding-block: 40px 36px;
}
.pc-head h1 { font-size: var(--fs-2xl); margin-bottom: 14px; }
.pc-head-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* On this band the educational tint is the band's own colour, so the pill
   would vanish into it. Both kinds take the card's white here and keep their
   hue in the text. Named twice so specificity beats the tint rules above,
   which sit later in the file. */
.pc-head .pc-kind.is-educational,
.pc-head .pc-kind.is-practice { background: var(--surface); }

.pc-backlink { margin: 0 0 18px; }
.pc-backlink a,
.pc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 10px 20px 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pc-backlink a:hover,
.pc-btn:hover { border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.pc-backlink a .pc-icon,
.pc-btn .pc-icon { transition: transform .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .pc-backlink a:hover .pc-icon { transform: translateX(-3px); }
}

.pc-watch { padding-block: 28px 56px; }

/* The player and its words are one object, so the picture runs edge to edge
   across the top of the card exactly as a poster does on a card in the list.
   The card carries no side padding of its own for that reason; the body
   below supplies its own. */
.pc-player-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pc-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  /* Capped against the window as well as the column: filling 1092px, a 16:9
     frame stands 610px tall and does not fit under the bar on a 1366x768
     laptop, and a video page that opens with a video you have to scroll to
     frame has got its one job wrong. The floor matters more than the cap: a
     phone held sideways is barely 360px tall, and a bare viewport subtraction
     there squashes the picture at the one moment somebody has deliberately
     turned the phone to watch it. */
  max-height: max(360px, calc(100vh - 250px));
}
.pc-player-body {
  padding: 22px 26px 26px;
  font-size: var(--fs-md);
  line-height: 1.65;
}

.pc-note {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  color: var(--accent-dark);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.pc-note .pc-icon { flex: none; margin-top: 2px; }

.pc-more-head { margin: 44px 0 18px; font-size: var(--fs-lg); }

/* ----------------------------------------------------------- about band -- */

/* The dark band at the foot of the portal. It uses the logo's deepest tone
   rather than black, and the sage shows through the wash on the right, so the
   one heavy block on the page still belongs to the mark. */
.pc-about {
  margin-top: 56px;
  background:
    radial-gradient(760px 420px at 92% 0%, rgba(110, 140, 110, .28), transparent 58%),
    var(--ink-band);
  color: var(--on-band);
  padding-block: 56px;
}
.pc-about-in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  gap: 48px;
  align-items: start;
}
.pc-about h2 { font-size: var(--fs-2xl); margin-bottom: 16px; }
.pc-about p {
  margin: 0;
  color: var(--on-band-dim);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 68ch;
}
.pc-kicker.on-band { color: var(--warm); }

.pc-about-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
/* The label under the figure, not beside it.
   Beside it, the two labels started at whatever a reserved 2.5ch box left
   them, so a one digit count and a three digit one set their labels four
   pixels apart: near enough to look like a mistake rather than a choice.
   Stacked they cannot drift, whatever the numbers grow to. */
.pc-about-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pc-about-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.pc-about-facts b {
  font-size: var(--fs-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--on-band);
}
.pc-about-facts span { color: var(--on-band-dim); font-size: var(--fs-sm); }

/* The light variant, which is what the band wears directly under the hero.
   Two dark blocks in a row at the top of a page read as a wall, and the thing
   somebody came for is further down it. Same layout, quieter voice: the sage
   is a hairline and a tint rather than the whole ground. */
.pc-about.is-light {
  margin-top: 0;
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-block: 44px;
}
.pc-about.is-light p { color: var(--text-muted); }
.pc-about.is-light .pc-kicker.on-band { color: var(--accent-dark); }
.pc-about.is-light .pc-about-facts li { border-bottom-color: var(--border); }
.pc-about.is-light .pc-about-facts b { color: var(--primary-dark); }
.pc-about.is-light .pc-about-facts span { color: var(--text-muted); }

/* --------------------------------------------------------------- footer -- */

.pc-foot {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 44px 36px;
}
.pc-foot-in {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding-inline: var(--gutter);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.pc-foot-in p { margin: 0; }

/* Each band is labelled and separated by a rule, and every one of them starts
   on the same left edge as the page above. */
.pc-foot-band { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.pc-foot-label {
  margin: 0 0 18px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pc-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px 52px;
}
.pc-partners img {
  display: block;
  height: 66px;
  width: auto;
}
/* Nudged per logo so the three carry the same weight on the line. The square
   mark needs more height than the two wide wordmarks to look their equal. */
.pc-partners .is-fsk img { height: 80px; }

.pc-funder { display: flex; align-items: center; gap: 20px; }
.pc-funder-mark { flex: none; height: 60px; width: auto; }
.pc-funder p { max-width: 64ch; line-height: 1.55; }

.pc-foot-base {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.pc-foot-copy { font-weight: var(--fw-semibold); color: var(--text); }
.pc-foot-note { font-size: var(--fs-xs); max-width: 58ch; }
/* The licence credit. Quiet, because it is a legal obligation rather than
   something a visitor came to read, but present, because that is the whole
   point of an attribution licence. */
.pc-foot-credit { font-size: var(--fs-xs); color: var(--text-muted); }
.pc-foot-credit a { color: var(--text-muted); }
.pc-foot-credit a:hover { color: var(--primary-dark); }

@media (max-width: 720px) {
  .pc-partners { gap: 18px 30px; }
  .pc-partners img { height: 40px; }
  .pc-partners .is-fsk img { height: 50px; }
  .pc-funder { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pc-funder-mark { height: 44px; }
  .pc-foot-base { display: block; }
  .pc-foot-copy { margin-bottom: 8px; }
}

/* ====================================================== administration ==== */

/* A sidebar and a content column, the way the system this was cut down from
   is laid out. Grid rather than a float or a fixed position: the sidebar is a
   column, the page is a column, and neither has to know the other's width. */
.pc-admin { background: var(--bg); }

.pc-shell {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  min-height: 100vh;
}

.pc-side {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  /* Sticky, not fixed. Fixed takes the sidebar out of the flow and the
     content column then has to be padded by hand to exactly the same width,
     which is a number that goes stale the moment the sidebar changes. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.pc-side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
/* Small. This is the rail's label, not the page's headline: at 40px with an
   18px word beside it the mark was the loudest thing on a screen whose job is
   to show figures. */
.pc-brand-side .pc-brand-art { height: 28px; width: auto; }
.pc-side-brand b { display: block; font-size: var(--fs-base); line-height: 1.2; letter-spacing: .01em; }
.pc-side-brand em {
  display: block;
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

.pc-side-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; }
.pc-side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: background .12s ease, color .12s ease;
}
.pc-side-nav a:hover { background: var(--surface-sunk); color: var(--text); }
/* A tint, the brand colour in the words, and a bar down the leading edge.
   Three quiet marks rather than one dark slab: the slab was the heaviest
   thing in the window and it was the navigation, which is the part nobody
   came to look at. */
.pc-side-nav a.is-on {
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-weight: var(--fw-semibold);
}
.pc-side-nav a.is-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.pc-side-nav a.is-on .pc-icon { color: var(--primary); }

.pc-side-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }

.pc-side-who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  /* 14, not 12, so the avatar begins on the same line as the menu icons
     above it: the row sits inside .pc-side-foot's own 12px of padding. */
  padding: 2px 14px 10px;
}

/* Both ways out of here, each a control you can see rather than a glyph you
   have to recognise. */
.pc-side-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin-bottom: 8px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.pc-side-btn:last-child { margin-bottom: 0; }
.pc-side-btn:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-tint); }
.pc-side-btn.is-out:hover { border-color: #CBA6A6; color: #8A1C1C; background: #FBEDED; }
.pc-side-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-mid);
  color: var(--on-fill);
  font-weight: var(--fw-bold);
}
.pc-side-name { min-width: 0; flex: 1; }
.pc-side-name b,
.pc-side-name em,
.pc-side-name i {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-side-name b { font-size: var(--fs-sm); }
.pc-side-name em { font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent-dark); }
.pc-side-name i { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }

/* ---- the content column ---- */

.pc-main { display: flex; flex-direction: column; min-width: 0; }

.pc-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.pc-topbar-text { min-width: 0; flex: 1 1 15rem; }
.pc-topbar h1 { font-size: var(--fs-xl); }
/* The page says hello before it says anything else. The old band put a title
   on the window and nothing else; this names the person reading it, and the
   page's own one line description trails after. */
.pc-greeting { margin: 5px 0 0; color: var(--text); font-size: var(--fs-sm); }
/* The page's own line trails after the greeting behind a separator, so the
   two do not run together into one sentence that says "Welcome back, look.
   The last 30 days." */
.pc-greeting span { color: var(--text-muted); }
/* The separator belongs between two things. On every screen but the
   dashboard the greeting is not printed at all, and the page's own line
   stands alone with nothing to be separated from. */
.pc-greeting b { font-weight: var(--fw-semibold); }
/* The one emoji in the product, so it is kept to the size of the words it
   sits with rather than let the font render it as a picture. */
.pc-greeting .pc-wave { font-size: 1.05em; line-height: 1; }
.pc-greeting b + span::before { content: "·"; margin: 0 7px; color: var(--border-strong); }
.pc-topbar-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.pc-side-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.pc-content { padding: 24px max(var(--gutter), (100% - var(--admin-col)) / 2) 60px; }

/* ---- the page's own controls, on its heading card ---- */

/* A row across the foot of the heading card: the way back on the left, the
   period on the right. They used to float on the background between two
   cards, the only thing on the screen not sitting on anything. */
.pc-topbar-bar {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pc-topbar-bar .pc-backlink { margin: 0; }
/* On its own it has nothing to sit opposite, so it goes to the right where
   the page's buttons are. */
.pc-topbar-bar > .pc-range:only-child { margin-left: auto; }

/* A caps label over a group of cards, so a page of eight panels reads as
   three things rather than as eight. Set on the background, not on a card:
   it names what follows, it is not part of it. */
.pc-group {
  margin: 30px 0 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-group:first-child { margin-top: 0; }
.pc-group span { margin-left: 8px; font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--border-strong); }

/* The period, as one control rather than three loose pills. The current one
   is filled: three identical buttons said nothing about which window you were
   looking at, and the figures beside them change completely with it. */
.pc-range { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-range-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-range-set {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.pc-range-set a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.pc-range-set a:hover { background: var(--surface-sunk); color: var(--text); }
.pc-range-set a.is-on { background: var(--primary); color: var(--on-fill); }
.pc-range-set a.is-on:hover { background: var(--primary-dark); color: var(--on-fill); }

/* ---- panels ---- */

.wcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.wcard > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-lg);
  margin-bottom: 16px;
}
.wcard > h3 .sm { margin-left: auto; font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.wcard > h3 .pc-icon { color: var(--accent-mid); }
/* A note belonging to the heading above it, not a paragraph of its own. */
.wcard > h3 + .pc-panel-note { margin: -6px 0 16px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; }

/* The caveat under the location tables. A note that qualifies a figure has to
   be read before the figure is quoted somewhere else, so it is given a tint
   rather than left as another grey paragraph. */
.pc-geo-note {
  display: flex;
  gap: 12px;
  margin: 4px 0 20px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.pc-geo-note .pc-icon { flex: none; margin-top: 2px; color: var(--primary); }
.pc-chart-empty code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-sunk);
  font-size: .92em;
}

.pc-kpi-unit { font-size: .6em; font-weight: var(--fw-semibold); }

.pc-kpis {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.pc-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: var(--shadow-sm);
}
/* A small tinted plate above the figure. Four identical white boxes with a
   number in each read as a spreadsheet row; the plate gives each one a mark
   the eye can aim at, and tells the three measured figures apart from the
   one that is just a count of what is on the shelf. */
.pc-kpi-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  color: var(--primary-dark);
}
.pc-kpi-ico.is-accent { background: var(--accent-tint); color: var(--accent-dark); }
.pc-kpi-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.pc-kpi-figure {
  font-size: var(--fs-2xl);
  line-height: 1.05;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--primary-dark);
}
.pc-kpi-note { font-size: var(--fs-sm); color: var(--text-muted); }
.pc-kpi.is-quiet .pc-kpi-figure { color: var(--text); }
.pc-kpis.is-last { margin-bottom: 0; }

/* ---- who watched: the total and the two audiences it is made of ---- */

.pc-split-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.pc-split-label {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-split-total b {
  font-size: var(--fs-3xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dark);
}
.pc-split-sub { font-size: var(--fs-sm); color: var(--text-muted); }

.pc-split-bar {
  display: flex;
  height: 20px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-sunk);
}
.pc-split-bar > span { display: block; height: 100%; }
.pc-split-bar > .is-public { background: var(--good); }
/* The hatch repeats in the key and in every chart, so the two audiences are
   told apart by pattern as well as by hue. */
.pc-split-bar > .is-staff {
  background: repeating-linear-gradient(45deg,
    var(--primary) 0 3px, var(--primary-dark) 3px 6px);
}

.pc-split-key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 16px 0 0; padding: 0; }
.pc-split-key li { display: inline-flex; align-items: center; gap: 9px; }
.pc-split-key i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.pc-split-key i.is-public { background: var(--good); }
.pc-split-key i.is-staff {
  background: repeating-linear-gradient(45deg,
    var(--primary) 0 3px, var(--primary-dark) 3px 6px);
}
.pc-split-key .k { font-size: var(--fs-sm); color: var(--text-muted); }
.pc-split-key b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.pc-split-key .p { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pc-split-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---- charts, drawn by the server as SVG ---- */

/* Nothing to plot. An empty grid with a lone "1" floating at its top left
   reads as a chart that failed rather than as a period nobody watched in. */
.pc-chart-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 140px;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.pc-chart-empty .pc-icon { flex: none; color: var(--border-strong); }

.pc-chart { position: relative; }
.pc-chart > svg { display: block; width: 100%; height: auto; }
.pc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.pc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pc-legend i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.pc-legend i.is-public { background: var(--good); }
.pc-legend i.is-staff {
  background: repeating-linear-gradient(45deg,
    var(--primary) 0 3px, var(--primary-dark) 3px 6px);
}
.pc-legend .pc-legend-end { margin-left: auto; font-variant-numeric: tabular-nums; }

.pc-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.pc-charts .wcard { margin-bottom: 0; display: flex; flex-direction: column; }
.pc-charts .wcard .pc-chart { flex: 1; }

/* ---- tables ---- */

.pc-table-wrap { overflow-x: auto; }
table.pc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.pc-table th,
table.pc-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.pc-table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
table.pc-table td.num,
table.pc-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The first column absorbs whatever is left over and every other column
   shrinks to its contents. Without this the browser spreads the slack evenly
   and a five row table ends up with a hand's width between each figure. */
table.pc-table thead th:first-child { width: 100%; }
/* A table with no head is a list of labelled facts, not a grid: there the
   label column shrinks to its longest label instead of taking half the row. */
table.pc-table tbody th { width: 1%; }
/* The buttons belong at the end of the row, not floating in the middle of
   the space left after the last figure. */
table.pc-table td.act,
table.pc-table th.act { text-align: right; white-space: nowrap; }
table.pc-table td.act .pc-actions {
  justify-content: flex-end;
  /* Never stacked. The name column takes all the slack, so left to wrap the
     buttons pile up one per line and the row grows to three times its
     height. */
  flex-wrap: nowrap;
}
/* A short fact that must not be broken across two lines to save a few
   pixels the name column would only swallow anyway. */
table.pc-table td.nw, table.pc-table th.nw { white-space: nowrap; }
/* A table's own buttons are secondary to the page's: smaller, and quiet
   until pointed at. Fifteen full size pills on one screen is a wall. */
table.pc-table .pc-action { min-height: 38px; padding: 0 16px; }
table.pc-table td .pc-kind { margin-left: 8px; }
table.pc-table tbody tr:last-child td { border-bottom: 0; }
table.pc-table tbody tr:hover { background: var(--surface-sunk); }

/* The mix, one row at a time. Scaled within the row, so it shows the
   proportion and not the size: the size is the column beside it. */
.pc-row-bar {
  display: flex;
  width: 100%;
  min-width: 90px;
  height: 9px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-sunk);
}
.pc-row-bar > span { display: block; height: 100%; }
.pc-row-bar > .is-public { background: var(--good); }
.pc-row-bar > .is-staff {
  background: repeating-linear-gradient(45deg,
    var(--primary) 0 3px, var(--primary-dark) 3px 6px);
}

/* ---- controls ---- */

.pc-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--touch);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-fill);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.pc-action:hover { background: var(--primary-dark); }
.pc-action.is-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.pc-action.is-ghost:hover { border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.pc-action.is-danger { background: var(--surface); color: #8A1C1C; border-color: #CBA6A6; }
.pc-action.is-danger:hover { background: #FBEDED; border-color: #8A1C1C; }
.pc-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-actions form { margin: 0; }

/* ---- forms ---- */

.pc-field { display: block; margin-bottom: 20px; }
.pc-field > span { display: block; margin-bottom: 7px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pc-hint { display: block; margin-top: 7px; font-weight: 400; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.pc-input,
.pc-select,
.pc-textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.pc-textarea { min-height: 130px; resize: vertical; }
.pc-input:focus-visible,
.pc-select:focus-visible,
.pc-textarea:focus-visible { border-color: var(--primary); }

.pc-radios { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.pc-radio input { accent-color: var(--primary); width: 18px; height: 18px; }
.pc-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-dark); }
.pc-check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch); font-weight: var(--fw-semibold); }
.pc-check input { accent-color: var(--primary); width: 20px; height: 20px; }

/* ---- the add and edit form ---- */

/* A form is read down one column: stretched across the whole width the eye
   has to travel back to the left edge for every field, and a two word answer
   sits in a box wide enough for a paragraph. So the fields keep a column, and
   the space beside them carries what somebody wants in view while filling it
   in rather than being left blank. */
.pc-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 20px;
  align-items: start;
}
.pc-form-main { min-width: 0; }
.pc-form-side { min-width: 0; position: sticky; top: 24px; }
.pc-form-side .wcard:last-child { margin-bottom: 0; }

/* The last field in a panel has the panel's own padding under it already. */
.wcard .pc-field.is-last { margin-bottom: 0; }

/* Figures stacked rather than in a row, because this column is too narrow to
   put three of them side by side and too tall to leave them squeezed. */
.pc-kpis.is-stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pc-kpis.is-stack .pc-kpi { padding: 14px 16px; }
.pc-kpis.is-stack .pc-kpi-ico { width: 32px; height: 32px; }
.pc-kpis.is-stack .pc-kpi-figure { font-size: var(--fs-xl); }

.pc-side-link { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.pc-side-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary-dark);
  text-decoration: none;
}
.pc-side-link a:hover { text-decoration: underline; }

/* Short facts, each with its own mark. Not a paragraph: these are read by
   somebody scanning for one of them, not from the top. */
.pc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pc-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.pc-points .pc-icon { flex: none; margin-top: 2px; color: var(--accent-mid); }

/* The native control is a grey button with the file name beside it, drawn by
   the operating system and matching nothing else on the page. The button part
   can be styled, so it is. */
.pc-file { padding: 9px 12px; cursor: pointer; }
.pc-file::file-selector-button {
  margin-right: 14px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.pc-file:hover::file-selector-button { border-color: var(--primary); color: var(--primary-dark); }

.pc-poster-preview {
  display: block;
  max-width: 260px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Everything that decides what happens when the form is submitted, in one
   place and set apart from the fields. The publish checkbox used to sit on
   the same line as the buttons with nothing between them, which made it look
   like a third button and put it one stray click from the wrong answer. */
.pc-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.pc-form-foot .pc-check { margin: 0; }

/* ---- messages and utilities ---- */

.pc-flash {
  display: flex;
  gap: 12px;
  padding: 15px 18px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.pc-flash.is-good { background: var(--accent-tint); color: var(--accent-dark); }
.pc-flash.is-bad { background: #FBEDED; color: #8A1C1C; }
.pc-flash ul { margin: 6px 0 0; padding-left: 18px; }

.pc-muted { color: var(--text-muted); }
.pc-small { font-size: var(--fs-sm); }

/* ---- responsive ---- */

@media (max-width: 1000px) {
  .pc-shell { grid-template-columns: minmax(0, 1fr); }
  .pc-side {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .pc-side-open .pc-side { transform: none; }
  .pc-side-toggle { display: inline-flex; }
  .pc-shell-veil {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(31, 50, 71, .42);
  }
}

@media (max-width: 1100px) {
  /* The side column goes under the form. Beside it at this width it squeezes
     the fields into something narrower than the text they hold. */
  .pc-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pc-form-side { position: static; }
}

@media (max-width: 880px) {
  /* A panel heading and its caption stop being a left and a right. Side by
     side in a phone's width they each wrap to two lines and then run into
     each other. */
  .wcard > h3 { flex-wrap: wrap; }
  .wcard > h3 .sm { margin-left: 0; flex-basis: 100%; }

  /* Charts keep a readable size and scroll sideways inside their card.
     Squeezed to fit, a drawing laid out for 560 units rendered at a third of
     that, and its 11px labels came out under 4px: present, and unreadable. */
  .pc-chart { overflow-x: auto; }
  .pc-chart > svg { min-width: 460px; }
  /* The retention curve is drawn on a box twice as wide as the others, so at
     the same rendered width its type would be half the size. Set in user
     units here, it comes out at the same height on screen as the rest. */
  .pc-chart.is-wide > svg text { font-size: 27px; }

  /* Tables keep their shape and scroll sideways in their wrapper. Stacking a
     row of figures into a list loses the one thing a table is for, which is
     reading down a column. Squeezed to the screen, though, the name column
     came out at 156px and every title broke over three lines, so it keeps a
     floor and the swipe gets a little longer. */
  table.pc-table thead th:first-child { min-width: 14rem; }
}

@media (max-width: 640px) {
  /* The heading keeps the menu button company instead of being pushed to a
     row of its own, and the page's buttons take the width they are going to
     be tapped at. */
  .pc-topbar { padding: 18px 18px 20px; }
  .pc-topbar-text { flex: 1 1 8rem; }
  .pc-topbar-actions { width: 100%; }
  .pc-topbar-actions .pc-action { flex: 1; justify-content: center; }

  /* The page controls stop being a left and a right and become two rows, and
     the period fills the width instead of trailing off the edge. */
  .pc-topbar-bar { flex-direction: column; align-items: stretch; }
  .pc-topbar-bar > .pc-range:only-child { margin-left: 0; }
  .pc-range { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pc-range-set { width: 100%; }
  .pc-range-set a { flex: 1; justify-content: center; padding: 0 10px; }

  /* The buttons below the checkbox rather than beside it, and each full
     width, because at this size they are what the thumb is aiming at. */
  .pc-form-foot { flex-direction: column; align-items: stretch; }
  /* display, because .pc-actions is inline-flex everywhere else and an
     inline box shrinks to its contents: the buttons came out the width of
     their own labels, stacked in the middle of the card. */
  /* align-items, because .pc-actions centres its children: turned on its
     side that stops being a vertical centring and becomes a horizontal one,
     and each button stays as wide as its own label. */
  .pc-form-foot .pc-actions {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .pc-form-foot .pc-action { justify-content: center; }

  /* Tables keep their shape and scroll sideways in their own box. Stacking
     a row of figures into a list loses the one thing a table is for, which
     is reading down a column. */
  .pc-table-wrap { margin: 0 -10px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-side { transition: none; }
}

/* ---------------------------------------------------------------- login -- */

/* One card, centred on a quiet ground. The layout work is all inside it:
   before, the fields were the generic form controls at their generic size,
   the heading sat tight against them, and the way out sat directly under the
   way in. */

.pc-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px var(--gutter);
  /* A wash rather than a flat fill, so the card reads as sitting on the page
     rather than as a box drawn on a blank one. Both colours are the logo's. */
  background:
    radial-gradient(680px 460px at 50% -8%, var(--primary-tint), transparent 70%),
    var(--bg);
}

.pc-login-card {
  width: 100%;
  max-width: 27rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px 36px 32px;
  box-shadow: var(--shadow-md);
}

.pc-login-mark { display: flex; justify-content: center; margin-bottom: 22px; }
.pc-login-mark .pc-brand-art { height: 58px; width: auto; }

/* Centred, because the two lines above the form are the page's title and its
   subtitle, not the first row of it. The form below stays left: a heading
   centres, a column you read and type in does not. */
.pc-login-card h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: 8px;
}
.pc-login-lede {
  margin: 0 0 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-wrap: balance;
}

.pc-login-card .pc-field { margin-bottom: 20px; }
.pc-login-card .pc-field > label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* The box, its icon and its button as one object.
   The input carries the border and the two children sit on top of it, which
   is why they are placed rather than being flex siblings: a flex row would
   put the border round the row, and the focus ring with it. */
.pc-input-wrap { position: relative; display: block; }
.pc-input-ico {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  pointer-events: none;
  transition: color .12s ease;
}
.pc-login-card .pc-input {
  min-height: 52px;
  padding: 13px 16px;
  background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pc-login-card .pc-input.has-ico { padding-left: 47px; }
.pc-login-card .pc-input.has-btn { padding-right: 54px; }
.pc-login-card .pc-input::placeholder { color: #9AA0A6; }
.pc-login-card .pc-input:hover { border-color: var(--text-muted); }
.pc-login-card .pc-input:focus {
  outline: none;
  border-color: var(--primary);
  /* A ring rather than a thicker border, so the box keeps its size and the
     rows below it do not shift as focus moves down the form. */
  box-shadow: 0 0 0 3px rgba(60, 87, 116, .18);
}
.pc-input-wrap:focus-within .pc-input-ico { color: var(--primary); }

.pc-input-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.pc-input-btn:hover { background: var(--surface-sunk); color: var(--primary-dark); }
.pc-input-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.pc-login-remember { margin-bottom: 22px; font-weight: 400; font-size: var(--fs-sm); }
.pc-login-remember input { flex: none; }

.pc-login-submit {
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: var(--fs-base);
  box-shadow: var(--shadow-sm);
}

/* Set apart by a rule and real space, not by a line break. It sat directly
   under the submit button before, close enough that the eye read the two as a
   pair and the pointer could land on the wrong one. They are not a pair: one
   signs you in, the other leaves. */
.pc-login-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.pc-login-foot a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: background .12s ease, color .12s ease;
}
.pc-login-foot a:hover { background: var(--surface-sunk); color: var(--primary-dark); }
.pc-login-foot .pc-icon { transition: transform .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .pc-login-foot a:hover .pc-icon { transform: translateX(-3px); }
}

.pc-login .pc-flash { align-items: flex-start; }
.pc-login .pc-flash .pc-icon { flex: none; margin-top: 2px; }
.pc-login .pc-flash ul { margin: 0; }

@media (max-width: 520px) {
  /* The border and the shadow go with the gutter: on a narrow screen the card
     is the page, and a frame drawn 16px inside the edge only makes it smaller. */
  .pc-login { padding: 0; place-items: stretch; }
  .pc-login-card {
    max-width: none;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 36px var(--gutter) 28px;
  }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
  .pc-charts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 880px) {
  /* Two tracks. Three would put a 200px poster on a card, which is smaller
     than the thumbnail it is meant to replace. */
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* The mark goes above the words rather than beside them, and shrinks: at
     this width a 280px logo beside a headline leaves neither any room. */
  .pc-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pc-hero-art { order: -1; justify-content: flex-start; }
  .pc-brand-xl .pc-brand-art { max-width: 160px; }
  .pc-about-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 620px) {
  :root { --gutter: 16px; --fs-3xl: 32px; --fs-2xl: 26px; }
  .pc-section-head { gap: 14px; }
  .pc-section-ico { width: 44px; height: 44px; }
  .pc-about { padding-block: 40px; }

  .pc-hero { padding-block: 34px 30px; }
  .pc-section { padding-block: 32px; }
  .pc-grid { grid-template-columns: 1fr; gap: 16px; }
  .pc-player-body { padding: 18px 16px 20px; }
  .pc-bar-btn { padding: 0 14px; }
  .pc-admin-bar-in { gap: 12px; }
  .pc-admin-who { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}