/* Admin console (/beheer). Standalone: the public pages' styles are tuned for
   marketing, this is a work tool. Same palette and type, denser layout. */
:root {
  /* Day or night, as on the public pages (styles.css): each colour is a
     var(--day, …) var(--night, …) pair, switched by the two toggles below
     and at the end of this file. Keep the empty values: a minifier that
     drops them breaks the palette (theme_css_test.go checks the pairs). */
  --day: initial;
  --night: ;
  color-scheme: light;
  --paper: var(--day, #f7f5ec) var(--night, #121a17);
  --card: var(--day, #fffdf6) var(--night, #1a2420);
  --ink: var(--day, #233e30) var(--night, #e6e4d8);
  --ink-hover: var(--day, #355440) var(--night, #fffaee);
  --muted: var(--day, #5f685c) var(--night, #a3aa9e);
  --line: var(--day, #d6d8c9) var(--night, #2f3a35);
  --line-soft: var(--day, #e6e6da) var(--night, #26302c);
  --red: var(--day, #b5442d) var(--night, #ec8a70);
  --red-soft: var(--day, #f6e3dc) var(--night, #3a211c);
  --red-line: var(--day, #e3b9ab) var(--night, #6b3a2f);
  --red-text: var(--day, #7c2a19) var(--night, #f3b09e);
  --green: var(--day, #2f6b45) var(--night, #86cf9f);
  --green-soft: var(--day, #e1eedf) var(--night, #1d3326);
  --green-line: var(--day, #b9d3b6) var(--night, #2f5a3d);
  --green-text: var(--day, #1e4a2f) var(--night, #b3e3c2);
  --amber: var(--day, #8a5a00) var(--night, #e0b457);
  --amber-soft: var(--day, #f7ebcf) var(--night, #36291a);
  --amber-line: var(--day, #e6d09c) var(--night, #6a5226);
  --amber-text: var(--day, #5e3e00) var(--night, #ecd08c);
  --amber-mark: var(--day, #c9962c) var(--night, #d9a441);
  --grey-soft: var(--day, #eceadf) var(--night, #262f2b);
  --grey-text: var(--day, #555d52) var(--night, #b8bdb3);
  --grey-mark: var(--day, #8d9488) var(--night, #6f786c);
  --grey-mark-hover: var(--day, #6f776b) var(--night, #8d968a);
  --none-fill: var(--day, #f1efe3) var(--night, #1f2925);
  --hit-hover: var(--day, #233e300a) var(--night, #e6e4d80d);
  /* Charts on the visitors pages. */
  --chart: var(--day, #355440) var(--night, #7fb99a);
  --chart-hover: var(--day, #233e30) var(--night, #a9d8bb);
  --head: var(--day, #f3f1e5) var(--night, #1f2925);
  --row-hover: var(--day, #f9f7ee) var(--night, #1f2a25);
  --handled: var(--day, #f9f8f1) var(--night, #161f1b);
  --field: var(--day, #fff) var(--night, #0f1613);
  --field-line: var(--day, #b9bdaa) var(--night, #4a5a52);
  --placeholder: var(--day, #8a9186) var(--night, #8d968a);
  --wash: var(--day, #233e300d) var(--night, #e6e4d812);
  --danger: var(--day, #b5442d) var(--night, #b8452f);
  --danger-hover: var(--day, #9a3824) var(--night, #a8412d);
  --danger-soft: var(--day, #fdf4f0) var(--night, #2a1a16);
  --bar: var(--day, #233e30) var(--night, #0c1310);
  --on-bar: var(--day, #f7f5ec) var(--night, #e6e4d8);
  /* The bar is dark in both themes. */
  --on-bar-line: #f7f5ec66;
  --on-bar-wash: #f7f5ec1a;
  --on-bar-current: #f7f5ec26;
  --on-bar-settings: #ffffff1f;
  --on-danger: #fff;
  --dialog-shadow: var(--day, #1d2b2233) var(--night, #00000080);
  --backdrop: var(--day, #1d2b2226) var(--night, #00000066);
  --serif: Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: normal; margin: 0; }
h1 { font-size: 34px; letter-spacing: -1px; line-height: 1.15; }
h2 { font-size: 21px; letter-spacing: -.3px; margin-bottom: 14px; }
h3 { font-size: 18px; }
code, pre { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--card); color: var(--ink); z-index: 10; }
.skip-link:focus { top: 8px; }

/* Owner support uses the same compact, native console controls. */
.owner-email-link { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.owner-email-link:hover { color: var(--green); text-decoration-color: currentColor; }
.owner-lookup { max-width: 760px; }
.owner-lookup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 16px; }
.owner-lookup-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.owner-lookup-form .btn { margin-top: 27px; min-height: 44px; }
.owner-lookup-form p { margin: 6px 0 0; }
.owner-result .card-head h2 { overflow-wrap: anywhere; font-size: 23px; }
.owner-window { margin: 12px 0; }
.owner-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 16px; margin: 0; padding-block: 14px; border-block: 1px solid var(--line-soft); }
.owner-metrics > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; min-width: 0; }
.owner-metrics dt { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; hyphens: auto; }
.owner-metrics dd { margin: 3px 0 0; font-size: 28px; font-family: var(--serif); }
.owner-metrics dd span { color: var(--muted); font-size: 18px; }
.owner-allowance dd { color: var(--green); }
.owner-count-note { margin: 10px 0 18px; }
.owner-pending { margin: -8px 0 18px; color: var(--amber-text); }
.facts.owner-login-facts { margin-bottom: 18px; }
.owner-actions { border-top: 1px solid var(--line); }
.owner-action + .owner-action { border-top: 1px solid var(--line-soft); }
.owner-action > summary { cursor: pointer; padding: 14px 0; font-size: 14px; font-weight: 600; }
.owner-action-form { max-width: 680px; padding: 0 0 20px 18px; }
.owner-action-form p { margin: 0 0 4px; }
.owner-action-form > label:not(.owner-confirm) { font-size: 14px; font-weight: 600; }
.owner-action-form textarea { width: 100%; resize: vertical; }
.owner-confirm { display: flex; align-items: start; gap: 9px; padding-block: 8px; font-size: 14px; overflow-wrap: anywhere; cursor: pointer; }
.owner-confirm input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.owner-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-action-buttons [hidden] { display: none; }
.owner-action-buttons .btn { min-height: 44px; white-space: normal; }
.owner-history .card-head p { margin: 0; }
.owner-history-scroll:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.owner-events { width: 100%; min-width: 840px; table-layout: fixed; font-size: 13px; }
.owner-events th { text-align: left; }
.owner-events th:nth-child(1) { width: 26%; }
.owner-events th:nth-child(2) { width: 22%; }
.owner-events th:nth-child(3) { width: 24%; }
.owner-events th:nth-child(4) { width: 28%; }
.owner-events th, .owner-events td { padding: 10px 12px; vertical-align: top; }
.owner-events th:first-child, .owner-events td:first-child { padding-left: 0; }
.owner-events td { border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.owner-event-target { display: block; margin-top: 2px; font-size: 12px; }
@media (max-width: 640px) {
  .owner-lookup-form { grid-template-columns: minmax(0, 1fr); }
  .owner-lookup-form .btn { margin-top: 0; justify-self: start; }
  .owner-metrics { column-gap: 10px; }
  .owner-metrics dt { line-height: 1.4; }
  .owner-metrics dd { font-size: 25px; }
  .facts.owner-login-facts { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .owner-login-facts dd + dt { margin-top: 8px; }
  .owner-action-form { padding-left: 0; }
}
@media (max-width: 360px) {
  .owner-metrics { grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)); }
}

/* Header bar */
.bar { background: var(--bar); color: var(--on-bar); }
.bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bar-identity { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 9px; text-decoration: none; font-family: var(--serif); font-size: 19px; font-weight: bold; letter-spacing: -.5px; }
.brand img { filter: brightness(0) invert(96%) sepia(8%) saturate(300%); }
.brand-domain { font-weight: normal; }
.brand-tag { margin-left: 6px; padding: 3px 9px; border: 1px solid var(--on-bar-line); border-radius: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.bar-user { display: flex; flex-shrink: 0; align-items: center; gap: 14px; font-size: 13px; }
.bar-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .85; }
.bar-user form { margin: 0; }
.bar-link { text-decoration: none; opacity: .85; }
.bar-link:hover { opacity: 1; text-decoration: underline; }
.bar-logout { font: inherit; color: var(--on-bar); background: transparent; border: 1px solid var(--on-bar-line); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.bar-logout:hover { background: var(--on-bar-wash); }

/* Page */
.main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
.page-head { margin-bottom: 22px; }
.page-head .lead { margin: 8px 0 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.slug { font-family: var(--mono); font-size: 26px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.site-link { font-size: 14px; overflow-wrap: anywhere; }
.site-link .new-tab-note { font-size: 11px; white-space: nowrap; }
.site-address-lead .site-link { padding-block: 4px; }
.site-address-item { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; }
.site-address-dot { flex: none; }
.back { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--ink); text-decoration: underline; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; margin-bottom: 20px; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card-head h2 { margin-bottom: 0; }
.narrow { max-width: 560px; }
/* Internal wipe confirmation: long owner/target values must fit small screens. */
.internal-wipe .lead { overflow-wrap: anywhere; }
.internal-wipe .btn, .internal-wipe-link { min-height: 44px; white-space: normal; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid .card { margin-bottom: 0; }
.grid + .card { margin-top: 20px; }
.pill { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 3px 10px; }

/* Messages */
.flash { border-radius: 6px; padding: 12px 16px; margin: 0 0 20px; border: 1px solid; }
.flash-ok { background: var(--green-soft); border-color: var(--green-line); color: var(--green-text); }
.flash-error { background: var(--red-soft); border-color: var(--red-line); color: var(--red-text); }
.flash-warn { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-text); }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 10px 16px; border-radius: 5px; border: 1px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--wash); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--card); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-small { padding: 6px 11px; font-size: 13px; }
.btn-ghost { border-color: var(--line); font-weight: normal; }
.btn-wide { width: 100%; margin-top: 8px; }
input:not([type=checkbox]):not([type=radio]), textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--field-line); border-radius: 5px; background: var(--field); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
/* Below 16px, iOS Safari zooms in on a field that gets focus. */
@media (max-width: 640px) { input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: 16px; } }
label { font-size: 13px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stack input { margin-bottom: 4px; }
.stack textarea { resize: vertical; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; font-size: 14px; }
.check input { margin-top: 3px; accent-color: var(--red); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }

/* Login */
.login { max-width: 400px; margin: 48px auto 0; padding: 32px; }
.login h1 { font-size: 28px; margin-bottom: 20px; }
.login .stack { align-items: stretch; }
.login .muted { margin: 20px 0 0; }
.passkey-status { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.first-login { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.first-login summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.first-login .muted { margin: 10px 0 14px; }
.enroll { max-width: 520px; }
.enroll > p:not(.eyebrow):not(.muted) { font-size: 14px; line-height: 1.6; }
.passkey-form { max-width: 420px; }
.passkey-form .passkey-status { margin-top: 0; }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; text-decoration: none; }
.stat:hover { border-color: var(--field-line); }
.stat-live { border-left-color: var(--green); }
.stat-pending { border-left-color: var(--amber-mark); }
.stat-offline { border-left-color: var(--grey-mark); }
.stat-removed { border-left-color: var(--red); }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-family: var(--serif); font-size: 34px; line-height: 1.1; }
.stat-note { font-size: 12px; color: var(--muted); }

/* Filters */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tabs a { padding: 7px 12px; border-radius: 16px; font-size: 13px; text-decoration: none; border: 1px solid transparent; }
.tabs a:hover { border-color: var(--line); }
.tabs a[aria-current=page] { background: var(--ink); color: var(--paper); }
.count { opacity: .7; margin-left: 3px; }
.search { display: flex; gap: 8px; width: min(420px, 100%); }
.search input { padding: 8px 12px; }
.search .btn { padding: 8px 14px; }
.hide-operators { display: flex; align-items: center; gap: 8px; flex-basis: 100%; }
.hide-operators label { display: flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; }
.hide-operators input { margin: 0; accent-color: var(--ink); }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
.sites { background: var(--card); border: 1px solid var(--line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--head); white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 14px; }
tbody tr:last-child td { border-bottom: 0; }
.sites tbody tr:hover { background: var(--row-hover); }
.site-name { font-family: var(--mono); font-size: 13px; font-weight: 600; text-decoration: none; }
.site-name:hover { text-decoration: underline; }
.site-name-row { display: flex; align-items: flex-start; gap: 6px; }
.site-name-row .site-name { min-width: 0; overflow-wrap: anywhere; }
.site-open { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; min-height: 28px; margin-top: -4px; border-radius: 5px; color: var(--muted); text-decoration: none; }
.site-open:hover { color: var(--ink); background: var(--grey-soft); }
.site-open svg { display: block; width: 12px; height: 12px; flex: none; }
@media (max-width: 640px) {
  .page-head .site-address-lead { row-gap: 2px; column-gap: 14px; }
  .site-address-lead .site-address-dot { display: none; }
}
@media (max-width: 640px), (pointer: coarse) {
  /* A full touch target that grows up into the cell padding, so the glyph stays
     on the first name line and the domain pills stay close to the name. */
  .site-open { flex-basis: 44px; min-height: 44px; margin-top: -12px; }
  .site-address-lead .site-link { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 4px; }
}
@media (min-width: 641px) and (pointer: coarse) {
  /* In the tablet table the glyph's target reaches into the cell padding
     instead of taking width from an already narrow name column. */
  .site-name-row { gap: 0; }
  .site-open { margin-right: -14px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-size: 12px; padding: 1px 7px; border-radius: 10px; background: var(--grey-soft); color: var(--muted); }
.chip-warn { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
/* The zone of a site outside paddenstoel, for Hyphae operators. */
.chip-zone { background: var(--line-soft); color: var(--ink); font-weight: 600; }
/* A domain pill that opens the site. The link pads the pill to a full target;
   that padding takes its own space, so no two targets ever overlap. Plain
   pills beside it keep their own height, level with the linked pill. */
.chips:has(.chip-link) { align-items: flex-start; }
.chips:has(.chip-link) > .chip { margin-top: 2px; }
.chip-link { display: inline-block; max-width: 100%; padding-block: 2px; border-radius: 12px; text-decoration: none; }
.chip-link .chip { display: block; }
/* A label breaks inside only when it cannot fit a line of its own; break-word
   (not anywhere) lets the table make room for a whole label first. */
.chip-label { display: inline-block; max-width: 100%; overflow-wrap: break-word; }
.chip-end { white-space: nowrap; }
.chip-link svg { display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; }
.chip-link:hover .chip { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.chip-link:focus-visible { outline: none; }
.chip-link:focus-visible .chip { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 640px), (pointer: coarse) {
  /* Closer to the name than to what follows, so the pills belong to the name. */
  .chips:has(.chip-link) { margin-top: 0; row-gap: 0; }
  .chips:has(.chip-link) > .chip { margin-top: 6px; }
  .chip-link { padding-block: 6px 18px; }
}
.email { overflow-wrap: anywhere; min-width: 160px; }
.since > span, .num span { display: block; }
.since .muted, .num .muted { font-size: 12px; }
.term { margin-top: 4px; font-size: 12px; }
.term-exempt { color: var(--green); font-weight: 600; }
.term .muted { font-weight: 400; }
.site-comment { margin: 6px 0 0; max-width: 36ch; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.num { text-align: right; white-space: nowrap; }
.go { text-align: right; }

/* Status badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-live { background: var(--green-soft); color: var(--green); }
.badge-pending { background: var(--amber-soft); color: var(--amber); }
.badge-offline { background: var(--grey-soft); color: var(--grey-text); }
.badge-removed { background: var(--red-soft); color: var(--red); }
.badge-expired { background: var(--grey-soft); color: var(--red); }

/* Site detail */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 18px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .muted { font-size: 12px; margin-left: 4px; }
.note { white-space: pre-wrap; }
.action { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.action:first-of-type { border-top: 0; padding-top: 2px; }
.action form { margin: 0; }
.action > p, .action form p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.action > p.action-status { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.action > p.action-status:last-child { margin-bottom: 0; }
.action form.stack p { margin: 0 0 4px; }
.danger summary { display: inline-block; cursor: pointer; color: var(--red); font-size: 14px; font-weight: 600; padding: 6px 0; list-style: none; }
.danger summary::-webkit-details-marker { display: none; }
.danger summary:hover { text-decoration: underline; }
.danger[open] summary { margin-bottom: 10px; }
.danger form { padding: 14px 16px; border: 1px solid var(--red-line); background: var(--danger-soft); border-radius: 6px; }

/* Custom domains */
.domain { border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin: 14px 0; background: var(--field); }
.domain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.domain-head h3 { font-family: var(--mono); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.domain-link { text-decoration-thickness: 1px; }
@media (max-width: 640px), (pointer: coarse) {
  .domain-head h3 { min-width: 0; max-width: 100%; }
  .domain-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }
}
.domain-head form { margin: 0 0 0 auto; }
.domain > p { font-size: 14px; margin: 8px 0; }
.dns { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.dns-ready { background: var(--green-soft); color: var(--green); }
.dns-elsewhere { background: var(--amber-soft); color: var(--amber); overflow-wrap: anywhere; }
.dns-missing { background: var(--grey-soft); color: var(--grey-text); }
.records { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.records td { font-size: 13px; padding: 9px 14px; }
.records td:first-child { font-weight: 600; width: 80px; }
.records code { overflow-wrap: break-word; }
/* Passkey names need more room than the short labels in DNS records. */
#passkeys .records td:first-child { overflow-wrap: anywhere; }
@media (min-width: 561px) {
  #passkeys .records td:first-child { width: 25%; }
}
/* The name heads its row for screen readers, but looks like a cell. */
.records th[scope="row"] { font-size: 13px; font-weight: normal; padding: 9px 14px; background: none; color: inherit; text-transform: none; letter-spacing: normal; white-space: normal; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.records tbody tr:last-child th[scope="row"], .records .check-last { border-bottom: 0; }
.records .check-cell { vertical-align: middle; min-width: 7em; white-space: normal; }
.records .check-cell .dns { display: inline-block; overflow-wrap: break-word; }
@media (max-width: 560px) {
  .records td, .records th { padding: 8px; }
  .records td:first-child { width: auto; }
  .records .check-cell { min-width: 0; }
  .records .check-cell .dns { padding: 3px 8px; }
}
/* A zone's own domain (zone_domains_console.go). */
.dns-broken { background: var(--red-soft); color: var(--red-text); }
.zone-domain-name { font-family: var(--mono); font-size: 17px; overflow-wrap: anywhere; }
.zone-domain-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 14px; }
.zone-records > summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.zone-records-table .records-group th { font-size: 13px; font-weight: normal; text-transform: none; letter-spacing: normal; white-space: normal; color: var(--muted); background: var(--head); padding: 8px 14px; border-bottom: 1px solid var(--line-soft); }
.zone-records-table tbody + tbody .records-group th { border-top: 1px solid var(--line); }
.zone-records-table .records-or td { font-size: 12px; font-weight: normal; color: var(--muted); padding-top: 4px; padding-bottom: 4px; }
.zone-name { font-weight: 600; }
.zone-cert-detail { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .zone-records-table thead { display: none; }
  .zone-records-table, .zone-records-table tbody, .zone-records-table tr { display: block; width: 100%; }
  .zone-records-table tr { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
  .zone-records-table tr.records-group { padding: 0; }
  .zone-records-table td, .zone-records-table td:first-child, .zone-records-table th[scope="row"] { display: block; width: auto; padding: 2px 0; border: 0; }
  .zone-records-table .records-group th { display: block; padding: 8px 12px; }
  .zone-records-table [data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: normal; }
  .zone-records-table .check-cell { padding-top: 6px; min-width: 0; }
  .zone-records-table .records-or td { padding: 0; }
}
.zone-list-domain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hints { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.hints li + li { margin-top: 3px; }
.tip { font-size: 13px; background: var(--grey-soft); padding: 8px 12px; border-radius: 5px; }
.copy { margin-top: 10px; }
.copy summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.copy pre { white-space: pre-wrap; background: var(--head); border: 1px solid var(--line); border-radius: 5px; padding: 12px 14px; margin: 8px 0 0; user-select: all; }
.domain-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.domain-form .inline { display: flex; gap: 8px; margin-top: 6px; max-width: 520px; }
.domain-form p { margin: 8px 0 0; }
.domain-form .field-error { margin: 6px 0 0; max-width: 520px; font-size: 14px; }
.domain-form .offer p { margin: 0 0 6px; }
.domain-form .offer p:last-child { margin-bottom: 0; }
.transfers { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.transfer { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; font-size: 14px; }
.transfer p { margin: 0; }
.transfer-open { background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 6px; padding: 10px 14px; }
.transfer-open .muted { display: block; margin-top: 2px; }

.empty { text-align: center; padding: 40px; color: var(--muted); }
.empty-mark { font-size: 34px; margin: 0; }

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .main { padding: 22px 14px 60px; }
  .bar-inner { padding: 0 14px; }
  .card { padding: 18px 16px; }
  h1 { font-size: 28px; }
  /* The site list turns into cards: a wide table is unreadable on a phone. */
  .sites thead { display: none; }
  .sites, .sites tbody, .sites tr, .sites td { display: block; width: 100%; }
  .sites tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .sites td { border: 0; padding: 4px 14px; text-align: left; }
  .num span { display: inline; margin-left: 6px; }
  .go { padding-top: 8px !important; }
  /* Only the site inventory has these six columns; mail tables stay stacked. */
  .site-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px; }
  .site-list td { width: auto; min-width: 0; padding: 0; overflow-wrap: anywhere; }
  .site-list td:first-child, .site-list .email { grid-column: 1 / -1; }
  .site-list td:nth-child(2) { grid-column: 2; grid-row: 3; justify-self: end; }
  .site-list .since { grid-column: 1; grid-row: 3 / 5; }
  .site-list .num { grid-column: 1; grid-row: 5; align-self: center; white-space: normal; }
  .site-list .go { grid-column: 2; grid-row: 5; padding-top: 0 !important; }
  .site-list .go .btn { min-height: 44px; }
  /* Visitors above Inhoud and Beheren: the button closes the card. */
  .site-list .visits { grid-column: 1 / -1; grid-row: 5; }
  .site-list .num:not(.visits), .site-list .go { grid-row: 6; }
}

/* Long status labels must not squeeze dates into a narrow sliver. */
@media (max-width: 374px) {
  .site-list td:nth-child(2) { grid-column: 1 / -1; justify-self: start; }
  .site-list .since { grid-column: 1 / -1; grid-row: 4; }
}

/* Menu */
.bar-nav { display: flex; flex-shrink: 0; gap: 4px; font-size: 14px; }
.bar-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 16px; text-decoration: none; opacity: .85; }
.bar-nav a:hover { opacity: 1; background: var(--on-bar-wash); }
.bar-nav a[aria-current=page] { opacity: 1; background: var(--on-bar-current); font-weight: 600; }
.bar-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--on-bar); color: var(--bar); font-size: 12px; font-weight: 600; text-align: center; }

/* Feedback */
.section-title { margin: 0; }
.stat-score { border-left-color: var(--ink); }
.stat-count { border-left-color: var(--grey-mark); }
.stat-happy { border-left-color: var(--green); }
.stat-open { border-left-color: var(--amber-mark); }
.face { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.face .face-eye { fill: currentColor; stroke: none; }
.rating { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rating .face { width: 20px; height: 20px; }
.rating-1, .rating-2 { background: var(--red-soft); color: var(--red); }
.rating-3 { background: var(--grey-soft); color: var(--grey-text); }
.rating-4, .rating-5 { background: var(--green-soft); color: var(--green); }
.rating-none { padding-left: 10px; background: var(--grey-soft); color: var(--muted); font-weight: normal; }
.dist { border-collapse: separate; border-spacing: 0 6px; }
.dist th, .dist td { border: 0; padding: 0; background: none; vertical-align: middle; }
.dist-face { display: flex; align-items: center; gap: 8px; width: 150px; padding-right: 12px !important; font-size: 14px; font-weight: normal; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.dist-face .face { width: 24px; height: 24px; color: var(--muted); }
.dist-bar { width: 100%; }
.dist-bar svg { display: block; width: 100%; height: 14px; }
.dist-bar rect { fill: var(--ink-hover); }
.dist .num { padding-left: 12px !important; min-width: 84px; font-size: 14px; }
.dist .num span { display: inline; margin-left: 6px; font-size: 12px; }
.weeks td { font-size: 14px; }
.weeks td:first-child { font-weight: normal; width: auto; white-space: nowrap; }
.weeks th.num { text-align: right; }
.feedback-list { margin-top: 30px; }
.feedback-item { padding: 18px 22px; margin-bottom: 12px; }
.feedback-item.is-handled { background: var(--handled); }
.feedback-item.is-handled .feedback-message { color: var(--muted); }
.feedback-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.feedback-item-head .site-name { overflow-wrap: anywhere; }
.site-name.gone { font-weight: normal; }
.feedback-when { margin-left: auto; font-size: 13px; }
.feedback-message { margin: 12px 0; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.feedback-contact { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.feedback-actions form { margin: 0; }
.feedback-note { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--grey-soft); border-radius: 0 5px 5px 0; }
.feedback-note p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.feedback-note .feedback-note-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.feedback-item:not(.is-handled) .feedback-note { border-left-style: dashed; }
.feedback-item .feedback-reply { border-left-style: solid; border-left-color: var(--green); }
.feedback-card { margin: 12px 0 0; font-size: 14px; }
.handle-dialog input[type="text"] { width: 100%; box-sizing: border-box; }
.handle-dialog { width: min(460px, calc(100vw - 32px)); padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: 0 12px 40px var(--dialog-shadow); }
.handle-dialog::backdrop { background: var(--backdrop); }
.handle-dialog .stack { align-items: stretch; }
.handle-dialog .hint { margin: -2px 0 6px; }
/* The message being handled, as the dialog covers the list. */
.handle-context { margin: 0 0 4px; padding: 8px 12px; font-size: 13px; color: var(--muted); background: var(--grey-soft); border-radius: 5px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.handle-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.feedback-delete { padding: 8px 0 0; border-top: 0; }
.feedback-delete summary { font-size: 13px; }
.feedback-delete form p { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.site-feedback { list-style: none; margin: 0; padding: 0; }
.site-feedback li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.site-feedback-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.site-feedback .feedback-message { margin: 8px 0 0; }
@media (max-width: 640px) {
  .dist-face { width: auto; font-size: 13px; }
  .feedback-when { margin-left: 0; width: 100%; }
}

/* Decisions and mails to owners */
select { font: inherit; width: 100%; padding: 9px 10px; border: 1px solid var(--field-line); border-radius: 5px; background: var(--field); color: var(--ink); }
fieldset { border: 0; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.radio input { margin-top: 3px; accent-color: var(--ink); }
.hint { margin: -4px 0 6px; font-size: 12px; color: var(--muted); }
.decide-fields { align-items: stretch; }
.decide-fields > .btn { align-self: flex-start; margin-top: 6px; }
.mail-head { margin-bottom: 14px; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; max-width: 68ch; background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin: 0 0 8px; }
.consequences { margin: 0 0 16px; padding-left: 18px; font-size: 14px; }
.consequences li + li { margin-top: 4px; }
.confirm .check { margin-bottom: 14px; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.action > a.btn { margin: 0; }
.notices td:first-child { width: auto; font-weight: normal; white-space: nowrap; }
.notices .dns { display: inline-block; font-weight: 600; }
.notice-why { display: block; margin-top: 2px; }
.send-held { margin: 0 0 14px; padding: 12px 14px; background: var(--amber-soft); border-radius: 6px; }
.send-held p { margin: 0 0 8px; }
.notices td.email { white-space: nowrap; min-width: 0; }
.subhead { font-size: 15px; margin: 22px 0 8px; }
.confirm p { margin: 0 0 14px; }

.bar-settings { display: inline-flex; align-items: center; padding: 4px; border-radius: 6px; }
.bar-settings[aria-current="page"] { background: var(--on-bar-settings); }
.card h3 { margin: 18px 0 8px; font-size: 16px; }
.card .flash ol { margin: 6px 0; }
.card select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); font: inherit; }
.card input[type="url"] { width: 100%; box-sizing: border-box; }

/* The night switch (see :root), and the sun/moon button in the bar
   (theme.js; the same button as on the public pages). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --day: ; --night: initial; color-scheme: dark; } }
:root[data-theme="dark"] { --day: ; --night: initial; color-scheme: dark; }
.theme-toggle { display: none; }
[data-theme] .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--on-bar-line); border-radius: 50%; background: transparent; color: var(--on-bar); cursor: pointer; }
.theme-toggle:hover { background: var(--on-bar-wash); }
.theme-toggle svg { display: block; overflow: visible; }
.tt-body, .tt-bite, .tt-rays { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.5, -.4, .3, 1.4), opacity .35s ease; }
.tt-rays { opacity: 0; transform: scale(.3) rotate(-90deg); }
.theme-toggle[aria-pressed="true"] .tt-body { transform: scale(.6); }
.theme-toggle[aria-pressed="true"] .tt-bite { transform: translate(9px, -9px); }
.theme-toggle[aria-pressed="true"] .tt-rays { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tt-body, .tt-bite, .tt-rays { transition: none; } }

/* Visitors (/beheer/bezoekers, the site page, the sites table) */
.stat-today { border-left-color: var(--green); }
.stat-average { border-left-color: var(--ink); }
.stat-views { border-left-color: var(--grey-mark); }
.stat-bots { border-left-color: var(--line); }
.visits-range { margin: 0; }
.visits-block { margin-top: 30px; }
.visits-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-bottom: 14px; }
.visits-block-head p { margin: 0; }
.visits-intro { margin: 0 0 12px; }
.card-head h3 { margin: 0; }

/* Bars per day: server-drawn SVG. The console's CSP forbids style
   attributes, so geometry is in attributes: x and width in percent of the
   width, y and height in pixels of a fixed height. The inner svg clips each
   bar's rounded foot, so bars are round on top and square on the baseline.
   The y-axis numbers are a second, narrow svg beside it, at the same y. */
.days-chart { display: flex; margin-top: 4px; }
.days-ticks { flex: 0 0 36px; }
.days { display: block; flex: 1 1 auto; min-width: 0; height: 176px; }
.days-grid { stroke: var(--line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.days-base { stroke: var(--field-line); stroke-width: 1; shape-rendering: crispEdges; }
.days-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.days-label { font-size: 11px; fill: var(--muted); }
.days-bar { fill: var(--chart); }
.days-bar-today { fill: var(--grey-mark); }
.days-none { fill: var(--none-fill); }
.days-hit { fill: transparent; }
.days g:hover .days-hit { fill: var(--hit-hover); }
.days g:hover .days-bar { fill: var(--chart-hover); }
.days g:hover .days-bar-today { fill: var(--grey-mark-hover); }
.days-keys { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; }
.days-key::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; background: var(--grey-mark); }
.days-key-none::before { background: var(--none-fill); box-shadow: inset 0 0 0 1px var(--line); }
.days-table { margin-top: 12px; }
.days-table .records { max-width: 420px; }
.days-table .records td { padding: 5px 14px; }
.days-table p { margin: 6px 0 0; }

/* Top lists: the feedback distribution's table (.dist). The name gets its
   own line with a thin bar under it, so long paths and hostnames wrap
   instead of being cut off. */
.lists-card { padding-top: 18px; }
.lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px 40px; }
.lists-in-card { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.toplist-wrap h3 { margin: 0; font-size: 16px; }
.toplist-unit { margin: 1px 0 2px; }
.toplist { border-spacing: 0 7px; }
.toplist .top-name { width: 100%; font-size: 14px; font-weight: normal; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.toplist .top-name code { font-size: 13px; }
.toplist .top-name .muted { font-size: 12px; }
.top-bar { display: block; width: 100%; height: 6px; margin-top: 3px; }
.top-bar rect { fill: var(--chart); }
.toplist .num { vertical-align: top; padding-left: 14px !important; min-width: 0; font-variant-numeric: tabular-nums; }
.toplist .num .muted { display: inline-block; min-width: 3.2em; margin-left: 4px; text-align: right; }
.toplist .top-rest .top-name, .toplist .top-rest .num { color: var(--muted); }
.toplist .top-rest rect { fill: var(--field-line); }
.toplist .chip { margin-left: 4px; }
.toplist-foot { margin: 2px 0 0; }

/* Figures on the site page: the stat tiles, small enough for a card. */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 6px 0 20px; }
.figures div { padding-left: 12px; border-left: 3px solid var(--line); }
.figures div:first-child { border-left-color: var(--green); }
.figures dt { font-size: 13px; color: var(--muted); }
.figures dd { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.figure-note { display: block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.4; color: var(--muted); }
.subhead + .days-chart { margin-top: 0; }

/* Sites table: visitors in the last 7 days. */
.visits .spark { display: inline-block; margin-right: 8px; vertical-align: -2px; }
.spark rect { fill: var(--chart); }
.spark .spark-today { fill: var(--grey-mark); }
.num .visits-unit { display: none; }
.sites th.visits-col { white-space: normal; }
.table-note { margin: 10px 0 0; }

@media (max-width: 640px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lists { grid-template-columns: minmax(0, 1fr); }
  .num .visits-unit { display: inline; margin-left: 0; font-size: inherit; }
  .num.visits .muted { display: block; margin-left: 0; }
  .days-table .records { max-width: none; }
}


/* Settings (/beheer/instellingen): three tabs, two for the operator alone
   and one shared by everyone. Tabs switch page, so they are underlined
   rather than the filter pills of .tabs. */
.page-head-tabs { margin-bottom: 0; }
.settings-tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 0; }
.settings-tabs a { padding: 12px 14px 10px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.settings-tabs a:hover { color: var(--ink); border-bottom-color: var(--line); }
.settings-tabs a[aria-current=page] { color: var(--ink); border-bottom-color: var(--ink); }
.settings-tabs a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px 4px 0 0; }
.settings-tabs-sep { align-self: center; width: 1px; height: 22px; background: var(--line); margin: 0 10px; }
.settings-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 22px; font-size: 14px; color: var(--muted); }
.settings-intro p { margin: 0; }
.role-line { margin: -8px 0 22px; }
/* Who a setting is for. Bordered and without a dot, so it never reads as a
   status badge. */
.scope { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.scope-personal { color: var(--ink); border-color: var(--line); background: var(--card); }
.scope-shared { color: var(--amber-text); border-color: var(--amber-line); background: var(--amber-soft); }
/* A quota is not a status either: square corners, no dot. */
.quota { display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--grey-text); white-space: nowrap; }
.quota-exempt { border-color: var(--green-line); background: var(--green-soft); color: var(--green-text); }
#passkey-toevoegen { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.basecamp-status { font-size: 15px; }
.basecamp-target { margin: 16px 0; }
.basecamp-target .scope { margin: 0 4px; }
.basecamp-target p { margin: 0; }
.basecamp-target p + p { margin-top: 10px; }
.basecamp-choose { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.basecamp-choose input[type=url] { width: min(560px, 100%); }
/* Access and quota of one address, side by side. */
.rights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 18px; }
.rights > div { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--head); }
.rights dt { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rights dd { margin: 0; font-size: 14px; }
.rights dd + dd { margin-top: 4px; }
/* "i" button: small to the eye, a 44px hit area to the finger. */
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; padding: 0; border: 1px solid var(--field-line); border-radius: 50%; background: var(--card); color: var(--ink); font: italic 700 12px/1 var(--serif); letter-spacing: 0; text-transform: none; vertical-align: middle; cursor: pointer; }
.info::after { content: ''; position: absolute; inset: -12px; }
.info:hover { border-color: var(--ink); background: var(--wash); }
.info:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.info-dialog { width: min(420px, calc(100vw - 32px)); }
.info-dialog h2 { font-size: 18px; margin-bottom: 10px; }
.info-dialog ul { margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.info-dialog li + li { margin-top: 6px; }
.info-dialog p { margin: 0 0 16px; }
/* The platform's list of quota exemptions. */
.card-head-start { justify-content: flex-start; gap: 2px; align-items: center; }
.exempt-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; margin: 6px 0 22px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--head); }
.exempt-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exempt-field input { margin: 0; }
.exempt-add .hint { grid-column: 1 / -1; margin: 0; }
.exemptions td.owner-email { width: 45%; overflow-wrap: break-word; }
.owner-from { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.exemptions .exempt-added { font-size: 13px; white-space: nowrap; }
.exemptions td.go { white-space: nowrap; }
.exemptions .cell-label { display: none; }
/* Modules per address: the same form, on two rows. */
.module-add { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) auto; align-items: start; }
.module-add > .btn { align-self: end; }
.module-add .module-note { grid-column: 1 / 3; }
.module-add .module-check { padding-top: 34px; }
.module-add .exempt-field .hint { font-size: 12px; }
.module-change { display: block; }
.module-add .module-error { grid-column: 1 / -1; margin: 0; }
/* Key history: revoked keys stay listed, quietly. */
.records tr.revoked td { color: var(--muted); font-weight: 400; }
/* Short tables that turn into one block per row on a phone. */
.stack-table .cell-label { display: none; }
@media (max-width: 640px) {
  .settings-tabs { gap: 0; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .settings-tabs a { min-height: 44px; display: inline-flex; align-items: flex-end; font-size: 14px; padding: 12px 10px 10px; }
  .settings-tabs-sep { margin: 0 4px; }
  .rights { grid-template-columns: minmax(0, 1fr); }
  .exempt-add { grid-template-columns: minmax(0, 1fr); }
  .exempt-add .btn { justify-self: start; }
  .module-add .module-note { grid-column: auto; }
  .module-add .module-check { padding-top: 0; }
  .exemptions thead { display: none; }
  .exemptions, .exemptions tbody, .exemptions tr, .exemptions td { display: block; width: 100%; }
  .exemptions tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .exemptions td { border: 0; padding: 4px 14px; min-width: 0; white-space: normal; text-align: left; }
  .exemptions td.owner-email { width: 100%; }
  .exemptions .cell-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .exemptions .go { padding-top: 8px !important; }
  .exemptions .go .btn { min-height: 44px; }
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody { display: block; width: 100%; }
  .stack-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
  .stack-table tr:last-child { border-bottom: 0; }
  .stack-table td, .stack-table td:first-child, #passkeys .stack-table td:first-child { display: block; width: auto; padding: 0; border: 0; overflow-wrap: normal; }
  .stack-table td:not(.go) { grid-column: 1; }
  .stack-table td.go { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .stack-table .cell-label { display: inline; color: var(--muted); }
}

/* Standalone beheer disclosure: do not inherit the public header's 1000px
   cutoff or marketing layout. One set of links/forms serves both layouts. */
.beheer-menu, .beheer-menu-panel, .beheer-menu .bar-user,
.beheer-menu-group, .beheer-appearance, .beheer-language { display: contents; }
/* Closed native details normally removes content from the accessibility tree.
   Expose it on desktop without JS, not merely with display: contents. */
.beheer-menu::details-content { display: contents; content-visibility: visible; }
.beheer-menu > summary, .beheer-menu-label, .beheer-theme-label { display: none; }
.beheer-settings-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar:has(.beheer-menu) .bar-identity { flex: 0 0 auto; }
.bar:not(:has(.bar-email)) .bar-identity { flex: 1; }
.bar:has(.beheer-menu) .bar-inner { column-gap: 14px; }
.beheer-menu .bar-email { order: 1; flex: 1; }
.beheer-menu .bar-nav { order: 2; margin-inline-start: 2px; }
.beheer-menu .language-switch { order: 3; margin-inline-start: 2px; }
.beheer-menu .bar-settings { order: 4; }
.beheer-menu .theme-toggle { order: 5; }
.beheer-account form { order: 6; margin: 0; font-size: 13px; }
/* A zone's operator: the header names the zone, the open menu the role. */
.bar-role { display: none; }

@media (max-width: 1100px) {
  .bar:has(.beheer-menu) .bar-inner { height: auto; min-height: 64px; padding: 10px 16px; flex-wrap: wrap; gap: 0 10px; }
  .bar:has(.beheer-menu) .bar-identity { flex: 1; }
  .bar .brand { min-height: 44px; max-width: 100%; flex-wrap: wrap; font-size: 18px; gap: 6px; }
  .bar .brand-tag { margin-left: 0; padding-inline: 6px; font-size: 10px; letter-spacing: .8px; }
  .bar .brand > span:not(.brand-tag) { min-width: 0; overflow-wrap: anywhere; }
  .beheer-menu::details-content { content-visibility: hidden; }
  .beheer-menu[open]::details-content { content-visibility: visible; }
  .beheer-menu > summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--on-bar-line); border-radius: 5px; font: 500 14px/1.3 Arial, sans-serif; list-style: none; cursor: pointer; }
  .beheer-menu > summary::-webkit-details-marker { display: none; }
  .beheer-menu > summary:hover, .beheer-menu[open] > summary { background: var(--on-bar-wash); }
  .beheer-menu .beheer-menu-panel { display: none; }
  .beheer-menu[open] .beheer-menu-panel { display: block; flex: 0 0 100%; min-width: 0; margin-top: 10px; padding: 4px 0 0; border-top: 1px solid var(--on-bar-line); }
  .beheer-menu .beheer-menu-group { display: block; padding: 12px 0; }
  .beheer-navigation + .bar-user .beheer-preferences, .beheer-menu .beheer-account { border-top: 1px solid var(--on-bar-line); }
  .beheer-menu .beheer-menu-label, .beheer-menu .menu-section-label { display: block; padding: 0 12px 4px; font-size: 12px; font-weight: 600; opacity: .8; color: inherit; }
  .beheer-menu .bar-nav { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; }
  .beheer-menu .bar-nav a, .beheer-menu .bar-settings { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 5px; font-size: 16px; }
  .beheer-menu .bar-count { margin-inline-start: auto; flex-shrink: 0; }
  .beheer-menu .bar-settings[aria-current=page] { background: var(--on-bar-current); }
  .beheer-menu .beheer-settings-label { position: static; width: auto; height: auto; clip-path: none; overflow: visible; white-space: normal; }
  .beheer-menu .beheer-appearance { display: block; margin-top: 12px; }
  html:not([data-theme]) .beheer-appearance { display: none; }
  .beheer-menu .beheer-theme-label { display: inline; }
  .beheer-theme-label [data-theme-state] { margin-inline-start: 8px; font-weight: 600; }
  [data-theme] .beheer-menu .theme-toggle { width: 100%; height: auto; min-height: 44px; justify-content: flex-start; gap: 10px; padding: 8px 12px; border: 0; border-radius: 5px; font: inherit; font-size: 16px; text-align: start; }
  .beheer-menu .theme-toggle svg, .beheer-menu .bar-settings svg { flex: 0 0 auto; }
  .beheer-menu .beheer-language { display: block; margin-top: 12px; }
  .beheer-menu .language-short { display: none; }
  .beheer-menu .language-native { display: inline; }
  .beheer-menu .language-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; white-space: normal; }
  .beheer-menu .language-switch a:not([aria-current]):not([aria-disabled="true"]) { opacity: .8; }
  .beheer-menu .language-switch a { display: flex; align-items: center; min-height: 44px; min-width: 44px; padding: 8px 12px; font-size: 16px; }
  .beheer-menu .bar-email { display: block; padding: 4px 12px 12px; overflow: visible; overflow-wrap: anywhere; white-space: normal; font-size: 14px; }
  .beheer-menu .bar-role { display: block; padding: 0 12px 12px; font-size: 14px; opacity: .85; }
  .beheer-menu .bar-logout { min-height: 44px; min-width: 44px; padding: 8px 12px; margin-inline-start: 12px; }
}
@media (max-width: 360px) {
  .bar:has(.beheer-menu) .bar-inner { padding-inline: 12px; gap: 0 6px; }
  .bar .brand { font-size: 16px; gap: 4px; }
  .bar .brand img { width: 20px; height: 23px; }
  .beheer-menu > summary { padding-inline: 8px; gap: 6px; }
  .bar .brand-tag { margin-left: 0; padding-inline: 4px; font-size: 9px; letter-spacing: .6px; }
}

/* Logboek (/beheer/logboek, the site page, the dashboard banner). */


/* Menu: unseen errors raise an alert, so their counter is red, unlike the
   to-do counters of Feedback and Mails. The number says it in text too. */
.bar-count-alert { background: var(--danger); color: var(--on-danger); }

/* Filters: the level tabs are the console's .tabs; kind and site are one
   GET form, like the search on the sites page. */
.log-filter { display: flex; flex-wrap: wrap; gap: 8px; width: min(540px, 100%); }
.log-filter select { flex: 1 1 150px; width: auto; padding: 8px 10px; }
.log-filter input[type=search] { flex: 2 1 170px; width: auto; padding: 8px 12px; }
.log-filter .btn { padding: 8px 14px; }
.log-count { margin: 0 0 12px; }
.log-clear { margin: 0 0 22px; font-size: 14px; color: var(--green-text); }

/* A group of events: "Nog niet gezien", or one day. Looks like the sites
   table: card background, a head strip, rows divided by soft lines. */
.log-group { margin-bottom: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.log-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 10px 16px; background: var(--head); border-bottom: 1px solid var(--line); }
.log-group-head h2, .log-group-head h3 { margin: 0; font-size: 17px; }
.log-group-head p { margin: 0; }
.log-date { margin-left: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: var(--muted); }
.log-attention { border-color: var(--red-line); }
.log-attention .log-group-head { align-items: center; background: var(--red-soft); border-bottom-color: var(--red-line); color: var(--red-text); }
.log-attention .log-group-head form { margin: 0; }
.log-attention-note { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line-soft); }

/* One event: time | level | what happened. Info has no level badge; the
   column stays, so badges line up. Warnings and errors also get a coloured
   edge, and always the word itself (never colour alone). */
.log { list-style: none; margin: 0; padding: 0; }
.log-row { display: grid; grid-template-columns: 3.6em 9em minmax(0, 1fr); gap: 0 14px; padding: 11px 16px 11px 13px; border-top: 1px solid var(--line-soft); border-left: 3px solid transparent; font-size: 14px; }
.log-row:first-child { border-top: 0; }
.log-row.is-fout { border-left-color: var(--red); }
.log-row.is-waarschuwing { border-left-color: var(--amber-mark); }
.log-time { grid-column: 1; font-size: 13px; line-height: 21px; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-time span { display: block; }
.log-level { grid-column: 2; }
.level-fout { background: var(--red-soft); color: var(--red); }
.level-waarschuwing { background: var(--amber-soft); color: var(--amber); }
.log-body { grid-column: 3; min-width: 0; }
.log-message { margin: 0; overflow-wrap: anywhere; }
.log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 3px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.log-seen { margin: 3px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.log-row .copy { margin-top: 6px; }
.log-row .copy pre { max-height: 15em; overflow: auto; overflow-wrap: anywhere; }
.log-attention .log-row { grid-template-columns: 3.6em 9em minmax(0, 1fr) auto; }
.log-action { grid-column: 4; align-self: start; margin: 0; }
.log-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 0; }
.log-pages p { margin: 0; }

/* The block on the site page: the same rows, edge to edge in the card. */
.log-in-card { margin: 0 -24px; border-top: 1px solid var(--line-soft); }
.log-in-card .log-row { padding-inline: 21px 24px; }
.log-card-foot { margin: 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 14px; }

@media (max-width: 640px) {
  .log-row, .log-attention .log-row { grid-template-columns: 3.3em minmax(0, 1fr); gap: 0 10px; padding: 12px 14px 12px 11px; }
  .log-time { grid-row: 1 / span 3; }
  .log-level { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
  .log-body { grid-column: 2; grid-row: 2; }
  .log-action { grid-column: 2; grid-row: 3; margin-top: 10px; }
  .log-action .btn, .log-attention .log-group-head .btn { min-height: 44px; }
  .log-filter select { flex-basis: 100%; }
  .log-in-card { margin-inline: -16px; }
  .log-in-card .log-row { padding-inline: 13px 16px; }
}

.intervene { scroll-margin-top: 16px; }
.intervene form { margin: 8px 0 0; }
.owner-zones .chips { display: inline-flex; margin: 0 0 0 4px; padding: 0; list-style: none; }