/* ==========================================================================
   RadioSite24 — the admin.

   Its own design language, deliberately: this is a tool, not a radio station.
   Calm, dense enough to be quick, and legible on a phone in a studio with the
   lights down — which is where a fair amount of this will actually be used.

   Fixed palette. The admin does NOT take the station's brand colours: a
   station with a yellow brand would otherwise get an unusable interface, and
   nobody needs their CMS on-brand.
   ========================================================================== */

:root{
  --a-bg:#F6F7F9;
  --a-panel:#FFFFFF;
  --a-line:#E3E7ED;
  --a-line-2:#EFF2F6;
  --a-ink:#111827;
  --a-ink-2:#48546A;
  /* #6B7684 measured 4.31:1 on the admin's own page colour - under AA, and
     it is the colour of every hint and every screen description. */
  --a-ink-3:#646E7C;
  --a-brand:#1D4ED8;
  --a-brand-lt:#EFF4FF;
  /* Buttons need their own blue. --a-brand doubles as the link colour, and
     in dark mode it has to be light enough to read on a dark panel - which
     makes it far too light to carry white button text (white on #6C93FF is
     about 2.3:1, nowhere near AA). Separating the two lets each be right. */
  --a-btn:#1D4ED8;
  --a-good:#0F7B4F;
  --a-good-lt:#E9F7F0;
  --a-warn:#9A5B00;
  --a-warn-lt:#FFF6E6;
  --a-bad:#B42318;
  --a-bad-lt:#FEF3F2;
  /* Readable ON --a-bad. Light mode's red is dark, so white; dark mode's is a
     light salmon, so near-black. Same reasoning as --a-btn. */
  --a-bad-on:#FFFFFF;
  --a-r:10px;
  --a-shadow:0 1px 2px rgb(16 24 40 / .05), 0 8px 24px -12px rgb(16 24 40 / .16);
  --a-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --a-rail:248px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-admin-theme="light"]){
    --a-bg:#0F1218; --a-panel:#171B23; --a-line:#262C38; --a-line-2:#1F242E;
    --a-ink:#F2F4F8; --a-ink-2:#B4BCCA; --a-ink-3:#8A94A6;
    --a-brand:#6C93FF; --a-brand-lt:#1B2340;
    --a-btn:#2F5BD0;
    --a-good:#4ADE9B; --a-good-lt:#12281F;
    --a-warn:#F5B851; --a-warn-lt:#2A2114;
    --a-bad:#FF8B80; --a-bad-lt:#2C1614; --a-bad-on:#2A0F0C;
  }
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--a-bg);color:var(--a-ink);
  font-family:var(--a-sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.018em;line-height:1.25}
:focus-visible{outline:3px solid var(--a-brand);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------- layout --- */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:960px){.shell{grid-template-columns:var(--a-rail) 1fr}}

.rail{
  background:var(--a-panel);border-right:1px solid var(--a-line);
  display:flex;flex-direction:column;
}
@media(max-width:959px){
  .rail{position:sticky;top:0;z-index:40;border-right:0;border-bottom:1px solid var(--a-line)}
  .rail nav{display:none}
  .rail.open nav{display:block}
}
@media(min-width:960px){.rail{position:sticky;top:0;height:100vh;overflow-y:auto}}

.rail-top{
  padding:16px 18px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid var(--a-line-2);
}
.rail-top .mark{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:var(--a-brand);color:#fff;font-weight:800;font-size:15px;
}
.rail-top .nm{font-weight:700;font-size:15px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-top .sub{font-size:11.5px;color:var(--a-ink-3)}
.rail-toggle{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;padding:7px;display:flex}
@media(min-width:960px){.rail-toggle{display:none}}

.rail nav{padding:12px 10px 20px;flex:1}
.rail .grp{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--a-ink-3);padding:16px 10px 7px;
}
.rail a.item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;
  font-size:14.5px;font-weight:500;color:var(--a-ink-2);
  transition:background .14s ease,color .14s ease;
}
.rail a.item:hover{background:var(--a-line-2);color:var(--a-ink)}
.rail a.item.on{background:var(--a-brand-lt);color:var(--a-brand);font-weight:650}
.rail a.item .ic{width:19px;text-align:center;flex-shrink:0;font-size:15px}
.rail a.item .badge{
  margin-left:auto;background:var(--a-brand);color:#fff;border-radius:100px;
  font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center;
}
.rail-foot{padding:14px 16px;border-top:1px solid var(--a-line-2);font-size:13px;color:var(--a-ink-3)}

.main{min-width:0;padding:clamp(18px,2.6vw,32px);max-width:1180px;width:100%}

/* ---------------------------------------------------------- page head --- */
.head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:22px}
.head h1{font-size:clamp(21px,2.6vw,27px)}
.head p{margin:5px 0 0;color:var(--a-ink-3);font-size:14px;max-width:64ch}
.head .actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* ------------------------------------------------------------- panels --- */
.panel{
  background:var(--a-panel);border:1px solid var(--a-line);
  border-radius:var(--a-r);margin-bottom:18px;overflow:hidden;
}
.panel-hd{
  padding:14px 18px;border-bottom:1px solid var(--a-line-2);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.panel-hd h2{font-size:16px}
.panel-hd .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel-bd{padding:18px}
.panel-bd.tight{padding:0}

/* ------------------------------------------------------------ buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  font-family:var(--a-sans);font-size:14px;font-weight:600;
  transition:filter .14s ease,background .14s ease,border-color .14s ease;
  white-space:nowrap;
}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--a-btn);color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-ghost{background:var(--a-panel);border-color:var(--a-line);color:var(--a-ink)}
.btn-ghost:hover{border-color:var(--a-ink-3)}
.btn-danger{background:var(--a-bad-lt);color:var(--a-bad);border-color:transparent}
/* --a-bad-on, not #fff. In dark mode --a-bad is a light salmon and white on it
   measured 2.27:1 - the hover state of the button that deletes things was the
   least readable thing in the admin. */
.btn-danger:hover{background:var(--a-bad);color:var(--a-bad-on)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-block{width:100%}

/* ------------------------------------------------------------- fields --- */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:13.5px;font-weight:650}
.field .hint{font-size:12.5px;color:var(--a-ink-3);line-height:1.45}
.field input[type=text],.field input[type=email],.field input[type=url],
.field input[type=tel],.field input[type=number],.field input[type=password],
.field input[type=date],.field input[type=datetime-local],
.field select,.field textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--a-line);border-radius:8px;
  background:var(--a-panel);color:var(--a-ink);font-size:14.5px;
  /* Browsers default a <textarea> to monospace, so every standfirst and show
     description was being written in a code font. These are fields for prose. */
  font-family:inherit;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field textarea.tall{min-height:280px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--a-brand);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a-brand) 18%,transparent);
}
.row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){.row.two{grid-template-columns:repeat(2,1fr)}
                        .row.three{grid-template-columns:repeat(3,1fr)}}

.check{
  display:flex;gap:11px;align-items:flex-start;font-size:14px;
  padding:11px 13px;border:1px solid var(--a-line);border-radius:8px;
  background:var(--a-panel);cursor:pointer;margin-bottom:10px;
}
.check:hover{border-color:var(--a-ink-3)}
.check input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--a-brand)}
.check .t{font-weight:600}
.check .d{font-size:12.5px;color:var(--a-ink-3);display:block;margin-top:2px}

.colour{display:flex;gap:10px;align-items:center}
.colour input[type=color]{
  width:48px;height:42px;padding:3px;border:1.5px solid var(--a-line);
  border-radius:8px;background:var(--a-panel);cursor:pointer;
}

/* image picker */
.imgpick{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.imgpick .prev{
  width:84px;height:84px;border-radius:9px;border:1px solid var(--a-line);
  background:var(--a-line-2);object-fit:contain;padding:6px;flex-shrink:0;
}
.imgpick .none{
  width:84px;height:84px;border-radius:9px;border:1.5px dashed var(--a-line);
  display:grid;place-items:center;color:var(--a-ink-3);font-size:11px;text-align:center;
  padding:6px;flex-shrink:0;
}

/* ---------------------------------------- the hero's rotating pictures --- */
/* One row per extra picture: thumbnail, its two fields, and the tools. Same
   thumbnail size as imgpick so the main picture and the extras read as one
   family; rows are stacked because the order IS the rotation order. */
.slides{display:flex;flex-direction:column;gap:8px}
.slide{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:8px;border:1px solid var(--a-line);border-radius:10px;
  background:var(--a-panel);
}
.slide img{
  width:84px;height:84px;border-radius:8px;object-fit:cover;
  border:1px solid var(--a-line);background:var(--a-line-2);
}
.slide-fields{display:flex;flex-direction:column;gap:6px;min-width:0}
.slide-fields input{width:100%;font-size:13.5px}
.slide-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.mini{
  width:32px;height:32px;padding:0;border-radius:8px;border:1px solid var(--a-line);
  background:var(--a-bg);color:var(--a-ink);font-size:15px;line-height:1;cursor:pointer;
}
.mini:hover:not(:disabled){border-color:var(--a-ink-3)}
.mini:disabled{opacity:.35;cursor:default}
.mini:focus-visible{outline:2px solid var(--a-brand);outline-offset:2px}
@media (max-width:640px){
  .slide{grid-template-columns:64px minmax(0,1fr)}
  .slide img{width:64px;height:64px}
  .slide-tools{grid-column:1/-1;justify-content:flex-start}
}

/* -------------------------------------------------------------- table --- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{
  text-align:left;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a-ink-3);padding:11px 18px;
  border-bottom:1px solid var(--a-line);white-space:nowrap;
}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--a-line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--a-line-2)}
.tbl .nm{font-weight:650}
.tbl .sub{font-size:12.5px;color:var(--a-ink-3)}
.tbl .thumb{width:40px;height:40px;border-radius:7px;object-fit:cover;background:var(--a-line-2)}
.tbl .r{text-align:right}
.tbl .actions{display:flex;gap:7px;justify-content:flex-end}
@media(max-width:720px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border-bottom:1px solid var(--a-line);padding:6px 0}
  .tbl td{border:0;padding:5px 16px}
  .tbl td[data-label]::before{
    content:attr(data-label) ": ";font-weight:700;color:var(--a-ink-3);font-size:12px;
  }
  /* After the rule above, which it has to beat: an empty label (the picture
     and button columns) printed a lone ": " on every row on a phone, and a
     screen reader could read it out. */
  .tbl td[data-label=""]::before{content:none}
  .tbl .actions{justify-content:flex-start;padding-top:8px}
}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* -------------------------------------------------------------- chips --- */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 10px;border-radius:100px;background:var(--a-line-2);color:var(--a-ink-2);
  white-space:nowrap;
}
.pill.good{background:var(--a-good-lt);color:var(--a-good)}
.pill.warn{background:var(--a-warn-lt);color:var(--a-warn)}
.pill.bad{background:var(--a-bad-lt);color:var(--a-bad)}
.pill.info{background:var(--a-brand-lt);color:var(--a-brand)}

/* ------------------------------------------------------------- notice --- */
.note{
  padding:13px 16px;border-radius:9px;margin-bottom:18px;font-size:14px;
  display:flex;gap:11px;align-items:flex-start;
}
.note.ok{background:var(--a-good-lt);color:var(--a-good)}
.note.warn{background:var(--a-warn-lt);color:var(--a-warn)}
.note.bad{background:var(--a-bad-lt);color:var(--a-bad)}
.note.info{background:var(--a-brand-lt);color:var(--a-brand)}
.note a{text-decoration:underline;font-weight:650}

/* --------------------------------------------------------------- todo --- */
.todo{display:grid;gap:9px}
.todo .item{
  display:flex;gap:12px;align-items:center;padding:13px 16px;
  background:var(--a-panel);border:1px solid var(--a-line);border-radius:9px;font-size:14px;
}
.todo .item.urgent{border-color:var(--a-warn);background:var(--a-warn-lt);color:var(--a-warn)}
.todo .item .go{margin-left:auto;flex-shrink:0}

/* ---------------------------------------------------------- stat tiles --- */
.stats{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--a-panel);border:1px solid var(--a-line);border-radius:var(--a-r);padding:16px 18px}
.stat .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--a-ink-3)}
.stat .v{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.03em;margin-top:5px}
.stat .d{font-size:12.5px;color:var(--a-ink-3);margin-top:2px}

/* tiny bar chart, no library */
.spark{display:flex;align-items:flex-end;gap:2px;height:64px;margin-top:14px}
.spark i{flex:1;background:var(--a-brand);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.spark i:hover{opacity:1}

/* ------------------------------------------------------- sortable list --- */
.sortable{display:grid;gap:8px}
.sort-item{
  display:flex;gap:12px;align-items:flex-start;padding:13px 15px;
  background:var(--a-panel);border:1px solid var(--a-line);border-radius:9px;
}
.sort-item.off{opacity:.55}
.sort-item.unavailable{opacity:.45;background:var(--a-line-2)}
.sort-item .grab{
  cursor:grab;color:var(--a-ink-3);padding:2px 3px;flex-shrink:0;user-select:none;
  font-size:16px;line-height:1.2;
}
.sort-item.dragging{opacity:.4;border-style:dashed}
.sort-item .body{flex:1;min-width:0}
.sort-item .t{font-weight:650;font-size:14.5px}
.sort-item .d{font-size:12.5px;color:var(--a-ink-3);margin-top:2px}
.sort-item .opts{display:grid;gap:10px;margin-top:11px;grid-template-columns:1fr}
@media(min-width:640px){.sort-item .opts{grid-template-columns:repeat(2,1fr)}}
.sort-item .opts .field{margin:0}
.sort-item .move{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.sort-item .move button{
  background:var(--a-line-2);border:0;border-radius:5px;cursor:pointer;
  width:26px;height:20px;color:var(--a-ink-2);font-size:11px;line-height:1;
}
.sort-item .move button:hover{background:var(--a-brand);color:#fff}

/* switch */
.sw{position:relative;width:42px;height:24px;flex-shrink:0}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.sw .track{
  position:absolute;inset:0;background:var(--a-line);border-radius:100px;
  transition:background .16s ease;
}
.sw .knob{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .16s ease;
}
.sw input:checked ~ .track{background:var(--a-brand)}
.sw input:checked ~ .knob{transform:translateX(18px)}
.sw input:focus-visible ~ .track{outline:3px solid var(--a-brand);outline-offset:2px}

/* ------------------------------------------------------------- themes --- */
.theme-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.theme-card{
  border:2px solid var(--a-line);border-radius:var(--a-r);overflow:hidden;
  background:var(--a-panel);cursor:pointer;transition:border-color .16s ease,transform .16s ease;
  display:block;text-align:left;padding:0;font-family:inherit;width:100%;
}
.theme-card:hover{transform:translateY(-2px)}
.theme-card.on{border-color:var(--a-brand)}
.theme-card .swatch{height:88px;position:relative;display:flex;align-items:flex-end;padding:11px}
.theme-card .swatch .bar{height:9px;border-radius:100px;width:60%}
.theme-card .swatch .dot{
  position:absolute;top:11px;right:11px;width:22px;height:22px;border-radius:50%;
}
.theme-card .tt{padding:12px 14px 14px}
.theme-card .tt .n{font-weight:700;font-size:14.5px}
.theme-card .tt .b{font-size:12.5px;color:var(--a-ink-3);margin-top:3px;line-height:1.4}

/* -------------------------------------------------------------- setup --- */
.setup{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1100px){.setup{grid-template-columns:minmax(0,1fr) minmax(0,46%)}}
.setup-form{padding:clamp(22px,4vw,52px);max-width:640px;width:100%;margin-inline:auto}
.setup-preview{
  background:var(--a-line-2);border-left:1px solid var(--a-line);
  display:none;flex-direction:column;position:sticky;top:0;height:100vh;
}
@media(min-width:1100px){.setup-preview{display:flex}}
.setup-preview .bar{
  padding:11px 16px;border-bottom:1px solid var(--a-line);background:var(--a-panel);
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--a-ink-3);
}
.setup-preview .dots{display:flex;gap:5px}
.setup-preview .dots i{width:10px;height:10px;border-radius:50%;background:var(--a-line);display:block}
.setup-preview iframe{flex:1;width:100%;border:0;background:#fff}

.steps{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.steps i{height:4px;flex:1;min-width:10px;background:var(--a-line);border-radius:100px}
.steps i.done{background:var(--a-brand)}
.steps i.now{background:var(--a-brand);opacity:.5}
.step-n{font-size:12.5px;font-weight:700;color:var(--a-brand);letter-spacing:.05em;text-transform:uppercase}

.readiness{display:grid;gap:8px}
.readiness .r{
  display:flex;gap:11px;align-items:center;padding:12px 15px;
  border:1px solid var(--a-line);border-radius:9px;background:var(--a-panel);font-size:14px;
}
.readiness .r .ic{flex-shrink:0;font-size:16px}
.readiness .r .b{flex:1;min-width:0}
.readiness .r .t{font-weight:650}
.readiness .r .d{font-size:12.5px;color:var(--a-ink-3);word-break:break-word}

/* --------------------------------------------------------------- auth --- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth .box{
  width:100%;max-width:430px;background:var(--a-panel);border:1px solid var(--a-line);
  border-radius:14px;padding:clamp(24px,4vw,38px);box-shadow:var(--a-shadow);
}
.auth h1{font-size:24px;margin-bottom:6px}
.auth .sub{color:var(--a-ink-3);font-size:14px;margin:0 0 24px}
.auth .alt{margin:20px 0 0;text-align:center;font-size:14px;color:var(--a-ink-3)}
.auth .alt a{color:var(--a-brand);font-weight:650}

.empty{
  text-align:center;padding:clamp(30px,5vw,54px) 20px;color:var(--a-ink-3);
}
.empty h3{color:var(--a-ink);font-size:17px;margin-bottom:7px}
.empty p{margin:0 auto 18px;max-width:44ch;font-size:14px}

/* ------------------------------------------------------- the writing box ---
   The editor that replaces a `richtext` textarea. See static/js/richtext.js —
   the toolbar is deliberately the sanitiser's allow-list and nothing more, so
   nothing a station can press produces formatting the server then throws away.

   The textarea itself stays in the DOM, hidden: it is what the form posts, and
   it is what still works if the script never runs. */

.rt{
  border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--a-panel);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.rt.on{border-color:var(--a-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-brand) 22%,transparent)}
.rt-src{display:none !important}

.rt-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:1px;
  padding:6px;border-bottom:1px solid var(--a-line);
  background:var(--a-line-2);border-radius:calc(var(--a-r) - 1px) calc(var(--a-r) - 1px) 0 0;
  position:sticky;top:0;z-index:2;
}
.rt-b{
  width:32px;height:30px;display:grid;place-items:center;
  border:0;border-radius:7px;background:transparent;color:var(--a-ink-2);
  cursor:pointer;padding:0;
  transition:background .12s ease,color .12s ease;
}
.rt-b:hover{background:var(--a-panel);color:var(--a-ink)}
.rt-b.on{background:var(--a-brand-lt);color:var(--a-brand)}
.rt-b:focus-visible{outline:2px solid var(--a-brand);outline-offset:1px}
.rt-b svg{width:17px;height:17px}
.rt-b .rt-t{font-size:12px;font-weight:800;letter-spacing:-.03em;line-height:1}
.rt-sep{width:1px;height:18px;background:var(--a-line);margin:0 5px;flex:none}

.rt-body{
  padding:16px 17px;min-height:190px;outline:0;
  font-size:15.5px;line-height:1.62;color:var(--a-ink);
  overflow-wrap:break-word;
}
/* The article as it will read, near enough. Not the station's fonts — this is
   the admin, and matching their theme here would make the tool look broken
   every time they changed it. */
.rt-body > *:first-child{margin-top:0}
.rt-body > *:last-child{margin-bottom:0}
.rt-body p{margin:0 0 .85em}
.rt-body h2{font-size:21px;margin:1.3em 0 .5em;font-weight:700;letter-spacing:-.02em}
.rt-body h3{font-size:17.5px;margin:1.2em 0 .45em;font-weight:700;letter-spacing:-.015em}
.rt-body ul,.rt-body ol{margin:0 0 .9em;padding-left:1.5em}
.rt-body li{margin:.2em 0}
.rt-body a{color:var(--a-brand);text-decoration:underline;text-underline-offset:2px}
.rt-body blockquote{
  margin:1em 0;padding:.2em 0 .2em 1em;border-left:3px solid var(--a-brand);
  color:var(--a-ink-2);font-style:italic;
}
/* A photo added with "Add a photo". width/height attributes are set so the
   page does not jump; height:auto keeps it in proportion when max-width bites. */
.rt-body img{max-width:100%;height:auto;border-radius:8px;margin:.3em 0;cursor:pointer}
/* A photo with no description (added before descriptions were required, or
   brought in by the importer) is marked, so it gets fixed. Click it. */
.rt-body img:not([alt]),.rt-body img[alt=""]{outline:3px dashed var(--a-warn);outline-offset:2px}
.rt-link-row .rt-del{margin-left:auto;color:var(--a-warn)}
.rt-img input[type=file]{padding:7px 9px}
.rt-img label + input{margin-bottom:10px}
.rt-body:empty::before,
.rt-body > p:only-child:empty::before{content:'';display:inline-block}

/* The link prompt. Inline rather than window.prompt, which some browsers block
   inside an iframe and the rest use to freeze the whole drawer. */
.rt-link{
  border-top:1px solid var(--a-line);padding:13px 15px;background:var(--a-line-2);
  border-radius:0 0 calc(var(--a-r) - 1px) calc(var(--a-r) - 1px);
}
.rt-link label{display:block;font-size:12.5px;font-weight:600;color:var(--a-ink-2);margin:0 0 6px}
.rt-link input{
  width:100%;margin-top:5px;padding:9px 11px;font-size:14px;
  border:1px solid var(--a-line);border-radius:8px;
  background:var(--a-panel);color:var(--a-ink);
}
.rt-link input:focus{outline:2px solid var(--a-brand);outline-offset:1px}
.rt-link-row{display:flex;gap:8px;margin-top:10px}
.rt-link-row button{
  font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;
  border:1px solid var(--a-line);background:var(--a-panel);color:var(--a-ink);cursor:pointer;
}
.rt-link-row .rt-go{background:var(--a-btn);border-color:transparent;color:#fff}
.rt-note{margin:9px 0 0;font-size:12.5px;color:var(--a-warn)}

/* The section a manager arrived at by clicking its pencil on their homepage.
   See ?focus= in routers/admin.py and the tail of admin.js. */
.sort-item.focused{border-color:var(--a-brand)}
.sort-item.flash{animation:a-flash 1.6s var(--a-ease, ease) 1}
@keyframes a-flash{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a-brand) 0%,transparent)}
  12%    {box-shadow:0 0 0 4px color-mix(in srgb,var(--a-brand) 34%,transparent)}
  60%    {box-shadow:0 0 0 4px color-mix(in srgb,var(--a-brand) 18%,transparent)}
}

/* ------------------------------------------------------------------ tabs ---
   The five listener inboxes as one screen. They were five sidebar entries out
   of nineteen, and "everything listeners sent you" is one job, not five. */
.tabstrip{
  display:flex;gap:4px;overflow-x:auto;margin:0 0 18px;
  border-bottom:1px solid var(--a-line);padding-bottom:0;
  scrollbar-width:none;
}
.tabstrip::-webkit-scrollbar{display:none}
.tabstrip .tab{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 14px 11px;border-radius:9px 9px 0 0;
  font-size:13.5px;font-weight:600;color:var(--a-ink-3);
  border:1px solid transparent;border-bottom:0;position:relative;top:1px;
  transition:color .12s ease,background .12s ease;
}
.tabstrip .tab:hover{color:var(--a-ink);background:var(--a-line-2)}
.tabstrip .tab.on{
  color:var(--a-ink);background:var(--a-panel);
  border-color:var(--a-line);
}
/* Covers the container's bottom border so the active tab joins the panel. */
.tabstrip .tab.on::after{
  content:'';position:absolute;left:1px;right:1px;bottom:-1px;height:2px;
  background:var(--a-panel);
}
.tabstrip .tab .ic{font-size:14px;line-height:1}
.tabstrip .tab .badge{
  background:var(--a-btn);color:#fff;font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;
  padding:0 5px;
}
.tabstrip .tab:focus-visible{outline:2px solid var(--a-brand);outline-offset:2px}

/* A sidebar item that stands on its own rather than under a group heading. */
.rail .item.spaced{margin-top:14px}

/* ------------------------------------------------------------- autosave ---
   The Design & pages screen saves as you change it, so it needs somewhere to
   say so. Bottom-right, out of the way, and it never blocks anything. */
.autosave{
  position:fixed;right:18px;bottom:18px;z-index:60;
  max-width:min(420px,calc(100vw - 36px));
  padding:11px 15px;border-radius:999px;
  font-size:13px;font-weight:600;line-height:1.4;
  background:var(--a-ink);color:var(--a-bg);
  border:1px solid transparent;box-shadow:var(--a-shadow);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.autosave.on{opacity:1;transform:none}
.autosave.busy{background:var(--a-ink-2)}
.autosave.ok{background:var(--a-good);color:#fff}
.autosave.bad{
  background:var(--a-bad);color:#fff;border-radius:12px;
  font-weight:500;pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){ .autosave{transition-duration:1ms} }

/* ------------------------------------------------------ are you sure? ------
   Asked in the page, not with window.confirm. See askFirst() in admin.js: a
   native dialog is blocked inside studio mode's iframe by some browsers and
   freezes the page in the rest, it cannot say which button is the dangerous
   one, and it is the one moment a station is about to destroy something. */
.a-ask{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:20px;background:rgb(9 12 18 / .55);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
@supports (backdrop-filter:blur(1px)){ .a-ask{backdrop-filter:blur(3px)} }
.a-ask.on{opacity:1;pointer-events:auto}
.a-ask-box{
  width:min(420px,100%);background:var(--a-panel);color:var(--a-ink);
  border:1px solid var(--a-line);border-radius:14px;
  padding:22px;box-shadow:0 24px 60px -20px rgb(9 12 18 / .5);
  transform:translateY(8px) scale(.985);transition:transform .18s ease;
}
.a-ask.on .a-ask-box{transform:none}
.a-ask-t{margin:0 0 18px;font-size:15.5px;line-height:1.5;font-weight:600}
.a-ask-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* .btn-danger itself is defined with the other buttons - it already existed and
   there should be one of it. */
.btn-danger:focus-visible{outline:3px solid var(--a-bad);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .a-ask,.a-ask-box{transition-duration:1ms}
}

/* ------------------------------------------------------- the front door ---
   The dashboard's first card. It exists because the old dashboard opened with
   four audience numbers and a chart, and a station's website — the thing they
   came here to work on — was a ghost button in the corner. On a new station
   that meant landing on four zeros. */
.hero-card{
  background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;
  box-shadow:var(--a-shadow);margin-bottom:18px;overflow:hidden;
  position:relative;
}
/* A quiet band of the brand colour, so the card reads as "your site" rather
   than as another panel. */
.hero-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--a-btn),var(--a-brand));
}
.hero-card-bd{padding:24px 26px 26px}
.hero-card h2{font-size:26px;letter-spacing:-.022em;margin:10px 0 4px}
.hero-card .addr{margin:0 0 14px;font-size:14px;color:var(--a-ink-2)}
.hero-card .addr a{color:var(--a-brand);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.hero-card .how{
  margin:0 0 18px;font-size:14px;color:var(--a-ink-2);max-width:56ch;line-height:1.55;
}
.hero-card .btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* The recurring jobs. Big enough to hit, plain enough to read at a glance. */
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.quick-item{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border:1px solid var(--a-line);border-radius:11px;
  background:var(--a-bg);color:var(--a-ink);font-weight:600;font-size:14px;
  min-height:48px;
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.quick-item:hover{border-color:var(--a-btn);background:var(--a-panel);transform:translateY(-1px)}
.quick-item:focus-visible{outline:3px solid var(--a-brand);outline-offset:2px}
.quick-item .ic{font-size:18px;line-height:1;flex:none}

@media (prefers-reduced-motion: reduce){ .quick-item{transition-duration:1ms} }

/* ================================================================ help ====
   The manual, and the little `?` that appears beside anything worth a
   sentence.

   Both are driven by core/manual.py. The `?` is not a tooltip: a tooltip
   disappears the moment you move to read it, cannot be reached by keyboard on
   most implementations, and cannot hold a link. This is a button that opens a
   small panel with a sentence and a way through to the full topic. */

/* ---- the `?` beside a label or a heading ------------------------------- */
.helpq{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;min-width:18px;margin-inline-start:6px;padding:0;
  border:1px solid var(--a-line);border-radius:50%;background:var(--a-panel);
  color:var(--a-ink-3);font-size:11px;font-weight:800;line-height:1;
  cursor:pointer;vertical-align:middle;
  transition:background .15s,color .15s,border-color .15s;
}
.helpq:hover,.helpq[aria-expanded="true"]{
  background:var(--a-brand);border-color:var(--a-brand);color:#fff;
}
.helpq:focus-visible{outline:2px solid var(--a-brand);outline-offset:2px}

/* The panel. Positioned by the script relative to its button; these are the
   resting styles, so it is still legible if the script never runs. */
.helppop{
  position:absolute;z-index:70;max-width:320px;
  background:var(--a-panel);color:var(--a-ink);
  border:1px solid var(--a-line);border-radius:var(--a-r);
  box-shadow:var(--a-shadow);padding:12px 14px;font-size:13.5px;line-height:1.55;
}
.helppop p{margin:0 0 8px}
.helppop p:last-child{margin:0}
.helppop a{color:var(--a-brand);font-weight:600}
.helppop .more{font-size:12.5px}
.helppop[hidden]{display:none}

/* ---- the manual page --------------------------------------------------- */
.man-search{
  display:flex;align-items:center;gap:10px;position:relative;
  background:var(--a-panel);border:1px solid var(--a-line);
  border-radius:var(--a-r);padding:10px 12px;margin-bottom:18px;
  box-shadow:var(--a-shadow);
}
.man-search .ic{font-size:15px;opacity:.6}
.man-search input{
  flex:1;min-width:0;border:0;background:none;font-size:15px;padding:6px 0;
  color:var(--a-ink);
}
.man-search input:focus{outline:none}
.man-search:focus-within{border-color:var(--a-brand);
  box-shadow:0 0 0 3px var(--a-brand-lt)}

.man-count{font-size:13px;color:var(--a-ink-3);margin:0 0 10px}
.man-hits{display:grid;gap:8px;margin-bottom:26px}
.man-hit{
  display:block;padding:11px 14px;border:1px solid var(--a-line);
  border-radius:var(--a-r);background:var(--a-panel);text-decoration:none;
}
.man-hit:hover{border-color:var(--a-brand);background:var(--a-brand-lt)}
.man-hit .ch{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--a-ink-3)}
.man-hit .ti{display:block;font-weight:700;color:var(--a-ink);margin:2px 0 3px}
.man-hit .ex{display:block;font-size:13px;color:var(--a-ink-2)}

.man-body{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){
  .man-body{grid-template-columns:230px minmax(0,1fr);gap:34px}
  .man-toc{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);
    overflow-y:auto}
}
.man-toc{font-size:13.5px}
.man-toc .ch{
  display:block;font-weight:700;color:var(--a-ink);padding:7px 0 4px;
  text-decoration:none;border-top:1px solid var(--a-line-2);
}
.man-toc .ch:first-child{border-top:0}
.man-toc .ch.on{color:var(--a-brand)}
.man-toc .tl{display:grid;gap:2px;padding:0 0 8px 20px}
.man-toc .tl a{color:var(--a-ink-3);text-decoration:none;font-size:13px;
  padding:2px 0}
.man-toc .tl a:hover{color:var(--a-brand)}

.man-ch{margin-bottom:34px}
.man-ch > h2{font-size:21px;margin:0 0 4px}
.man-ch > .blurb{color:var(--a-ink-3);margin:0 0 16px;font-size:14px}

.man-topic{
  background:var(--a-panel);border:1px solid var(--a-line);
  border-radius:var(--a-r);padding:16px 18px;margin-bottom:12px;
}
.man-topic h3{font-size:16px;margin:0 0 8px;display:flex;align-items:baseline;
  gap:8px}
.man-topic h3 .anchor{color:var(--a-line);text-decoration:none;font-weight:600;
  opacity:0;transition:opacity .15s}
.man-topic:hover h3 .anchor,.man-topic h3 .anchor:focus-visible{opacity:1;
  color:var(--a-ink-3)}
.man-topic .prose{font-size:14.5px;line-height:1.65;color:var(--a-ink-2)}
.man-topic .prose p{margin:0 0 10px}
.man-topic .prose p:last-child{margin:0}
.man-topic .prose b{color:var(--a-ink)}
.man-topic .prose ul,.man-topic .prose ol{margin:0 0 10px;padding-left:20px}
.man-topic .prose li{margin-bottom:5px}
.man-topic .prose code{
  background:var(--a-line-2);border-radius:5px;padding:1px 5px;font-size:13px;
}
.man-topic .prose a,.man-topic .see a{color:var(--a-brand);font-weight:600}
.man-topic .see{font-size:13px;color:var(--a-ink-3);margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--a-line-2)}

/* A jumped-to topic says so for a moment, so nobody has to guess which
   paragraph on a long page was the answer. */
@keyframes man-flash{
  from{border-color:var(--a-brand);box-shadow:0 0 0 3px var(--a-brand-lt)}
  to{border-color:var(--a-line);box-shadow:none}
}
.man-topic.flash{animation:man-flash 1.6s ease-out}
@media (prefers-reduced-motion:reduce){
  .man-topic.flash{animation:none;border-color:var(--a-brand)}
}

/* ---- the help button in the shell -------------------------------------- */
.rail .item.help{margin-top:auto}

/* ---- the help bar at the top of every admin screen ---------------------- */
.topbar{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
}
.topbar-search{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:var(--a-panel);border:1px solid var(--a-line);
  border-radius:999px;padding:6px 14px;
}
.topbar-search .ic{font-size:13px;opacity:.55}
.topbar-search input{
  flex:1;min-width:0;border:0;background:none;font-size:13.5px;padding:4px 0;
  color:var(--a-ink);
}
.topbar-search input:focus{outline:none}
.topbar-search:focus-within{border-color:var(--a-brand);
  box-shadow:0 0 0 3px var(--a-brand-lt)}
.topbar .btn{white-space:nowrap}
@media(max-width:640px){
  /* On a phone the two buttons and the box do not fit on one line, and the
     box is the one worth keeping full width. */
  .topbar{flex-wrap:wrap}
  .topbar-search{order:-1;flex-basis:100%}
}
/* The drawer already has its own header and its own way back; a help bar
   inside a 620px panel is three things saying the same thing. */
body.embed .topbar{display:none}
.topbar-fill{flex:1}

/* ---- the brand on the sign-in screen ----------------------------------- */
.auth-logo{display:block;height:52px;width:auto;margin:0 0 20px}
.auth-logo.dk{display:none}
@media (prefers-color-scheme:dark){
  .auth-logo{display:none}
  .auth-logo.dk{display:block}
}
.auth-family{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--a-line);
  font-size:12px;color:var(--a-ink-3);
}
.auth-family a{display:inline-flex;align-items:center;gap:6px;
  color:var(--a-ink-2);text-decoration:none}
.auth-family a:hover{color:var(--a-ink)}
.auth-family b{font-size:12.5px;font-weight:700}
.auth-family img{opacity:.85}
.rail-brand{
  display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--a-line);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;color:var(--a-ink-3);
}
.rail-brand img{opacity:.9}
/* An image inside a link picks up the link underline in some engines, and a
   logo with a line under it looks like a mistake. */
.auth-family a,.auth-family a:hover,.rail-brand{text-decoration:none}
.auth-family img{text-decoration:none;vertical-align:middle}

/* ================================================================ plan ====
   The plan screen. See core/plans.py for why the lines fall where they do. */

.dim{color:var(--a-ink-3);font-size:13.5px}
.panel-hd .right.dim,.panel-hd .right{font-size:13px;color:var(--a-ink-3)}

/* The storage bar. Deliberately a real bar rather than a number: "1.8 of 2 GB"
   is a fact, a bar four fifths full is a decision. */
.bar{
  height:10px;border-radius:999px;background:var(--a-line-2);overflow:hidden;
}
.bar i{display:block;height:100%;border-radius:999px;background:var(--a-brand);
  transition:width .3s ease}
.bar.hot i{background:var(--a-warn)}

.plans{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{
  border:1px solid var(--a-line);border-radius:var(--a-r);padding:18px;
  display:flex;flex-direction:column;gap:2px;background:var(--a-panel);
}
.plan.on{border-color:var(--a-brand);box-shadow:0 0 0 3px var(--a-brand-lt)}
.plan h3{font-size:17px;margin:6px 0 2px}
.plan .blurb{color:var(--a-ink-3);font-size:13px;margin:0 0 12px}
.plan .price{margin:0;display:flex;align-items:baseline;gap:6px}
.plan .price b{font-size:30px;letter-spacing:-.02em}
.plan .price span{font-size:13px;color:var(--a-ink-3)}
.plan .year{margin:2px 0 14px;font-size:13px;color:var(--a-ink-3)}
.plan ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;
  font-size:13.5px;color:var(--a-ink-2)}
.plan li{padding-left:20px;position:relative;line-height:1.45}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--a-good);
  font-weight:800}
.plan li.off{color:var(--a-ink-3)}
.plan li.off::before{content:"–";color:var(--a-ink-3)}
.plan .btn{margin-top:auto}

.locked{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.locked li{display:flex;gap:9px;align-items:center;color:var(--a-ink-2)}

/* A module switch the plan does not cover. Shown, not hidden: somebody has to
   be able to see what they would be buying. */
.check.locked-row{opacity:.62}
.check.locked-row input{pointer-events:none}
.lock-tag{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  font-size:11.5px;font-weight:700;color:var(--a-brand);text-decoration:none;
}
.lock-tag:hover{text-decoration:underline}
/* The "Your plan" flag sits with the name, not stretched across the card. */
.plan > .pill{align-self:flex-start}

/* Monthly / yearly. A segmented control rather than two radio buttons: it is
   one decision with two answers and it belongs next to the heading, not above
   three separate cards. */
.seg{display:inline-flex;border:1px solid var(--a-line);border-radius:999px;
  background:var(--a-panel);padding:2px;gap:2px}
.seg button{
  border:0;background:none;padding:6px 14px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--a-ink-3);
}
.seg button.on{background:var(--a-brand);color:#fff}
.seg button:focus-visible{outline:2px solid var(--a-brand);outline-offset:2px}

/* The `hidden` attribute loses to any rule that sets `display` — and .btn sets
   inline-flex, so hidden buy buttons were showing anyway and every plan card
   had two. This is the standard fix and belongs once, at the sheet level. */
[hidden]{display:none !important}

/* ==========================================================================
   The website importer: the fork screen and the review screen.
   Both are standalone pages like the wizard - no sidebar, nowhere to wander
   off to - so they carry their own layout rather than the admin shell's.
   ========================================================================== */
.start-wrap{max-width:1080px;margin-inline:auto;padding:clamp(24px,5vw,64px) clamp(18px,4vw,40px)}

.start-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.start-grid{grid-template-columns:1.1fr 1fr;align-items:start}}

.start-card{
  border:1px solid var(--a-line);border-radius:16px;background:var(--a-panel);
  padding:26px 24px 24px;position:relative}
.start-card.lead{border-color:var(--a-brand);box-shadow:0 10px 34px rgba(0,0,0,.07)}
.start-card h2{font-size:21px;margin:10px 0 8px;letter-spacing:-.01em}
.start-card>p{color:var(--a-ink-2);margin:0 0 8px;line-height:1.6}
.start-card .tag{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--a-brand);
  border-radius:999px;padding:4px 10px}
.start-card .tag.quiet{background:var(--a-ink-3)}

.start-points{list-style:none;margin:20px 0 0;padding:16px 0 0;
  border-top:1px solid var(--a-line);display:grid;gap:11px}
.start-points li{font-size:13.5px;color:var(--a-ink-2);line-height:1.55;
  padding-left:20px;position:relative}
.start-points li::before{content:"";position:absolute;left:2px;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--a-brand)}

/* -- while it reads ------------------------------------------------------ */
.reading{display:flex;align-items:center;gap:14px;font-size:17px;
  padding:22px 24px;border:1px solid var(--a-line);border-radius:14px;
  background:var(--a-panel);max-width:560px}
.spin{width:20px;height:20px;border-radius:50%;flex:none;
  border:2.5px solid var(--a-line);border-top-color:var(--a-brand);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* -- what we found ------------------------------------------------------- */
.found{border:1px solid var(--a-line);border-radius:14px;background:var(--a-panel);
  padding:8px 18px 16px;margin:18px 0}
.found-hd{display:flex;align-items:center;gap:12px;padding:12px 0 6px}
.found-hd h2{font-size:16px;margin:0}
.found-hd .btn{margin-left:auto}

.found-row{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;
  border-top:1px solid var(--a-line);cursor:pointer}
.found-row:first-child{border-top:0}
.found-row input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--a-brand)}
.found-row.taken{opacity:.82}
.fr-b{display:grid;gap:3px;min-width:0}
.fr-l{font-weight:650;font-size:14px}
.fr-v{font-size:14px;color:var(--a-ink-2);overflow-wrap:anywhere}
.fr-src{font-size:12px;color:var(--a-ink-3)}
.fr-warn{font-size:12px;color:var(--a-warn);font-weight:600}
.fr-img{max-height:52px;max-width:220px;width:auto;border-radius:6px;
  background:var(--a-ground);padding:4px}
.fr-swatch{display:inline-block;width:15px;height:15px;border-radius:4px;
  vertical-align:-2px;border:1px solid var(--a-line)}

.people-grid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.found-person{border:1px solid var(--a-line);border-radius:12px;padding:12px;
  display:grid;gap:5px;justify-items:center;text-align:center;cursor:pointer;
  position:relative}
.found-person input{position:absolute;top:9px;left:9px;width:17px;height:17px;
  accent-color:var(--a-brand)}
.found-person img,.found-person .noimg{width:64px;height:64px;border-radius:50%;
  object-fit:cover;background:var(--a-ground)}
.found-person .noimg{display:grid;place-items:center;font-style:normal;
  font-weight:800;color:var(--a-ink-3);font-size:22px}
.found-person b{font-size:13.5px}
.found-person span{font-size:12px;color:var(--a-ink-3);line-height:1.4}
.found-person .by-ai{font-size:11px;color:var(--a-brand);font-weight:650}

.week{display:grid;gap:6px;margin:14px 2px 0}
.wd{display:grid;grid-template-columns:38px 1fr 40px;align-items:center;gap:10px;
  font-size:12.5px;color:var(--a-ink-3)}
.wd .n{font-weight:700;color:var(--a-ink-2)}
.wd .bar{height:8px;border-radius:999px;background:var(--a-ground);overflow:hidden}
.wd .bar i{display:block;height:100%;background:var(--a-brand);border-radius:999px}
.wd .h{text-align:right}

.peek{margin-top:14px}
.peek summary{cursor:pointer;font-size:13px;color:var(--a-brand);font-weight:650}
.peek-b{margin-top:10px;max-height:280px;overflow:auto;font-size:13px;
  display:grid;gap:4px;color:var(--a-ink-2);
  border:1px solid var(--a-line);border-radius:10px;padding:12px}
.peek-b b{display:inline-block;width:34px;color:var(--a-ink-3)}

.ai-line{font-size:13.5px;color:var(--a-ink-2);background:var(--a-brand-lt);
  border-radius:10px;padding:12px 14px;line-height:1.55;margin:0 0 8px}


/* Advanced bits in the wizard: present for the station that needs them,
   invisible to the many who do not. */
.advanced{border:1px solid var(--a-line);border-radius:10px;padding:12px 14px;
  margin-bottom:4px;background:var(--a-panel)}
.advanced summary{cursor:pointer;font-size:13.5px;font-weight:650;color:var(--a-ink-2)}
.advanced[open] summary{margin-bottom:4px}
.advanced .field{margin-bottom:0}


/* Car dashboards: the details a station copies out, and the DNS records they
   paste in. Both are read-and-copy, never typed, so they are set in mono and
   given room rather than squeezed into a form. */
.kv{display:grid;gap:1px;background:var(--a-line);border:1px solid var(--a-line);
  border-radius:8px;overflow:hidden}
.kv>div{background:var(--a-panel);padding:10px 14px;display:flex;gap:14px;
  align-items:baseline;flex-wrap:wrap}
.kv span{font-size:12.5px;color:var(--a-ink-3);min-width:150px}
.kv b{font-size:13.5px;font-weight:650;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px}

/* The DNS record, as a table - because that is the shape of the form they are
   copying it into. The old markup and this stylesheet never matched, so every
   label ran into its value: "TypeA Name / Host@ Value / Points to1.2.3.4". */
/* The listening heatmap. One colour at varying strength rather than a
   rainbow: a station is reading "busier than that one", not a value off a
   scale, and a rainbow makes the middle of the range unreadable. */
.heat{border-collapse:separate; border-spacing:2px; font-size:11px;}
.heat th{
  background:none; border:0; padding:2px 4px; font-size:10px; font-weight:700;
  letter-spacing:.06em; color:var(--a-ink-3); text-transform:uppercase;
}
.heat tbody th{text-align:right; padding-right:8px;}
.heat td{
  width:30px; height:26px; text-align:center; padding:0; border-radius:4px;
  font-variant-numeric:tabular-nums; color:var(--a-ink);
  background:color-mix(in srgb, var(--a-brand) calc(var(--fill) * 100%), #eeecf1);
}
/* Dark cells need light text, and the switchover is about two thirds up. */
.heat td[style*="--fill:0.7"],.heat td[style*="--fill:0.8"],
.heat td[style*="--fill:0.9"],.heat td[style*="--fill:1"]{color:#fff;}
/* Not measured is NOT zero, and must not look like it. */
.heat td.none{
  background:repeating-linear-gradient(45deg,#f4f2f6,#f4f2f6 3px,#eceaf0 3px,#eceaf0 6px);
}
.stat .sub{font-size:11.5px; color:var(--a-ink-3); margin-top:2px;}

.dnssteps{margin:16px 0 14px;padding-left:22px;display:grid;gap:6px}
.dnssteps li{padding-left:4px}
.dnstable{
  width:100%;border-collapse:separate;border-spacing:0;margin:0 0 14px;
  border:1px solid var(--a-line);border-radius:10px;overflow:hidden;
}
.dnstable th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--a-ink-3);background:var(--a-ground);
  padding:9px 12px;border-bottom:1px solid var(--a-line);white-space:nowrap;
}
.dnstable td{padding:12px;vertical-align:middle;border-bottom:0}
.dnstable code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13.5px;font-weight:600;color:var(--a-ink);
  background:var(--a-ground);border:1px solid var(--a-line);
  border-radius:6px;padding:4px 8px;display:inline-block;
}
.dnstable .copy{
  margin-left:8px;font-size:11px;font-weight:700;cursor:pointer;
  background:none;border:1px solid var(--a-line);border-radius:6px;
  padding:4px 9px;color:var(--a-ink-3);
}
.dnstable .copy:hover{border-color:var(--a-brand);color:var(--a-brand)}
@media(max-width:700px){
  .dnstable thead{display:none}
  .dnstable tr{display:grid;gap:8px;padding:12px}
  .dnstable td{padding:0;display:flex;gap:10px;align-items:center}
  .dnstable td::before{
    content:attr(data-label);font-size:10.5px;font-weight:800;
    letter-spacing:.11em;text-transform:uppercase;color:var(--a-ink-3);
    min-width:112px;
  }
}
.dnsnotes{display:grid;gap:9px;margin-top:4px}
.dnsnotes p{margin:0;font-size:13.5px;color:var(--a-ink-3);line-height:1.55}
.dnsnotes code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--a-ground);border-radius:4px;padding:1px 5px;
}

.dns{display:grid;gap:8px}
.dns-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--a-ground);border:1px solid var(--a-line);border-radius:8px;
  padding:10px 12px}
.dns-row .t{font-size:11px;font-weight:800;letter-spacing:.1em;
  color:var(--a-brand);min-width:52px}
.dns-row code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px;overflow-wrap:anywhere}
.dns-row .arr{color:var(--a-ink-3)}

.plainlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plainlist li{font-size:13.5px}

.sw-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.sw-row input{margin-top:3px;width:17px;height:17px;flex:none;
  accent-color:var(--a-brand)}
.sw-row .hint{display:block;margin-top:3px}


/* The station's app screen. */
.app-what{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.app-what img{border-radius:16px;flex:none;
  box-shadow:0 6px 20px rgb(0 0 0 / .12)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px;flex:1;min-width:250px}
.ticks li{font-size:14px;padding-left:24px;position:relative;color:var(--a-ink-2)}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--a-good);font-weight:800}

.sent{display:grid;gap:1px;background:var(--a-line);border:1px solid var(--a-line);
  border-radius:8px;overflow:hidden}
.sent-row{background:var(--a-panel);padding:10px 14px;display:flex;gap:14px;
  align-items:baseline;flex-wrap:wrap}
.sent-row .w{font-size:12px;color:var(--a-ink-3);min-width:120px}
.sent-row .b{flex:1;min-width:200px;display:grid;gap:2px}
.sent-row .b b{font-size:13.5px}
.sent-row .b span{font-size:12.5px;color:var(--a-ink-3)}
.sent-row .n{font-size:12px;color:var(--a-ink-3)}

/* The time-of-day chart. Twenty-four columns, one colour, no axis: the
   station is reading a SHAPE - where the hump is - not values off a scale.
   The heat grid underneath is where exact numbers live. */
.clock{
  display:flex; align-items:flex-end; gap:3px; height:130px; margin:18px 0 0;
}
.clock .ch{
  flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; min-width:0;
}
.clock .ch i{
  display:block; width:100%; border-radius:3px 3px 0 0;
  background:var(--a-brand); min-height:2px;
}
.clock .ch span{
  display:block; text-align:center; font-size:9.5px; padding-top:5px;
  color:var(--a-ink-3); font-variant-numeric:tabular-nums;
}
/* Not measured is NOT a quiet hour, and must not draw as a short bar. */
.clock .ch.none i{
  background:repeating-linear-gradient(45deg,#f4f2f6,#f4f2f6 3px,#eceaf0 3px,#eceaf0 6px);
  height:100%!important; border-radius:3px;
}
/* Under 480px twenty-four labels collide, so only the even hours are named. */
@media (max-width:480px){
  .clock .ch:nth-child(odd) span{visibility:hidden}
}
/* The show list sits under the bar in the presenter table and was touching
   it. A bar and its caption need a gap or they read as one smudge. */
.rows .bar + .sub{margin-top:7px;}
.bigline{font-size:15px; line-height:1.55; margin:0;}
.bigline b{white-space:nowrap;}


/* The first screen's brand mark, matching the login page. Two files, one per
   theme, because an SVG inside an <img> cannot see the page's colours. */
.start-logo{display:block;height:34px;width:auto;margin:0 0 20px}
.start-logo.dk{display:none}
@media (prefers-color-scheme:dark){
  .start-logo{display:none}
  .start-logo.dk{display:block}
}

/* What the reader can and cannot find. A panel rather than more bullet points,
   because this is the expectation-setting and it should not read as another
   feature list. */
.start-odds{
  margin:16px 0 4px; padding:14px 16px 12px;
  background:var(--a-brand-lt); border:1px solid rgba(29,78,216,.16);
  border-radius:12px;
}
.start-odds-h{
  margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--a-brand);
}
.start-odds ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.start-odds li{
  font-size:13.5px; line-height:1.5; color:var(--a-ink-2);
  padding-left:14px; position:relative;
}
.start-odds li::before{
  content:""; position:absolute; left:0; top:.58em; width:5px; height:5px;
  border-radius:50%; background:var(--a-brand); opacity:.55;
}
.start-odds-f{
  margin:11px 0 0; padding-top:10px; font-size:13px; line-height:1.55;
  color:var(--a-ink-2); border-top:1px solid rgba(29,78,216,.14);
}

/* The sample size, above the list. Small, because it is the evidence rather
   than the claim - but present, because it is why the numbers are believable. */
.start-odds-note{
  margin:0 0 9px; font-size:12.5px; line-height:1.5; color:var(--a-ink-3);
}