/* RagnaPocket tenant register, in the app's own look: Myth of Yggdrasil (UI DESIGN GameUiv2), flat.
   The colours are the ones the client draws with, from scenes/ui/myth_kit.gd and sheet_kit.gd: a near-white
   face on a pale blue band, one periwinkle frame line, blue-grey ink, and Georgia for display type.  No
   shadows, gradients or blur: every surface is a flat face inside a 1 px frame, as the windows are. */
:root {
  --bg: #f0f7ff;            /* MythKit BAND: the page behind the windows */
  --surface: #fbfcfe;       /* FACE / PANEL: a window */
  --surface-2: #eef4fd;     /* ROW_ON: an inset row, a filled slot */
  --border: #e6edf6;        /* ROW_RULE: a hairline between rows */
  --border-strong: #c9d6ec; /* PANEL_RING: a panel's edge */
  --frame: #8fa0d5;         /* the button and field frame */
  --frame-strong: #7f8ec6;  /* WINDOW_RING: the window frame, a pressed edge */
  --text: #434e70;          /* VALUE: numbers and names */
  --text-2: #5e6d9c;        /* LABEL */
  --text-3: #8e9bc4;        /* MUTE */
  --head: #526887;          /* HEAD: window titles */
  --accent: #7f8ec6;
  --accent-hover: #6b7cb8;
  --accent-soft: #eef4fd;
  --accent-text: #3d5f8c;   /* STRONG: the ink of a primary label */
  --violet: #8fa0d5;
  --good: #3f8a52;
  --good-soft: #eaf3ec;
  --bad: #b0504b;
  --bad-soft: #f8edec;
  --gold: #9c7a2e;
  --radius: 10px;
  --radius-sm: 6px;         /* SheetField: corners of 4, at 1.5x */
  --ring: 0 0 0 3px rgba(127, 142, 198, .3);
  --mono: ui-monospace, "Cascadia Code", SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --display: Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  /* The World Tree at dawn, washed down until it is a texture: the windows and their text come first. */
  background:
    linear-gradient(rgba(240, 247, 255, .88), rgba(240, 247, 255, .95)),
    url("/assets/brand/backdrop.jpg") center top / cover no-repeat fixed,
    var(--bg);
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); }

/* The window icons (assets/icons): white masks painted in the current text colour, so an icon takes the
   colour of whatever it sits in, light or dark. */
.i {
  width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.i.sm { width: 15px; height: 15px; }
.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- top bar ------------------------------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);   /* the page under the bar shows through as a wash, not as text */
  border-bottom: 1px solid var(--border-strong);
}
.topbar-in { max-width: 1200px; margin: 0 auto; height: 60px; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-right: auto; }
.logo { width: 44px; height: auto; flex: none; display: block; }
.brand-text { display: grid; gap: 2px; }
.wordmark { display: block; width: 116px; height: auto; }
.brand-text span { display: block; font-size: 11.5px; color: var(--text-3); }
.brand-logo { display: block; width: 190px; max-width: 100%; height: auto; margin: 0 auto; }
.keychip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--text-2); font: 12px var(--mono);
}

/* --- page ----------------------------------------------------------------------------------------- */
.main { max-width: 1200px; width: 100%; min-width: 0; margin: 0 auto; padding: 28px 24px 56px; flex: 1; }
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; font: 600 25px/1.25 var(--display); color: var(--head); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--text-2); max-width: 640px; }
.head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.card[hidden] { display: none; }
/* hidden wins over any display a class gives (the owner panel's GRF password showed while switched off). */
[hidden] { display: none !important; }
.card[data-shield-card] { scroll-margin-top: 88px; }

/* --- stats ---------------------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat { padding: 18px; display: flex; gap: 14px; align-items: center; }
.stat-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--frame-strong);
}
.stat-icon.good { color: var(--good); }
.stat-icon.violet { color: var(--accent-text); }
.stat .label { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.stat .value { font: 600 23px/1.2 var(--display); color: var(--head); }
.stat .value.mono { font: 600 15px var(--mono); color: var(--text); }
.stat > div { min-width: 0; }
.stat .value, .stat .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- search --------------------------------------------------------------------------------------- */
.search { position: relative; }
.search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input { padding-left: 36px; width: 260px; }

/* --- tenant cards --------------------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tenant {
  display: flex; flex-direction: column; color: inherit; text-decoration: none;
  transition: background .14s ease, border-color .14s ease;
}
.tenant:hover { background: var(--surface-2); border-color: var(--frame); }
.tenant:focus-visible { outline: none; box-shadow: var(--ring); }
.tenant-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; }
.avatar {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center;
  color: #fff; font: 700 15px/1 var(--display);
  background: hsl(var(--h) 30% 62%); border: 1px solid hsl(var(--h) 30% 52%);
}
/* A tenant's own app icon, or ours: shown as the phone would, on the page's face rather than a coloured square. */
.avatar.shot {
  object-fit: contain; background: var(--face, #fff); border: 1px solid var(--line, #dfe5f2); padding: 2px;
}
.avatar.lg { width: 50px; height: 50px; font-size: 18px; }
.tenant-title { min-width: 0; flex: 1; }
.tenant-title b { display: block; font: 600 15.5px/1.3 var(--display); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-title span { font: 12px var(--mono); color: var(--text-3); }
.tenant-body { padding: 0 18px 18px; display: grid; gap: 14px; flex: 1; }
.meta-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.meta-value { display: flex; align-items: center; gap: 8px; color: var(--text-2); min-width: 0; }
.meta-value span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12.5px; }
.tenant-foot .go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; }
.add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px;
  border: 1px dashed var(--frame); border-radius: var(--radius); color: var(--text-2); text-decoration: none;
  transition: border-color .14s, color .14s, background .14s;
}
.add-card:hover { border-color: var(--frame-strong); color: var(--accent-text); background: var(--surface-2); }
.add-card .plus {
  width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--frame-strong);
}
.empty { padding: 44px 24px; text-align: center; color: var(--text-2); }
.no-match { display: none; padding: 32px; text-align: center; color: var(--text-3); }

/* --- chips and pills ------------------------------------------------------------------------------ */
.chips-view { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2);
  font: 12.5px var(--mono); white-space: nowrap;
}
.chip.more { color: var(--text-3); font-family: inherit; }
.chip.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.on { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); }
.pill.off { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-3); }
.pill.warn { background: #fdf3e3; border-color: color-mix(in srgb, #b07a2b 30%, transparent); color: #8a5f22; }
.pill.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.idtag { font: 13px var(--mono); padding: 3px 9px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2); }

/* --- buttons -------------------------------------------------------------------------------------- */
/* The design's .mbtn (sheet_kit.gd button_box), flattened: one face, a periwinkle frame, the label in ink.
   Primary is not a filled colour in this design; it is the bluer face with its label in Georgia. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--frame); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { background: #e2ecfb; border-color: var(--frame-strong); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary { background: var(--surface-2); border-color: var(--frame-strong); color: var(--accent-text); font-family: var(--display); font-size: 15px; }
.btn.primary:hover { background: #e2ecfb; }
.btn.danger { background: var(--surface); border-color: color-mix(in srgb, var(--bad) 45%, var(--frame)); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 13px; }
.btn.sm.primary { font-size: 14px; }
.btn.square { width: 32px; padding: 0; }
.btn.block { width: 100%; }

/* --- editor layout -------------------------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.stack { display: grid; gap: 14px; }
.aside { position: sticky; top: 80px; display: grid; gap: 14px; }
.section-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border-strong); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.section-head .grow { flex: 1; min-width: 0; }
.section-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--frame-strong);
}
.section-icon.good { color: var(--good); }
.section-icon.violet { color: var(--accent-text); }
.section-icon.bad { color: var(--bad); }
.section-head h2 { margin: 0; font: 600 15px/1.35 var(--display); color: var(--head); }
.section-head p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.section-body { padding: 18px 22px 22px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label.sub { margin-top: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.help { font-size: 12.5px; color: var(--text-3); }
/* A row of tick boxes under one label (the In-app macros card): wraps on a phone, each box with its own words. */
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.field .checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; }
.checks input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.err { font-size: 12.5px; color: var(--bad); display: flex; gap: 6px; align-items: center; }

.input {
  width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; transition: border-color .14s, box-shadow .14s;
}
.input::placeholder { color: var(--text-3); }
.input:disabled, .input[readonly] { background: var(--surface-2); color: var(--text-3); border-color: var(--border); cursor: not-allowed; -webkit-text-fill-color: var(--text-3); opacity: 1; }
.input:focus { outline: none; border-color: var(--frame-strong); box-shadow: var(--ring); }
.input[readonly] { background: var(--surface-2); color: var(--text-2); }
.input.mono { font-family: var(--mono); font-size: 13px; }
.field.error .input, .field.error .chips-edit { border-color: var(--bad); }
textarea.input { height: auto; min-height: 96px; padding: 9px 11px; resize: vertical; font-family: var(--mono); font-size: 13px; }
/* Safari (every iPhone) gives a select the width of its longest option and a date box its own minimum, whatever
   width: 100% says; both ran past their card on an iPhone (2026-10-14). Pin them to the field. */
select.input {
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697a96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input[type="date"].input { max-width: 100%; min-width: 0; display: block; -webkit-appearance: none; appearance: none; }
input[type="date"].input::-webkit-date-and-time-value { text-align: left; }
.field, .fields { min-width: 0; max-width: 100%; }
.help code { overflow-wrap: anywhere; word-break: break-all; white-space: normal; }

/* the IP editor: chips you add and remove, kept in step with the textarea it replaces */
.chips-edit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 46px; padding: 7px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: text;
  transition: border-color .14s, box-shadow .14s;
}
.chips-edit:focus-within { border-color: var(--frame-strong); box-shadow: var(--ring); }
.chips-edit .chip { padding-right: 3px; }
.chips-edit .chip button {
  width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); display: grid; place-items: center; padding: 0;
  background: transparent; color: inherit; cursor: pointer; opacity: .7;
}
.chips-edit .chip button:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.chips-edit input { flex: 1 1 140px; min-width: 0; height: 30px; border: 0; outline: 0; background: transparent; color: var(--text); font: 13px var(--mono); }

/* --- the save bar --------------------------------------------------------------------------------- */
.savebar {
  position: sticky; bottom: 14px; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: 11px 11px 11px 18px; background: var(--surface); border: 1px solid var(--frame-strong); border-radius: var(--radius);
}
.savebar .note { flex: 1; min-width: 0; color: var(--text-2); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.savebar .dirty { color: var(--gold); font-weight: 600; display: none; }
.savebar.is-dirty { border-color: color-mix(in srgb, var(--gold) 55%, var(--frame)); }
.savebar.is-dirty .dirty { display: inline; }
.savebar.is-dirty .clean { display: none; }

/* --- aside pieces --------------------------------------------------------------------------------- */
.aside-card .section-head { padding: 16px 18px; }
.aside-card .section-body { padding: 16px 18px 18px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; counter-increment: step; }
.steps li::before {
  content: counter(step); width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--accent-text);
  font: 700 12px/1 var(--display);
}
.steps .what { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.snippet {
  display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 11px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.snippet code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); color: var(--text); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.danger-card { border-color: color-mix(in srgb, var(--bad) 40%, var(--border-strong)); }
.danger-card .section-head { background: var(--bad-soft); border-bottom-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.confirm-row { display: grid; gap: 10px; }

/* --- the app builds ------------------------------------------------------------------------------- */
.upload { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.upload .field { flex: 0 1 220px; }
.upload .field.grow { flex: 1 1 320px; }
.upload .btn { margin-top: 23px; }
/* A file to upload: our own key, the name beside it, and the real control
   lying invisible over the row so it keeps the click and the browser's checks.
   The plain rule below is what shows when the script has not run. */
.input[type="file"] { padding: 7px 10px; height: auto; font-size: 13px; color: var(--text-2); }
.input[type="file"]::file-selector-button {
  height: 30px; margin-right: 10px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--frame); background: var(--surface-2); color: var(--accent-text);
  font: 600 14px/1 var(--display); cursor: pointer;
}
.filepick { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.filepick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.filepick .btn { pointer-events: none; }
.filepick:hover .btn { background: var(--surface-2); }
.filepick:focus-within .btn { box-shadow: var(--ring); }
.filepick .filename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 13px; }
.filepick.has .filename { color: var(--text); font: 12.5px var(--mono); }
.builds { list-style: none; margin: 0; padding: 0; }
.build { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.build:first-child { border-top: 0; padding-top: 0; }
.build .grow { flex: 1; min-width: 0; }
.build b { display: block; font: 600 14px/1.35 var(--display); color: var(--head); overflow-wrap: anywhere; }
.build .meta { font-size: 12.5px; color: var(--text-3); }
.build .hash { font: 11.5px var(--mono); color: var(--text-3); white-space: nowrap; }
.build > form { display: flex; }

/* --- RagnaPocket's own pages ---------------------------------------------------------------------- */
.site-bar .topbar-in { height: 64px; gap: 20px; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a {
  padding: 7px 11px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.site-nav a:hover { background: var(--surface-2); color: var(--accent-text); }
.site-nav a.here { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--accent-text); padding: 6px 10px; }
.site { max-width: 820px; width: 100%; min-width: 0; margin: 0 auto; padding: 34px 20px 24px; flex: 1; display: grid; gap: 14px; align-content: start; }
/* The home page holds the hero, which needs room for the art beside the words. */
.site.wide { max-width: 1040px; }
.site-head { margin-bottom: 4px; }
.site-head h1 { margin: 0; font: 600 27px/1.25 var(--display); color: var(--head); }
.site .lead { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
.site h2 { margin: 0; font: 600 15px/1.35 var(--display); color: var(--head); }
.site p { margin: 0 0 10px; }
.site p:last-child { margin-bottom: 0; }
.site .after { margin-top: 14px; }

/* The hero: what the app is on the left, the Kafra and the phone on the
   right.  The phone is a frame waiting for a screenshot of the app. */
.hero { padding: 16px 8px 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.hero-words { display: grid; justify-items: start; gap: 4px; }
.hero-words .brand-logo { margin: 0 0 2px; width: 232px; }
.hero h1 { margin: 6px 0 0; font: 600 32px/1.2 var(--display); color: var(--head); }
.hero .lead { max-width: 560px; }
/* The keys keep the column's width, or the shrink-to-fit row wraps them. */
.hero-keys { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; width: 100%; }
/* Both keys take the same width, whatever their words are. */
.hero-keys .btn { flex: none; width: 220px; max-width: 100%; }

.hero-stage { position: relative; width: 490px; height: 460px; flex: none; }
.hero-art {
  position: absolute; right: 0; bottom: 0; height: 430px; width: auto;
  filter: drop-shadow(0 10px 22px rgba(24, 43, 84, .22));
}
.phone {
  position: absolute; left: 0; bottom: 10px; z-index: 1; width: 322px; height: 207px; padding: 8px;
  border-radius: 24px; border: 1px solid var(--frame); background: var(--surface);
  box-shadow: 0 16px 34px rgba(24, 43, 84, .18);
}
.phone > * { width: 100%; height: 100%; border-radius: 17px; display: block; object-fit: cover; }
a.phone { display: block; cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease; }
a.phone:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(24, 43, 84, .24); }
a.phone:focus-visible { outline: none; box-shadow: var(--ring), 0 16px 34px rgba(24, 43, 84, .18); }
/* The shot opened over the page (app.js): a click anywhere or Esc puts it away. */
.zoom { padding: 0; border: 0; background: none; max-width: 96vw; max-height: 94vh; overflow: visible; cursor: zoom-out; }
.zoom::backdrop { background: rgba(24, 33, 58, .82); }
.zoom img {
  display: block; width: min(96vw, 1600px, calc(94vh * 1.6)); height: auto; border-radius: 14px;
  border: 1px solid var(--frame); box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.phone-wait {
  display: grid; place-content: center; justify-items: center; gap: 8px; padding: 0 18px; text-align: center;
  border: 2px dashed var(--frame); background: var(--surface-2); color: var(--text-3); font-size: 13px; line-height: 1.45;
}
.phone-wait .i { width: 26px; height: 26px; background-color: var(--frame-strong); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 4px; }
.tile { padding: 18px; display: grid; gap: 8px; justify-items: start; }
.tile b { font: 600 15px/1.3 var(--display); color: var(--head); }
.tile p { margin: 0; color: var(--text-2); font-size: 13.5px; }

.points { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); }
.points li::marker { color: var(--frame); }

.site .keys { display: flex; flex-wrap: wrap; gap: 10px; }

/* The setup checklist: what to send, why, and what it looks like. */
.needs { list-style: none; margin: 0; padding: 0; display: grid; }
.needs > li { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--border); }
.needs > li:first-child { border-top: 0; padding-top: 0; }
.needs > li:last-child { padding-bottom: 0; }
.needs b { font: 600 14.5px/1.35 var(--display); color: var(--head); }
.needs .meta { color: var(--text-2); font-size: 13.5px; }
.needs code {
  justify-self: start; max-width: 100%; margin-top: 3px; padding: 5px 9px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2);
  font: 12.5px/1.55 var(--mono); white-space: pre-line; overflow-wrap: anywhere;
}

/* The live servers: a card each, the server's own logo on top. */
.servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 14px; }
.server-card { padding: 18px; display: grid; gap: 12px; align-content: start; }
.server-logo {
  display: grid; place-items: center; height: 130px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.server-logo img { max-width: 100%; max-height: 106px; width: auto; height: auto; }
.server-logo .avatar { width: 72px; height: 72px; }
.server-words { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.server-words h2 { font: 600 16px/1.3 var(--display); color: var(--head); }
.server-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.server-keys:empty { display: none; }
.server-keys .btn { flex: 1 1 auto; }

.faq { margin: 0; display: grid; gap: 16px; }
.faq dt { font: 600 15px/1.35 var(--display); color: var(--head); }
.faq dd { margin: 5px 0 0; color: var(--text-2); }

.log { list-style: none; margin: 0; padding: 0; display: grid; }
.log > li { padding: 18px 0; border-top: 1px solid var(--border); }
.log > li:first-child { border-top: 0; padding-top: 0; }
.log-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.log-head b { font: 600 17px/1.2 var(--display); color: var(--head); }
.log-head .meta { font-size: 12.5px; color: var(--text-3); }
.log p { margin: 6px 0 0; color: var(--text-2); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: var(--gold); color: #fff; font-size: 11.5px; font-weight: 700;
}
.message .body { margin: 12px 0 0; color: var(--text-2); }
.notes-edit { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; }
.notes-edit .input { height: 32px; font-size: 13px; }

/* --- the page a tenant sends its players to ------------------------------------------------------- */
.get { max-width: 620px; width: 100%; min-width: 0; margin: 0 auto; padding: 40px 20px 20px; flex: 1; display: grid; gap: 14px; align-content: start; }
.get .brand-logo { margin-bottom: 2px; }
.get .tenant-logo { display: block; max-width: min(320px, 100%); max-height: 130px; width: auto; height: auto; margin: 0 auto 2px; }
.get h1 { text-align: center; }
.logo-shot {
  display: grid; place-items: center; padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-strong);
}
.logo-shot img { max-width: 100%; max-height: 120px; width: auto; height: auto; }
.get h1 { margin: 0; font: 600 25px/1.3 var(--display); color: var(--head); text-align: center; }
.get .lead { margin: 0 0 10px; text-align: center; color: var(--text-2); }
.get h2 { margin: 0; font: 600 15px/1.35 var(--display); color: var(--head); }
.get p { margin: 0 0 10px; }
.get p:last-child { margin-bottom: 0; }
.get .steps .what b { color: var(--text); font-weight: 600; }
.get-body { display: grid; gap: 12px; }
.btn.big { height: 54px; font-size: 16px; gap: 10px; }
.btn.big .sub { font: 12.5px var(--mono); font-weight: 500; opacity: .7; }
.notes { border-top: 1px solid var(--border); padding-top: 12px; }
.notes p { margin: 0; color: var(--text-2); }
.get .snippet code { white-space: normal; overflow-wrap: anywhere; }

/* --- dialogs -------------------------------------------------------------------------------------- */
.modal {
  width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--frame-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.modal::backdrop { background: rgba(35, 45, 80, .45); }
/* The dialog stacks, whatever the page around it is doing: these sit inside
   the build rows, which are flex. */
.modal form { display: block; margin: 0; width: 100%; }
.modal .field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.modal .input, .modal textarea { width: 100%; }
.modal-head { padding: 18px 22px; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
.modal-head h2 { margin: 0; font: 600 16px/1.35 var(--display); color: var(--head); }
.modal-head p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.modal-body { padding: 18px 22px; display: grid; gap: 16px; }
.modal-keys {
  display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.notes-box { font: 13px/1.6 var(--mono); resize: vertical; }

/* What is new, as it was written: a line a fix. */
.notes-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; }
.notes-list li { padding: 0; border: 0; color: var(--text-2); }
.notes-list li::marker { color: var(--frame); }
.build-notes { margin-top: 8px; color: var(--text-2); font-size: 13px; }
.build-notes p { margin: 0 0 6px; }
.build-notes .notes-list { margin-top: 0; }

/* --- what a server pays --------------------------------------------------------------------------- */
.prices { list-style: none; margin: 0; padding: 0; display: grid; }
.price {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--border);
}
.price:first-child { border-top: 0; padding-top: 0; }
.price .grow { flex: 1; min-width: 0; }
.price b { display: block; font: 600 15px/1.35 var(--display); color: var(--head); }
.price .meta { display: block; margin-top: 3px; font-size: 13px; color: var(--text-3); }
.price .pill { margin-left: 8px; vertical-align: 1px; }
.price .amount { text-align: right; white-space: nowrap; }
.price .amount b { font: 600 19px/1.2 var(--display); color: var(--accent-text); }
.price .amount span { font-size: 12.5px; color: var(--text-3); }
.price.pick { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 12px; border-top-color: transparent; }
.price.pick + .price { border-top-color: transparent; }

/* The first payment, which is the one that matters, and the extensions under
   it in a frame of their own. */
.price-lead {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 16px;
  border: 1px solid var(--frame-strong); border-radius: var(--radius-sm); background: var(--surface-2);
}
.price-lead .grow { flex: 1; min-width: 0; }
.price-lead b { display: block; font: 600 17px/1.3 var(--display); color: var(--head); }
.price-lead .meta { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.price-lead .amount { text-align: right; white-space: nowrap; }
.price-lead .amount b { font: 600 26px/1.15 var(--display); color: var(--accent-text); }
.price-lead .amount span { font-size: 12.5px; color: var(--text-3); }
.price-group { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 14px 10px; }
.price-group-head {
  margin: 10px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}

/* --- alerts --------------------------------------------------------------------------------------- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-sm); margin-bottom: 22px; border: 1px solid; font-weight: 500; }
.alert.ok { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.alert.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }

/* --- sign-in -------------------------------------------------------------------------------------- */
.auth { flex: 1; min-width: 0; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 390px; padding: 28px; display: grid; gap: 18px; }
.auth-card h1 { margin: 0; font: 600 22px/1.25 var(--display); color: var(--head); }
.auth-card p { margin: 4px 0 0; color: var(--text-2); }
.auth-card .alert { margin: 0; }

.account { max-width: 560px; }
.foot-note { margin-top: 30px; color: var(--text-3); font-size: 12.5px; text-align: center; }
.site-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 22px 16px 30px; color: var(--text-3); font-size: 12.5px;
}
.site-foot img { height: 20px; width: auto; opacity: .8; }
.site-foot img[alt="dantoki"] { height: 18px; }
.site-foot .dot { opacity: .6; }
.foot-note code { font-family: var(--mono); }

/* --- narrow screens ------------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .topbar-in, .main { padding-left: 16px; padding-right: 16px; }
  .main { padding-top: 22px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 12px; }
  .stat { padding: 15px; gap: 12px; }
  .stat-icon { width: 36px; height: 36px; }
  .search input { width: 100%; }
  .head-actions, .search { width: 100%; }
  .head-actions .btn { flex: 1; }
  /* Four tabs (Usage, Diagnostics, Cloudflare, System) in a phone's width: the bar wraps to a second row rather
     than cutting the last tab off. */
  .head-actions .seg { display: flex; flex-wrap: wrap; }
  .head-actions .seg a { flex: 1 1 auto; text-align: center; padding: 7px 10px; font-size: 12px; }
  .hide-sm { display: none !important; }
  .grid, .tiles, .servers { grid-template-columns: minmax(0, 1fr); }
  .site-bar .topbar-in { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 8px; }
  .site-nav { justify-content: flex-start; row-gap: 6px; }
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .hero-words { justify-items: center; }
  .hero-keys { justify-content: center; }
  .hero h1 { font-size: 26px; }
  .hero-stage { width: 340px; height: 340px; }
  .hero-art { height: 320px; }
  .hero-words .brand-logo { margin: 0 auto 2px; }
  .phone { left: 0; bottom: 8px; width: 238px; height: 153px; padding: 6px; border-radius: 18px; }
  .phone-wait { font-size: 12px; gap: 8px; padding: 0 12px; }
  .section-head, .section-body { padding-left: 16px; padding-right: 16px; }
  .savebar { flex-wrap: wrap; padding: 11px; }
  .savebar .note { flex-basis: 100%; padding: 0 4px; }
  .savebar .btn { flex: 1; }
  .stat .value.mono { font-size: 13px; }
}

/* --- the Game menu card: a settings list, one row per menu key ------------------------------------ */
.mk-body { display: grid; gap: 10px; }
.mk-group { margin: 6px 0 0; }
.mk-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.mk { border-top: 1px solid var(--border); }
.mk:first-child { border-top: 0; }
.mk-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
/* The key as the bar draws it: the glyph's shape in the bar's white gradient over the map's dark. */
.mk-glyph {
  flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(160deg, #3b4d6e, #24314a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mk-art {
  width: 34px; height: 34px; background: linear-gradient(#ffffff, #cbd6e6);
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
}
.mk-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mk-title b { font: 600 15px/1.3 var(--display); color: var(--head); overflow-wrap: anywhere; }
.mk-sub { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
/* The big ON / OFF switch: green and ON, grey and OFF.  The checkbox stays the form field, invisible over it. */
.mk-switch { position: relative; flex: none; cursor: pointer; }
.mk-switch input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mk-track {
  position: relative; display: block; width: 76px; height: 32px; border-radius: 16px; background: #c3cad8;
  transition: background .15s; font: 700 12px/32px var(--mono); letter-spacing: .06em; color: #fff;
}
.mk-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s;
}
.mk-on, .mk-off { position: absolute; top: 0; }
.mk-on { left: 13px; display: none; }
.mk-off { right: 11px; }
.mk-switch input:checked + .mk-track { background: var(--good); }
.mk-switch input:checked + .mk-track::after { transform: translateX(44px); }
.mk-switch input:checked + .mk-track .mk-on { display: block; }
.mk-switch input:checked + .mk-track .mk-off { display: none; }
.mk-switch input:focus-visible + .mk-track { box-shadow: var(--ring); }
.mk.off { background: var(--surface-2); }
.mk.off .mk-title b { color: var(--text-3); }
.mk.off .mk-glyph { opacity: .45; }
.mk-edit { padding: 0 14px 12px 74px; }
.subfold > summary { width: max-content; max-width: 100%; font-size: 13px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.subfold[open] > summary { margin-bottom: 8px; }
.grf-key { display: grid; gap: 6px; margin-top: 12px; }
.mk-edit summary { width: max-content; max-width: 100%; font-size: 13px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.mk-edit[open] summary { margin-bottom: 12px; }
.mk-fields { gap: 14px 18px; }
.mk-note { font-size: 12.5px; font-weight: 600; color: var(--bad); }
.mk-note:empty { display: none; }
.mk-note.ok { color: var(--good); }
.mk-reset { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.mk-error { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bad-soft); color: var(--bad); font-size: 13px; font-weight: 600; }
.mk.error { box-shadow: inset 3px 0 0 var(--bad); }
.mk-foot { margin: 4px 0 0; }
@media (max-width: 640px) {
  .mk-head { gap: 10px; padding: 10px; }
  .mk-glyph { width: 40px; height: 40px; }
  .mk-art { width: 30px; height: 30px; }
  .mk-edit { padding: 0 10px 12px; }
  .mk-fields { grid-template-columns: minmax(0, 1fr); }
}

/* A card folded shut: its head is the summary; open it to change what is inside. */
.fold > summary { cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold:not([open]) > .section-head { border-bottom: 0; border-radius: var(--radius); }
.fold-chev { flex: none; width: 10px; height: 10px; margin: 8px 4px 0 2px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform .15s; }
.fold[open] > summary .fold-chev { transform: rotate(45deg); }

/* --- Alice, the site's mascot (mascot() in lib/view.php) ------------------------------------------ */
/* A sticker beside what a card says: a call to action, the download, an empty state. */
.mascot-row { display: flex; align-items: center; gap: 18px; }
.mascot-row .grow { flex: 1; min-width: 0; }
.mascot { flex: none; display: block; width: auto; height: 170px; filter: drop-shadow(0 6px 12px rgba(24, 43, 84, .16)); }
.get .mascot { height: 150px; }
/* Hooray on a "saved" notice in the register. */
.alert .grow { flex: 1; min-width: 0; }
.alert-mascot { flex: none; display: block; width: auto; height: 52px; margin: -8px -4px -10px 0; }
/* The 404 page: Alice with the map upside down. */
.lost .section-body { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 20px 26px; }
.lost .lost-art { height: 240px; }
.lost h1 { margin: 8px 0 0; font: 600 25px/1.3 var(--display); color: var(--head); }
.lost .keys { justify-content: center; }
@media (max-width: 640px) {
  .mascot-row { gap: 12px; }
  .mascot, .get .mascot { height: 104px; }
  /* Beside her, a key's words wrap rather than push the page wider. */
  .mascot-row .btn { max-width: 100%; height: auto; min-height: 38px; padding-top: 7px; padding-bottom: 7px; white-space: normal; text-align: left; }
  .mascot-row .btn.big { flex-wrap: wrap; }
  .lost .lost-art { height: 190px; }
  .alert-mascot { height: 42px; }
}


/* --- Account and Analytics: tables, pills, row menus, charts ---------------------------------------------- */
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.table-wrap.menus { overflow: visible; }
.table-wrap.menus td, .table-wrap.menus th { white-space: normal; }
.section-head.wrap { flex-wrap: wrap; align-items: center; }
/* The heading keeps a readable width; what sits beside it (a legend, a search) wraps under it instead of squeezing it. */
.section-head.wrap > .grow { flex: 1 1 240px; }
.section-head .search input { width: 200px; height: 34px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 22px; }
.table th:last-child, .table td:last-child { padding-right: 22px; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.table td b { color: var(--head); font-weight: 600; }
.table .right { text-align: right; font-variant-numeric: tabular-nums; }
.table-foot { padding: 10px 22px 12px; border-top: 1px solid var(--border); font-size: 12.5px; }
.muted { color: var(--text-3); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar.ini { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font: 600 12px var(--display); letter-spacing: .02em;
  background: hsl(var(--hue) 45% 90%); color: hsl(var(--hue) 35% 36%); border: 1px solid hsl(var(--hue) 40% 78%); flex: none; }
.avatar.ini.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.sm { width: 30px; height: 30px; }
.pill.violet { background: #eef0fa; border-color: color-mix(in srgb, var(--violet) 45%, transparent); color: #5a6aae; }
.pill.plain { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-2); }
.stat-icon.bad { color: var(--bad); }
.shown-once { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; margin-bottom: 22px; border-color: color-mix(in srgb, var(--good) 40%, var(--border-strong)); background: var(--good-soft); }
.shown-once .section-icon { color: var(--good); }
.add-admin { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; border-top: 1px solid var(--border-strong); background: var(--surface-2); }
.add-admin .field { margin: 0; }
.add-admin .field.grow { flex: 1; min-width: 180px; }
.add-admin .help.full { flex-basis: 100%; }
.rowmenu { position: relative; display: inline-block; }
.rowmenu summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.rowmenu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius-sm); padding: 6px; display: grid; gap: 2px; text-align: left; box-shadow: 0 6px 18px rgba(67, 78, 112, .12); }
.menu-list form { display: contents; }
.menu-list button, .menu-list a { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--text); font: inherit; padding: 8px 10px; border-radius: 5px; cursor: pointer; text-align: left; }
.menu-list button:hover, .menu-list a:hover { background: var(--surface-2); text-decoration: none; }
.menu-list button.danger { color: var(--bad); }
.menu-list button.danger:hover { background: var(--bad-soft); }
.seg { display: inline-flex; border: 1px solid var(--frame); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.seg a { padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; border-right: 1px solid var(--border-strong); }
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--surface-2); color: var(--accent-text); }
.stat.tall { align-items: flex-start; }
.stat .sub { font-size: 12px; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.tall .value { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.stat.tall .value .delta { flex: none; }
/* A pill or a change badge is never cut off: the line wraps under the number instead (a +8265% month, a long expiry). */
.stat .sub:has(.pill) { white-space: normal; overflow: visible; }
.stat .value:has(.delta) { overflow: visible; }
.stat .sub .pill { white-space: normal; max-width: 100%; }
.delta { font: 600 11.5px/1 system-ui, sans-serif; padding: 4px 7px; border-radius: 999px; border: 1px solid transparent; vertical-align: middle; }
.delta.up { background: var(--good-soft); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.delta.down { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.delta.flat, .delta.new { background: var(--surface-2); color: var(--text-2); border-color: var(--border-strong); }
.chart-card { margin-bottom: 14px; }
.chart-body { padding: 10px 14px 8px; }
.chart { width: 100%; height: auto; display: block; }
.chart.narrow { display: none; }
.chart .grid { stroke: var(--border-strong); stroke-width: 1; }
.chart .axis { font: 11px system-ui, sans-serif; fill: var(--text-3); }
.chart rect:hover { opacity: .8; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.share { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.share-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); overflow: hidden; }
.share-bar i { display: block; height: 100%; border-radius: 999px; }
.spark { width: 96px; height: 26px; display: block; }
@media (max-width: 900px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* The header's menu: the page you are on is filled in. */
.topnav { display: flex; gap: 2px; margin-right: 8px; }
.btn.ghost.on { background: var(--surface-2); color: var(--accent-text); border-color: var(--border-strong); }
@media (max-width: 640px) { .topnav { margin-right: 0; } .keychip { display: none; } }
.table a.plain { color: inherit; text-decoration: none; }
.table a.plain:hover { text-decoration: underline; }
.section-icon.bad { color: var(--bad); }
.table td.wrap, .table td div { white-space: normal; }
/* A crash's reason or a packet's bytes: one long token, broken wherever it must be. */
.table td.wrap.mono { overflow-wrap: anywhere; }
/* The analytics filters (servers, the top N, the chips) stay in view while a long tab scrolls, under the top bar;
   on a phone they would take a third of the screen, so there they scroll with the page. */
@media (min-width: 768px) { .analytics-bar { position: sticky; top: 72px; z-index: 15; } }
.stat .value.small { font: 600 15px/1.3 var(--display); }
.btn.xs { height: 28px; padding: 0 10px; font-size: 12.5px; }
/* The tenants page's five cards: one row, one height, one size of figure. */
.stats.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats.five .stat { padding: 16px; gap: 12px; }
.stats.five .value { font-size: 20px; }
.stats.five .value.mono { font: 600 13px/1.5 var(--mono); color: var(--text); letter-spacing: -.01em; }
.stats.five .stat > div:not(.stat-icon) { flex: 1; }
.stat.click { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.stat.click:hover { background: var(--surface-2); border-color: var(--frame); }
.stat.click:focus-visible { outline: none; box-shadow: var(--ring); }
.stat.click { position: relative; }
.stat.click .go { position: absolute; top: 9px; right: 11px; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--accent-text); }
@media (max-width: 1100px) { .stats.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stats.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- the owner panel's pieces (and a switch any form may use) ---------------------------------------------- */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .knob { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--frame); position: relative; transition: background .15s, border-color .15s; flex: none; }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 1px solid var(--frame-strong); transition: transform .15s; }
.switch input:checked + .knob { background: var(--accent); border-color: var(--frame-strong); }
.switch input:checked + .knob::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .knob { box-shadow: var(--ring); }
.field .error { font-size: 12.5px; color: var(--bad); font-weight: 500; }
.stat-icon.gold { color: var(--gold); }
.stat .sub .pill { margin-top: 2px; }
textarea.input { height: auto; padding: 9px 12px; line-height: 1.5; resize: vertical; }
@media (max-width: 640px) {
  .stats.owner { grid-template-columns: 1fr; gap: 10px; }
  .stats.owner .value, .stats.owner .label { white-space: normal; }
  .savebar { bottom: 8px; flex-wrap: wrap; }
  .savebar .note { flex-basis: 100%; }
}

/* --- "On this page", the editor's list of cards ------------------------------------------------------------- */
.layout.with-toc { grid-template-columns: 190px minmax(0, 1fr) 340px; }
.toc { position: sticky; top: 80px; font-size: 13px; }
.toc-title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--border-strong); }
.toc a { display: block; padding: 6px 12px; margin-left: -1px; color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc a:hover { background: var(--surface-2); color: var(--text); }
.toc a.on { color: var(--accent-text); border-left-color: var(--frame-strong); background: var(--surface-2); font-weight: 600; }
form[data-dirty] section.card { scroll-margin-top: 76px; }
@media (max-width: 1100px) {
  .layout.with-toc { grid-template-columns: minmax(0, 1fr) 340px; }
  .toc { position: static; grid-column: 1 / -1; }
  .toc-title { margin-left: 0; }
  .toc ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .toc a { border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 11px; margin: 0; background: var(--surface); }
  .toc a.on { border-color: var(--frame-strong); }
}
@media (max-width: 1020px) { .layout.with-toc { grid-template-columns: minmax(0, 1fr); } }
.fold > summary.section-head { align-items: center; }
.fold > summary .pill { margin-left: auto; }
.fold-thumb { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-strong); padding: 3px; }
.fold-thumb.round { border-radius: 10px; object-fit: cover; padding: 0; }
.aside-card .fold > summary .pill { margin-left: 0; }


/* --- the tables' bar: search, filters, columns, sort, CSV (app.js) ---------------------------------------------- */
.tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 22px; border-bottom: 1px solid var(--border); }
.tbar-search { flex: 1 1 200px; max-width: 320px; }
.tbar-search input { width: 100%; height: 32px; padding-left: 12px; }
.tbar .btn { height: 32px; }
.tbar-sort { display: none; width: auto; height: 32px; padding: 0 8px; font-size: 13px; }
.tbar-count { margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.tbar-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px; }
.tbar-chips:not(:empty) { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.tbar-chips .chip { cursor: pointer; font-family: inherit; }
.tbar-chips .chip:hover { border-color: var(--frame); color: var(--text); }
.tbar-panel { display: grid; gap: 10px; padding: 12px 22px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); }
.tbar-panel[hidden] { display: none; }
.tbar-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tbar-row .input { width: auto; flex: 1 1 160px; height: 34px; }
.tbar-row.end { justify-content: flex-end; }
.tbar-value { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tbar-value .input { flex: 1 1 220px; height: 34px; }
.tbar-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover, .table th.sortable:focus-visible { color: var(--accent-text); outline: none; }
.table th.sortable::after { content: "↕"; margin-left: 5px; opacity: .3; font-size: 11px; }
.table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--accent-text); }

/* --- analytics: the server filter, R2 figures, meters ----------------------------------------------------------- */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin-bottom: 14px; }
.filterbar .chips-view { gap: 6px; align-items: center; }
.filterbar .chip { text-decoration: none; font-family: inherit; }
.filterbar .chip i, .pick-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.inline-field .input { width: auto; height: 34px; padding: 0 8px; }
.inline-field select.input { min-width: 64px; padding-right: 30px; }
.pick { position: relative; }
.pick > summary { list-style: none; cursor: pointer; }
.pick > summary::-webkit-details-marker { display: none; }
.pick-menu {
  position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: 300px; max-width: calc(100vw - 32px);
  display: grid; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(24, 43, 84, .16);
}
.pick-menu .search input { width: 100%; height: 32px; }
.pick-actions { display: flex; gap: 6px; }
.pick-list { max-height: 280px; overflow-y: auto; display: grid; gap: 2px; }
.pick-item { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: var(--radius-sm); font-size: 13.5px; cursor: pointer; }
.pick-item:hover { background: var(--surface-2); }
.pick-item[hidden] { display: none; }
.pick-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-foot { display: flex; justify-content: flex-end; }
.mini-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.mini-stats > div { display: grid; gap: 2px; padding: 14px 18px; background: var(--surface); min-width: 0; }
.mini-stats .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.mini-stats b { font: 600 19px/1.25 var(--display); color: var(--head); }
.mini-stats .muted { font-size: 12px; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--good); }
.meter.warn i { background: var(--gold); }
.meter.bad i { background: var(--bad); }
.stat .grow { flex: 1; min-width: 0; }
.small-value { font-size: 13px; font-weight: 500; }
.disk { display: grid; gap: 2px; }
.disk-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; }
.disk-head .muted { font-size: 12.5px; }
.disk-path { font-size: 11.5px; overflow-wrap: anywhere; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.stat .sub { white-space: normal; }
@media (max-width: 1020px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- phones: no part of a page wider than the screen ------------------------------------------------------------ */
.aside, .layout > *, .aside > *, .account-grid > * { min-width: 0; }
.aside { grid-template-columns: minmax(0, 1fr); }
.logo-shot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (max-width: 640px) {
  .chart.wide { display: none; }
  .chart.narrow { display: block; }
  .chart.narrow .axis { font-size: 13px; }
  .topbar-in { gap: 6px; }
  .brand { gap: 8px; min-width: 0; }
  .brand .logo { width: 36px; }
  .brand-text span { display: none; }
  .wordmark { width: 92px; }
}
/* Below this the menu and the account button take the row: the logo alone, so the wordmark never runs under them. */
@media (max-width: 560px) {
  .topbar .brand-text { display: none; }
  /* A card heading with a pill or a button beside it: the heading keeps a readable width and the rest wraps under. */
  .section-head { flex-wrap: wrap; }
  .section-head > .grow { flex: 1 1 180px; }
  .section-head > .fold-chev { margin-left: auto; }
  .topnav .btn, .topbar form .btn { padding: 0 9px; }
  .stat .label, .stat .value { white-space: normal; }
  .stat.tall .value { flex-wrap: wrap; font-size: 20px; gap: 4px 8px; }
  .stat-icon { display: none; }
  .mini-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mini-stats > div:last-child { grid-column: 1 / -1; }
  .tbar, .tbar-chips, .tbar-panel { padding-left: 16px; padding-right: 16px; }
  .tbar-search { max-width: none; flex-basis: 100%; }
  .tbar-sort { display: block; }
  .tbar-count { margin-left: 0; }
  .filterbar .inline-field { flex-wrap: wrap; }
  /* Each row a card, each cell its column's name beside its value (the names come from app.js). */
  .table thead { display: none; }
  .table, .table tbody { display: block; }
  .table tr { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .table tr[hidden] { display: none; }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 !important;
    border: 0; white-space: normal; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .table td[hidden] { display: none; }
  .table td::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3); text-align: left; }
  .table td:first-child { justify-content: flex-start; text-align: left; }
  .table td:first-child::before { display: none; }
  .table td[data-label=""]::before, .table td:not([data-label])::before { display: none; }
  .table tbody tr:hover td { background: none; }
  .table .share { min-width: 0; flex: 1; max-width: 200px; }
  .table-wrap.menus { overflow: visible; }
  .table-wrap.menus .rowmenu .menu-list { right: 0; left: auto; }
}

.flag { font-size: 16px; line-height: 1; vertical-align: -2px; margin-right: 2px; }

/* --- table headings: the label sorts, ▾ filters (app.js) -------------------------------------------------------- */
.table th.sortable::after { content: none; }
.colhead { display: inline-flex; align-items: center; gap: 2px; }
.collabel { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.collabel:focus-visible, .colbtn:focus-visible { outline: 2px solid var(--frame-strong); outline-offset: 2px; border-radius: 3px; }
.collabel::after { content: "↕"; margin-left: 5px; opacity: .25; font-size: 11px; }
.table th[aria-sort="ascending"] .collabel::after { content: "↑"; opacity: 1; }
.table th[aria-sort="descending"] .collabel::after { content: "↓"; opacity: 1; }
.colbtn { all: unset; cursor: pointer; padding: 0 4px; font-size: 11px; line-height: 18px; border-radius: 3px; opacity: .3; }
.table th:hover .colbtn, .colbtn:hover, .colbtn:focus-visible { opacity: 1; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.table th.filtered { color: var(--accent-text); }
.table th.filtered .colbtn { opacity: 1; background: var(--accent); color: #fff; }
.colpop { position: absolute; z-index: 40; display: grid; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--frame);
  border-radius: var(--radius); box-shadow: 0 14px 30px rgba(24, 43, 84, .2); font-size: 13px; text-transform: none; letter-spacing: 0; }
.colpop[hidden] { display: none; }
.colpop .input { height: 32px; width: 100%; }
.colpop-sort, .colpop-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.colpop-list { max-height: 240px; overflow-y: auto; display: grid; gap: 3px; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.colpop-list .tbar-check { align-items: flex-start; overflow-wrap: anywhere; }
.colpop-list mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 2px; }
.colpop-hint { font-size: 12px; }
.colpop-foot { display: flex; justify-content: flex-end; gap: 6px; }
.colpop-add[hidden] { display: none; }
.linkbtn { all: unset; cursor: pointer; color: var(--accent-text); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--head); }
.tbar-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 22px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
.tbar-info .grow { flex: 1; }
.tbar-size { width: auto; height: 28px; padding: 0 6px; font-size: 12.5px; }
.tbar-pager { display: inline-flex; align-items: center; gap: 2px; }
.tbar-pager .muted { padding: 0 6px; }
.tbar-pager .btn:disabled { opacity: .35; cursor: default; }
.tbar-count { display: none; }
.tbar-info .tbar-count { display: inline; }
.tbar-empty { padding: 16px 22px; font-size: 13px; }
.tbar-empty[hidden] { display: none; }

/* --- the header: search, the account menu ------------------------------------------------------------------------ */
kbd { font: 11px var(--mono); padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-3); background: var(--surface-2); }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu .menu-list { right: 0; min-width: 210px; }
.usermenu .menu-list a, .usermenu .menu-list button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font: inherit; font-size: 13.5px; background: none; border: 0; width: 100%; cursor: pointer; text-align: left; }
.usermenu .menu-list a:hover, .usermenu .menu-list button:hover { background: var(--surface-2); }
.usermenu .menu-list button.danger { color: var(--bad); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; padding-top: 10px; }
.menu-head { display: grid; padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-note { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--text-3); }
.avatar.ini.xs { width: 22px; height: 22px; font-size: 9.5px; }
@media (max-width: 900px) { .hide-md { display: none !important; } }
.palette { position: fixed; inset: 0; z-index: 60; background: rgba(20, 28, 48, .35); display: grid; place-items: start center; padding: 10vh 16px 16px; }
.palette[hidden] { display: none; }
.palette-in { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20, 28, 48, .3); padding: 10px; display: grid; gap: 8px; }
.palette-in .input { height: 42px; font-size: 15px; width: 100%; }
.palette-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; display: grid; gap: 2px; }
.palette-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.palette-list li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-list li .muted { margin-left: auto; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-list li[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--frame-strong); }
.palette-foot { font-size: 11.5px; padding: 0 4px; }

/* --- overview, monitor, releases ----------------------------------------------------------------------------------- */
.attention { margin-bottom: 14px; }
.attn-list { list-style: none; margin: 0; padding: 6px 0; }
.attn-list li { display: flex; align-items: center; gap: 10px; padding: 8px 22px; font-size: 13.5px; }
.attn-list li + li { border-top: 1px solid var(--border); }
.attn-list a { color: var(--text); text-decoration: none; min-width: 0; }
.attn-list a:hover { text-decoration: underline; }
.attn-list .pill { flex: none; }
.feed { list-style: none; margin: 0; padding: 8px 0; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 7px 22px; font-size: 13px; min-width: 0; }
.feed li .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.feed li .muted { flex: none; font-size: 12px; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.feed-dot.alert { background: var(--gold); }
.targets { display: grid; gap: 4px; }
.target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; }
.target code { font: 12px var(--mono); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-3); }
.dot.up { background: var(--good); }
.dot.down { background: var(--bad); }
.hstrip { display: inline-flex; gap: 1px; align-items: stretch; height: 14px; width: 288px; max-width: 100%; min-width: 0; }
.hstrip i { flex: 1 1 0; min-width: 0; border-radius: 1px; background: var(--border-strong); }
.target .hstrip { flex: 1 1 160px; }
.hstrip i.up { background: var(--good); }
.hstrip i.down { background: var(--bad); }
.hstrip i.part { background: var(--gold); }
.rowmenu.wide .menu-list { min-width: 300px; }
.form-pop { display: grid; gap: 8px; padding: 12px; text-align: left; white-space: normal; font-size: 13px; }
.form-pop .input { width: 100%; }
.sub-head { margin: 14px 0 8px; font: 600 13px var(--display); color: var(--head); }
.kinds { display: grid; gap: 6px; }
.kind { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.kind:hover { background: var(--surface-2); }
.kind > span { display: grid; gap: 2px; }
.kind .muted { font-size: 12px; }
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shares { display: grid; gap: 6px; }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 7.5em; align-items: center; gap: 10px; font-size: 13px; }
.share-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row .muted { font-size: 12px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* The Disconnects card's own filters, under its head. */
.rep-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.rep-filter .input { max-width: 260px; }
.mini-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.diff summary { cursor: pointer; font-size: 12.5px; }
.difftable { margin-top: 6px; border-collapse: collapse; font: 12px var(--mono); width: 100%; }
.difftable th { text-align: left; font-weight: 600; padding: 3px 8px 3px 0; color: var(--text-2); white-space: nowrap; vertical-align: top; letter-spacing: 0; text-transform: none; background: none; border: 0; font-size: 12px; }
.difftable td { padding: 3px 6px; vertical-align: top; overflow-wrap: anywhere; border: 0; white-space: normal; }
.difftable .old { color: var(--bad); text-decoration: line-through; }
.difftable .new { color: var(--good); }

/* --- analytics pictures --------------------------------------------------------------------------------------------- */
.map-body { padding: 12px 14px 4px; }
.worldmap { width: 100%; height: auto; display: block; }
.worldmap path { stroke: var(--surface); stroke-width: .4; }
.worldmap path.empty { fill: var(--border-strong); opacity: .55; }
.worldmap path:hover { stroke: var(--head); stroke-width: .8; }
.hgrid { display: grid; gap: 3px; overflow-x: auto; }
.hgrid-row { display: grid; grid-template-columns: 36px repeat(24, minmax(10px, 1fr)); gap: 3px; align-items: center; font-size: 11px; color: var(--text-3); }
.hgrid-row.head span { text-align: left; }
.hgrid-row i { height: 18px; border-radius: 3px; background: color-mix(in srgb, #3f8a52 calc(var(--a) * 100%), var(--surface-2)); }
.funnel { display: grid; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) 60px; align-items: center; gap: 12px; }
.funnel-label { display: grid; font-size: 13px; }
.funnel-label .muted { font-size: 11.5px; }
.funnel-bar { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-strong); }
.funnel-bar i { display: block; height: 100%; background: #7f8ec6; border-radius: 999px; }
.funnel-n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--head); }
@media (max-width: 640px) {
  .split2 { grid-template-columns: minmax(0, 1fr); }
  .funnel-row { grid-template-columns: minmax(0, 1fr) 50px; }
  .funnel-bar { grid-column: 1 / -1; grid-row: 2; }
  .mini-stats.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mini-stats.three > div:last-child { grid-column: 1 / -1; }
  .mini-stats.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .attn-list li, .feed li, .tbar-info { padding-left: 16px; padding-right: 16px; }
  .attn-list li { flex-wrap: wrap; }
  .hgrid-row { grid-template-columns: 30px repeat(24, minmax(9px, 1fr)); gap: 2px; }
  .rowmenu.wide .menu-list { min-width: min(300px, calc(100vw - 32px)); }
  .table .colhead { display: none; }
  .table td > .targets { flex: 1 1 auto; min-width: 0; justify-items: end; }
  .target { justify-content: flex-end; }
  .target .hstrip { width: 100%; flex-basis: 100%; }
}

/* --- the Servers page's views (app.js) ----------------------------------------------------------------------------- */
.seg button { all: unset; cursor: pointer; padding: 7px 12px; font-size: 13px; font-weight: 500; color: var(--text-2); border-right: 1px solid var(--border-strong); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--surface-2); color: var(--accent-text); }
.seg button:focus-visible { box-shadow: var(--ring); }
.tenants-grid[hidden], .tenants-list[hidden] { display: none; }
.tenant-health { display: contents; }
.tenants-list { margin-bottom: 14px; }
/* Large: a tile per server, its logo big. */
.tenants-grid.view-large { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.view-large .tenant { text-align: center; }
.view-large .tenant-head { flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px 14px; }
.view-large .tenant-head .avatar { width: 88px; height: 88px; font-size: 28px; border-radius: 18px; }
.view-large .tenant-title { display: grid; justify-items: center; flex: none; max-width: 100%; }
.view-large .tenant-title span { font-size: 12px; }
.view-large .tenant-head > .pill { display: none; }
.view-large .tenant-body, .view-large .tenant-foot { display: none; }
.view-large .add-card { min-height: 0; }
/* Compact: one line per server. */
.tenants-grid.view-compact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.view-compact .tenant-head { padding: 8px 14px; gap: 10px; }
.view-compact .tenant-head .avatar { width: 30px; height: 30px; font-size: 11px; }
.view-compact .tenant-title { display: flex; flex-direction: row; gap: 10px; align-items: baseline; min-width: 0; }
.view-compact .tenant-body { display: none; }
.view-compact .tenant { flex-direction: row; align-items: center; }
.view-compact .tenant-head { flex: 1; min-width: 0; border-bottom: 0; }
.view-compact .tenant-foot { border-top: 0; padding: 0 14px; white-space: nowrap; }
.view-compact .add-card { min-height: 0; flex-direction: row; padding: 10px 14px; }
@media (max-width: 640px) {
  .view-compact .tenant-foot { display: none; }
  .view-compact .tenant-head > .pill { display: none; }
  .tenants-grid.view-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tenants-grid .tenant-head { flex-wrap: wrap; }
  .tenants-grid:not(.view-large):not(.view-compact) .tenant-title { flex-basis: calc(100% - 64px); }
  .view-compact .tenant-head { flex-wrap: nowrap; }
  .view-compact .tenant-title span { display: none; }
  .view-compact .tenant-title b { overflow: hidden; text-overflow: ellipsis; }
}
.warn-text { color: #8a5f22; }
.input.over { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 15%, transparent); }
.attn-list li form { margin-left: auto; flex: none; }
.attn-list a.grow { flex: 1; }
.xbtn { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm); font-size: 18px; line-height: 1; color: var(--text-3); }
.xbtn:hover, .xbtn:focus-visible { background: var(--surface-2); color: var(--bad); }
.attn-hidden { padding: 6px 22px 12px; font-size: 12.5px; }
.attn-hidden > a { color: var(--text-3); }
.attn-list.dim { padding: 4px 0 0; }
.attn-list.dim li { padding-left: 0; padding-right: 0; opacity: .75; }
.attn-list.dim .muted { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) { .attn-hidden { padding-left: 16px; padding-right: 16px; } .attn-list.dim .muted { white-space: normal; } }

/* A table with a row menu cannot scroll sideways (the menu would be cut off), so below a desk's width it goes
   one card per row, as on a phone, rather than running past its card. */
@media (max-width: 1020px) {
  .table-wrap.menus .table thead { display: none; }
  .table-wrap.menus .table, .table-wrap.menus .table tbody { display: block; }
  .table-wrap.menus .table tr { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .table-wrap.menus .table tr[hidden] { display: none; }
  .table-wrap.menus .table tbody tr:last-child { border-bottom: 0; }
  .table-wrap.menus .table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 !important;
    border: 0; white-space: normal; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .table-wrap.menus .table td[hidden] { display: none; }
  .table-wrap.menus .table td::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3); text-align: left; }
  .table-wrap.menus .table td:first-child { justify-content: flex-start; text-align: left; }
  .table-wrap.menus .table td:first-child::before { display: none; }
  .table-wrap.menus .table td[data-label=""]::before, .table-wrap.menus .table td:not([data-label])::before { display: none; }
  .table-wrap.menus .table tbody tr:hover td { background: none; }
  .table-wrap.menus .table .colhead { display: none; }
  .table-wrap.menus .table td > .targets { flex: 1 1 auto; min-width: 0; justify-items: end; }
}
/* Server cards: the pills go on their own line under the name, so three never push past the card. */
.tenants-grid:not(.view-large):not(.view-compact) .tenant-head { flex-wrap: wrap; }
.tenants-grid:not(.view-large):not(.view-compact) .tenant-title { flex-basis: calc(100% - 60px); }
.tenants-grid:not(.view-large):not(.view-compact) .tenant-head > .pill:first-of-type { margin-left: 56px; }
.view-compact .tenant-head { flex-wrap: nowrap; }
/* Paths and commands in help text break rather than run out of their box. */
.help, .section-head p, .page-head p, .help code, .section-body p code { overflow-wrap: anywhere; }
@media (max-width: 1020px) { .tbar.for-menus .tbar-sort { display: block; } }
/* A wide menus table (the crashes list, with its many columns) turns into one
   card per row earlier, at the desk-narrow band where it would otherwise run
   past its card; a menus table cannot scroll (its row menu would be clipped).
   The cells' data-label comes from the header via app.js, as below 1020 px. */
@media (max-width: 1200px) {
  .table-wrap.menus.early-cards .table thead { display: none; }
  .table-wrap.menus.early-cards .table, .table-wrap.menus.early-cards .table tbody { display: block; }
  .table-wrap.menus.early-cards .table tr { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .table-wrap.menus.early-cards .table tbody tr:last-child { border-bottom: 0; }
  .table-wrap.menus.early-cards .table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 !important; border: 0; white-space: normal; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .table-wrap.menus.early-cards .table td[hidden] { display: none; }
  .table-wrap.menus.early-cards .table td::before { content: attr(data-label); flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; }
  .table-wrap.menus.early-cards .table td:first-child { justify-content: flex-start; text-align: left; }
  .table-wrap.menus.early-cards .table td:first-child::before { display: none; }
  .table-wrap.menus.early-cards .table td[data-label=""]::before, .table-wrap.menus.early-cards .table td:not([data-label])::before { display: none; }
  .table-wrap.menus.early-cards .table tbody tr:hover td { background: none; }
  .table-wrap.menus.early-cards .table .colhead { display: none; }
}

/* --- Monitor: Status (arturi.to/status's way) ----------------------------------------------------------------- */
.status-banner { display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid; font-size: 15px; }
.status-banner .muted { margin-left: auto; font-size: 12.5px; }
.status-banner.up { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); }
.status-banner.partial, .status-banner.unknown { background: #fdf3e3; border-color: color-mix(in srgb, #b07a2b 35%, transparent); color: #8a5f22; }
.status-banner.major { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.dot.unknown { background: var(--gold); }
.status-row { padding: 16px 22px; display: grid; gap: 6px; }
.status-row + .status-row { border-top: 1px solid var(--border); }
.status-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status-head .grow { flex: 1; min-width: 0; }
.status-head .muted { font-size: 12.5px; }
.status-now { font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-now.up { color: var(--good); } .status-now.down { color: var(--bad); } .status-now.unknown { color: var(--text-3); }
.status-detail { font-size: 12px; overflow-wrap: anywhere; }
.sbars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; }
.sbars i { height: 26px; border-radius: 2px; background: var(--border-strong); }
.sbars i.up { background: #3f8a52; } .sbars i.degraded { background: #d08a3c; } .sbars i.down { background: var(--bad); }
.sbars i:hover { filter: brightness(1.2); }
.sbars-foot { display: flex; justify-content: space-between; font-size: 11.5px; }
@media (max-width: 640px) {
  .status-row { padding: 14px 16px; }
  .status-head { flex-wrap: wrap; }
  .sbars { grid-template-columns: repeat(45, minmax(0, 1fr)); }
  .sbars i:nth-child(-n+45) { display: none; }
  .sbars-foot span:first-child::after { content: " (45 shown)"; }
}
/* The small tables inside a cell (what changed, in the history) keep their own layout when the table around them
   goes one card per row. */
.table .difftable { display: table !important; }
.table .difftable tbody { display: table-row-group !important; }
.table .difftable tr { display: table-row !important; padding: 0 !important; border: 0 !important; }
.table .difftable th, .table .difftable td { display: table-cell !important; text-align: left !important; }
.table .difftable td::before { content: none !important; }

/* --- System: its sub-tabs and the clocks -------------------------------------------------------------------- */
.subtabs { margin-bottom: 14px; }
.clocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.clock { padding: 14px 18px; display: grid; gap: 4px; min-width: 0; }
.clock .label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); font-weight: 500; }
.clock b { font: 600 26px/1.15 var(--mono); color: var(--head); letter-spacing: -.01em; }
.clock .muted { font-size: 12px; overflow-wrap: anywhere; }
.tz-pick { width: auto; max-width: 100%; height: 26px; padding: 0 6px; font-size: 12px; }
@media (max-width: 1180px) { .clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .clocks { grid-template-columns: minmax(0, 1fr); } .clock b { font-size: 22px; } }

/* --- Monitor, Health: the views (list is the table; cards, board and compact are .health-views) --------------------- */
.health-views[hidden] { display: none; }
.health-views { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.hcard { display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--border-strong); }
.hcard.up { border-top-color: var(--good); }
.hcard.down { border-top-color: var(--bad); }
.hcard.partial { border-top-color: var(--gold); }
.hcard-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
.hcard-title { display: grid; flex: 1; min-width: 0; }
.hcard-title b, .hcard-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard-title span { font-size: 12px; color: var(--text-3); }
.hcard-body { padding: 0 16px 12px; flex: 1; min-width: 0; }
.hcard-big, .hcard-line { display: none; }
.hcard-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--border); font-size: 12.5px; }
/* Board: a tile per server, its state as the colour, the uptime large; for a look across the room. */
.health-views.view-board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.view-board .hcard { text-align: center; border-top-width: 6px; }
.view-board .hcard.up { background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.view-board .hcard.down { background: color-mix(in srgb, var(--bad) 9%, var(--surface)); }
.view-board .hcard.partial { background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.view-board .hcard-head { flex-direction: column; gap: 8px; padding: 18px 14px 6px; }
.view-board .hcard-head .avatar { width: 64px; height: 64px; font-size: 22px; border-radius: 14px; }
.view-board .hcard-title { flex: none; max-width: 100%; justify-items: center; }
.view-board .hcard-big { display: grid; gap: 2px; padding: 4px 14px 14px; }
.view-board .hcard-big b { font: 600 26px/1.1 var(--display); color: var(--head); }
.view-board .hcard-big span { font-size: 12px; color: var(--text-3); }
.view-board .hcard-body { display: none; }
.view-board .hcard-foot { justify-content: center; }
/* Compact: one line per server. */
.health-views.view-compact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.view-compact .hcard { flex-direction: row; align-items: center; border-top-width: 1px; border-left: 4px solid var(--border-strong); }
.view-compact .hcard.up { border-left-color: var(--good); }
.view-compact .hcard.down { border-left-color: var(--bad); }
.view-compact .hcard.partial { border-left-color: var(--gold); }
.view-compact .hcard-head { flex: 1 1 auto; padding: 8px 14px; gap: 10px; }
.view-compact .hcard-head .avatar { width: 30px; height: 30px; font-size: 11px; }
.view-compact .hcard-title { display: flex; gap: 10px; align-items: baseline; }
.view-compact .hcard-body { display: none; }
.view-compact .hcard-line { display: flex; align-items: center; gap: 14px; white-space: nowrap; font-size: 12.5px; padding-right: 6px; }
.view-compact .hcard-uptime { font-weight: 600; min-width: 52px; text-align: right; }
.view-compact .hcard-foot { border-top: 0; padding: 0 12px 0 0; }
.view-compact .hcard-foot > span { display: none; }
.hcard-foot > span { flex: 1 1 160px; min-width: 0; }
.view-board .hcard-foot { flex-direction: column; }
.view-board .hcard-foot > span { flex: none; }
.view-board .hcard-foot > .rowmenu { margin-left: 0; }
.hcard-foot > .rowmenu { margin-left: auto; }
@media (max-width: 640px) {
  .view-compact .hcard-title span, .view-compact .hcard-ms, .view-compact .hcard-since { display: none; }
  .view-compact .hcard-head > .pill { display: none; }
  .health-views.view-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The phone table's right-aligned address rows do not apply inside a card. */
.hcard .target { justify-content: flex-start; }
/* Health addresses on a desk: each address on its line, its last day as a full-width strip under it, larger. */
.hstrip-scale { display: none; }
@media (min-width: 1021px) {
  .targets { gap: 10px; min-width: 0; }
  .table .targets { min-width: 300px; }
  .target { display: grid; grid-template-columns: auto auto 1fr; gap: 3px 8px; font-size: 13.5px; }
  .target code { font-size: 13.5px; }
  .target .dot { width: 10px; height: 10px; }
  .target .hstrip { grid-column: 1 / -1; width: 100%; height: 20px; gap: 2px; }
  .target .hstrip i { border-radius: 2px; }
  .target:last-child .hstrip-scale { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
}
@media (min-width: 1280px) { .table .targets { min-width: 440px; } }

/* --- the download page's requirements card ---------------------------------------------------------- */
.req-body { display: grid; gap: 14px; }
.req-list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.req-list dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.req-list dd { margin: 0; color: var(--text); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.req-list dd .help { display: block; margin-top: 2px; }
@media (min-width: 560px) {
  .req-list { grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; align-items: baseline; }
}
.phone-check { border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 8px; }
.phone-check .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; min-width: 0; }
.phone-check .row .what { color: var(--text-3); min-width: 72px; }
.phone-check .row .value { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.phone-check .verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.phone-check .verdict .help { flex: 1 1 200px; min-width: 0; }

/* Monitor, Diagnosis: one finding a row (the kind, then what it is), the mono text wrapping anywhere. */
.diag-list { display: grid; gap: 0; }
.diag { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); min-width: 0; }
.diag:first-child { border-top: 0; padding-top: 0; }
.diag.is-seen { opacity: .62; }
.diag .who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.diag .what { font-family: var(--mono); overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.diag .bytes { font-family: var(--mono); color: var(--text-3); font-size: 12.5px; overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.diag .meta { color: var(--text-3); font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; }
.diag .links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
@media (max-width: 640px) { .diag { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* The board and large cards centre their title with a grid, which let a long server name size itself past the card:
   the title takes the card's width and its name wears the ellipsis (centred by the card's text-align). */
.view-board .hcard-title, .view-large .tenant-title { width: 100%; justify-items: stretch; }
.view-board .hcard-title b, .view-board .hcard-title span, .view-large .tenant-title b, .view-large .tenant-title span { min-width: 0; max-width: 100%; }