/* Hand-written — no tailwind/esbuild pipeline in this app.
   See macula_realm_web.ex's moduledoc for why. */

:root {
  --ink: #131a22;
  --ink-soft: #536170;
  --line: #d8dee3;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --accent: #1f6f68;
  --accent-soft: #e4f1ee;
  /* Text on an --accent background: the version of the ink that contrasts
     with THIS theme's accent, so an operator's accent colour keeps its button
     label readable in both themes (macula-realm#90). */
  --accent-ink: #ffffff;
  --danger: #a13d3d;
  --danger-soft: #fbeaea;
  --success: #1f7a4d;
  --success-soft: #e7f5ec;
  --warning: #8a5a13;
  --warning-soft: #fbf1dc;
  --radius: 14px;
}

/* Deployment-wide, operator-chosen (Realm.theme, set once at founding
   time, changed on the Branding desk since macula-realm#90) -- not the
   viewer's OS preference, so this is a plain [data-theme] attribute
   switch, not a prefers-color-scheme query. An operator's accent colour,
   when one is set, arrives as an inline --accent on <html> and outranks
   both blocks below. */
html[data-theme="dark"] {
  --ink: #e7edf3;
  --ink-soft: #9aa7b4;
  --line: #2b3542;
  --bg: #0f151b;
  --card-bg: #1a232c;
  --accent: #4fb3a4;
  --accent-soft: #1d3835;
  --accent-ink: #0f151b;
  --danger: #e0857c;
  --danger-soft: #3a2422;
  --success: #63c48c;
  --success-soft: #1e3327;
  --warning: #e0b567;
  --warning-soft: #3a3018;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

/* ---- flash ---- */

.flash {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.flash-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

/* ---- sign-in ---- */

.signin-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.signin-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.signin-card h1 {
  font-size: 22px;
  margin: 0 0 6px;
}

.signin-lede {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 24px;
}

.hanko-container {
  min-height: 260px;
}

/* The Hanko sign-in component, in the realm's own colours (macula-realm#90).
   <hanko-auth> lives in its own shadow root, so the page's tokens only reach
   it through its own CSS custom properties -- these are hanko-elements 2.x's
   documented names (its README, "CSS Variables"), not ours to rename. Each
   one is fed from the same token the rest of the page uses, so the box
   follows the theme the operator chose and the accent they picked, and a
   realm with no accent of its own keeps its theme's. <hanko-profile> is the
   same component family on the account page, so it reads the same tokens. */
hanko-auth,
hanko-profile {
  --color: var(--ink);
  --color-shade-1: var(--ink-soft);
  --color-shade-2: var(--line);
  --background-color: var(--card-bg);
  --brand-color: var(--accent);
  --brand-color-shade-1: var(--accent);
  --brand-contrast-color: var(--accent-ink);
  --link-color: var(--accent);
  --error-color: var(--danger);
  --font-family: inherit;
  --border-radius: 10px;
}

.signin-error {
  color: var(--danger);
  font-size: 13.5px;
  margin-top: 12px;
}

/* ---- join realm ---- */

.join-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.join-card-wrap {
  width: 100%;
  max-width: 440px;
}

.join-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.join-card h1 {
  font-size: 22px;
  margin: 12px 0 8px;
}

.join-card p {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0;
}

.join-icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
}

.join-card-success .join-icon {
  color: var(--success);
}

.join-card-error .join-icon {
  color: var(--danger);
}

.join-icon-spin {
  animation: spin 1.4s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.join-device {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.join-device-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.join-device-value {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 14px;
}

.join-device-inline {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--accent);
}

.join-footnote {
  margin-top: 16px;
  font-size: 13px;
}

.join-warning {
  margin-top: 16px;
  text-align: left;
}

.join-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
}

.join-confirm-btn:disabled {
  opacity: 0.6;
  cursor: default;
}


/* ---- account page: a person's own sign-in credentials (macula-realm#90) ---- */

.account-page {
  min-height: 100vh;
}

.account-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.account-brand {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.account-who {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.account-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.account-main h1 {
  font-size: 24px;
  margin: 0;
}

.account-lede {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 6px 0 24px;
}

.account-profile {
  min-height: 240px;
}

.landing-account {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.landing-account-link {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.landing-account-link:hover {
  background: var(--bg);
}

/* ---- icons ---- */

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- admin: realm operator desk ---- */

.admin-page {
  min-height: 100vh;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.admin-brand {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.admin-brand small {
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 6px;
}

.admin-nav {
  display: flex;
  gap: 4px;
}

.admin-nav-link {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.admin-nav-link:hover {
  background: var(--bg);
}

.admin-nav-link-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.admin-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}

.admin-head h1 {
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.01em;
}

.admin-lede {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 4px 0 0;
}

.admin-toolbar {
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-spacer {
  flex: 1;
}

.admin-legend {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.admin-legend p {
  margin: 6px 0;
}

.admin-legend code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px;
}

.admin-sub {
  font-size: 12px;
  margin-top: 2px;
}

.admin-help {
  margin: 0 0 12px;
  padding: 10px 16px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
}

.admin-help summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.admin-help-body {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-help-body p {
  margin: 6px 0;
}

.admin-help-body code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px;
}

.admin-search {
  width: 100%;
  max-width: 360px;
  font: inherit;
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}

.admin-appoint-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-sheet {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.admin-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-tbl th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.admin-tbl td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-tbl tbody tr:last-child td {
  border-bottom: 0;
}

.admin-member-cell code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
}

.admin-muted {
  color: var(--ink-soft);
}

.admin-role {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 12px;
  background: var(--bg);
  color: var(--ink-soft);
  margin: 1px 3px 1px 0;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--bg);
  color: var(--ink-soft);
}

.admin-chip-icon {
  width: 13px;
  height: 13px;
}

.chip-ok {
  background: var(--success-soft);
  color: var(--success);
}

.chip-warn {
  background: var(--warning-soft);
  color: var(--warning);
}

.chip-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-actions-cell {
  text-align: right;
  white-space: nowrap;
}

.admin-empty {
  text-align: center;
  padding: 56px 24px;
}

.admin-empty-icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
}

.admin-empty h2 {
  margin: 12px 0 6px;
  font-size: 17px;
}

.admin-empty p {
  color: var(--ink-soft);
  margin: 0;
}

/* ---- admin: buttons ---- */

.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  font: inherit;
  background: var(--card-bg);
  border: 1px solid var(--line);
  color: var(--ink);
}

.admin-btn-sm {
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 8px;
}

.admin-btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

/* ---- admin: revoke dialog ---- */

.admin-scrim {
  position: fixed;
  inset: 0;
  background: rgba(19, 26, 34, 0.45);
  z-index: 40;
}

.admin-dialog {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(19, 26, 34, 0.18);
  padding: 24px;
}

.admin-dialog h2 {
  font-size: 19px;
  margin: 0 0 6px;
}

.admin-dialog-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
}

.admin-consequences {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.admin-consequences li {
  margin: 6px 0;
}

.admin-consequence-gap {
  color: var(--warning);
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
}

.admin-optional {
  color: var(--ink-soft);
  font-weight: 400;
}

.admin-field input[type="text"] {
  font: inherit;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line);
  width: 100%;
}

.admin-field-error {
  color: var(--danger);
  font-size: 13px;
  margin: 10px 0 0;
}

.admin-dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

/* ---- admin: landing page editor ---- */

.landing-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 760px) {
  .landing-editor {
    grid-template-columns: 1fr;
  }
}

.landing-editor-source textarea {
  font: inherit;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  padding: 12px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line);
  width: 100%;
  resize: vertical;
}

.landing-preview-box {
  min-height: 200px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  overflow-y: auto;
}

.landing-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

/* ---- admin: branding desk (macula-realm#90) ---- */

.branding-editor {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin-top: 20px;
}

fieldset.admin-field {
  border: 0;
  padding: 0;
}

fieldset.admin-field legend {
  padding: 0;
}

.branding-accent {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.branding-accent input[type="color"] {
  width: 56px;
  height: 36px;
  padding: 2px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  cursor: pointer;
}

.branding-accent input[type="color"]:disabled {
  opacity: 0.4;
  cursor: default;
}

.branding-accent-default {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
}

/* ---- public landing page ("/", once a realm has content) ---- */

.landing-page {
  min-height: 100vh;
}

.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
}

.landing-brand {
  font-weight: 650;
  letter-spacing: -0.01em;
}

.landing-signin-link {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  text-decoration: none;
}

.landing-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  line-height: 1.65;
}

.landing-content h1,
.landing-content h2,
.landing-content h3 {
  line-height: 1.3;
}

.landing-content a {
  color: var(--accent);
}

.landing-content pre {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
}

.landing-content code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.92em;
}

.landing-content table {
  border-collapse: collapse;
  width: 100%;
}

.landing-content th,
.landing-content td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}

/* ---- setup wizard (first-realm-setup, "/") ---- */

.setup-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.setup-card {
  width: 100%;
  max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.setup-card h1 {
  font-size: 22px;
  margin: 0 0 6px;
}

.setup-lede {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 24px;
}

.setup-field {
  display: block;
  margin-bottom: 16px;
}

.setup-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.setup-optional {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink-soft);
}

.setup-field-hint {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin: 4px 0 0;
}

.setup-realm-uri {
  display: block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 14px;
  padding: 8px 11px;
  background: var(--bg);
  border-radius: 9px;
}

.setup-field input[type="text"],
.setup-field input[type="password"] {
  font: inherit;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--ink);
  background: var(--card-bg);
  border: 1px solid var(--line);
  width: 100%;
}

.setup-field input[type="color"] {
  width: 56px;
  height: 36px;
  padding: 2px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  cursor: pointer;
}

.setup-token-field {
  position: relative;
}

.setup-token-field input {
  padding-right: 56px;
}

.setup-token-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}

.setup-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}

.setup-field-error {
  color: var(--danger);
  font-size: 13px;
  margin: 0 0 16px;
}

.setup-submit-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

.setup-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.setup-signin-prompt p {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 14px;
}

.setup-starting-up {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 10px;
}

.setup-starting-up p {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}

.setup-starting-up-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.admin-link-btn {
  border: none;
  background: none;
  padding: 0;
  margin-left: 8px;
  font: inherit;
  font-size: 12px;
  color: var(--accent, #0ea5e9);
  cursor: pointer;
  text-decoration: underline dotted;
}

.admin-mono {
  font-family: var(--mono, ui-monospace, monospace);
  color: var(--ink);
  text-decoration: none;
}

.admin-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-inline input[type="text"] {
  font: inherit;
  padding: 4px 8px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}

/* ---- admin: pages that explain themselves (macula-realm#53) ---- */
.admin-topbar {
  flex-wrap: wrap;
}

.admin-realm-name {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: var(--bg);
  color: var(--ink-soft);
}

.sign-out-form {
  display: inline;
  margin: 0;
}

.signout-back {
  margin: 16px 0 0;
}

.admin-signed-in {
  font-size: 13px;
  color: var(--ink-soft);
}

.admin-head h1 {
  font-size: 24px;
}

.admin-lede {
  max-width: 72ch;
  line-height: 1.5;
}

.admin-section {
  margin: 20px 0 0;
}

.admin-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 650;
}

.admin-collapsible > summary {
  cursor: pointer;
  list-style-position: inside;
}

.admin-count {
  min-width: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--bg);
  color: var(--ink-soft);
}

.admin-section-empty {
  margin: 0;
  padding: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.admin-sheet {
  overflow-x: auto;
}

.admin-member-cell strong {
  font-weight: 600;
  margin-right: 4px;
}

.admin-member-cell .admin-link-btn {
  margin-left: 0;
}

.admin-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.admin-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-btn:focus-visible,
.admin-nav-link:focus-visible,
.admin-link-btn:focus-visible,
.admin-search:focus-visible,
.admin-tbl input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-hint {
  margin: 4px 0 0;
  font-size: 12.5px;
}

kbd {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11.5px;
  background: var(--card-bg);
}

.admin-field-inline {
  flex: 1;
  max-width: 420px;
}

ul.admin-dialog-subject {
  list-style: none;
  padding: 0;
}

ul.admin-dialog-subject li {
  margin: 2px 0;
}

@media (max-width: 720px) {
  .admin-topbar {
    padding: 12px 16px;
    gap: 10px;
  }

  .admin-nav {
    flex-wrap: wrap;
  }

  .admin-main {
    padding: 16px 16px 48px;
  }

  .admin-bulkbar .admin-spacer {
    flex-basis: 100%;
  }
}

/* Providers desk, one page per service (macula-realm#89). */
.admin-back-link {
  margin-right: 12px;
  font-size: 13.5px;
}

.admin-service-link {
  color: var(--ink);
  text-decoration: none;
}

.admin-service-link:hover strong,
.admin-service-link:focus-visible strong {
  text-decoration: underline;
}

.admin-service-link:focus-visible,
.admin-back-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-node-id {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Providers desk: what the last action did, in place (macula-realm#89). */
.admin-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--success);
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--ink);
}

.admin-result-error {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.admin-result-icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--success);
}

.admin-result-error .admin-result-icon {
  color: var(--danger);
}

.admin-result-body {
  flex: 1;
  min-width: 0;
}

.admin-result-body p {
  margin: 0 0 4px;
}

.admin-result-body p:last-child {
  margin-bottom: 0;
}

.admin-result-list {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* A link to a node that has ended: nothing to do, said calmly. */
.admin-result-quiet {
  border-color: var(--line);
  background: var(--card-bg);
}

.admin-result-quiet .admin-result-icon {
  color: var(--ink-soft);
}

/* An ended row asks nothing; admitting it again is a quiet link under it. */
.admin-providers-tbl .admin-actions-cell .admin-nothing {
  display: block;
  white-space: normal;
  font-size: 12px;
}

.admin-providers-tbl .admin-actions-cell .admin-nothing + .admin-link-btn {
  margin-left: 0;
}

/* A row the last action changed, where it now stands. */
.admin-tbl tr.admin-row-changed td {
  background: var(--accent-soft);
}

.admin-tbl tr.admin-row-changed td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .admin-tbl tr.admin-row-changed td {
    animation: admin-row-arrive 1.6s ease-out;
  }
}

@keyframes admin-row-arrive {
  from {
    background: var(--success-soft);
  }
}

.admin-providers-tbl .admin-actions-cell .admin-btn + .admin-btn {
  margin-left: 6px;
}

/* On a phone each node stacks, so its own action stays on screen. */
@media (max-width: 720px) {
  .admin-result {
    flex-wrap: wrap;
  }

  .admin-providers-tbl thead {
    display: none;
  }

  .admin-providers-tbl tr {
    display: grid;
    grid-template-columns: 32px 1fr;
    border-bottom: 1px solid var(--line);
  }

  .admin-providers-tbl tbody tr:last-child {
    border-bottom: 0;
  }

  .admin-providers-tbl td {
    border-bottom: 0;
    padding: 6px 12px;
  }

  .admin-providers-tbl td:first-child {
    grid-row: span 4;
    padding-top: 12px;
  }

  .admin-providers-tbl td:nth-child(2) {
    padding-top: 12px;
  }

  .admin-providers-tbl td.admin-actions-cell {
    text-align: left;
    padding-bottom: 12px;
  }
}