/* Frostfire Forge Hosting dashboard: what tools.css does not have. Loaded after it.
   Taken from the Gateway (F:\Projects\Frostfire-Forge-Gateway\src\webserver\public) on 2026-10-08:
   css/controlpanel.css for the rules of .cp-nav-group, .cp-viewer*, .cp-status, .cp-stat*, .cp-updated,
   .cp-kpi*, .cp-spark*, .cp-chart*, .cp-plot* (class names kept) and, because charts.ts draws them, the
   bars, columns, shares and meter; css/frontend.css for the light palette; css/tools.css for the tokens
   the light theme gives other values. Redrawn on 2026-10-09 with tools.css: graphite, one blue accent.
   Order: the frame (side navigation, bar, page head), the figures and charts, the light theme, then the
   control plane's own classes, all starting with hp-, and last the narrow windows. */

/* ====================================================================== frame */

/* The page's column is wider than the toolkit's own: the dashboard's forms, cards and tables use the screen. */
:root { --page-w: 1480px; }

/* The side navigation (shell.ts): the brand, then the pages in their groups. */
.hp-logo { display: block; flex-shrink: 0; width: 28px; height: 28px; object-fit: contain; }
a.tl-brand, a.tl-nav-item { text-decoration: none; }
a.tl-brand { color: inherit; }
.cp-nav-list { flex-shrink: 1; min-height: 0; overflow-y: auto; }
.cp-nav-group {
  padding: var(--s-4) 10px 6px;
  color: var(--text-faint);
  font-size: var(--t-sm);
  font-weight: 500;
}
.cp-nav-group:first-child { padding-top: 0; }
.cp-nav .tl-nav-item > .tl-count { background: var(--warning-soft); color: var(--warning-text); }

/* The header of a page behind a log in holds two rows: the bar, then the page's head. */
/* The header has no box of its own, so its rows stand in the scrolling column itself: the bar (who is logged
   in, the theme, Log Out) stays at the top while the page's head and the page scroll under it. */
.tl-main > .tl-topbar { display: contents; }
.hp-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-shrink: 0; align-items: center; gap: var(--s-4); height: 52px; padding: 0 var(--gutter); border-bottom: 1px solid var(--border); background: var(--bg); }
.hp-pagehead { flex-shrink: 0; }
.hp-bar-start { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.hp-bar-brand { display: none; }
.hp-back { display: inline-flex; align-items: center; gap: 6px; margin-left: calc(var(--s-2) * -1); padding: 6px var(--s-2); border-radius: var(--r-sm); color: var(--text-muted); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.hp-back:hover { background: var(--surface-hover); color: var(--text-strong); }
.hp-bar-end { display: flex; align-items: center; gap: var(--s-1); min-width: 0; margin-left: auto; }

/* When the page was last drawn, and who is looking at it. */
.cp-status { display: flex; align-items: center; gap: var(--s-4); min-width: 0; margin-right: var(--s-2); overflow: hidden; }
.cp-stat { display: flex; align-items: baseline; gap: 6px; padding-left: var(--s-4); border-left: 1px solid var(--border); white-space: nowrap; }
.cp-stat-label { color: var(--text-muted); font-size: var(--t-sm); }
.cp-stat-value { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-updated { color: var(--text-faint); font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-viewer { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: var(--s-2); padding: 0 var(--s-2) 0 var(--s-4); border-left: 1px solid var(--border); }
.cp-viewer:empty { display: none; }
.cp-viewer-words { display: grid; min-width: 0; line-height: 1.3; }
.cp-viewer-name { max-width: 200px; color: var(--text-strong); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-viewer-note { max-width: 200px; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The page's head: its title, one line of context where a page has one, and its main action at the end. */
.hp-pagehead { padding: 28px var(--gutter) 0; }
.hp-pagehead-row { display: flex; align-items: flex-start; gap: var(--s-4); max-width: var(--page-w); margin: 0 auto; }
.hp-pagehead-words { flex: 1; min-width: 0; }
.hp-pagehead-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-3); min-height: var(--control-h); }
.hp-pagehead-title .tl-title { min-width: 0; overflow-wrap: anywhere; }
.hp-pagehead-lead { margin-top: 2px; color: var(--text-muted); overflow-wrap: anywhere; }
.hp-pagehead-lead:empty { display: none; }
.hp-pagehead-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.hp-pagehead-actions:empty { display: none; }
.hp-banner-lines { display: grid; flex: 1; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* ==================================================== headline figures and charts */

.cp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
.cp-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 128px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.cp-kpi-label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.cp-kpi-value { display: flex; align-items: baseline; gap: 6px; color: var(--text-strong); font: 600 var(--t-2xl)/1.3 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-kpi-unit { color: var(--text-muted); font: 400 13px/1 var(--font); letter-spacing: 0; }
.cp-kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-height: 20px; margin-bottom: var(--s-2); color: var(--text-muted); font-size: var(--t-sm); }
.cp-kpi-note { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: var(--t-sm); }

/* The trend of a headline figure: no axes, the last reading marked. */
.cp-spark { position: relative; height: 30px; margin-top: auto; }
.cp-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cp-spark-line { fill: none; stroke: var(--data-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cp-spark-area { fill: var(--data-1); opacity: 0.1; }
.cp-spark-end {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--data-1);
  box-sizing: content-box;
  transform: translate(-50%, -50%);
}

/* The title with the figures of the time shown beside it, or under it where the card is narrow. */
.cp-chart .tl-card-head { flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-4); }
.cp-chart .tl-card-words { flex: 0 0 auto; }
.cp-chart .tl-card-title { white-space: nowrap; }
.cp-chart .tl-card-body { padding: var(--s-2) var(--s-3) var(--s-3); }
.cp-chart-summary { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); }
.cp-chart-stat { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.cp-chart-stat-label { color: var(--text-muted); font-size: var(--t-sm); }
.cp-chart-stat-value { color: var(--text-strong); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.cp-plot { position: relative; margin: var(--s-2) var(--s-2) var(--s-2) var(--s-1); }
.cp-plot-svg { display: block; border-radius: var(--r-sm); cursor: crosshair; touch-action: none; }
.cp-plot-grid line { stroke: var(--grid); stroke-width: 1; }
.cp-plot-grid line.cp-plot-base { stroke: var(--axis); }
.cp-plot-label { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.cp-plot-line { fill: none; stroke: var(--data-1); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.cp-plot-area { fill: var(--data-1); opacity: 0.1; }
.cp-plot-dot { fill: var(--data-1); }
.cp-plot-end, .cp-plot-marker circle { fill: var(--data-1); stroke: var(--surface); stroke-width: 2; }
.cp-plot-marker line { stroke: var(--text-faint); stroke-width: 1; }
/* Dashes are kept for this one line: a level to stay under, not part of the grid. */
.cp-plot-threshold line { stroke: var(--warning); stroke-width: 1; stroke-dasharray: 4 4; }
.cp-plot-threshold .cp-plot-label { fill: var(--text-muted); }
.cp-plot-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.cp-plot-tip strong { color: var(--text-strong); font-size: var(--t-base); font-variant-numeric: tabular-nums; }
.cp-plot-tip span { color: var(--text-muted); font-size: var(--t-sm); }
.cp-plot-tip time { color: var(--text-faint); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.cp-plot-empty { position: absolute; inset: 12px 14px 24px 46px; display: grid; place-items: center; padding: 0 var(--s-4); color: var(--text-muted); font-size: 13px; text-align: center; }

/* Breakdowns, for the bars, columns, shares and meter of charts.ts. */
.cp-bars { display: flex; flex-direction: column; gap: 2px; margin: 0 calc(var(--s-2) * -1); }
.cp-bar-row {
  display: grid;
  grid-template-columns: minmax(64px, 32%) minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
}
button.cp-bar-row:hover { background: var(--surface-hover); }
button.cp-bar-row:hover .cp-bar-fill { filter: brightness(1.15); }
.cp-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-bar-track { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.cp-bar-fill { flex: 0 0 auto; width: calc((100% - 40px) * var(--share, 0)); min-width: 2px; height: 10px; border-radius: 0 3px 3px 0; background: var(--data-1); }
.cp-bar-value { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-bar-share { color: var(--text-muted); font-size: var(--t-sm); text-align: right; font-variant-numeric: tabular-nums; }

.cp-cols { display: flex; gap: var(--s-2); min-height: 176px; }
.cp-col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cp-col-stack { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1); width: 100%; min-height: 0; border-bottom: 1px solid var(--axis); }
.cp-col-value { color: var(--text-strong); font-size: var(--t-sm); font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; }
.cp-col-fill { width: min(24px, 72%); height: calc((100% - 20px) * var(--share, 0)); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--data-1); }
.cp-col:hover .cp-col-fill { filter: brightness(1.15); }
.cp-col-none { min-height: 0; }
.cp-col-label { color: var(--text-faint); font-size: var(--t-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }

.cp-shares-bar { display: flex; gap: 2px; height: 10px; }
.cp-shares-piece { flex-basis: 0; min-width: 3px; }
.cp-shares-piece:first-child { border-radius: 3px 0 0 3px; }
.cp-shares-piece:last-child { border-radius: 0 3px 3px 0; }
.cp-shares-piece:only-child { border-radius: 3px; }
.cp-shares-piece:hover { filter: brightness(1.15); }
.cp-shares-none { border-radius: 3px; background: var(--grid); }
.cp-series-1 { background: var(--data-1); }
.cp-series-2 { background: var(--data-2); }
.cp-series-3 { background: var(--data-3); }
.cp-shares-legend { display: grid; margin-top: var(--s-3); }
.cp-shares-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 5px 0; }
.cp-shares-key { width: 10px; height: 10px; border-radius: 3px; }
.cp-shares-value { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-shares-share { color: var(--text-muted); font-size: var(--t-sm); text-align: right; font-variant-numeric: tabular-nums; }

/* How much of a limit is used: the accent while there is room, amber when it runs short, red when it is full. */
.cp-meter { height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.cp-meter-fill { display: block; min-width: 4px; height: 100%; border-radius: var(--r-pill); background: var(--accent-ring); }
.cp-meter-warning .cp-meter-fill { background: var(--warning); }
.cp-meter-danger .cp-meter-fill { background: var(--danger); }

/* ================================================================ light theme */

/* The values of the light theme. Every token here is one tools.css sets for the dark theme: the light theme
   changes values and adds none, and no rule of either file writes a colour of its own, so this block is the
   whole of it. The three data colours, the spacing, the fonts and the radii stay as tools.css has them. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f8;
  --nav-bg: #fcfcfd;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f6f6f7;
  --surface-hover: rgba(15, 16, 18, 0.045);
  --surface-active: rgba(15, 16, 18, 0.08);
  --fill: rgba(15, 16, 18, 0.06);
  --fill-strong: rgba(15, 16, 18, 0.11);
  --border: #e5e5e8;
  --border-soft: #eeeef0;
  --border-strong: #d3d3d8;
  --border-hover: #b4b4bb;
  --text: #2a2c30;
  --text-strong: #0e0f11;
  --text-muted: #5c5f66;
  --text-faint: #6c6f77;
  --control-bg: #ffffff;
  --btn-bg: #ffffff;
  --knob: #ffffff;
  --scroll: rgba(15, 16, 18, 0.25);
  --backdrop: rgba(15, 16, 18, 0.4);
  --tip-bg: #1b1c20;
  --tip-text: #f5f6f7;
  --grid: rgba(15, 16, 18, 0.08);
  --axis: rgba(15, 16, 18, 0.25);
  --shadow: 0 16px 40px rgba(15, 16, 18, 0.14), 0 2px 8px rgba(15, 16, 18, 0.07);
  --shadow-card: 0 1px 2px rgba(15, 16, 18, 0.04);
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-text: #1d4ed8;
  --accent-ring: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.09);
  --accent-line: rgba(37, 99, 235, 0.45);
  --on-accent: #ffffff;
  --success: #16a34a;
  --success-text: #166534;
  --success-soft: rgba(22, 163, 74, 0.1);
  --warning: #c2710c;
  --warning-text: #92400e;
  --warning-soft: rgba(217, 119, 6, 0.1);
  --warning-line: rgba(217, 119, 6, 0.35);
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --danger-soft: rgba(220, 38, 38, 0.07);
  --danger-line: rgba(220, 38, 38, 0.32);
  --danger-solid: #dc2626;
  --danger-solid-hover: #b91c1c;
  --info-text: #1d4ed8;
  --info-soft: rgba(37, 99, 235, 0.07);
  --info-line: rgba(37, 99, 235, 0.28);
}

/* On a light surface a remark is written in the darker shade of its own colour. */
:root[data-theme="light"] .tl-banner-danger { color: var(--danger-text); }
:root[data-theme="light"] .tl-banner-warning { color: var(--warning-text); }
:root[data-theme="light"] .tl-banner-info { color: var(--info-text); }
:root[data-theme="light"] .tl-note-warning { color: var(--warning-text); }
:root[data-theme="light"] .tl-note-danger { color: var(--danger-text); }
:root[data-theme="light"] .tl-error { color: var(--danger-text); }

/* ================================================================== own rules */

/* A text link. A server's name in a list is a link too, written as a name. */
.hp-link, .tl-table td > a, .tl-note a, .tl-row-note > a { color: var(--accent-text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.12s; }
:is(.hp-link, .tl-table td > a, .tl-note a, .tl-row-note > a):hover { text-decoration-color: currentColor; }
.hp-server-name, .tl-table td:first-child > a { color: var(--text-strong); font-weight: 500; }
/* A card that is a list and nothing else: the table's header is the top of the card. */
.hp-list-card .tl-table thead th { border-top: 0; }
.hp-list-card .tl-table thead th:first-child { border-top-left-radius: var(--r-lg); }
.hp-list-card .tl-table thead th:last-child { border-top-right-radius: var(--r-lg); }
.hp-list-card > .tl-empty { padding: 72px var(--s-5); }
a.tl-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Kept for a screen reader, not drawn. */
.hp-unseen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------- the card in the middle */

/* Log in, sign up and the pages behind a mailed link: the logo, a title, the form, nothing else on screen. */
.hp-login-screen { height: 100%; padding: var(--s-6) var(--s-4); overflow-y: auto; }
.hp-login { width: min(400px, 100%); padding: var(--s-2) var(--s-3) var(--s-3); text-align: left; }
.hp-login .tl-card-head { padding-top: var(--s-6); }
.hp-login .tl-card-words { display: grid; justify-items: center; text-align: center; }
.hp-login-logo { display: block; width: 44px; height: 44px; margin-bottom: var(--s-4); object-fit: contain; }
.hp-login .tl-card-title { font: 600 var(--t-xl)/1.3 var(--font-display); letter-spacing: -0.02em; }
.hp-login .tl-card-lead { margin-top: var(--s-1); font-size: var(--t-base); }
.hp-login .tl-card-body { padding-top: var(--s-6); padding-bottom: var(--s-5); }
.hp-login .tl-actions { margin-top: var(--s-5); }
.hp-login .tl-actions .tl-btn-block { width: 100%; }
.hp-login .tl-card-body .tl-note { margin: 0; }
.hp-form-error { margin: var(--s-3) 0 0; }
/* The links under the button. */
.hp-auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-3); margin: var(--s-5) 0 0; color: var(--text-muted); font-size: 13px; }
.hp-auth-links:empty { display: none; }
.hp-auth-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); font-size: 0; }

/* -------------------------------------------------------------- the front page */

/* The pages for everyone: a bar across the top, then the page scrolling under it. */
.hp-site { display: flex; flex-direction: column; height: 100%; overflow-y: auto; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .hp-site { scroll-behavior: auto; }
}
.hp-site-top { position: sticky; top: 0; z-index: 5; justify-content: space-between; height: 60px; background: var(--bg); }
.hp-site-brand { text-decoration: none; color: inherit; }
.hp-site-top-end { display: flex; align-items: center; gap: var(--s-2); }
.hp-site-top-link { padding: 0 var(--s-2); color: var(--text-muted); font-size: var(--t-sm); font-weight: 500; }
.hp-site-top-link:hover { color: var(--text-strong); }
.hp-site-main { flex: 1 0 auto; padding: 0 var(--gutter); }
.hp-site-page { display: flex; flex-direction: column; max-width: 1360px; min-height: 100%; margin: 0 auto; }

.hp-hero { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: 88px 0 64px; text-align: center; }
.hp-eyebrow { color: var(--accent-text); font-size: 13px; font-weight: 600; }
.hp-hero-title { color: var(--text-strong); font: 600 52px/1.08 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.hp-hero-line { display: block; }
.hp-hero-lead { margin-top: var(--s-3); color: var(--text-strong); font-size: 21px; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.hp-hero-text { max-width: 640px; color: var(--text-muted); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.hp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
.hp-hero-actions .tl-btn { height: 44px; padding: 0 22px; font-size: var(--t-md); }
.hp-hero-note { color: var(--text-faint); font-size: 13px; }

.hp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); align-items: stretch; }
.hp-plan { position: relative; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.hp-plan.is-popular { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.hp-plan-flag { position: absolute; top: var(--s-5); right: var(--s-5); height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; line-height: 22px; }
.hp-plan-head { display: grid; gap: var(--s-3); }
.hp-plan-name { color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-plan-price { display: flex; align-items: baseline; gap: 6px; }
.hp-plan-amount { color: var(--text-strong); font: 600 40px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-plan-per { color: var(--text-muted); }
.hp-plan-list { display: grid; gap: 10px; margin: 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--border); list-style: none; }
.hp-plan-item { display: flex; align-items: flex-start; gap: 10px; color: var(--text); }
.hp-plan-item .tl-icon { margin-top: 3px; color: var(--success); }
.hp-plan .tl-btn { margin-top: auto; }
/* What a plan gives, one row to a feature: under the price on a card, under the size choice on New server. */
.hp-plan-features { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hp-feature { display: flex; align-items: flex-start; gap: 8px; color: var(--text-strong); font-size: var(--t-base); line-height: 1.4; }
.hp-feature .tl-icon { flex: none; margin-top: 2px; color: var(--accent-text); }
.hp-plan-head .hp-plan-features { margin-top: var(--s-2); }
.hp-new-features:not(:empty) { margin-top: var(--s-2); }
.hp-new-features .hp-plan-features { padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken); }
/* The plan choice on New Server: one card to a plan, the chosen one outlined. The select behind them is unseen. */
.hp-field-wide { grid-column: 1 / -1; }
.hp-field-wide select[hidden] { display: none; }
.hp-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
/* Four plans stand in one row, or two and two when the card is narrow: never three and one. */
.hp-field-wide { container-type: inline-size; }
.hp-picks[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Five or six would squeeze each other in one row: three to a row. */
.hp-picks[data-count="5"], .hp-picks[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 680px) {
  .hp-picks[data-count="4"], .hp-picks[data-count="5"], .hp-picks[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 360px) {
  .hp-picks[data-count] { grid-template-columns: minmax(0, 1fr); }
}
.hp-plans[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1020px) {
  .hp-plans[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hp-plans[data-count] { grid-template-columns: minmax(0, 1fr); }
}
/* A feature the plan lacks and another plan has: a red cross and quieter words. */
.hp-feature.is-missing { color: var(--text-muted); }
.hp-feature.is-missing .tl-icon { color: var(--danger); }
.hp-pick { display: grid; align-content: start; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s; }
.hp-pick:hover { border-color: var(--accent-line); }
.hp-pick.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.hp-pick-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.hp-pick-name { color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-pick-mark { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 50%; background: var(--surface); }
.hp-pick.is-chosen .hp-pick-mark { border: 5px solid var(--accent); }
.hp-pick-price { display: flex; align-items: baseline; gap: 6px; }
.hp-pick-amount { color: var(--text-strong); font: 600 26px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hp-pick .hp-feature { font-size: 13px; }
/* Change Plan: the cards of New Server in a dialog. A plan that cannot be chosen is quieter; the one the server is on is not chosen, only marked. */
.tl-dialog-wide.hp-plan-dialog { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: min(820px, calc(100vh - 48px)); }
.hp-plan-dialog .hp-form-error { margin-top: var(--s-3); }
.hp-pick:disabled { opacity: 0.55; cursor: not-allowed; }
.hp-pick:disabled:hover { border-color: var(--border); }
.hp-pick.is-current:disabled { opacity: 1; cursor: default; border-style: dashed; }

/* What every server comes with, three to a row. */
/* Under the plans: the offer that is sold by hand, one wide card with its words on the left and the way to ask on the right. */
.hp-split { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); margin-top: var(--s-5); padding: var(--s-6); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.hp-split-words { display: grid; gap: var(--s-3); min-width: 0; }
.hp-split-title { color: var(--text-strong); font-size: var(--t-lg, 20px); font-weight: 600; }
.hp-split-text { max-width: 64ch; color: var(--text); }
.hp-split-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--s-6); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.hp-split-act { display: grid; flex: none; gap: var(--s-2); justify-items: center; }
/* Every plan side by side in one table: a column each, the features named once on the left. */
.hp-compare { padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.hp-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.hp-compare-corner { width: 19%; }
/* Names and prices stand on one line across the columns: every header leaves the room of the "Most popular" flag above its name, and a tag under the price hangs below. */
.hp-compare-plan { padding: calc(var(--s-5) + 22px + var(--s-3)) var(--s-5) var(--s-4); font-weight: 400; text-align: left; vertical-align: top; }
.hp-compare-plan.is-popular { padding-top: var(--s-5); }
.hp-compare-plan .hp-trial-line, .hp-compare-plan .hp-sale-line { margin-top: 8px; }
.hp-compare-name { display: block; margin-bottom: var(--s-2); color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-compare-amount { color: var(--text-strong); font: 600 34px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-compare-flag { display: inline-block; height: 22px; margin-bottom: var(--s-3); padding: 0 9px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; line-height: 22px; }
.hp-compare-label { padding: 12px var(--s-4) 12px var(--s-2); border-top: 1px solid var(--border); color: var(--text-muted); font-weight: 500; text-align: left; }
.hp-compare-cell { padding: 12px var(--s-5); border-top: 1px solid var(--border); color: var(--text); font-variant-numeric: tabular-nums; }
.hp-compare-yes, .hp-compare-no { display: inline-flex; vertical-align: middle; }
.hp-compare-yes { color: var(--success); }
.hp-compare-no { color: var(--danger); }
.hp-compare-act { padding: var(--s-5) var(--s-5) var(--s-4); border-top: 1px solid var(--border); }
.hp-compare-table .is-popular { background: var(--accent-soft); }
.hp-compare-plan.is-popular { border-radius: 12px 12px 0 0; }
.hp-compare-act.is-popular { border-radius: 0 0 12px 12px; }
.hp-plans.hp-plans-narrow { display: none; }
@media (max-width: 900px) {
  .hp-compare { display: none; }
  .hp-plans.hp-plans-narrow { display: grid; }
}
.hp-split-mail { color: var(--text-muted); font-size: 13px; }
.hp-split-mail:hover { color: var(--accent-text); }
.hp-split-note { color: var(--text-muted); font-size: 12px; }
@media (max-width: 560px) {
  .hp-split-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hp-split { flex-direction: column; align-items: stretch; }
  .hp-split-act { justify-items: start; }
}
/* The front page in parts: each part has a centred title with a line under it. */
.hp-section-head { display: grid; gap: 8px; justify-items: center; padding: 72px 0 var(--s-6); text-align: center; scroll-margin-top: 56px; }
.hp-section-title { color: var(--text-strong); font: 600 28px/1.2 var(--font-display); letter-spacing: -0.02em; }
/* One line where the screen has the room; where it has not, the lines are evened out so no word is left alone. */
.hp-section-lead { max-width: 96ch; color: var(--text-muted); text-wrap: balance; }
/* What the platform is: six cards, three to a row, each a mark, a title and its reasons. */
.hp-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
/* The mark and the title share one line at the head of the card; the reasons run under them at reading size. */
.hp-pillar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: var(--s-5) var(--s-3); padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.hp-pillar .hp-get-mark { width: 40px; height: 40px; margin-bottom: 0; background: var(--accent-soft); border-color: transparent; }
.hp-pillar .hp-get-title { font-size: 18px; letter-spacing: -0.01em; }
.hp-pillar-list { display: grid; grid-column: 1 / -1; gap: 12px; margin: 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--border); list-style: none; }
.hp-pillar-list .hp-feature { font-size: 15px; line-height: 1.45; }
.hp-pillar-list .hp-feature .tl-icon { margin-top: 3px; }
@media (max-width: 960px) {
  .hp-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hp-pillars { grid-template-columns: minmax(0, 1fr); }
  .hp-section-head { padding-top: 56px; }
  .hp-section-title { font-size: 23px; }
}
.hp-section-head + .hp-gets { padding-top: 0; }
.hp-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); padding: 72px 0 0; }
.hp-get { display: grid; gap: 6px; align-content: start; }
.hp-get-mark { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-2); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--accent-text); }
.hp-get-title { color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-get-text { color: var(--text-muted); }
.hp-places { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-3); padding: 56px 0 0; color: var(--text-muted); }
.hp-places .tl-tag { height: 26px; padding: 0 10px; font-size: 13px; }
.hp-site-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: auto; padding: var(--s-6) 0; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 13px; }
.hp-site-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.hp-site-foot-rows { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
@media (max-width: 640px) { .hp-site-foot-rows { align-items: flex-start; } }
.hp-site-foot-link { color: var(--text-muted); }
.hp-site-foot-link:hover { color: var(--accent-text); }
.hp-site-foot-social { display: inline-flex; align-items: center; }
.hp-site-foot-social svg { width: 16px; height: 16px; fill: currentColor; }
.hp-site-foot-gap { height: 88px; }
.hp-site-fail { display: grid; justify-items: start; gap: var(--s-4); padding: var(--s-12) 0; }

/* Bundles: a long list scrolls inside its own card, with its column names kept in sight. */
.hp-capped .tl-table-scroll { max-height: 300px; }
.hp-capped .tl-table-plain th { position: sticky; }
.hp-capped-list { max-height: 440px; overflow-y: auto; }

/* ------------------------------------------------------------------ the fleet */

/*
 * The server table of Fleet folds its least useful columns by the table's own width, so that it fits a 1280 px window
 * (a table about 980 px wide) without a sideways scroll. Measured with long hostnames: all twelve columns need 1254 px,
 * without Region, Bundle and Agent 1052, also without Hostname 780, also without Disk 729. Narrower than that the table
 * still scrolls inside its own wrapper (.tl-table-scroll), never the page.
 */
/* The audit log: seven fixed columns that share the card's width. A long value is cut (its whole text is the
   tooltip) and the detail wraps, so the table never scrolls sideways; narrow cards drop From, then Target. */
.hp-audit { table-layout: fixed; }
.hp-audit th, .hp-audit td { overflow: hidden; text-overflow: ellipsis; }
.hp-audit th:nth-child(1) { width: 140px; }
.hp-audit th:nth-child(2) { width: 17%; }
.hp-audit th:nth-child(3) { width: 230px; }
.hp-audit th:nth-child(4) { width: 14%; }
.hp-audit th:nth-child(5) { width: 14%; }
.hp-audit th:nth-child(7) { width: 130px; }
.hp-audit td .tl-item-words > span { overflow: hidden; text-overflow: ellipsis; }
.hp-audit td .tl-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.hp-audit td.hp-audit-detail { height: auto; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.4; }
@media (max-width: 1280px) {
  .hp-audit th:nth-child(7), .hp-audit td:nth-child(7) { display: none; }
}
@media (max-width: 1000px) {
  .hp-audit th:nth-child(5), .hp-audit td:nth-child(5) { display: none; }
  .hp-audit th:nth-child(3) { width: 150px; }
}
@media (max-width: 720px) {
  .hp-audit th:nth-child(4), .hp-audit td:nth-child(4) { display: none; }
  .hp-audit th:nth-child(1) { width: 104px; }
  .hp-audit th:nth-child(2) { width: 26%; }
  .hp-audit th:nth-child(3) { width: 120px; }
}
.hp-fleet-table { container: hp-fleet / inline-size; }
@container hp-fleet (max-width: 1139px) {
  .hp-fold-1 { display: none; }
}
@container hp-fleet (max-width: 1059px) {
  .hp-fold-2 { display: none; }
}
@container hp-fleet (max-width: 789px) {
  .hp-fold-3 { display: none; }
}

/* The row of usage figures on Fleet: machines and certificates against their limits. */
.hp-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.hp-caps .cp-kpi { min-height: 0; gap: var(--s-1); }
.hp-caps .cp-meter { margin-top: var(--s-2); }

/* ==================================================================== Server page */

/* Beside the server's name: its pill and its tags. Under it: its address. */
.hp-server-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.hp-server-host { color: var(--text-muted); overflow-wrap: anywhere; }

/* Buttons of the actions of a server, as many as the answer lists. */
.hp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* The operator's actions: a bar of what is done every day (the power as one joined control), and a More menu
   at its end for the rest. */
.hp-actions.hp-toolbar { align-items: center; }
.hp-seg { display: inline-flex; }
.hp-seg > .tl-btn { border-radius: 0; }
.hp-seg > .tl-btn + .tl-btn { margin-left: -1px; }
.hp-seg > .tl-btn:first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.hp-seg > .tl-btn:last-child { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.hp-seg > .tl-btn:is(:hover, :focus-visible):not(:disabled) { position: relative; z-index: 1; }
.hp-more { position: relative; margin-left: auto; }
.hp-more > .tl-btn > .tl-icon:last-child { margin-right: -2px; transition: transform 0.12s; }
.hp-more.is-open > .tl-btn > .tl-icon:last-child { transform: rotate(180deg); }
.hp-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 232px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); box-shadow: var(--shadow); }
.hp-menu[hidden] { display: none; }
.hp-menu-part + .hp-menu-part { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.hp-menu .tl-btn { display: flex; justify-content: flex-start; width: 100%; height: 32px; padding: 0 10px; border-color: transparent; border-radius: var(--r-sm); background: transparent; box-shadow: none; color: var(--text); font-weight: 400; }
.hp-menu .tl-btn:hover:not(:disabled), .hp-menu .tl-btn:focus-visible { background: var(--surface-hover); color: var(--text-strong); }
.hp-menu .tl-btn-danger { color: var(--danger-text); }
.hp-menu .tl-btn-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-text); }
.hp-menu .tl-btn:disabled { color: var(--text-faint); }
/* The card must not cut the menu off where it hangs below it. */
.tl-card:has(> .tl-card-body > .hp-toolbar) { overflow: visible; }
@media (max-width: 640px) {
  .hp-more { margin-left: 0; }
  .hp-menu { right: auto; left: 0; }
}
.hp-services-label { margin: var(--s-5) 0 var(--s-2); }
.hp-whys { display: flex; flex-direction: column; gap: var(--s-1); }
.hp-actions + .hp-whys:not(:empty):not(.hp-unseen) { margin-top: var(--s-3); }
.hp-loading { color: var(--text-muted); font-size: 13px; }
.hp-tab-error,
.hp-broken { color: var(--danger-text); font-size: 13px; }

/* A job: what it is and how it stands, then what it says, then its steps (.hp-steps, one list to a round). */
.hp-job { display: grid; gap: var(--s-3); min-width: 0; }
.hp-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: 13px; }
.hp-job-head .tl-row-controls { margin-left: auto; }
.hp-job-title { color: var(--text-strong); font-size: var(--t-base); font-weight: 600; }
.hp-rounds { display: grid; gap: var(--s-2); }
.hp-round { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; }

/* The steps of a job, one to a line: a dot in the colour of its state, its name, and the state in words. */
.hp-steps { display: grid; margin: 0; padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: 10px; list-style: none; }
.hp-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--s-3);
  padding: 10px 0 10px 18px;
  color: var(--text);
}
.hp-step + .hp-step { border-top: 1px solid var(--border-soft); }
.hp-step::before { content: ""; position: absolute; top: 17px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--fill-strong); }
.hp-step-pending { color: var(--text-muted); }
.hp-step-running { color: var(--text-strong); }
.hp-step-running::before { background: var(--accent-ring); animation: tl-blink 1.4s ease-in-out infinite; }
.hp-step-done::before { background: var(--success); }
.hp-step-failed::before { background: var(--danger); }
.hp-step-skipped { color: var(--text-faint); }
.hp-step-name { min-width: 0; overflow-wrap: anywhere; }
.hp-step-state { color: var(--text-muted); font-size: var(--t-sm); text-align: right; }
.hp-step-note { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.hp-step-failed .hp-step-state, .hp-step-failed .hp-step-note { color: var(--danger-text); }

/* The one-time link in its dialog: kept whole, and broken where it must be rather than run off the edge. */
.hp-secret { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* The choices of a question (select, checkbox) sit a little apart from the sentences above them. */
.tl-dialog-scroll .tl-field { margin-top: var(--s-4); }
.tl-dialog-scroll .tl-fields { margin-top: var(--s-4); }
.tl-dialog-scroll .tl-fields > .tl-field { margin-top: 0; }
.tl-dialog-scroll .tl-dialog-body + .tl-dialog-body { margin-top: var(--s-2); }

/* The log view: a game's lines as they are, in a fixed-width face, scrolling inside their own box. */
.hp-log {
  max-height: min(60vh, 560px);
  min-height: 200px;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-sunken);
  color: var(--text);
  font: 400 var(--t-sm)/1.6 var(--font-mono);
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* A row of choices that stands over a tab's own parts, not inside a card: Logs (.hp-log-bar), Metrics. */
.tl-stack > .tl-toolbar, .hp-log-bar { padding: 0; }
/* The charts of the Metrics tab stand two to a row; the choices over them and the services under them span both. */
[id="hp-panel-metrics"] > .tl-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[id="hp-panel-metrics"] > .tl-stack > :is(.tl-toolbar, .tl-card:last-child, p) { grid-column: 1 / -1; }
/* What follows a card's facts (a button, a line of tags) stands apart from them. */
.tl-facts + :is(.tl-btn, .hp-actions, .tl-actions, .tl-note) { margin-top: var(--s-5); }
.tl-card-body > .tl-btn { align-self: flex-start; }
.tl-table-end .tl-row-controls { justify-content: flex-end; }
.hp-log-tail { width: 96px; }
.hp-log-follow { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: 13px; }
/* The Database tab: the statement box in a fixed-width face. */
.hp-db-sql { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
/* The Database tab: table names in a fixed-width face, the list scrolling inside its card. */
.hp-db-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.hp-db-list .tl-list { max-height: 320px; }

/* A customer's server: the checklist of a new server. */
.hp-onboard { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hp-onboard-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; }
.hp-onboard-step + .hp-onboard-step { border-top: 1px solid var(--border-soft); }
.hp-onboard-step:first-child { padding-top: 2px; }
.hp-onboard-step:last-child { padding-bottom: 2px; }
.hp-onboard-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-onboard-step.is-done .hp-onboard-mark { border-color: transparent; background: var(--success-soft); color: var(--success); }
.hp-onboard-words { display: grid; gap: 1px; min-width: 0; }
.hp-onboard-title { color: var(--text-strong); font-weight: 500; }
.hp-onboard-words .tl-muted { font-size: 13px; }
.hp-onboard-step.is-done .hp-onboard-title { color: var(--text-muted); }
.hp-onboard-buttons { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.hp-onboard-buttons .tl-btn { white-space: nowrap; }
/* What has to be done about payment: the remark, with its one button at its end. */
.hp-pay-note { flex-wrap: wrap; align-items: center; padding: 14px var(--s-4); }
.hp-pay-note > .tl-icon { margin-top: 0; }
.hp-payment-actions { flex-shrink: 0; margin-left: auto; }
.hp-version-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hp-version { color: var(--text-strong); font: 600 var(--t-xl)/1.3 var(--font-display); letter-spacing: -0.015em; }
.hp-form-note:not(:empty) { margin-bottom: var(--s-5); }
.tl-fields + .tl-fields { margin-top: var(--s-4); }
/* A question that removes something for good: its mark and its yes are red. */
.hp-ask-danger .tl-dialog-badge { background: var(--danger-soft); color: var(--danger); }
.hp-ask-danger .tl-dialog-actions .tl-btn-primary { background: var(--danger-solid); }
.hp-ask-danger .tl-dialog-actions .tl-btn-primary:hover:not(:disabled) { background: var(--danger-solid-hover); }
.hp-links { overflow-wrap: anywhere; }
.hp-who { display: grid; min-width: 0; line-height: 1.35; }
.hp-who-name { color: var(--text-strong); font-weight: 500; }
.hp-who-email { color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }

/* A set up in steps: its name and how far it is, a bar, and every step with its tick and its time. */
.hp-progress { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.hp-progress-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); }
.hp-progress-title { color: var(--text-strong); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.005em; }
.hp-progress-count { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-progress-bar { height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.hp-progress-fill { height: 100%; border-radius: var(--r-pill); background: var(--accent-ring); transition: width 0.4s ease; }
.hp-progress-label { color: var(--text-muted); font-size: 13px; }

/* The steps, one under the other, joined by a line: done, the one it is on, and to come. */
.hp-setup-list { display: flex; flex-direction: column; margin: var(--s-1) 0 0; padding: 0; list-style: none; }
.hp-setup-step { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); padding-bottom: 14px; color: var(--text-faint); }
.hp-setup-step:last-child { padding-bottom: 0; }
.hp-setup-step:not(:last-child)::before { content: ""; position: absolute; top: 24px; bottom: 2px; left: 10.5px; width: 1px; background: var(--border-strong); }
.hp-setup-step.is-done:not(:last-child)::before { background: var(--success); opacity: 0.45; }
.hp-setup-mark { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-setup-words { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.hp-setup-detail { max-width: 62ch; color: var(--text-muted); font-size: 13px; }
.hp-setup-step.is-done { color: var(--text); }
.hp-setup-step.is-done .hp-setup-mark { border-color: transparent; background: var(--success-soft); color: var(--success); }
.hp-setup-step.is-now .hp-setup-name { color: var(--text-strong); font-weight: 600; }
.hp-setup-step.is-now .hp-setup-mark { border-color: var(--accent-ring); color: var(--accent-text); animation: hp-setup-pulse 1.8s ease-in-out infinite; }
@keyframes hp-setup-pulse { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
.hp-setup-time { flex: 0 0 auto; padding-top: 2px; color: var(--text-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* The one destructive part of a page: what it removes on one side, its button on the other. */
.hp-danger-row { display: flex; align-items: center; gap: var(--s-5); }
.hp-danger-row > p { flex: 1; min-width: 0; color: var(--text-muted); }

/* -------------------------------------------------------- forms beside a summary */

/* New server, Account, a server's Settings: the form in titled parts on the left, what it comes to on the right. */
.hp-new { align-items: start; }
.hp-new-side { display: flex; flex-direction: column; gap: var(--s-5); }
.hp-new .tl-group + .tl-group { margin-top: var(--s-6); }
.hp-new .tl-group:first-child { padding-top: 0; border-top: 0; }
.hp-new form > .tl-actions { margin-top: var(--s-6); }
.hp-new form > .tl-actions .tl-note { flex: 1; }
.hp-new-side .tl-row-words { display: flex; justify-content: space-between; gap: var(--s-4); width: 100%; }
.hp-new-side .tl-row-title { color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.hp-new-side .tl-row-note { color: var(--text-strong); font-size: var(--t-base); text-align: right; overflow-wrap: anywhere; }
.hp-form-gap { height: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--border); }
.hp-account-forms { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hp-account-forms form > .tl-actions { margin-top: var(--s-5); }

/* =============================================================== narrow windows */

@media (max-width: 1439px) {
  .cp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Under 1200 the navigation folds to its icons; each still has its name as a tooltip. */
@media (max-width: 1199px) {
  :root { --side-w: 64px; }
  .cp-nav { align-items: center; padding: var(--s-4) var(--s-2); }
  .cp-nav .tl-brand { padding: 2px 0; }
  .cp-nav .tl-brand-words, .cp-nav .tl-nav-label { display: none; }
  .cp-nav-list { width: 100%; align-items: center; }
  .cp-nav-group { width: 24px; height: 1px; margin: var(--s-2) 0; padding: 0; background: var(--border); font-size: 0; }
  .cp-nav-group:first-child { display: none; }
  .cp-nav .tl-nav-item { justify-content: center; width: 40px; height: 40px; padding: 0; }
  .cp-nav .tl-nav-item > .tl-count { position: absolute; top: 1px; right: -2px; min-width: 17px; padding: 0 4px; background: var(--warning); color: var(--nav-bg); font-size: 10px; line-height: 16px; }
}

@media (max-width: 1099px) {
  .cp-stat-wide { display: none; }
}

@media (max-width: 960px) {
  .hp-new > * { grid-column: 1 / -1; }
  .hp-gets { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-top: 56px; }
}

@media (max-width: 899px) {
  [id="hp-panel-metrics"] > .tl-stack { grid-template-columns: minmax(0, 1fr); }
  .cp-status { display: none; }
  .cp-viewer-note { display: none; }
  .hp-hero { padding: 64px 0 48px; }
  .hp-hero-title { font-size: 40px; }
  .hp-hero-text { font-size: var(--t-lg); }
}

@media (max-width: 700px) {
  .hp-onboard-step { grid-template-columns: 26px minmax(0, 1fr); }
  .hp-onboard-buttons { grid-column: 2; flex-wrap: wrap; justify-content: flex-start; }
  .hp-danger-row { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* A phone held upright: the navigation is a row of icons along the bottom, the brand moves into the bar. */
@media (max-width: 640px) {
  .tl-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .tl-app > .tl-main { grid-row: 1; }
  .cp-nav { grid-row: 2; flex-direction: row; justify-content: center; gap: 0; padding: 6px var(--s-2) calc(6px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--border); }
  .cp-nav .tl-brand, .cp-nav-group { display: none; }
  .cp-nav-list { flex-direction: row; justify-content: space-around; gap: var(--s-1); max-width: 420px; overflow: visible; }
  .cp-nav .tl-nav-item { width: 56px; height: 40px; }
  .hp-bar { height: 48px; }
  .hp-bar-brand { display: block; flex-shrink: 0; width: 28px; height: 28px; background: url("/img/logo-small.png") center / contain no-repeat; }
  .cp-viewer { margin-left: 0; padding: 0 var(--s-1); border-left: 0; }
  .cp-viewer-words { display: none; }
  .hp-pagehead { padding-top: var(--s-5); }
  .hp-pagehead-row { flex-wrap: wrap; }
  .cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .cp-kpi { padding: 14px var(--s-4); }
  .cp-kpi-label { white-space: normal; }
  .hp-hero-line { display: inline; }
  .hp-progress { padding: var(--s-4); }
  .hp-setup-step { flex-wrap: wrap; }
  .hp-setup-time { flex-basis: 100%; padding: 0 0 0 34px; text-align: left; }
  .hp-new .tl-fields-2 { grid-template-columns: minmax(0, 1fr); }
  .hp-login { padding: 0 var(--s-1) var(--s-1); }
  .hp-site-top { height: 56px; }
  .hp-site-top .tl-brand-sub { display: none; }
  .hp-hero { padding: 48px 0 40px; }
  .hp-hero-title { font-size: 34px; }
  .hp-plan { padding: var(--s-5); }
  .hp-site-foot-gap { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-setup-step.is-now .hp-setup-mark { animation: none; }
}

/* ------------------------------------------------------------------ the Files tab */

/* The one sentence that says the files cannot be managed now. */
.hp-files-blocked { margin: 0; font-size: var(--t-md); }
/* The remark that the server must be restarted, with its button at the end of the line. */
.hp-files-restart { flex-wrap: wrap; align-items: center; }
.hp-files-restart-act { flex-shrink: 0; margin-left: auto; }
/* The folders and the upload control stand in from the card's edge as far as its words do. */
.hp-files-bar { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5) var(--s-4); }
.hp-files-pick > .tl-input { flex: 1 1 auto; min-width: 0; }
.hp-files-pick > .tl-btn { flex-shrink: 0; }
/* A folder with folders of its own: the path of the one that is open (each part goes back up to it), and its folders as rows to open. */
.hp-files-path { justify-content: space-between; padding-bottom: var(--s-3); }
.hp-files-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; font-size: 13px; }
.hp-files-crumb { padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); font: inherit; cursor: pointer; }
button.hp-files-crumb:hover { background: var(--surface-hover); color: var(--text-strong); }
.hp-files-crumb.is-here { color: var(--text-strong); font-weight: 600; cursor: default; }
.hp-files-crumb-sep { color: var(--text-faint); }
.hp-files-dir-open { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text-strong); font: inherit; font-weight: 500; cursor: pointer; }
.hp-files-dir-open .tl-icon { color: var(--accent-text); }
.hp-files-dir-open:hover > span { text-decoration: underline; }
.hp-files-dir > td { color: var(--text-muted); }
.hp-files-folders { flex-wrap: wrap; max-width: 100%; }
.hp-files-count { margin-left: var(--s-2); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tl-seg-item[aria-checked="true"] .hp-files-count { color: var(--text-muted); }
.hp-files-table th.tl-num { text-align: right; }
.hp-files-more { margin: 0; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--border-soft); font-size: var(--t-sm); }

/* A file being sent: its name, a bar, and how it stands. The server's refusal takes the place of the bar. */
.hp-uploads:not(:empty) { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 var(--s-5) var(--s-4); }
.hp-upload { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(72px, 1fr) minmax(92px, auto); align-items: center; gap: var(--s-3); font-size: 13px; }
.hp-upload-name { color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-upload-state { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hp-upload.is-done .hp-upload-state { display: inline-flex; justify-content: flex-end; color: var(--success); }
.hp-upload.is-failed .hp-upload-state { grid-column: 2 / -1; color: var(--danger-text); text-align: left; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .hp-files-bar { padding-right: var(--s-4); padding-left: var(--s-4); }
  .hp-files-pick { flex-wrap: wrap; }
  .hp-files-pick > .tl-btn { width: 100%; }
  .hp-uploads:not(:empty) { padding-right: var(--s-4); padding-left: var(--s-4); }
  .hp-upload { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-upload > .hp-progress-bar { grid-column: 1 / -1; grid-row: 2; }
  .hp-upload.is-failed .hp-upload-state { grid-column: 1 / -1; }
}

/* ------------------------------------------------ the game's settings cards (Settings tab) */

/* The cards of the groups and the email card, one under the other in the form's column. */
.hp-settings-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hp-settings-main > :empty { display: none; }
.hp-settings-main [hidden] { display: none !important; }
/* A secret's box with its Clear beside it. */
.hp-secret { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.hp-secret > .tl-input { flex: 1 1 auto; min-width: 0; }
.hp-secret > .tl-btn { flex-shrink: 0; }
/* Two switches side by side have no input beside them to line up with. */
.hp-switches > .tl-field-toggle { padding-top: 0; }
.hp-settings-line { margin: var(--s-4) 0 0; }
.hp-settings-saved { color: var(--success); font-size: var(--t-sm); }
.hp-settings-saved:empty { display: none; }

/* ------------------------------------------------ the Custom Domain card (Settings tab) */

.hp-domain-result:not(:empty) { margin-top: var(--s-5); }
/* The record to add: a small table that wraps its values and scrolls rather than push the card wider. */
.hp-records-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.hp-records { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.hp-records th { padding: 9px var(--s-3); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; text-align: left; white-space: nowrap; }
.hp-records td { padding: 9px var(--s-3); vertical-align: middle; overflow-wrap: anywhere; color: var(--text-strong); }
.hp-records td:first-child { white-space: nowrap; }
.hp-record-value { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.hp-record-text { flex: 1 1 auto; min-width: 0; }
.hp-record-value > .tl-btn { flex-shrink: 0; }
.hp-records-found { margin: var(--s-3) 0 0; color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
/* What the last look found: green when the name points at the server, amber while no record is found, red when it points elsewhere. */
.hp-domain-status { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); padding: 12px 14px; border: 1px solid var(--info-line); border-radius: 10px; background: var(--info-soft); }
.hp-domain-status > .tl-icon { flex-shrink: 0; margin-top: 1px; }
.hp-domain-status-words { display: grid; gap: 2px; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.hp-domain-status-title { color: var(--text-strong); font-weight: 600; }
.hp-domain-status.is-good { border-color: var(--success); background: var(--success-soft); }
.hp-domain-status.is-good > .tl-icon { color: var(--success); }
.hp-domain-status.is-wait { border-color: var(--warning-line); background: var(--warning-soft); }
.hp-domain-status.is-wait > .tl-icon { color: var(--warning); }
.hp-domain-status.is-bad { border-color: var(--danger-line); background: var(--danger-soft); }
.hp-domain-status.is-bad > .tl-icon { color: var(--danger); }
.hp-domain-when { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; color: var(--text-muted); font-size: var(--t-sm); }
.hp-domain-when:empty { display: none; }
.hp-domain-wait { display: flex; flex-direction: column; gap: var(--s-3); }
.hp-domain-wait > div:empty { display: none; }
.hp-domain-wait .hp-domain-status { margin-bottom: 0; }
.hp-domain-wait .tl-group-title { margin-top: var(--s-1); }
.hp-domain-wait .hp-domain-when { margin: 0; }
.hp-domain-name { min-width: 0; overflow-wrap: anywhere; color: var(--text-strong); font-weight: 600; }
.hp-domain-wait[hidden], .hp-domain-plan[hidden] { display: none !important; }
.hp-domain-busy { display: flex; align-items: center; gap: var(--s-3); color: var(--text); }
.hp-domain-busy[hidden], .hp-settings-main .tl-actions[hidden] { display: none !important; }
.hp-spinner { flex-shrink: 0; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent, currentColor); border-radius: 50%; animation: tl-spin 0.7s linear infinite; }
.hp-domain-set { display: flex; flex-direction: column; gap: var(--s-3); }
.hp-domain-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hp-domain-line > .hp-link { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.hp-domain-line > .tl-btn { margin-left: auto; }
.hp-domain-set[hidden], .hp-settings-main form[hidden] { display: none !important; }
.hp-brand-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.hp-brand-current[hidden] { display: none !important; }
.hp-brand-preview { display: block; max-width: 160px; max-height: 64px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-sunken); padding: var(--s-1); }
.hp-brand-size { color: var(--text-muted); font-size: var(--t-sm); }
.hp-settings-main .hp-brand-plan[hidden] { display: none !important; }
/* The Player Subscriptions card: what Stripe has to be told, under the fields. */
.hp-subs-setup { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.hp-subs-setup[hidden], .hp-settings-main .hp-subs-plan[hidden] { display: none !important; }
.hp-subs-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hp-subs-address { min-width: 0; overflow-wrap: anywhere; color: var(--text-strong); font-size: var(--t-sm); }
.hp-subs-line > .tl-btn { margin-left: auto; }
.hp-subs-events { margin: 0; padding-left: var(--s-5); color: var(--text-strong); font-size: var(--t-sm); line-height: 1.7; }
@media (max-width: 640px) {
  .hp-records th:nth-child(2), .hp-records td:nth-child(2) { min-width: 140px; }
  .hp-records td:nth-child(3) { min-width: 180px; }
}

/* ------------------------------------------------ the Test Server card (Overview) and a test server in the list */

/* In the card: the copy's name, how it stands and its address on one line. */
div.hp-test-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
div.hp-test-row > .hp-link { min-width: 0; overflow-wrap: anywhere; }
.hp-test-line { margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.hp-test-line + .tl-actions, div.hp-test-row + .tl-actions { margin-top: var(--s-4); }
/* In the list: a test server sits under its live server, set in from the left. */
tr.hp-test-row > td:first-child { padding-left: var(--s-6); }

/* ------------------------------------------------ the public status page, the API reference, webhooks and API keys */

.hp-status, .hp-docs { gap: var(--s-5); padding: var(--s-8) 0 var(--s-6); }
.hp-status-head { display: flex; flex-direction: column; gap: var(--s-3); }
.hp-status-title { color: var(--text-strong); font: 600 34px/1.15 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.hp-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.hp-status-players { color: var(--text-muted); }
.hp-status-uptime { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
/* One bar for each of the 90 days: the colour is the day's downtime, the words are in the tooltip and for a screen reader. */
.hp-days { display: flex; gap: 2px; height: 40px; margin: 0; padding: 0; list-style: none; }
.hp-day { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--border); }
.hp-day-none { background: var(--success); }
.hp-day-some { background: var(--warning); }
.hp-day-lot { background: var(--danger); }
.hp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .hp-status-title { font-size: 26px; }
  .hp-days { height: 32px; gap: 1px; }
}

.hp-docs-title { color: var(--text-strong); font: 600 34px/1.15 var(--font-display); letter-spacing: -0.03em; }
.hp-doc { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.hp-doc-text { margin: 0; color: var(--text); line-height: 1.6; }
.hp-doc-heading { margin: var(--s-2) 0 0; color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-doc-heading:first-child { margin-top: 0; }
.hp-doc-list { margin: 0; padding-left: 1.25em; color: var(--text); line-height: 1.7; }
.hp-doc-code { margin: 0; overflow-x: auto; white-space: pre; }
.hp-doc-inline { padding: 1px 6px; border-radius: var(--r-sm); background: var(--control-bg); color: var(--text-strong); font-family: var(--font-mono); font-size: var(--t-sm); overflow-wrap: anywhere; }
.hp-doc-route { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.hp-doc-route + .hp-doc-route { padding-top: var(--s-4); border-top: 1px solid var(--border-soft); }
.hp-doc-route-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hp-doc-events { display: flex; flex-direction: column; min-width: 0; }
.hp-doc-event { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; }
.hp-doc-event + .hp-doc-event { border-top: 1px solid var(--border-soft); }
.hp-doc-event-label { color: var(--text-muted); }

/* A webhook's address is a host and can be long; the buttons beside it stay whole. */
.hp-hook-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); overflow-wrap: anywhere; }
.hp-hooks + form { margin-top: var(--s-5); }
.hp-hooks[hidden] { display: none !important; }

/* ------------------------------------------------ the legal documents (/terms, /eula, /privacy) */

.hp-signup-agree { margin: 0; color: var(--text-muted); font-size: var(--t-sm); line-height: 1.5; }
.hp-signup-agree + .tl-actions { margin-top: var(--s-4); }
/* One column of about 72 characters, with room between the lines. */
.hp-legal { width: 100%; max-width: 72ch; margin: 0 auto; padding: var(--s-8) 0 var(--s-6); color: var(--text); }
.hp-legal-head { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }
.hp-legal-title { color: var(--text-strong); font: 600 34px/1.15 var(--font-display); letter-spacing: -0.03em; }
.hp-legal-updated { margin: 0; color: var(--text-faint); font-size: var(--t-sm); }
.hp-legal-lead { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: var(--t-md); line-height: 1.7; }
.hp-legal-contents { margin-bottom: var(--s-8); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.hp-legal-contents-title { margin: 0 0 var(--s-2); color: var(--text-strong); font-size: var(--t-base); font-weight: 600; }
.hp-legal-toc { margin: 0; padding-left: 1.4em; line-height: 1.9; }
.hp-legal-section { margin-bottom: var(--s-6); scroll-margin-top: 76px; }
.hp-legal-heading { margin: 0 0 var(--s-3); font-size: var(--t-md); font-weight: 600; line-height: 1.4; }
.hp-legal-anchor { color: var(--text-strong); text-decoration: none; }
.hp-legal-anchor:hover { color: var(--accent-text); }
.hp-legal-p { margin: 0 0 var(--s-3); line-height: 1.75; overflow-wrap: anywhere; }
.hp-legal-list { margin: 0 0 var(--s-3); padding-left: 1.4em; line-height: 1.75; }
.hp-legal-list li + li { margin-top: var(--s-1); }
.hp-legal-table-wrap { margin: 0 0 var(--s-3); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.hp-legal-table { width: 100%; border-collapse: collapse; font-size: var(--t-base); line-height: 1.55; }
.hp-legal-table th { padding: 9px var(--s-3); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; text-align: left; white-space: nowrap; }
.hp-legal-table td { padding: 10px var(--s-3); vertical-align: top; color: var(--text-strong); }
.hp-legal-table tr + tr td { border-top: 1px solid var(--border-soft); }
.hp-legal-table td:nth-child(1) { min-width: 180px; }
.hp-legal-table td:nth-child(2), .hp-legal-table td:nth-child(3) { min-width: 200px; }
@media (max-width: 640px) {
  .hp-legal-title { font-size: 26px; }
  .hp-legal-contents { padding: var(--s-3) var(--s-4); }
}

/* ------------------------------------------------ the Plugins and Players tabs */

.hp-plugins-caution { margin: 0; padding: var(--s-4) var(--s-5) var(--s-3); font-size: var(--t-sm); line-height: 1.5; }
.hp-plugins-table th:nth-child(3) { width: 1%; white-space: nowrap; }
.hp-players-line { margin: 0; padding: var(--s-3) var(--s-5) 0; font-size: var(--t-sm); line-height: 1.5; }
.hp-players-form { padding-top: var(--s-4); }
.hp-players-form > .tl-input { flex: 1 1 auto; min-width: 0; }
.hp-players-form > .tl-btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .hp-plugins-caution, .hp-players-line { padding-right: var(--s-4); padding-left: var(--s-4); }
  .hp-players-form { flex-wrap: wrap; }
  .hp-players-form > .tl-btn { width: 100%; }
}

/* ------------------------------------------------ the operator's Plans page, and a sale on the customers' plan cards */

.hp-plans-bar { display: flex; flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: var(--s-4) var(--s-5); padding: var(--s-4) var(--s-5); }
.hp-plans-bar .tl-field { width: 150px; }
/* The bar's switches in one group that wraps by itself: two fields, the switches, Save, and Refresh Costs at the right. */
.hp-plans-bar .hp-plans-switches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); min-width: 0; }
.hp-plans-bar .hp-plans-switch { display: flex; align-items: center; gap: var(--s-3); height: var(--control-h); color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.hp-plans-bar .hp-plans-read { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.hp-plans-read-at { color: var(--text-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.hp-plans-list { display: flex; flex-direction: column; gap: var(--s-5); }
.hp-plan-figs { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7, 40px); }
.hp-plan-figs .tl-fact { min-width: 72px; }
.hp-plan-figs .tl-fact-value { font-variant-numeric: tabular-nums; }
.hp-plan-card .tl-card-body { display: flex; flex-direction: column; gap: var(--s-4); }
/* One line: the pricing controls on the left, the sale's on the right. */
.hp-plan-cols { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6); }
.hp-plan-block { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); min-width: 0; }
.hp-plan-block + .hp-plan-block { margin-left: auto; padding-left: var(--s-6); border-left: 1px solid var(--border); }
.hp-plan-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); }
.hp-plan-inputs .tl-field { width: 124px; }
.hp-plan-inputs .tl-field:has(input[type="date"]) { width: 168px; }
.hp-plan-inputs .tl-input { font-variant-numeric: tabular-nums; }
.hp-plan-inputs .tl-seg { align-self: flex-end; }
.hp-plan-preview { display: flex; gap: var(--s-5); font-variant-numeric: tabular-nums; }
.hp-plan-preview[hidden] { display: none; }
.hp-plan-preview .tl-fact-value { color: var(--text-strong); }
.hp-plan-now { color: var(--text-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.hp-plan-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hp-was { color: var(--text-muted); font-weight: 400; text-decoration: line-through; margin-right: 6px; }
/* A sale on a customer's plan card: the regular price struck through beside the sale price, a small tag, and the last day. */
.hp-sale-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hp-sale-was { color: var(--text-muted); font-variant-numeric: tabular-nums; text-decoration: line-through; }
.hp-sale-tag { height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; line-height: 20px; }
.hp-sale-ends { color: var(--text-muted); font-size: var(--t-sm); }
/* Monthly | Yearly above the plans of the front page, and the small tag beside a yearly price. */
.hp-period { display: flex; justify-content: center; margin-bottom: var(--s-5); }
.hp-plan-head > .tl-tag, .hp-compare-plan > .tl-tag, .hp-pick > .tl-tag { align-self: flex-start; }
/* "Free Trial Available" under a customer's plan price, small like the sale tag. */
.hp-trial-line { display: flex; align-items: center; }
.hp-trial-tag { height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success-text); font-size: 12px; font-weight: 600; line-height: 20px; }
@media (max-width: 1100px) {
  .hp-plan-block + .hp-plan-block { width: 100%; margin-left: 0; padding-left: 0; padding-top: var(--s-4); border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .hp-plans-bar .hp-plans-read { margin-left: 0; }
  .hp-plan-inputs { grid-template-columns: minmax(0, 1fr); }
  .hp-plan-preview { grid-template-columns: minmax(0, 1fr); }
}

/* The Settings tab of a customer's server (my-settings.ts): the sections down the left, one section's cards on the right. A setting is a row:
   its name on the left, its control on the right, a hairline between rows. */
.hp-set { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.hp-set-nav { position: sticky; top: var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.hp-set-nav-item { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.hp-set-nav-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.hp-set-nav-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); }
.hp-set-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hp-set .hp-settings-main { align-items: stretch; gap: var(--s-4); max-width: 800px; }
.hp-set-pane { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.hp-set-pane[hidden] { display: none; }
.hp-set .tl-card-head { align-items: center; min-height: 44px; padding: 10px var(--s-5) 0; }
.hp-set .tl-card-body { padding: var(--s-2) var(--s-5) var(--s-4); }
.hp-set .tl-card-lead { font-size: var(--t-sm); }
/* Rows. */
.hp-set .tl-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hp-set .tl-field { grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 4px var(--s-5); padding: 9px 0; }
.hp-set .tl-field + .tl-field, .hp-set .tl-fields + .tl-fields > .tl-field:first-child { border-top: 1px solid var(--border-soft); }
.hp-set .tl-field > * { grid-column: 2; max-width: 440px; }
.hp-set .tl-field > .tl-field-label { grid-column: 1; grid-row: 1; max-width: none; }
.hp-set .tl-card-body > .tl-field + .tl-field { margin-top: 0; }
.hp-set .tl-field > .tl-input:is([inputmode="numeric"], #hp-mail-port, #hp-set-weather-minutes) { max-width: 140px; }
.hp-set .tl-field > .tl-field-hint { margin-top: -1px; }
/* The Emails page: the emails on the left, the editor and its preview on the right. */
.hp-set.hp-emails { grid-template-columns: 220px minmax(0, 1fr); }
.hp-set.hp-emails .hp-settings-main { max-width: 1100px; }
.hp-emails-nav-group { padding: var(--s-3) 10px var(--s-1); color: var(--text-faint); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hp-emails-nav-group:first-child { padding-top: 0; }
.hp-emails-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-emails-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hp-set.hp-emails .tl-card-tools { display: flex; align-items: center; gap: var(--s-2); }
.hp-set.hp-emails .tl-card-tools [hidden] { display: none !important; }
.hp-set.hp-emails .tl-card-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.hp-emails-fields { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.hp-set.hp-emails .tl-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; }
.hp-set.hp-emails .tl-field + .tl-field { border-top: 0; }
.hp-set.hp-emails .tl-field > .tl-field-label { text-align: left; }
.hp-set.hp-emails .tl-field > * { max-width: none; }
.hp-emails-text { min-height: 520px; font: 400 var(--t-sm)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.hp-emails-chips { display: flex; flex-direction: column; gap: 6px; }
.hp-emails-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-2); }
.hp-emails-chips-label { color: var(--text-muted); font-size: var(--t-sm); }
.hp-emails-chip.is-empty { border-style: dashed; background: none; color: var(--text-faint); }
.hp-emails-chip { height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-sunken); color: var(--text); font: 500 12px/1 var(--font-mono); cursor: pointer; }
.hp-emails-chip:hover { border-color: var(--accent-line); color: var(--accent-text); }
.hp-emails-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hp-emails-preview { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding-top: 2px; }
.hp-emails-preview > .tl-group-title { margin: 0; }
.hp-emails-preview-subject { padding: 10px 12px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface-sunken); color: var(--text-strong); font-weight: 600; overflow-wrap: anywhere; }
.hp-emails-preview-text { min-height: 520px; margin: -8px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface); color: var(--text); font: 400 var(--t-sm)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .hp-set.hp-emails .tl-card-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hp-set.hp-emails { grid-template-columns: minmax(0, 1fr); }
  .hp-set.hp-emails .tl-card-head { flex-wrap: wrap; }
  .hp-set.hp-emails .tl-card-tools { width: 100%; }
  .hp-emails-nav-group { display: none; }
  .hp-set.hp-emails .hp-emails-nav { position: static; }
}
/* A switch: its name and its hint on the left, the switch at the right edge. */
.hp-set .tl-field-toggle { grid-template-columns: minmax(0, 1fr) auto; gap: 1px var(--s-5); }
.hp-set .tl-field-toggle > .tl-toggle { display: contents; }
.hp-set .tl-field-toggle .tl-switch { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hp-set .tl-field-toggle .tl-toggle-label { grid-column: 1; grid-row: 1; font-size: 13px; }
.hp-set .tl-field-toggle > .tl-field-hint { grid-column: 1; grid-row: 2; max-width: none; }
/* What a card says under its rows, and its buttons: at the right, under a hairline. */
.hp-set .hp-settings-line { margin: var(--s-2) 0 0; font-size: var(--t-sm); }
.hp-set form > .tl-actions, .hp-set .tl-card-body > .tl-actions { flex-direction: row-reverse; justify-content: flex-start; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border-soft); }
.hp-set .tl-group { padding-top: var(--s-3); }
.hp-set .tl-group + .tl-group { margin-top: var(--s-3); }
.hp-set .tl-group-title { margin-bottom: 2px; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hp-set .hp-form-gap { height: var(--s-3); margin-bottom: var(--s-3); }
.hp-set-results { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--border-soft); }
.hp-set-results .tl-row { padding: 6px 0; }
.hp-set-results .tl-row-words { display: flex; justify-content: space-between; gap: var(--s-4); width: 100%; }
.hp-set-results .tl-row-title { color: var(--text-muted); font-size: 13px; font-weight: 400; }
.hp-set-results .tl-row-note { color: var(--text); text-align: right; overflow-wrap: anywhere; }
/* Save: an icon at the top right of its card (my-settings.ts moves the form's own button there). A row of buttons left with none is not drawn. */
.hp-set .tl-card-tools { gap: var(--s-3); }
.hp-set-save.tl-btn { width: 32px; min-width: 0; height: 32px; padding: 0; justify-content: center; border-color: transparent; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.hp-set-save.tl-btn:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.hp-set-save.tl-btn:disabled { background: none; color: var(--text-faint); opacity: 1; }
.hp-set-save > span { display: none; }
.hp-set .tl-actions:not(:has(button)) { display: none; }
/* A feature the plan does not have: one line, its name on the left and why on the right. */
.hp-set .tl-card.is-locked { flex-direction: row; align-items: center; justify-content: space-between; box-shadow: none; background: none; }
.hp-set .tl-card.is-locked > .tl-card-head { padding: 12px var(--s-5); flex: none; }
.hp-set .tl-card.is-locked > .tl-card-body { flex: 0 1 auto; padding: 12px var(--s-5); color: var(--text-muted); font-size: 13px; text-align: right; }
.hp-set .tl-card.is-locked .tl-card-title { color: var(--text); font-size: 13px; }
@media (max-width: 860px) {
  .hp-set { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .hp-set-nav { position: static; flex-direction: row; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
  .hp-set-nav-item { flex: none; }
  .hp-set .tl-field { grid-template-columns: minmax(0, 1fr); }
  .hp-set .tl-field > *, .hp-set .tl-field > .tl-field-label { grid-column: 1; grid-row: auto; }
}

/* The operator's Settings page (settings.ts): the same rows with no list of sections beside them. The test mail's form follows the
   settings' form in the same card, under a hairline. */
.hp-set-single { grid-template-columns: minmax(0, 1fr); }
.hp-set-single form + form { margin-top: var(--s-3); border-top: 1px solid var(--border-soft); }
.hp-set-single .tl-field-toggle { padding: 9px 0; }
/* A row that says a state and takes no typing (the release token: "Not set", or the day it was made). */
.hp-set-value { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }

/* The Terminal tab of the operator's server page (server-terminal.ts): the connection
   state above a fixed shell that keeps the page's height while it loads. The shell stays
   dark in both themes, the way terminals do. */
.hp-terminal-status { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.hp-terminal-status:empty { display: none; }
.hp-terminal { height: clamp(320px, 55vh, 600px); padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-md); background: #0b0e14; overflow: hidden; display: flex; flex-direction: column; }
.hp-terminal:focus-within { border-color: var(--accent); }
.hp-terminal .xterm { height: 100%; }
/* The grid is measured against this unpadded screen, so the fitted rows always fit what is seen. */
.hp-terminal-screen { flex: 1 1 auto; min-height: 0; min-width: 0; }

/* ------------------------------------------------------------------ support: tickets, staff, support settings */

.tl-fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tl-fields-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The inbox: the views, then the filters, then the list. A row opens its ticket. */
.hp-tk-tabs { margin-bottom: var(--s-3); overflow-x: auto; }
.hp-tk-tabs .tl-seg { flex-wrap: nowrap; }
.hp-tk-toolbar { padding: 0 0 var(--s-4); }
.hp-tk-row { cursor: pointer; }
.hp-tk-row:hover td { background: var(--surface-hover); }
.hp-tk-no { font-variant-numeric: tabular-nums; font-weight: 600; }
.hp-tk-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.hp-tk-subject.is-unread { font-weight: 700; }
.hp-tk-subject.is-unread::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

/* A ticket: the conversation and the answer on the left, what it is on the right. */
.hp-tk-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-5); align-items: start; }
.hp-tk-main { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.hp-tk-side { position: sticky; top: var(--s-4); min-width: 0; }
.hp-tk-side-inner { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-tk-side .tl-card-body { display: flex; flex-direction: column; gap: var(--s-2); }
@media (max-width: 1100px) {
  .hp-tk-page { grid-template-columns: minmax(0, 1fr); }
  .hp-tk-side { position: static; }
}
.hp-tk-customer { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-tk-customer > * { width: 100%; max-width: 900px; }
.hp-tk-head-tags { display: inline-flex; vertical-align: middle; }

.hp-tk-thread { display: flex; flex-direction: column; gap: var(--s-3); }
.hp-tk-msg { border: 1px solid var(--border); border-radius: var(--r-lg, 12px); background: var(--surface); overflow: hidden; }
.hp-tk-msg.is-staff { border-color: var(--accent-line); }
.hp-tk-msg.is-note { border: 1px dashed var(--warning-line); background: var(--warning-soft); }
.hp-tk-msg.is-system { background: none; border-style: dashed; color: var(--text-muted); }
.hp-tk-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.hp-tk-msg-who { color: var(--text-strong); font-weight: 600; }
.hp-tk-msg-when { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-muted); font-size: var(--t-sm); }
.hp-tk-via { display: inline-flex; color: var(--text-faint); }
.hp-tk-msg-body { padding: 12px 14px; color: var(--text); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.hp-tk-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 14px 12px; }
.hp-tk-file { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-sunken); color: var(--text); font-size: var(--t-sm); text-decoration: none; }
.hp-tk-file:hover { border-color: var(--accent-line); color: var(--accent-text); }
.hp-tk-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-tk-file-size { flex-shrink: 0; color: var(--text-faint); }

.hp-tk-compose { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.hp-tk-compose.is-note { border-color: var(--warning-line); background: var(--warning-soft); }
.hp-tk-compose-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.hp-tk-saved { width: auto; min-width: 200px; max-width: 280px; }
.hp-tk-reply { min-height: 120px; resize: vertical; line-height: 1.55; }
.hp-tk-send { align-items: center; justify-content: flex-end; margin: 0; }
.hp-tk-send[hidden] { display: none !important; }
.hp-tk-send-note { margin-right: auto; color: var(--text-muted); font-size: var(--t-sm); }

.hp-tk-field { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.hp-tk-field-label { color: var(--text-muted); font-size: var(--t-sm); }
.hp-tk-field .tl-select { width: 100%; }
.hp-tk-sub { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hp-tk-links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.hp-tk-links a { overflow-wrap: anywhere; }
.hp-tk-events { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--text); }
.hp-tk-event-who { color: var(--text-strong); font-weight: 600; }
.hp-tk-event-when { display: block; color: var(--text-faint); font-size: var(--t-xs); }
.hp-tk-more { margin: 0; }
.hp-tk-rated { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--border-soft); }
.hp-tk-stars-shown { gap: 2px; color: var(--text-faint); }
.hp-tk-stars-shown .is-on { color: var(--warning); fill: currentColor; }
.hp-tk-rated-words { margin: 0; color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }

.hp-tk-rate { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }
.hp-tk-rate-title { color: var(--text-strong); font-weight: 600; }
.hp-tk-stars { display: flex; gap: 4px; }
.hp-tk-star { display: inline-flex; padding: 4px; border: 0; border-radius: 8px; background: none; color: var(--text-faint); cursor: pointer; }
.hp-tk-star.is-on { color: var(--warning); }
.hp-tk-star.is-on svg { fill: currentColor; }
.hp-tk-star:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* The Staff page's permission picker: groups of boxes, each with what it allows. */
.hp-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.hp-perms-group { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.hp-perms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-1); }
.hp-perms-title { color: var(--text-strong); font-weight: 600; }
.hp-perm { display: flex; align-items: flex-start; gap: var(--s-2); padding: 5px 0; cursor: pointer; }
.hp-perm input { flex-shrink: 0; margin-top: 3px; }
.hp-perm-words { display: grid; gap: 1px; min-width: 0; }
.hp-perm-label { color: var(--text-strong); font-size: var(--t-sm); font-weight: 500; }
.hp-perm-about { color: var(--text-muted); font-size: var(--t-xs); line-height: 1.4; }
.hp-perm-switch { align-items: center; margin-top: var(--s-3); }
.hp-perm:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }

/* Support Settings: the inbox's last check, the saved replies. */
.hp-inbox-status { display: flex; flex-direction: column; gap: var(--s-2); }
.hp-inbox-status:empty { display: none; }
.hp-inbox-line { margin: 0; font-size: var(--t-sm); }
.hp-saved-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 560px; }
.hp-no-access { padding-top: var(--s-8, 48px); }

/* Referrals: the code's page (its fields, its link), the dialog's one-column rows, and the customer's code on Billing and sign up. */
.tl-fields-1 { grid-template-columns: minmax(0, 1fr); }
.hp-ref-field { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: baseline; gap: var(--s-3); }
.hp-ref-field-label { color: var(--text-muted); font-size: var(--t-sm); }
.hp-ref-field-value { color: var(--text-strong); overflow-wrap: break-word; }
.hp-ref-one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-ref-actions { margin: var(--s-2) 0 0; }
.hp-ref-link-label { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--t-sm); }
.hp-ref-link { display: flex; align-items: center; gap: var(--s-2); padding: 6px 6px 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-sunken); }
.hp-ref-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
.hp-ref-dialog-note { margin: var(--s-4) 0 0; font-size: var(--t-sm); }
.hp-billing-page { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-billing-referral { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-billing-referral:empty { display: none; }
.hp-ref-line { margin: 0; }
.hp-ref-add { display: flex; align-items: flex-end; gap: var(--s-3); max-width: 480px; }
.hp-ref-add .tl-field { flex: 1; }
.hp-ref-said:empty { display: none; }
.hp-ref-said.hp-ref-good { color: var(--success-text); }
.hp-ref-said.hp-ref-bad { color: var(--danger-text); }

/* The pricing page's demo: three numbered steps in one card, and the button under them. */
.hp-demo { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.hp-demo-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); width: 100%; margin: 0; padding: 0; list-style: none; }
.hp-demo-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-3); }
.hp-demo-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.hp-demo-step .hp-get-title { margin: 0; }
.hp-demo-text { grid-column: 1 / -1; margin: 0; color: var(--text-muted); line-height: 1.55; }
.hp-demo .tl-btn .tl-icon { margin-left: 6px; }
@media (max-width: 760px) {
  .hp-demo-steps { grid-template-columns: minmax(0, 1fr); }
}
.hp-ref-plans { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hp-ref-plan { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-sunken); color: var(--text-strong); font-size: var(--t-sm); cursor: pointer; }
.hp-ref-plan:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.hp-ref-plain { font-weight: 400; }

/* "What developers are making": a carousel of the operator's pictures, first on the main page (pricing.ts), and the Showcase page's grid. */
.hp-showcase { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.hp-carousel { position: relative; width: 100%; max-width: 960px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); touch-action: pan-y; }
.hp-carousel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hp-carousel-track { display: flex; align-items: flex-start; transition: transform 0.45s ease; }
.hp-carousel-slide { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.hp-carousel-image { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.hp-carousel-backdrop { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) brightness(0.6); user-select: none; pointer-events: none; }
.hp-carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 20px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; font-size: var(--t-sm); text-align: left; }
.hp-carousel-caption, .hp-viewer-caption { display: flex; flex-direction: column; gap: 2px; }
.hp-viewer-caption[hidden] { display: none; }
.hp-credit-game { font-weight: 600; color: inherit; }
a.hp-credit-game { text-decoration: underline; text-underline-offset: 2px; }
.hp-credit-caption { opacity: 0.85; }
.hp-carousel-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; opacity: 0.85; }
.hp-carousel-arrow:hover { opacity: 1; }
.hp-carousel-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hp-carousel-prev { left: 12px; }
.hp-carousel-next { right: 12px; }
.hp-carousel-dots { display: flex; gap: 8px; }
.hp-carousel-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; }
.hp-carousel-dot[aria-current="true"] { background: var(--accent); }
.hp-carousel-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .hp-carousel-track { transition: none; } }
@media (max-width: 620px) {
  .hp-carousel-arrow { width: 34px; height: 34px; margin-top: -17px; }
}

.hp-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); align-items: start; gap: var(--s-4); }
.hp-showcase-tile { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: var(--s-2); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken); }
.hp-showcase-thumb { display: block; width: 100%; height: auto; border-radius: 6px; }
.hp-showcase-caption { min-height: 1.4em; font-size: var(--t-sm); color: var(--text-strong); overflow-wrap: anywhere; }
.hp-showcase-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); }
.hp-jam-row-tools { flex-wrap: nowrap; justify-content: flex-end; }
@media (max-width: 1199px) {
  .hp-jam-row-tools .tl-btn-fold { aspect-ratio: 1; padding: 0; }
  .hp-jam-row-tools .tl-btn-fold > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.hp-showcase-file { display: none; }
.hp-showcase-pick { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.hp-showcase-chosen { font-size: var(--t-sm); overflow-wrap: anywhere; }
.hp-showcase-preview { display: block; width: 100%; max-height: 260px; margin-top: var(--s-3); object-fit: contain; border-radius: 8px; background: #000; }
.hp-showcase-progress:empty { display: none; }
.hp-showcase-progress { margin-top: var(--s-2); font-size: var(--t-sm); }

/* The showcase's large view (pricing.ts openViewer): the picture as big as the window allows, its caption under it. */
.hp-viewer { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; }
.hp-viewer::backdrop { background: rgba(0, 0, 0, 0.95); }
.hp-viewer[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); }
.hp-viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 72px; }
.hp-viewer-image { display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 8px; }
.hp-viewer-foot { display: flex; align-items: baseline; gap: var(--s-4); max-width: min(960px, 90vw); padding: 0 var(--s-4); }
.hp-viewer-caption { margin: 0; font-size: var(--t-md); }
.hp-viewer-count { color: rgba(255, 255, 255, 0.65); font-size: var(--t-sm); white-space: nowrap; }
.hp-viewer-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.hp-viewer-button:hover { background: rgba(255, 255, 255, 0.22); }
.hp-viewer-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hp-viewer-close { position: absolute; top: 16px; right: 16px; }
.hp-viewer-prev, .hp-viewer-next { position: absolute; top: 50%; margin-top: -22px; }
.hp-viewer-prev { left: 16px; }
.hp-viewer-next { right: 16px; }
@media (max-width: 620px) {
  .hp-viewer-stage { padding: 0 8px; }
  .hp-viewer-prev, .hp-viewer-next { top: auto; bottom: -60px; margin-top: 0; }
  .hp-viewer-prev { left: calc(50% - 56px); }
  .hp-viewer-next { right: calc(50% - 56px); }
  .hp-viewer-foot { margin-top: 56px; }
}
/* A quick double click on an arrow selects nothing: the pictures, captions and buttons of the carousel and its large view are not text to pick. */
.hp-carousel, .hp-carousel-dots, .hp-viewer { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.hp-carousel img, .hp-viewer img { -webkit-user-drag: none; }

/* The search above the permission boxes on the Staff page. */
.hp-perms-search { margin-top: var(--s-4); }
.hp-perms-none { margin-top: var(--s-4); }
.hp-perms-group[hidden], .hp-perm[hidden] { display: none; }

/* The Traffic page: the three sums and a bar a day. */
.hp-traffic-sums { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.hp-traffic-sum { display: flex; flex-direction: column; gap: 2px; }
.hp-traffic-number { color: var(--text-strong); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-traffic-bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin-top: var(--s-4); }
.hp-traffic-bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }

/* ------------------------------------------------ game jams: the public list and page, the stars, the operator's pages, the server's banner */

.hp-jam-page { gap: var(--s-6); padding: var(--s-8) 0 var(--s-6); min-width: 0; }
.hp-jam-head { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.hp-jam-title { color: var(--text-strong); font: 600 34px/1.15 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.hp-jam-lead { max-width: 80ch; margin: 0; color: var(--text-muted); font-size: var(--t-lg); line-height: 1.6; overflow-wrap: anywhere; }
.hp-jam-text { margin: 0; color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.hp-jam-stack { min-width: 0; }
.hp-jam-notice { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken); }
.hp-jam-notice-title { margin: 0; color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-jam-form { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-jam-progress:empty { display: none; }
.hp-jam-rules-box { min-height: 140px; }
.tl-dialog-wide.hp-jam-dialog { width: min(920px, calc(100vw - 32px)); max-width: none; max-height: min(820px, calc(100vh - 48px)); }
.hp-jam-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); padding-top: var(--s-2); }
.hp-jam-parts > .tl-group { display: flex; flex-direction: column; padding-top: 0; border-top: 0; }
.hp-jam-parts > .tl-group > .tl-fields { flex: 1; grid-template-rows: auto auto 1fr; margin-top: 0; }
.hp-jam-parts > .tl-group > .tl-fields > .tl-field:last-child { display: flex; flex-direction: column; }
.hp-jam-parts .hp-jam-rules-box { flex: 1; }
.hp-jam-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hp-jam-side .tl-group:first-child { padding-top: 0; border-top: 0; }
.hp-jam-side .tl-fields { margin-top: 0; }
.hp-jam-part-hint { margin: calc(var(--s-2) * -1) 0 var(--s-3); }
@media (max-width: 760px) {
  .hp-jam-parts { grid-template-columns: minmax(0, 1fr); }
}
.hp-jam-none { padding: var(--s-8) 0; }
.hp-jam-banner { background: var(--accent); }
.hp-jam-banner-link { display: flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-4); font-size: var(--t-sm); color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.hp-jam-banner-tag { flex-shrink: 0; padding: 2px var(--s-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.18); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.hp-jam-banner-title { min-width: 0; overflow: hidden; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.hp-jam-banner-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-jam-banner-action { display: inline-flex; flex-shrink: 0; align-items: center; gap: 2px; padding: 4px var(--s-3); border-radius: var(--r-pill); background: #fff; font-weight: 700; color: var(--accent); }
.hp-jam-banner-link:hover .hp-jam-banner-action { background: rgba(255, 255, 255, 0.88); }
@media (max-width: 640px) {
  .hp-jam-banner-link { justify-content: space-between; }
  .hp-jam-banner-tag, .hp-jam-banner-detail { display: none; }
}

/* The list of jams: the one to look at now, the others as cards, and how a jam works. */
.hp-jam-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); }
.hp-jam-feature-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); min-width: 0; padding: var(--s-8); background: linear-gradient(135deg, var(--accent-soft), transparent 65%); }
.hp-jam-feature-title { margin: 0; color: var(--text-strong); font: 600 40px/1.1 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.hp-jam-feature-text { max-width: 60ch; margin: 0; color: var(--text-muted); font-size: var(--t-md); line-height: 1.6; overflow-wrap: anywhere; }
.hp-jam-feature-main .tl-btn { height: 44px; margin-top: var(--s-2); padding: 0 22px; font-size: var(--t-md); }
.hp-jam-schedule { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-6); border-left: 1px solid var(--border); background: var(--surface-sunken); }
.hp-jam-schedule-title { margin: 0; color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-jam-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hp-jam-step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-5); }
.hp-jam-step:last-child { padding-bottom: 0; }
.hp-jam-step:not(:last-child)::before { content: ""; position: absolute; top: 20px; bottom: 0; left: 9px; width: 2px; background: var(--border); }
.hp-jam-step.is-done:not(:last-child)::before { background: var(--accent); }
.hp-jam-step-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--on-accent); }
.hp-jam-step.is-done .hp-jam-step-mark { border-color: var(--accent); background: var(--accent); }
.hp-jam-step.is-next .hp-jam-step-mark { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hp-jam-step-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--t-sm); }
.hp-jam-step-label { color: var(--text-muted); }
.hp-jam-step-date { color: var(--text-strong); font-weight: 500; font-variant-numeric: tabular-nums; }
.hp-jam-step-left { color: var(--accent-text); font-weight: 600; }
.hp-jam-section { display: flex; flex-direction: column; gap: var(--s-4); }
.hp-jam-heading { margin: 0; color: var(--text-strong); font: 600 22px/1.2 var(--font-display); letter-spacing: -0.02em; }
.hp-jam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s-5); align-items: stretch; }
.hp-jam-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-5); border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
.hp-jam-card:hover { border-color: var(--accent-line); }
.hp-jam-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; }
.hp-jam-card-title { margin: 0; color: var(--text-strong); font-size: var(--t-lg); font-weight: 600; overflow-wrap: anywhere; }
.hp-jam-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); font-size: var(--t-sm); }
.hp-jam-card-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hp-jam-card-view { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); font-weight: 500; }
.hp-jam-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: 0; padding: 0; list-style: none; }
.hp-jam-how-step { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.hp-jam-how-number { color: var(--accent-text); font: 600 22px/1.2 var(--font-display); }
.hp-jam-how-title { margin: 0; color: var(--text-strong); font-size: var(--t-md); font-weight: 600; }
.hp-jam-how-text { margin: 0; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 899px) {
  .hp-jam-feature { grid-template-columns: minmax(0, 1fr); }
  .hp-jam-schedule { border-top: 1px solid var(--border); border-left: 0; }
}

/* The page of one jam: the work on one side, the rules and the notice on the other. */
.hp-jam-back { display: inline-flex; align-items: center; align-self: flex-start; gap: 2px; margin-bottom: calc(var(--s-3) * -1); color: var(--text-muted); font-size: var(--t-sm); text-decoration: none; }
.hp-jam-back:hover { color: var(--text-strong); }
.hp-jam-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--s-5); align-items: start; }
#jam-join, #jam-entries { scroll-margin-top: var(--s-8); }
@media (max-width: 899px) {
  .hp-jam-body { grid-template-columns: minmax(0, 1fr); }
  .hp-jam-body > aside { order: -1; }
}

/* The entries of a jam. */
.hp-jam-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-4); align-items: start; }
.hp-jam-entry { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-sunken); }
.hp-jam-entry.is-winner { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.hp-jam-shot { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; background: #000; }
.hp-jam-entry-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); min-width: 0; }
.hp-jam-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.hp-jam-entry-title { margin: 0; color: var(--text-strong); font-size: var(--t-md); font-weight: 600; overflow-wrap: anywhere; }
.hp-jam-by { margin: 0; color: var(--text-muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.hp-jam-entry-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hp-jam-rating { color: var(--text-muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.hp-jam-play { margin-left: auto; font-weight: 500; }

/* Stars: a picture beside the words, and five buttons to give one. */
.hp-stars { display: inline-flex; gap: 1px; }
.hp-star { color: var(--text-faint); }
.hp-star.is-on { color: var(--warning); fill: currentColor; }
.hp-rate { display: flex; gap: 2px; margin-top: var(--s-1); }
.hp-rate-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.hp-rate-btn:hover { background: var(--fill-strong); }
.hp-rate-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* The operator's page for one jam. */
.hp-jam-rules { margin-top: var(--s-4); }
.hp-jam-rules > summary { cursor: pointer; color: var(--accent-text); font-weight: 500; }
.hp-jam-rules > p { margin-top: var(--s-2); white-space: pre-line; }
.hp-jam-admin-entries { display: flex; flex-direction: column; gap: var(--s-3); }
.hp-jam-admin-entry { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-sunken); }
.hp-jam-admin-entry.is-winner { border-color: var(--accent-line); }
.hp-jam-admin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--t-sm); }
.hp-jam-rank { min-width: 2.5ch; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-jam-voters > summary { cursor: pointer; color: var(--accent-text); font-weight: 500; }
.hp-jam-voters .tl-table-scroll { margin-top: var(--s-2); }
.hp-jam-voter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hp-jam-voter-stars { display: inline-flex; align-items: center; gap: var(--s-1); }
.hp-jam-failed { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .hp-jam-page { padding-top: var(--s-6); }
  .hp-jam-title { font-size: 26px; }
  .hp-jam-lead { font-size: var(--t-md); }
  .hp-jam-card { padding: var(--s-4); }
  .hp-jam-feature-main { padding: var(--s-5); }
  .hp-jam-feature-title { font-size: 30px; }
  .hp-jam-schedule { padding: var(--s-5); }
  .hp-jam-how { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* With the Game Jams link the top bar is wider than a phone: the brand shows its mark alone, the links sit closer, and the end never shrinks. */
@media (max-width: 480px) {
  .hp-site-top { gap: var(--s-2); }
  .hp-site-top .tl-brand-words { display: none; }
  .hp-site-top-end { flex-shrink: 0; gap: var(--s-1); }
  .hp-site-top-link { padding: 0 var(--s-1); }
}