/* The owner's admin pages (admin.rs): the site's colours (web/src/style.css), plain and readable. */
:root {
  color-scheme: light dark;
  /* The site's own colours (web/src/style.css). */
  --bg: light-dark(#f6f2ea, #121a24);
  --surface: light-dark(#ffffff, #1b2a3a);
  --ink: light-dark(#1b2a3a, #f1ece2);
  --muted: light-dark(#5a6573, #a9b3be);
  --line: light-dark(#e3ddd0, #2c3b4c);
  --act: light-dark(#b8431f, #f0906c);
  --fill: light-dark(#ede6d8, #26374a);
  --fill-hover: light-dark(#e3d9c6, #30445a);
  --fill-ink: light-dark(#1b2a3a, #f1ece2);
  --fill-line: light-dark(#a9843d, #8f7a52);
  --control-line: light-dark(#7c8591, #7d8896);
  --act-soft: light-dark(#f7e8e1, #33241f);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.5 'Segoe UI', Helvetica, Arial, sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px;
         padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
header form { margin: 0; }
header nav { display: flex; align-items: center; gap: 18px; }
header nav a { color: var(--ink); font-weight: 600; text-decoration: none; }
header nav a:hover { color: var(--act); }
select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--muted);
         border-radius: 8px; padding: 8px 10px; }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 14px; margin: 12px 0 0;
           display: grid; gap: 6px; }
legend { font-weight: 600; padding: 0 6px; }
fieldset[hidden] { display: none; }
.home { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: bold;
        color: var(--ink); text-decoration: none; }
/* The page is a container: what sits side by side goes by its width, not the window's. */
main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; container: page / inline-size; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; margin: 8px 0 12px; }
h2 { font-size: 20px; margin: 36px 0 10px; }
h3 { font-size: 17px; margin: 24px 0 8px; }
a { color: var(--act); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--act); outline-offset: 2px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface);
        border: 1px solid var(--line); border-radius: 10px; }
th, td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; font-size: 14px; color: var(--muted); font-weight: 600; }
td form { margin: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Forms narrower than reading text (about 65-75 characters): long fields help nobody. */
.fields { display: grid; gap: 6px; max-width: 60ch; }
.fields label { font-weight: 600; margin-top: 10px; }
.fields .check { font-weight: 600; display: flex; gap: 12px; align-items: center; justify-self: start;
                 padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
input, textarea { font: inherit; color: var(--ink); background: var(--surface);
                  border: 1px solid var(--muted); border-radius: 8px; padding: 8px 10px; width: 100%; }
input[type=checkbox] { width: auto; }
/* A switch that slides and changes colour when turned on; the label beside it says what it does. */
/* input[type=checkbox].switch outranks input[type=checkbox] { width: auto }, which shrank it. */
input[type=checkbox].switch { appearance: none; width: 46px; height: 26px; padding: 0; margin: 0; flex: none; cursor: pointer;
          border-radius: 13px; border: 1.5px solid var(--control-line); background: var(--fill); position: relative;
          transition: background .2s, border-color .2s; }
/* The knob in the middle of the track's height, whatever the border: top 50% and back half itself. */
input[type=checkbox].switch::before { content: ""; position: absolute; top: 50%; left: 3px; width: 18px; height: 18px;
                  border-radius: 50%; background: var(--muted); transform: translateY(-50%);
                  transition: transform .2s, background .2s; }
input[type=checkbox].switch:checked { background: var(--act); border-color: var(--act); }
/* Inside the border the track is 43 px wide: 3 px from the right edge too. */
input[type=checkbox].switch:checked::before { transform: translate(19px, -50%); background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .switch, .switch::before { transition: none; } }
button, .button { font: inherit; font-weight: 600; cursor: pointer; justify-self: start; margin-top: 12px;
                  display: inline-block; padding: 9px 16px; border-radius: 8px; text-decoration: none;
                  border: 1px solid var(--act); background: var(--act); color: var(--surface); }
.quiet { background: transparent; color: var(--act); margin-top: 0; }
.hint { color: var(--muted); font-size: 14px; margin: 2px 0; }
.standing { font-size: 18px; font-weight: 600; }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--fill); border-left: 4px solid var(--act); }
.notice.error { font-weight: 600; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0; }
dt { color: var(--muted); }
dd { margin: 0; }
.letter { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
          padding: 16px; font: 15px/1.5 'Segoe UI', Helvetica, Arial, sans-serif; }
input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--act); }
/* The watch search: the page's whole width, the field as on the start page (web/src/style.css). */
#watch-add { max-width: none; }
.field-label { margin-top: 0; }
.searchrow { display: flex; gap: 8px; }
.qwrap { position: relative; flex: 1; min-width: 0; display: flex; }
#watch-add #sentence { flex: 1; min-width: 0; font-size: 18px; padding: 13px 84px 13px 16px; background: var(--surface);
                       border: 1.5px solid var(--control-line); border-radius: 14px; }
#watch-add #sentence:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.icon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; }
.clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; margin: 0;
         display: inline-grid; place-items: center; border: 0; border-radius: 8px; cursor: pointer; padding: 0;
         background: none; color: var(--muted); font-size: 18px; justify-self: auto; }
.clear:hover { background: var(--act-soft); color: var(--ink); }
.clear[hidden] { display: none; }
.qwrap .field-settings { right: 8px; }
.qwrap #watch-clear { right: 44px; }
.field-settings[aria-expanded="true"] { background: var(--fill); color: var(--ink); }
.settings-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; display: grid; gap: 10px;
                min-width: 280px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--control-line);
                background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .12); font-size: 14px; color: var(--ink); }
.settings-pop[hidden] { display: none; }
.settings-pop .reach { display: grid; gap: 4px; }
.reach-head { display: flex; justify-content: space-between; gap: 12px; }
.reach-head label { font-weight: 600; margin: 0; }
.reach-head output { font-weight: 600; }
.settings-pop input[type=range] { width: 100%; margin: 4px 0 0; accent-color: var(--act); min-height: 24px; padding: 0; border: 0; }
.reach-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.settings-pop .period { display: grid; gap: 4px; margin: 6px 0 0; font-weight: 600; }
.sample { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.sample label { display: grid; gap: 4px; font-weight: 600; }
.sample button { margin: 0; }
.btn.go { margin: 0; border-radius: 14px; padding: 0 22px; display: inline-flex; align-items: center; gap: 7px;
          background: var(--fill); color: var(--fill-ink); border: 2px solid var(--fill-line); justify-self: auto; }
.btn.go:hover { background: var(--fill-hover); }
.status { font-weight: 600; min-height: 24px; margin: 16px 0 6px; }
.status.busy::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
                       background: var(--act); margin-right: 8px; vertical-align: 1px; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 1; } to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status.busy::before { animation: none; } }
.hits { list-style: none; margin: 0; padding: 0 18px; background: var(--surface); border: 1px solid var(--line);
        border-radius: 14px; }
.hits:empty { display: none; }
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; margin-top: 8px; }
.watch-side { position: sticky; top: 16px; display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px;
              background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px rgb(0 0 0 / .06); }
.watch-side .side-head { margin: 0; font: 600 18px Georgia, 'Times New Roman', serif; }
.watch-side .side-summary { margin: 0; font-weight: 600; }
.watch-side p { margin: 0; }
.watch-side button[type=submit] { width: 100%; margin-top: 10px; justify-content: center; }
.watch-side select, .watch-side input { width: 100%; }
.watch-side .side-head + label, .watch-side fieldset { margin-top: 4px; }
@container page (max-width: 860px) {
  .watch-layout { grid-template-columns: 1fr; }
  .watch-side { position: sticky; bottom: 0; top: auto; order: 2; border-radius: 14px 14px 0 0; }
}
.debate { padding: 18px 0 6px; border-top: 1px solid var(--line); }
.debate:first-child { border-top: 0; }
.debate > p { margin: 0; }
.debate > .hint { font-size: 13px; font-weight: 600; }
.debate .hit-title { margin: 3px 0 4px; font: 600 18px/1.35 Georgia, 'Times New Roman', serif; }
.debate .hit-title a { color: var(--ink); text-decoration: none; }
.debate .hit-title a:hover { color: var(--act); text-decoration: underline; }
/* A paragraph as a hit on the start page (web/src/style.css, "Hits"). */
.hit { position: relative; padding: 14px 0 12px 22px; }
.hit::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 12px; width: 6px;
               border-radius: 3px; background: var(--fill-line); }
.hit + .hit { border-top: 1px dashed var(--line); }
.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who { font-weight: 600; }
.who a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-underline-offset: 3px; text-decoration: none; }
.who a:hover { color: var(--act); text-decoration: underline; }
.speaker-portrait { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 15%;
                    background: #fff; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.date { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.hit .text { font: 16.5px/1.6 Georgia, 'Times New Roman', serif; margin: 6px 0 8px; max-width: 72ch; }
.ai { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; padding: 0 7px 0 6px; border-radius: 99px;
      border: 1px solid var(--fill-line); background: var(--fill); color: var(--fill-ink); font-size: 11px;
      font-weight: 600; vertical-align: 1px; }
.speech-sum { margin: 8px 0 10px; max-width: 72ch; padding: 8px 12px; font-size: 14px; line-height: 1.5;
              color: var(--ink); background: var(--surface); border: 1px solid var(--line);
              border-left: 3px solid var(--fill-line); border-radius: 8px; }
.speech-sum .tag { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.speech-sum .cite { font: 600 11px 'Segoe UI', Helvetica, Arial, sans-serif; color: var(--fill-ink); background: var(--fill);
                    padding: 1px 5px; border-radius: 4px; text-decoration: none; vertical-align: 2px; }
.speech-sum .cite:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.actions button, .actions a { margin: 0; justify-self: auto; background: var(--act-soft); border: 1.5px solid var(--fill-line);
                              padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
                              color: var(--fill-ink); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.actions button:hover, .actions a:hover { background: var(--fill-hover); }
.actions a.source { margin-left: auto; align-self: center; background: none; border: 0; padding: 2px 0; min-height: 24px;
                    font-size: 12.5px; font-weight: 500; color: var(--muted); gap: 4px;
                    text-decoration: underline; text-underline-offset: 3px; }
.actions a.source:hover { color: var(--ink); background: none; }
.context { margin: 10px 0 2px; padding-left: 14px; border-left: 2px solid var(--line); font-size: 15px; line-height: 1.55; max-width: 72ch; }
.context p { margin: 6px 0; color: var(--ink); }
.context p.center { background: var(--fill); padding: 4px 8px; margin-left: -8px; border-radius: 6px; }
@container page (max-width: 560px) {
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .actions a.source { margin-left: 0; grid-column: 1 / -1; justify-self: end; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { header { padding: 12px 16px; } }

/* Who may sign in to an organisation's page, on its own page (/konto) and the owner's. */
header nav .who { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.people { list-style: none; padding: 0; margin: 0 0 16px; }
.people li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.people .hint { margin: 0; }
form.inline { display: inline; margin: 0; }
form.inline button { padding: 4px 10px; }

/* An organisation's own page (/konto): on top of the admin pages' styles (admin.css), as the
   proposal in journal/media/2026-10-27/05-kammarkoll-konto-forslag.png. */
:root {
  /* On, as a watch's switch and the pill for an organisation that gets its mail. */
  --ok: light-dark(#2e7d4f, #6fcf97);
  --ok-soft: light-dark(#e3f1e7, #1f3a2c);
  --ok-ink: light-dark(#22603c, #9be0b6);
  --off-soft: light-dark(#efe9de, #2a3542);
  --warn-soft: light-dark(#fbf3dc, #3a3220);
  --warn-line: light-dark(#d9b85c, #8f7a3a);
  --warn-ink: light-dark(#6b4d00, #f0d48a);
  --navy: light-dark(#1b2a3a, #f1ece2);
  --navy-ink: light-dark(#ffffff, #1b2a3a);
  /* The topics' colours: at least 3:1 against the cards in both themes, and never alone, the
     name always beside them. */
  --c-rod: light-dark(#b8431f, #f0906c);
  --c-gron: light-dark(#2e7d4f, #6fcf97);
  --c-bla: light-dark(#2f5d9e, #8fb3ea);
  --c-lila: light-dark(#7048a8, #c3a6ee);
  --c-ockra: light-dark(#8a5f00, #e0b44c);
  --c-petrol: light-dark(#1d6f7a, #6cc7d1);
}
/* The scrollbar is there on short pages too, so the head does not move between them. Not
   scrollbar-gutter: the head's background would stop short of the gutter it leaves. */
html { overflow-y: scroll; }
body.account { font-size: 15px; }
body.account main { padding-top: 28px; }

/* The head: the name, the organisation, the tabs, and who is signed in. */
header.bar { gap: 14px 22px; flex-wrap: wrap; justify-content: flex-start; padding: 14px 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
         font: bold 20px Georgia, 'Times New Roman', serif; }
.brand img { display: block; }
.org { color: var(--muted); font-size: 13.5px; padding-left: 16px; border-left: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; }
.tabs a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: 8px; }
.tabs a:hover { background: var(--fill); }
.tabs a[aria-current="page"] { background: var(--fill); }
.me { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.me .who { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
          background: var(--navy); color: var(--navy-ink); font-size: 12px; font-weight: 700; }
.me form { margin: 0; }
.me button.quiet { border: 0; padding: 6px 4px; font-size: 13.5px; }
body.plain main { max-width: 560px; }

/* Shared pieces. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
        box-shadow: 0 1px 2px rgb(0 0 0 / .03); }
.card h2 { font: 600 20px Georgia, 'Times New Roman', serif; margin: 0 0 12px; }
.page-head h1 { font-size: 32px; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; }
.page-head .lead { color: var(--muted); margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.back { margin: 0 0 6px; }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--act); text-decoration: underline; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok-ink); }
.pill.off { background: var(--off-soft); color: var(--muted); }
button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); }
button.secondary:hover { background: var(--fill); }
button.danger { color: var(--act); border-color: var(--act); }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.buttons button { margin: 0; }
.buttons .danger { margin-left: auto; }
/* A topic's mark: its colour is the text colour, so a ring can draw with it too (marks.rs). */
.dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; color: var(--muted); background: currentColor; }
.dot.none { background: transparent; border: 1.5px solid var(--control-line); }
.c-rod { color: var(--c-rod); } .c-gron { color: var(--c-gron); } .c-bla { color: var(--c-bla); }
.c-lila { color: var(--c-lila); } .c-ockra { color: var(--c-ockra); } .c-petrol { color: var(--c-petrol); }
.dot.m-ruta { border-radius: 2px; }
.dot.m-romb { border-radius: 1px; transform: rotate(45deg) scale(.8); }
.dot.m-triangel { border-radius: 0; clip-path: polygon(50% 0, 100% 92%, 0 92%); }
.dot.m-ring { background: transparent; box-shadow: inset 0 0 0 2.5px currentColor; }
.page-head h1 .dot { width: 14px; height: 14px; }
.notice.quiet-notice { border-left-color: var(--control-line); }
.sr-only-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Chips: a recipient, with initials. */
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px;
        background: var(--fill); border: 1px solid var(--line); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.chip .av { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 99px;
            background: var(--navy); color: var(--navy-ink); font-size: 10px; font-weight: 700; }
.chips.inherited .chip { background: transparent; border-style: dashed; }
.chip.pick { cursor: pointer; font-weight: 400; margin: 0; }
.chip.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip.pick:has(input:checked) { background: var(--act-soft); border-color: var(--act); }
.chip.pick:has(input:checked) .av { background: var(--act); color: var(--surface); }
.chip.pick:has(input:focus-visible) { outline: 2px solid var(--act); outline-offset: 2px; }
.chip .n { color: var(--muted); }
.chip.pick:not(:has(input:checked)) { opacity: .85; }

/* The overview: the topics on the left, the watches on the right. */
.overview { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.side { display: grid; gap: 18px; position: sticky; top: 16px; }
.side-label { margin: 0 0 6px 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.topics { display: grid; gap: 2px; }
.topic-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--ink);
              text-decoration: none; font-size: 14px; border: 1px solid transparent; }
.topic-link .n { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.topic-link:hover { background: var(--fill); }
.topic-link[aria-current="page"] { background: var(--surface); border-color: var(--line); font-weight: 600; }
/* All the watches, set apart from the topics under it: a mark of four dots for all of them, and a line. */
.topic-link.mine { position: relative; margin-bottom: 11px; }
.topic-link.mine::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -7px; border-bottom: 1px solid var(--line); }
.all-mark { flex: none; width: 10px; height: 10px; color: var(--muted);
            background: radial-gradient(circle, currentColor 1.7px, transparent 2px) 0 0 / 5px 5px; }
.topic-link.all[aria-current="page"] .all-mark { color: var(--ink); }
/* Mine: a head and shoulders. */
.mine-mark { flex: none; width: 10px; height: 10px; color: var(--muted);
             background: radial-gradient(circle at 50% 28%, currentColor 2.3px, transparent 2.7px),
                         radial-gradient(ellipse 5px 4px at 50% 100%, currentColor 96%, transparent 100%); }
.topic-link.mine[aria-current="page"] .mine-mark { color: var(--ink); }
.new-topic { margin-top: 6px; }
.new-topic summary { cursor: pointer; color: var(--act); font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: 8px; list-style: none; }
.new-topic summary::-webkit-details-marker { display: none; }
.new-topic summary:focus-visible { outline: 2px solid var(--act); }
.new-topic form { padding: 4px 10px 10px; }
.new-topic .fields label { margin-top: 4px; }
/* The choice of a topic's mark: a button with the mark, and the colours and shapes in a popover. */
.mark-field { margin-top: 12px; }
.mark-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
button.mark-button { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; padding: 8px 12px; }
.mark-button .dot { width: 14px; height: 14px; }
.mark-button .caret { width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); margin-left: 4px; }
.mark-pop { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; width: 286px; margin: 0;
            background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / .18); }
.mark-pop .hint { font-size: 12.5px; margin: 10px 0 0; }
.mark-pop > button { margin: 12px 0 0; padding: 6px 14px; font-size: 14px; }
.swatches { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: nowrap; gap: 6px; }
.swatches legend { font-weight: 600; font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 6px; }
/* The forms' own label rules must not reach the swatches, so these are as specific as those. */
.mark-pop .swatch { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
                    margin: 0; padding: 0; cursor: pointer; }
.mark-pop .swatches legend { display: block; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.swatch:not(.own):hover { background: var(--fill); }
.swatch input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.swatch .dot { width: 18px; height: 18px; }
.swatch .dot.m-ring { box-shadow: inset 0 0 0 4px currentColor; }
.swatch:has(input[type=radio]:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.swatch:has(input[type=radio]:focus-visible) { outline: 2px solid var(--act); outline-offset: 1px; }
/* An own colour: the picker as a dot inside a ring of every colour, so it does not look like one more blue. */
.swatch.own { background: conic-gradient(#d33, #e9a400, #3a3, #1aa, #36c, #a3c, #d33); background-clip: content-box;
              padding: 3px !important; }
.swatch.own::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.swatch.own input[type=color] { position: relative; z-index: 1; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%;
                                cursor: pointer; background: none; overflow: hidden; }
.swatch.own input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch.own input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.swatch.own input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }
.stats { padding: 16px 18px; display: grid; gap: 12px; }
.stats p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.stats .big { display: block; color: var(--ink); font: bold 26px/1.1 Georgia, 'Times New Roman', serif; }
.new-watch { margin-bottom: 30px; }
/* The card's heading as on the other cards, with room under it. */
.new-watch h2 { margin: 0 0 18px; }
.new-watch .field-label { display: none; }
.new-watch #watch-add { gap: 4px; }
/* Before anything is tried, the choice of topic and the button sit in a row under the field,
   not in the side panel beside an empty list. */
.new-watch .watch-layout:has(.hits:empty) { grid-template-columns: 1fr; margin-top: 0; }
.new-watch .watch-layout:has(.hits:empty):has(#watch-status:empty) .watch-main { display: none; }
/* Searched and nothing caught: said plainly, in the colours of a note, with what to try. */
.new-watch .watch-layout:has(.hits:empty) #watch-status:not(:empty):not(.busy) { background: var(--warn-soft); border: 1px solid var(--warn-line);
  color: var(--warn-ink); padding: 10px 12px; border-radius: 10px; margin: 4px 0 8px; font-size: 14px; }
.new-watch .watch-layout:has(.hits:empty) .watch-side { position: static; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; padding: 4px 0 0; border: 0; box-shadow: none; background: none; }
.new-watch .watch-layout:has(.hits:empty) .watch-side > p { display: none; }
.new-watch .watch-layout:has(.hits:empty) .watch-side label { margin: 0; font-weight: 600; font-size: 14px; }
.new-watch .watch-layout:has(.hits:empty) .watch-side select { width: 210px; }
.new-watch .watch-layout:has(.hits:empty) .watch-side button[type=submit] { width: auto; margin: 0; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 12px; }
.list-head h2 { font: 600 22px Georgia, 'Times New Roman', serif; margin: 0; display: flex; align-items: baseline; gap: 12px; }
.list-head .edit { font: 500 13.5px 'Segoe UI', Helvetica, Arial, sans-serif; }
.find { flex: 0 1 340px; position: relative; }
.find input { padding-left: 34px; border-radius: 10px; border-color: var(--line); font-size: 14px; }
.find::before { content: ""; position: absolute; left: 12px; top: 50%; width: 11px; height: 11px; transform: translateY(-62%);
                border: 1.6px solid var(--muted); border-radius: 50%; }
.find::after { content: ""; position: absolute; left: 22px; top: 58%; width: 6px; height: 1.6px; background: var(--muted); transform: rotate(45deg); }
.find-status { min-height: 20px; margin: -4px 0 8px; }
.empty-all { color: var(--muted); }

/* A topic's card, and its watches. */
.topic-card { padding: 0; margin-bottom: 16px; overflow: hidden; }
.topic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
              padding: 14px 22px; background: light-dark(#fbf9f4, #1f3043); border-bottom: 1px solid var(--line); }
.topic-head h3 { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 18px Georgia, 'Times New Roman', serif; }
.topic-head h3 a { color: var(--ink); text-decoration: none; }
.topic-head h3 a:hover { color: var(--act); text-decoration: underline; }
.topic-head .to { margin-left: auto; }
.edit-topic { font-size: 13.5px; font-weight: 600; color: var(--act); text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.edit-topic:hover { background: var(--fill); }
.topic-dialog .more { font-size: 13.5px; margin: 14px 0 0; }
.to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.to .hint { margin: 0; font-size: 13px; }
.watch-rows { list-style: none; margin: 0; padding: 0; }
.watch-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 130px 118px; gap: 8px 20px; align-items: center;
             padding: 14px 22px; border-top: 1px solid var(--line); }
.watch-row:first-child { border-top: 0; }
.watch-row[hidden] { display: none; }
.watch-row .what { display: grid; gap: 3px; min-width: 0; }
.watch-row .sentence { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.watch-row .sentence:hover { color: var(--act); text-decoration: underline; }
.watch-row .meta { color: var(--muted); font-size: 13px; }
.watch-row .meta.to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.watch-row.paused .sentence, .watch-row.paused .caught b { color: var(--muted); font-weight: 500; }
.watch-row.paused .bars { opacity: .45; }
.watch-row.match { background: var(--act-soft); }
.watch-rows .empty { padding: 16px 22px; color: var(--muted); font-size: 14px; }
.caught { font-size: 13px; color: var(--muted); line-height: 1.35; }
.caught b { display: block; color: var(--ink); font-size: 16px; }
/* The bars: what the watch caught, two weeks a bar over the half year. Space kept from the start. */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 84px; }
.bars span { flex: 1; min-height: 2px; border-radius: 1.5px; background: var(--act); }
.bars span.zero { background: var(--line); }
.switch-form { margin: 0; }
.toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 2px; background: none; border: 0;
          color: var(--ink); font-weight: 500; font-size: 14px; }
.toggle .track { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--fill);
                 border: 1.5px solid var(--control-line); transition: background .2s, border-color .2s; flex: none; }
.toggle .track::before { content: ""; position: absolute; top: 50%; left: 2px; width: 15px; height: 15px; border-radius: 50%;
                         background: var(--muted); transform: translateY(-50%); transition: transform .2s, background .2s; }
.toggle[aria-checked="true"] .track { background: var(--ok); border-color: var(--ok); }
.toggle[aria-checked="true"] .track::before { transform: translate(18px, -50%); background: var(--surface); }
.toggle[aria-checked="false"] .state { color: var(--muted); }
.toggle:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .toggle .track, .toggle .track::before { transition: none; } }

/* "Liknar en bevakning ni redan har", under the field for a new one. */
.similar { margin: 10px 0 2px; padding: 12px 16px; border-radius: 12px; background: var(--warn-soft);
           border: 1px solid var(--warn-line); color: var(--ink); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; font-size: 14px; }
.similar[hidden] { display: none; }
.similar .sign { color: var(--warn-ink); font-weight: 700; }
.similar p { margin: 0; }
.similar .how { color: var(--warn-ink); font-weight: 700; white-space: nowrap; }
.similar .choices { grid-column: 2 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.similar .choices a, .similar .choices button { color: var(--warn-ink); font-weight: 600; font-size: 14px; }
.similar .choices button { background: none; border: 0; padding: 0; margin: 0; text-decoration: underline; }

/* A watch's page: the settings and what it catches on the left, the mail on the right. */
.watch-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.watch-grid .col { display: grid; gap: 22px; min-width: 0; }
.settings label, .settings legend { font-weight: 600; font-size: 14px; display: block; margin: 0 0 6px; }
.settings .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 14px; }
.settings .row2:first-child { margin-top: 0; }
.settings > label { margin-top: 12px; }
.settings select { width: 100%; }
.recipients { border: 1px solid var(--control-line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.recipients legend { padding: 0 4px; margin: 0; }
.recipients .add-label { font-weight: 500; font-size: 13.5px; color: var(--act); margin: 4px 0 0; }
.recipients input[type=email] { font-size: 14px; padding: 6px 10px; }
.recipients .hint { margin: 0; font-size: 13px; }
.reach input[type=range] { width: 100%; accent-color: var(--act); padding: 0; border: 0; min-height: 24px; }
.reach output { font-variant-numeric: tabular-nums; }
.catch-status { margin: -4px 0 6px; }
.catch-list { list-style: none; margin: 0; padding: 0; }
.catch-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.catch-list li:first-child { border-top: 0; }
.catch-list .when { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.catch-list .when b { color: var(--act); }
.catch-list .quote { margin: 5px 0 3px; font: 16px/1.5 Georgia, 'Times New Roman', serif; }
.catch-list .by { font-size: 13px; color: var(--muted); margin: 0; }
.catch-list a { color: var(--ink); text-decoration: none; }
.catch-list a:hover { color: var(--act); text-decoration: underline; }
.catch-list .score { font-variant-numeric: tabular-nums; }
.plain-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* The mail in its frame. */
.mail-card { padding: 16px; }
.mail-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.mail-controls .tab-like { margin: 0 6px 0 0; font: 600 14px 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--fill);
                           padding: 7px 12px; border-radius: 8px; }
.mail-controls select { font-size: 14px; padding: 6px 8px; max-width: 100%; }
.mail-controls button { margin: 0; padding: 6px 12px; }
.mail-controls button[hidden], .js .mail-controls button.show { display: none; }
/* With the script, the mail shows once its frame is as tall as it, instead of growing in sight. */
.js .letter-frame { opacity: 0; }
.js .letter-frame.fitted { opacity: 1; transition: opacity .15s ease-out; }
@media (prefers-reduced-motion: reduce) { .js .letter-frame.fitted { transition: none; } }
.letter-frame { display: block; width: 100%; height: 720px; border: 1px solid var(--line); border-radius: 10px; background: #f6f2ea; }
.send-me { margin-top: 12px; display: grid; gap: 6px; }
.send-me button { margin: 0; }
.send-me .hint { font-size: 13px; }
.mail-page { min-width: 0; }

/* The people tab. */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.two + .card { margin-top: 22px; }
.group { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.group-head h3 { margin: 0; font-size: 16px; }
.group .people { margin: 6px 0 8px; }
.group .people li { padding: 6px 0; font-size: 14px; }
.addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.addrow label { flex-basis: 100%; font-weight: 600; font-size: 14px; }
.addrow input { flex: 1; min-width: 180px; }
.addrow button { margin: 0; }
.new-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

@container page (max-width: 900px) {
  .overview { grid-template-columns: 1fr; }
  .side { position: static; }
  .watch-grid, .two { grid-template-columns: 1fr; }
  .watch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .watch-row .bars { grid-row: 2; }
  .watch-row .caught { grid-row: 2; justify-self: end; text-align: right; }
  .watch-row .switch-form { grid-row: 1; grid-column: 2; }
  .settings .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  header.bar { padding: 12px 16px; }
  .org { border-left: 0; padding-left: 0; flex-basis: 100%; order: 3; }
  .me .who { display: none; }
  .watch-row, .topic-head { padding-left: 16px; padding-right: 16px; }
  .letter-frame { height: 560px; }
}

/* Lists to choose people in: a box on each row, and what to do with the chosen under the list. */
.pick .people li { padding: 0; }
.pick .people li.fixed, .pick .people li.hint { padding: 8px 0; }
.pick-row { display: flex; align-items: center; gap: 10px; width: calc(100% + 12px); padding: 8px 6px; margin: 0 -6px;
            border-radius: 8px; cursor: pointer; font-weight: normal; overflow-wrap: anywhere; }
.pick-row:hover { background: var(--fill); }
.pick-row input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--act); cursor: pointer; }
.people li.chosen .pick-row { background: var(--act-soft); }
.pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 4px; }
.pick-bar .pick-count { margin: 0; min-width: 6em; }
.pick-bar button { margin: 0; padding: 6px 12px; font-size: 14px; }
.pick-bar button:disabled { opacity: .45; cursor: not-allowed; }
.pick-bar .remove-group { margin-left: auto; border-color: transparent; background: transparent; }
.pick-bar .remove-group:hover { text-decoration: underline; }
.group-head .hint { margin: 0; }

/* The question before something is removed. */
dialog.confirm { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 18px; width: min(440px, calc(100% - 32px));
                 background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgb(0 0 0 / .25); }
dialog.confirm::backdrop { background: rgb(18 26 36 / .5); }
dialog.confirm h2 { font: 600 20px Georgia, 'Times New Roman', serif; margin: 0 0 10px; overflow-wrap: anywhere; }
dialog.confirm p { color: var(--muted); margin: 0 0 6px; }
.confirm-names { list-style: none; padding: 8px 12px; margin: 0 0 12px; background: var(--fill); border-radius: 8px; font-size: 14px; }
.confirm-names li { padding: 2px 0; overflow-wrap: anywhere; }
.confirm-names .more { color: var(--muted); }
.confirm-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.confirm-buttons button { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  dialog.confirm[open] { animation: confirm-in .14s ease-out; }
  @keyframes confirm-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
}
dialog.topic-dialog { width: min(460px, calc(100% - 32px)); }
.topic-dialog form { padding: 0; }
.topic-dialog form > label { font-weight: 600; font-size: 14px; margin-top: 14px; display: block; }
.topic-dialog .confirm-buttons { margin-top: 22px; }

/* The theme: as the system, or light or dark as chosen at the foot, the same choice as on the
   rest of the site (web/public/theme.js sets data-theme before the first paint). */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.foot { max-width: 1180px; margin: 0 auto; padding: 18px 16px 28px; border-top: 1px solid var(--line);
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
        color: var(--muted); font-size: 13.5px; }
.foot a { color: var(--muted); }
.theme { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--control-line); }
.theme button { margin: 0; border: 0; background: none; font-size: 13px; font-weight: 500; padding: 4px 10px;
                border-radius: 7px; color: var(--muted); }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--fill); color: var(--fill-ink); }

/* A choice of topic with the marks (konto.js), over the hidden select. */
/* A fixed width, so what stands beside it does not move with the topic's name; a long name ends in an ellipsis. */
button.mark-select { margin: 0; display: inline-flex; align-items: center; gap: 9px; width: 210px; max-width: 100%; font-weight: 500; padding: 8px 12px; }
.mark-select .mark-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-menu { max-width: 320px; }
.mark-select .caret { width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.mark-menu { margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
             box-shadow: 0 12px 32px rgb(0 0 0 / .18); max-height: 320px; overflow: auto; }
.mark-item { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 7px;
             background: none; color: var(--ink); font-weight: 400; text-align: left; }
.mark-item:hover, .mark-item:focus-visible { background: var(--fill); outline: none; }
.mark-item[aria-current] { font-weight: 600; }
.mark-item[aria-current]::after { content: ""; margin-left: auto; width: 5px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* An own colour by hex, beside the picker. */
.mark-pop .hex { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; }
.mark-pop .hex label { font-size: 13px; color: var(--muted); font-weight: 400; margin: 0; }
.mark-pop .hex input { width: 96px; padding: 5px 8px; font: 13px ui-monospace, Consolas, monospace; }
.mark-pop .hex input[aria-invalid="true"] { border-color: var(--act); }

/* The mail tab: the mail, and beside it who gets which and when. */
.mail-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 1fr); gap: 24px; align-items: start; }
.mail-side { display: grid; gap: 16px; }
.mail-side .card h2 { font-size: 18px; }
.mail-side p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
@container page (max-width: 900px) { .mail-layout { grid-template-columns: 1fr; } }
/* The column beside the mail follows down the page, so who gets what and the button stay at hand. */
.mail-side { position: sticky; top: 16px; }
.send-card .send-me { margin: 0; }
.send-card .send-me button { width: 100%; }
@container page (max-width: 900px) { .mail-side { position: static; } }

/* Who gets mail: the count in all and in each group. */
.who-total { font-size: 14px; margin: 0 0 8px; }
.who-total b { font: 600 22px Georgia, 'Times New Roman', serif; margin-right: 4px; }
.who-sum { list-style: none; margin: 0 0 10px; padding: 0; }
.who-sum li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.who-sum li:last-child { border-bottom: 0; }
.who-sum .n { color: var(--muted); white-space: nowrap; }

/* Whose mail: a menu one can search in, with the groups as headings (konto.js). */
.to-label { font: 600 14px 'Segoe UI', Helvetica, Arial, sans-serif; margin: 0; }
button.pick-select { margin: 0; display: inline-flex; align-items: center; gap: 9px; width: 260px; max-width: 100%;
                     font-weight: 500; font-size: 14px; padding: 6px 12px; }
.pick-select .mark-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-select .caret { width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.pick-menu { margin: 0; padding: 8px; overflow: hidden; width: 340px; max-width: calc(100vw - 16px); border: 1px solid var(--line); border-radius: 10px;
             background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / .18); }
.pick-menu input[type=search] { width: 100%; margin: 0 0 6px; padding: 7px 10px; font-size: 14px; }
.pick-list { max-height: min(360px, 60vh); overflow: auto; }
.pick-head { font: 600 11.5px 'Segoe UI', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em;
             color: var(--muted); margin: 10px 8px 4px; }
.pick-section:first-child .pick-head { margin-top: 4px; }
.pick-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 8px; border: 0; border-radius: 7px;
             background: none; color: var(--ink); font-weight: 400; font-size: 14px; text-align: left; }
.pick-item .who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-item .n { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.pick-item:hover, .pick-item:focus-visible { background: var(--fill); outline: none; }
.pick-item[aria-current] { font-weight: 600; }
.pick-item[hidden], .pick-section[hidden] { display: none; }
.pick-none { margin: 8px; }

/* All the addresses, with where each stands. */
.everyone { margin-top: 20px; }
.everyone .pick-row .where { margin-left: auto; color: var(--muted); font-size: 13px; text-align: right; }
.everyone .people { max-height: 480px; overflow: hidden auto; padding: 0 6px; margin: 0 -6px 16px; }
.everyone .people li[hidden] { display: none; }
.everyone-find { margin: 8px 0; }
.everyone-find input { width: 100%; max-width: 360px; }

/* A watch's mail in a dialog over its page. */
.button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); margin-top: 4px; }
.button.secondary:hover { background: var(--fill); }
dialog.mail-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0;
                     border-radius: 14px; background: transparent; color: var(--ink); overflow: auto; }
dialog.mail-dialog::backdrop { background: rgb(18 26 36 / .5); }
dialog.mail-dialog .mail-card { margin: 0; }
.mail-controls .mail-close { margin-left: auto; }
.pill.unsaved { background: var(--warn-soft); color: var(--warn-ink); }
.pill.unsaved[hidden] { display: none; }

/* A watch's form: the sentence in the same field as a new watch, with the gräns behind the icon
   in it and the number beside it; topic and recipients under it. */
.settings .watch-field { margin-bottom: 4px; }
.settings .watch-field #sentence { flex: 1; min-width: 0; font-size: 17px; padding: 12px 104px 12px 14px; background: var(--surface);
                                    border: 1.5px solid var(--control-line); border-radius: 14px; }
.settings .watch-field #sentence:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.field-min { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); font: 600 13px var(--mono, ui-monospace, Consolas, monospace);
             color: var(--muted); background: var(--fill); padding: 2px 7px; border-radius: 6px; pointer-events: none; }
.settings .settings-pop label { display: inline; margin: 0; }
.settings .field-hint { margin: 0 0 16px; font-size: 13px; }
.settings .field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.settings .field-row label { margin: 0; }
.settings .recipients { margin-bottom: 4px; }
.chip.pick { display: inline-flex; }

/* The scrollbars in dialogs, menus and lists: thin, in the account's colours. */
dialog, .pick-list, .mark-menu, .everyone .people, .catch-list {
  scrollbar-width: thin; scrollbar-color: var(--control-line) transparent;
}
dialog::-webkit-scrollbar, .pick-list::-webkit-scrollbar, .mark-menu::-webkit-scrollbar, .everyone .people::-webkit-scrollbar { width: 10px; }
dialog::-webkit-scrollbar-track, .pick-list::-webkit-scrollbar-track, .mark-menu::-webkit-scrollbar-track, .everyone .people::-webkit-scrollbar-track { background: transparent; }
dialog::-webkit-scrollbar-thumb, .pick-list::-webkit-scrollbar-thumb, .mark-menu::-webkit-scrollbar-thumb, .everyone .people::-webkit-scrollbar-thumb {
  background: var(--control-line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
}
dialog::-webkit-scrollbar-thumb:hover, .pick-list::-webkit-scrollbar-thumb:hover, .everyone .people::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

.chip.pick[hidden] { display: none; }
button.add-recipient { justify-self: start; margin: 2px 0 0; padding: 5px 12px; font-size: 13.5px; }

/* In the dialog the mail scrolls inside its frame; the choices above and the button below stay. */
dialog.mail-dialog { height: calc(100vh - 48px); overflow: hidden; }
dialog.mail-dialog[open] { display: flex; }
dialog.mail-dialog .mail-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
dialog.mail-dialog .letter-frame { flex: 1; min-height: 0; height: auto; }
dialog.mail-dialog .send-me { flex: none; }

/* Search by voice, as on the start page (web/src/style.css, copied with the account's colours):
   the microphone in a sentence field opens it, and what is said becomes the sentence. */
dialog#voice { max-width: none; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--control-line);
               background: var(--surface); color: var(--ink); }
dialog#voice::backdrop { background: rgb(18 26 36 / .5); }
/* Search by voice (web/src/voice.js). The dialog's data-state says what is going on: connecting,
   listening, finishing or error. The status line says the same in words, so the look of the
   microphone is never the only sign. */
dialog#voice { width: min(440px, calc(100vw - 32px)); }
.voice-body { display: grid; justify-items: center; gap: 12px; text-align: center; }
/* The logo's magnifying glass, with the chamber inside it: the visitor has the podium and the
   bench rows listen. The rows light up from the podium outwards with the loudness of the voice
   (data-rows, 0 to 3; lit rows are also thicker, so colour is not the only sign). The lens is
   see-through, and while listening a ring pulses from the podium and out past the lens. */
.voice-mic { position: relative; isolation: isolate; width: 96px; height: 96px; margin: 26px 0 36px;
             color: var(--ink); }
.voice-mic svg { position: relative; z-index: 1; display: block; width: 96px; height: 96px; overflow: visible; }
.voice-mic .lens { fill: transparent; stroke: currentColor; transition: fill .2s; }
.voice-mic .handle { stroke: currentColor; }
.voice-mic .row { stroke: currentColor; stroke-width: 3.2; transition: stroke .12s, stroke-width .12s, opacity .2s; }
.voice-mic .podium { fill: var(--act); }
.voice-mic .slash { display: none; }
.voice-mic::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; opacity: 0;
                     border: 2px solid var(--act); transform-origin: 50% 54.5%; }
dialog#voice[data-state="connecting"] .voice-mic .row { opacity: .45; }
/* Lit rows and the podium: --act on --surface is 5.4:1 light and 6.2:1 dark. */
dialog#voice[data-state="listening"] .voice-mic:is([data-rows="1"], [data-rows="2"], [data-rows="3"]) .r1,
dialog#voice[data-state="listening"] .voice-mic:is([data-rows="2"], [data-rows="3"]) .r2,
dialog#voice[data-state="listening"] .voice-mic[data-rows="3"] .r3,
dialog#voice[data-state="finishing"] .voice-mic .row { stroke: var(--act); stroke-width: 4.2; }
dialog#voice[data-state="listening"] .voice-mic::after { animation: voice-pulse 1.8s ease-out infinite; }
@keyframes voice-pulse { from { opacity: .8; transform: scale(.15); } to { opacity: 0; transform: scale(1.7); } }
/* Something went wrong: the colours of "stop", and the lens crossed out. */
dialog#voice[data-state="error"] .voice-mic { color: var(--act); }
dialog#voice[data-state="error"] .voice-mic .lens { fill: var(--act-soft); }
dialog#voice[data-state="error"] .voice-mic .podium { fill: currentColor; }
dialog#voice[data-state="error"] .voice-mic .slash { display: inline; stroke: currentColor; }
dialog#voice[data-state="error"] .voice-mic .slash.gap { stroke: var(--act-soft); }
/* Status and text keep their height whatever they say, so the buttons under them stay put. */
.voice-status { margin: 0; min-height: 3em; max-width: 34ch; font-weight: 600; }
.voice-text { margin: 0; width: 100%; min-height: 4.2em; font: 20px/1.4 Georgia, 'Times New Roman', serif; overflow-wrap: anywhere; }
/* The sentence being spoken may still change. */
.voice-text .partial { color: var(--muted); }
.voice-actions { display: flex; gap: 8px; justify-content: center; }
.voice-actions .btn { min-height: 44px; }
.voice-actions .btn:disabled { opacity: .55; cursor: default; }
.dialog-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dialog-head h2 { margin: 0; font-size: 19px; }
.dialog-head .close { margin-left: auto; border: 1px solid var(--control-line); background: var(--surface);
                      border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 17px;
                      display: inline-grid; place-items: center; }
.dialog-head .close .icon { width: 16px; height: 16px; }
.voice-actions .btn { margin: 0; padding: 9px 16px; }
.voice-actions .btn.quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); }
/* The microphone in a field, left of the settings icon. */
.qwrap .mic { right: 44px; }
.qwrap #watch-clear { right: 80px; }
body[data-voice] #watch-add #sentence { padding-right: 120px; }
body[data-voice] .settings .watch-field #sentence { padding-right: 140px; }
body[data-voice] .field-min { right: 84px; }
/* What a watch catches: its heading, and how far back beside it. */
.catch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 4px; }
.catch-head h2 { margin: 0; }
.catch-head select { width: auto; font-size: 14px; padding: 6px 8px; }
/* A line between what the list says and the list. */
.catch-status { padding-bottom: 12px; margin-bottom: 0; border-bottom: 1px solid var(--line); }

/* Each debate a watch caught as a card of its own: the day and the score on top, the debate's
   name under, then the quote and who said it. */
.catch-list { display: grid; gap: 10px; margin-top: 14px; }
.catch-list li, .catch-list li:first-child { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.catch-list .when { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.catch-list .when b { grid-column: 1; grid-row: 1; font-size: 13px; }
.catch-list .when .score { grid-column: 2; grid-row: 1; font: 600 12px ui-monospace, Consolas, monospace; color: var(--muted);
                           background: var(--fill); padding: 2px 7px; border-radius: 6px; }
.catch-list .when > a, .catch-list .when > span:not(.score) { grid-column: 1 / -1; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.catch-list .quote { margin: 8px 0 4px; }
/* The day as a soft tag in the site's orange: --act on --act-soft is 5.2:1 light, 6.4:1 dark. */
.catch-list .when b { justify-self: start; background: var(--act-soft); color: var(--act); padding: 2px 8px; border-radius: 6px; }

/* What the script replaces keeps its place before it runs: the topic's select is as wide as the
   menu that takes over, and the search among the watches shows only with the script. */
select.with-marks { width: 210px; max-width: 100%; }
html:not(.js) .find { display: none; }

/* Among many addresses, those not chosen are in the menu, not chips; drawn so before the script. */
.js .recipients.many label.chip.pick:has(input[value^="e:"]:not(:checked)) { display: none; }
html:not(.js) .add-recipient { display: none; }
/* The mail tab's choice of whose mail, as wide as the menu that takes over. */
select.searchable { width: 260px; max-width: 100%; }

/* The speeches in a caught debate: who and when, the words, and the speech in short. */
.catch-list .speech { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.catch-list .speech:first-of-type { border-top: 0; padding-top: 0; }
.catch-list .speech .by { font-size: 13px; margin: 0 0 4px; }
.catch-list .speech .by a, .catch-list .speech .by b { color: var(--ink); font-weight: 600; }
.catch-list .speech .at { color: var(--muted); }
.catch-list .speech .quote { margin: 0 0 4px; }
.catch-list .brief { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.catch-list .brief-label { font-weight: 600; }
.catch-list .more-speeches { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* A recipient group folds: its name and how many on a line to open or close. */
details.group > summary.group-head { cursor: pointer; list-style: none; }
details.group > summary.group-head::-webkit-details-marker { display: none; }
details.group > summary.group-head::before { content: ""; width: 7px; height: 7px; flex: none; margin-right: 4px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
details.group[open] > summary.group-head::before { transform: rotate(45deg); }
details.group > summary.group-head h3 { margin-right: auto; }
details.group > summary.group-head:focus-visible { outline: 2px solid var(--act); outline-offset: 4px; border-radius: 6px; }
details.group[open] > summary.group-head { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { details.group > summary.group-head::before { transition: none; } }
/* The group's list slides open and shut, by the browser alone: the height to and from its own
   (interpolate-size) and the content fading, the arrow turning on the GPU (transform). Where the
   browser cannot, it opens at once as before. */
details.group { interpolate-size: allow-keywords; }
details.group::details-content { block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .22s ease, opacity .18s ease, content-visibility .22s allow-discrete; }
details.group[open]::details-content { block-size: auto; opacity: 1; }
details.group > summary.group-head::before { will-change: transform; transition: transform .22s ease; }
@media (prefers-reduced-motion: reduce) {
  details.group::details-content { transition: none; }
  details.group > summary.group-head::before { transition: none; }
}

/* All the addresses fold the same way, closed from the start. */
details.fold { interpolate-size: allow-keywords; }
details.fold > summary.fold-head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
details.fold > summary.fold-head::-webkit-details-marker { display: none; }
details.fold > summary.fold-head::before { content: ""; width: 8px; height: 8px; flex: none; border: solid var(--muted);
  border-width: 0 2px 2px 0; transform: rotate(-45deg); will-change: transform; transition: transform .22s ease; }
details.fold[open] > summary.fold-head::before { transform: rotate(45deg); }
details.fold > summary.fold-head h2 { margin: 0 auto 0 0; }
details.fold > summary.fold-head:focus-visible { outline: 2px solid var(--act); outline-offset: 4px; border-radius: 6px; }
details.fold::details-content { block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .22s ease, opacity .18s ease, content-visibility .22s allow-discrete; }
details.fold[open]::details-content { block-size: auto; opacity: 1; }
details.fold[open] > summary.fold-head { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) {
  details.fold::details-content, details.fold > summary.fold-head::before { transition: none; }
}

/* What the topic or Mina in the column leaves out, drawn but not shown. */
.filtered-out { display: none !important; }
/* What would catch something, as buttons in the note. */
#watch-status .tries { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
#watch-status .tries button { margin: 0; padding: 5px 12px; font-size: 13.5px; }
#watch-status > span { display: block; }
#watch-status .hint { color: inherit; opacity: .9; font-size: 13px; margin: 0; }
#watch-status .none-further { align-self: center; font-size: 13px; }

/* Signing in (layout::signin_page): a card in the middle, and behind it the chamber's rows of
   benches as faint arcs, cut into seats with aisles as in the logo. Two layers in the brand's
   red and navy drift slowly against each other, so the shade shifts without anything moving
   much; only transform and opacity, and nothing at all for those who ask for less motion. */
/* The logo's size, the radius of its lens (20 of 64), and where the lens's middle is above the
   bottom. The rows are a lens apart, so the lens itself is the innermost row. The handle ends
   31 of 64 below the lens's middle, so --origin keeps the whole logo above the foot. */
body.plain:has(.signin) { --logo: clamp(96px, 12vmax, 184px); --lens: calc(var(--logo) * 20 / 64);
                          --foot: 94px; --origin: calc(var(--logo) * 31 / 64 + var(--foot)); }
/* One screen, no scrolling: the head, the card in the middle of what is left, the foot. The
   card may cover the logo on a low screen. */
html:has(.signin) { overflow-y: auto; }
body.plain:has(.signin) { min-height: 100svh; display: flex; flex-direction: column; }
body.plain:has(.signin) main { max-width: none; width: 100%; box-sizing: border-box; flex: 1;
                               display: grid; padding-top: 16px; padding-bottom: 16px; }
body.plain:has(.signin) .foot { width: 100%; box-sizing: border-box; }
/* The logo where the rows begin, as the speaker's chair; behind the card where they meet. */
.signin-origin { position: fixed; z-index: -1; left: 50%; bottom: var(--origin);
                 width: var(--logo); height: var(--logo); color: var(--ink); overflow: visible;
                 /* The lens's middle is 4 of 64 up and to the left of the logo's. */
                 translate: calc(var(--logo) * 4 / 64) calc(var(--logo) * 4 / 64);
                 transform: translate(-50%, 50%); opacity: .4; pointer-events: none; }
.signin-origin .podium { fill: var(--act); }
.signin { display: grid; place-items: center; }
body.plain:has(.signin)::before,
body.plain:has(.signin)::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  left: 50%; bottom: calc(var(--origin) - 75vmax); width: 150vmax; height: 150vmax; margin-left: -75vmax;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    var(--rows) 0 1.6px, transparent 1.6px calc(var(--lens) - 1.6px), var(--rows) calc(var(--lens) - 1.6px) var(--lens));
  /* Seats: the rows broken by aisles, fanning out from the speaker's chair below the card,
     only the half that faces it, fading out towards the edges. */
  -webkit-mask: repeating-conic-gradient(from 0deg at 50% 50%, #000 0 7.2deg, transparent 7.2deg 8deg),
                radial-gradient(circle at 50% 50%, transparent 0 calc(var(--lens) - 6px), #000 calc(var(--lens) - 4px), #000 34%, transparent 58%),
                linear-gradient(to top, transparent 47%, #000 53%);
  -webkit-mask-composite: source-in, source-in;
  mask: repeating-conic-gradient(from 0deg at 50% 50%, #000 0 7.2deg, transparent 7.2deg 8deg),
        radial-gradient(circle at 50% 50%, transparent 0 calc(var(--lens) - 6px), #000 calc(var(--lens) - 4px), #000 34%, transparent 58%),
        linear-gradient(to top, transparent 47%, #000 53%);
  mask-composite: intersect;
  will-change: transform, opacity;
}
body.plain:has(.signin)::before {
  --rows: light-dark(rgb(184 67 31 / .10), rgb(240 144 108 / .10));
  animation: signin-rows 48s ease-in-out infinite alternate;
}
body.plain:has(.signin)::after {
  --rows: light-dark(rgb(27 42 58 / .08), rgb(241 236 226 / .07));
  animation: signin-rows-other 64s ease-in-out infinite alternate;
}
@keyframes signin-rows {
  from { transform: rotate(-1.5deg) scale(1); opacity: .55; }
  to { transform: rotate(1.5deg) scale(1.04); opacity: 1; }
}
@keyframes signin-rows-other {
  from { transform: rotate(2deg) scale(1.03); opacity: 1; }
  to { transform: rotate(-1deg) scale(.99); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  body.plain:has(.signin)::before, body.plain:has(.signin)::after { animation: none; }
}
.signin-card { width: min(440px, 100%); padding: 34px 34px 28px; border-radius: 18px;
               background: color-mix(in srgb, var(--surface) 92%, transparent);
               backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgb(27 42 58 / .10); }
.signin-card h1 { margin: 2px 0 8px; font: 600 34px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.01em; }
.signin-kicker { margin: 0; color: var(--act); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.signin-lead { color: var(--muted); margin: 0 0 22px; }
.signin-card .fields { gap: 8px; }
.signin-card .fields button { width: 100%; justify-content: center; margin-top: 4px; }
.signin-card .fields + .hint { margin: 12px 0 0; }
.signin-card > .hint:last-child { margin: 18px 0 0; }
.sign-in-choice { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sign-in-choice fieldset { border: 0; margin: 0; padding: 0; }
.sign-in-choice legend { font-weight: 600; margin-bottom: 8px; }
.sign-in-choice .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sign-in-choice .chip.pick { display: inline-flex; cursor: pointer; }
@media (max-height: 700px), (max-width: 420px) {
  body.plain:has(.signin) { --foot: 62px; }
  body.plain:has(.signin) main { padding-top: 10px; padding-bottom: 10px; }
  body.plain:has(.signin) .foot { padding-top: 12px; padding-bottom: 16px; }
  .signin-card { padding: 26px 24px 22px; }
  .signin-card h1 { font-size: 30px; }
  .signin-lead { margin-bottom: 16px; }
}
.own-sso { margin-top: 16px; }
.own-sso summary { cursor: pointer; font-weight: 600; color: var(--act); }
.own-sso .fields { margin-top: 10px; }
.own-sso code { font-size: 12.5px; overflow-wrap: anywhere; }
.sign-in-choice .chip.pick:has(input:disabled) { opacity: .5; cursor: not-allowed; }