/* 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);
  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); }

/* --- 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%);
}
.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); }
.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.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); }
.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: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; }

/* 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; }
.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; }

.hero { text-align: center; padding: 22px 8px 10px; display: grid; justify-items: center; gap: 4px; }
.hero h1 { margin: 6px 0 0; font: 600 32px/1.2 var(--display); color: var(--head); }
.hero .lead { max-width: 560px; }
.hero-keys { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
/* Both keys take the same width, whatever their words are. */
.hero-keys .btn { flex: none; width: 220px; max-width: 100%; }

.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); }

.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; }
  .hide-sm { display: none !important; }
  .grid, .tiles { 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; }
  .hero h1 { font-size: 26px; }
  .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; }
}