/* HonkWatch stylesheet. Built from DESIGN.md, in the same order: tokens, base, brand, layout, then components. */

/* ---- 1. tokens ------------------------------------------------------------ */
:root {
  --accent: #f06010; --accent-ink: #181817;
  --ink: #181817; --text: #181817; --muted: #66635e;
  --bg: #efece6; --surface: #faf8f4; --surface-2: #f3f0ea; --line: #dcd7cd; --nav: #17181b;
  --nav-text: #b3b8bf; --nav-text-on: #f2f3f5; --nav-hover: rgba(242, 243, 245, .06); --nav-on: rgba(242, 243, 245, .1); --nav-line: rgba(242, 243, 245, .09);
  --up: #24785a; --up-bar: #2f8f6a; --down: #b33d3d; --warn: #8f5a08; --none: #e2ddd4;
  --shadow: none;
  --r-s: 5px; --r: 8px; --r-l: 10px;
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, "SF Mono", monospace;
  --goose-body: #faf8f4; --goose-wing: #e2ddd4; --mark-head: #faf8f4; --mark-arc: #f06010;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #f06010; --accent-ink: #0e0f11;
  --ink: #f2f3f5; --text: #f2f3f5; --muted: #b3b8bf;
  --bg: #0e0f11; --surface: #17181b; --surface-2: #1f2125; --line: #2a2d32; --nav: #0b0c0e;
  --nav-text: #a6abb3; --nav-hover: rgba(242, 243, 245, .05); --nav-on: rgba(242, 243, 245, .08); --nav-line: rgba(242, 243, 245, .08);
  --up: #3fa57d; --up-bar: #2f8f6a; --down: #d65c5c; --warn: #d9a03a; --none: #24262a;
  --shadow: none;
  --goose-body: #e8e3da; --goose-wing: #c8c1b6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #f06010; --accent-ink: #0e0f11;
  --ink: #f2f3f5; --text: #f2f3f5; --muted: #b3b8bf;
  --bg: #0e0f11; --surface: #17181b; --surface-2: #1f2125; --line: #2a2d32; --nav: #0b0c0e;
  --nav-text: #a6abb3; --nav-hover: rgba(242, 243, 245, .05); --nav-on: rgba(242, 243, 245, .08); --nav-line: rgba(242, 243, 245, .08);
  --up: #3fa57d; --up-bar: #2f8f6a; --down: #d65c5c; --warn: #d9a03a; --none: #24262a;
  --shadow: none;
  --goose-body: #e8e3da; --goose-wing: #c8c1b6;
  }
}

/* ---- 2. base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; font: 15px/1.5 var(--body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1 { font: 800 32px/1.15 var(--display); letter-spacing: -.015em; margin: 0 0 6px; }
h2 { font: 700 20px/1.25 var(--display); margin: 32px 0 12px; }
h3 { font: 700 17px/1.3 var(--display); margin: 0 0 10px; }
p { margin: 0 0 12px; }
code, pre { font: 13px var(--mono); background: var(--surface-2); border-radius: 4px; }
code { padding: 2px 6px; word-break: break-all; }
pre { padding: 12px 14px; white-space: pre-wrap; border: 1px solid var(--line); margin: 0 0 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sub { color: var(--muted); font-size: 13.5px; }
.s-up { color: var(--up); } .s-down { color: var(--down); } .s-warn { color: var(--warn); }
.r { text-align: right; } .nowrap { white-space: nowrap; } .wrap { word-break: break-all; }
.between { display: flex; justify-content: space-between; gap: 10px; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -5px; }
svg.i.s { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- 3. brand ---------------------------------------------------------------- */
.logo { font: 800 22px var(--display); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.logo img { height: 28px; }
.beak { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 13px solid var(--accent); flex: none; }
.beak.small { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 9px; display: inline-block; margin-right: 5px; }

/* ---- 4. layout ---------------------------------------------------------------- */
main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 72px; }
body.app { display: flex; min-height: 100vh; }
body.app main { flex: 1; max-width: 1280px; margin: 0; padding: 36px 40px 90px; min-width: 0; }
.side { width: 240px; flex: none; background: var(--side-bg); color: var(--side-text); padding: 24px 16px 20px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .logo { color: #faf8f4; padding: 0 10px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 11px; color: var(--side-text); text-decoration: none; padding: 9px 12px; border-radius: 8px; position: relative; font-size: 14.5px; }
.side nav a:hover { background: var(--side-hover); color: var(--side-on); }
.side nav a.on { background: var(--side-active); color: var(--side-on); font-weight: 600; }
.side nav a.on::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side nav .sep { height: 1px; background: var(--side-line); margin: 10px 12px; }
.who { margin-top: auto; border-top: 1px solid var(--side-line); padding: 14px 10px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; word-break: break-all; }
.who .me { color: var(--side-on); font-weight: 600; font-size: 14px; }
.who .sub { color: var(--side-text); }
.who select { background: var(--side-hover); color: var(--side-on); border: 1px solid var(--side-line); margin-top: 4px; }
.who select option { color: #17181b; }
.who button.link { color: var(--side-text); }
.who button.link:hover { color: var(--side-on); }
.who-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.theme { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--side-line); color: var(--side-text); border-radius: var(--r-s); padding: 0 10px 0 8px; height: 28px; line-height: 26px; font: 600 12.5px var(--body); cursor: pointer; }
.theme:hover { color: var(--side-on); border-color: var(--side-text); filter: none; background: none; }
.theme .i { width: 16px; height: 16px; }
.theme .i-sun, .theme .i-moon, .theme .i-auto { display: none; }
:root[data-theme="light"] .theme .i-sun, :root[data-theme="dark"] .theme .i-moon, :root:not([data-theme]) .theme .i-auto { display: block; }
.top { display: flex; align-items: center; gap: 24px; padding: 18px 24px; max-width: 1100px; margin: 0 auto; }
.top nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.top nav a { text-decoration: none; font-weight: 600; }
.top .theme { border-color: var(--line); color: var(--muted); }
.top .theme:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 860px) {
  body.app { display: block; }
  .side { width: auto; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
  .side .logo { padding: 0; font-size: 20px; }
  .side nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; width: 100%; order: 3; gap: 4px; scrollbar-width: none; }
  .side nav a { white-space: nowrap; padding: 7px 11px; }
  .side nav a.on::before, .side nav .sep, .side nav .i { display: none; }
  .who { margin: 0 0 0 auto; border: 0; padding: 0; flex-direction: row; align-items: center; gap: 10px; }
  .who .me, .who label, .who form[action="/team/leave"] { display: none; }
  body.app main { padding: 20px 16px 60px; }
  h1 { font-size: 26px; }
}

/* ---- 5. page header --------------------------------------------------------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.ph h1 { margin-bottom: 2px; }
.ph .lede { margin: 0; }
.ph .actions { padding-top: 6px; }
.lede { color: var(--muted); font-size: 15.5px; }
.lede b { color: var(--ink); }
.crumbs { margin: 0 0 6px; font-size: 13.5px; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.tabs { display: flex; gap: 4px; align-items: center; margin: -6px 0 14px; color: var(--muted); font-size: 14px; }
.tabs a { text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.tabs a.current { background: var(--surface-2); color: var(--ink); font-weight: 600; }

/* ---- 6. buttons and inputs --------------------------------------------------- */
button, .button { font: 600 14.5px var(--body); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 8px; padding: 0 16px; height: 38px; line-height: 36px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
button:hover, .button:hover { filter: brightness(.94); color: var(--accent-ink); }
button.ghost, .button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.ghost:hover, .button.ghost:hover { filter: none; border-color: var(--muted); color: var(--ink); }
button.danger { color: var(--down); }
button.danger:hover { border-color: var(--down); color: var(--down); }
button.link { background: none; border: 0; color: inherit; padding: 0; height: auto; line-height: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; display: inline; }
button.link:hover { color: var(--accent); filter: none; }
button.sm, .button.sm { height: 30px; line-height: 28px; padding: 0 11px; font-size: 13px; border-radius: 6px; }
.button.big { height: 46px; line-height: 44px; padding: 0 22px; font-size: 16px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input[type=color] { width: 60px; padding: 2px; height: 38px; }
input:disabled { background: var(--surface-2); color: var(--muted); }
::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ---- 7. cards, notices, empty ----------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 20px; }
.card h2, .card h3 { margin-top: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 22px; }
.cards > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; position: relative; }
.cards b { display: block; font: 800 34px/1.2 var(--display); letter-spacing: -.02em; }
.cards span { color: var(--muted); font-size: 13px; display: block; line-height: 1.4; margin-top: 2px; }
.cards > div:has(> .ico) > b { padding-right: 44px; }
.cards span small { display: block; font-size: 12.5px; }
.cards .is-down b { color: var(--down); }
.cards .is-down::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--down); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; gap: 10px; } .cards b { font-size: 24px; } }
.notice, .error, .alertline { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--r-s); padding: 10px 14px; margin: 0 0 14px; }
.notice.warn { border-left-color: var(--warn); }
.error, .alertline { border-left-color: var(--down); color: var(--text); }
.empty { color: var(--muted); padding: 28px 20px; text-align: center; }
.empty-card { color: var(--muted); }

/* ---- 8. status ---------------------------------------------------------------- */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; text-transform: capitalize; white-space: nowrap; color: var(--muted); }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--none); flex: none; }
.st-up { color: var(--up); }
.list .st-up { font-weight: 700; }
.st-up::before { background: var(--up); }
.st-down { color: var(--down); font-weight: 700; }
.st-down::before { background: var(--down); }
.st-paused { color: var(--muted); } .st-pending::before { background: var(--warn); }
h1 .st { font-size: 14px; vertical-align: 7px; margin-right: 4px; }
h1 .st-up { font-weight: 700; }
.bars { display: flex; gap: 2px; height: 30px; }
.bars i { flex: 1; background: var(--none); border-radius: 2px; }
.bars i.ok { background: var(--up-bar); } .bars i.warn { background: var(--warn); } .bars i.bad { background: var(--down); }
.bars.mini { height: 24px; }
.bars.big { height: 40px; gap: 3px; margin: 4px 0 6px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font: 11px var(--body); }
.chart .area { fill: var(--accent); opacity: .12; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }

/* ---- 9. tables ---------------------------------------------------------------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
table.list, table.plain, table.grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.list th, .list td, .plain th, .plain td, .grid th, .grid td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.list tr:last-child td, .plain tr:last-child th, .plain tr:last-child td, .grid tr:last-child td { border-bottom: 0; }
.list th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--surface-2); padding: 11px 16px; }
.list tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.list.small td { padding: 7px 16px; font-size: 13.5px; }
.plain th { width: 190px; font-weight: 600; color: var(--muted); }
.plain.small th, .plain.small td { padding: 6px 16px; font-size: 14px; }
.grid th { background: var(--surface-2); font: 700 16px var(--display); }
.grid td, .grid th { text-align: center; } .grid td:first-child, .grid th:first-child { text-align: left; }
tr.group td { font: 700 15px var(--display); background: var(--surface-2); }
.list .name a { font-weight: 700; font-size: 15.5px; text-decoration: none; }
.list .name a:hover { color: var(--accent); }
.list tr.is-down td { background: color-mix(in srgb, var(--down) 7%, var(--surface)); }
.list tr.is-down:hover td { background: color-mix(in srgb, var(--down) 11%, var(--surface)); }
@media (max-width: 700px) {
  .list thead { display: none; }
  .list tr { display: block; padding: 10px 6px; border-bottom: 1px solid var(--line); }
  .list td { display: inline-block; border: 0; padding: 3px 10px; vertical-align: middle; }
}

/* ---- 10. list card with filters -------------------------------------------- */
.listcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.listcard table.list { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.listcard > p { padding: 20px; margin: 0; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filters input[name=q] { flex: 1 1 220px; width: auto; padding-left: 36px; background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7385' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px 50%; }
.filters select { width: auto; background-color: var(--bg); }
.filters label.check { margin: 0 6px; }
.filters .apply { display: none; }
.bulk { display: none; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; background: var(--surface-2); }
.bulk.on { display: flex; }
.bulk label.check { margin: 0 8px 0 0; }
.mon td:first-child, .mon th:first-child { width: 34px; padding-right: 0; }
.mon .minibars { width: 200px; }
.mon .minibars .sub { margin-top: 3px; }

/* ---- 11. forms ---------------------------------------------------------------- */
.form, .narrow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; }
.form { max-width: 640px; margin-bottom: 18px; }
.form.wide { max-width: 860px; }
.form.wide > label, .form.wide > fieldset, .form.wide > details, .form.wide > div[data-for], .form.wide > p:not(.step) { max-width: 600px; }
.form h1, .form h2, .narrow h1 { margin-top: 0; }
.form label, .narrow label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 14px; }
.form label input, .form label select, .form label textarea, .narrow label input { margin-top: 5px; font-weight: 400; }
label.check, .form label.check { display: inline-flex; gap: 7px; align-items: center; margin: 0 16px 8px 0; font-weight: 400; font-size: 15px; }
.narrow { max-width: 400px; margin: 48px auto; }
.narrow p { margin: 14px 0 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-s); margin: 0 0 16px; padding: 12px 16px 4px; background: var(--bg); }
legend { font: 700 15px var(--display); padding: 0 6px; }
details { margin: 0 0 16px; border-top: 1px solid var(--line); padding-top: 12px; }
summary { cursor: pointer; margin-bottom: 12px; font-weight: 600; }
summary::marker { color: var(--accent); }
.step { font: 700 16px var(--display); margin: 4px 0 12px; }
.cols { columns: 3 170px; margin-bottom: 12px; }
.cols label { display: flex; }
.inline, .inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline input, .inline select { width: auto; }
.inline-form label { flex: 1 1 150px; }
.inline-form button { align-self: flex-end; margin-bottom: 14px; }
.apibox { padding: 14px 20px; border-top: 1px solid var(--line); }
.apibox summary { margin: 0; }
.apibox[open] summary { margin-bottom: 12px; }
.apibox table.list { box-shadow: none; margin: 0; }
.formfoot { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; }
.typepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 22px; }
.typepick.kinds { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
label.tp, .form label.tp { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg); font-weight: 400; transition: border-color .12s, background .12s; }
label.tp:hover { border-color: var(--muted); }
label.tp input { flex: none; margin: 3px 0 0; }
label.tp span { flex: 1; min-width: 0; }
label.tp b { display: block; font-size: 14.5px; }
label.tp small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 1px; }
label.tp:has(input:checked) { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---- 12. monitor page --------------------------------------------------------- */
.target { font-family: var(--mono); font-size: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.locs { list-style: none; margin: 0; padding: 0; }
.locs li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.locs li:last-child { border: 0; }
.locs .st { padding: 0; background: none; }

.hb pre { margin: 10px 0 6px; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }

/* ---- 13. auth and home -------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-side { background: var(--nav); color: var(--nav-text); padding: 44px 56px; display: flex; flex-direction: column; }
.auth-side .logo { color: #faf8f4; font-size: 24px; }
.auth-side h2 { font: 800 40px/1.1 var(--display); color: #faf8f4; margin: 64px 0 22px; max-width: 460px; letter-spacing: -.02em; }
.auth-side p { color: var(--nav-text); max-width: 440px; font-size: 16px; }
.auth-side .fine { margin-top: auto; font-size: 13px; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-main > div { width: 100%; max-width: 400px; }
.auth-main .narrow { margin: 0; width: 100%; padding: 30px 30px 24px; }
.auth-main .narrow h1 { font-size: 28px; }
.auth-main .narrow button { width: 100%; justify-content: center; height: 42px; margin-top: 4px; }
.sample { margin-top: 26px; background: var(--nav-hover); border: 1px solid var(--nav-line); border-radius: 12px; padding: 14px 16px; max-width: 440px; }
.sample div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: #ece8e0; }
.sample div + div { border-top: 1px solid var(--nav-line); }
.sample .st { text-transform: none; }
.sample .st-up { color: #6cc19c; } .sample .st-up::before { background: #6cc19c; box-shadow: none; }
.hero { background: var(--nav); color: var(--nav-text); border-radius: 18px; padding: 54px 56px; margin: 8px 0 30px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.hero h1 { color: #faf8f4; font-size: 48px; line-height: 1.04; margin: 0 0 16px; letter-spacing: -.025em; }
.hero p { font-size: 17px; max-width: 520px; }
.hero .sample { margin: 0; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; } .auth-side { padding: 28px 22px; } .auth-side h2 { margin-top: 26px; font-size: 30px; } .auth .sample { display: none; }
  .hero { grid-template-columns: 1fr; padding: 30px 22px; } .hero h1 { font-size: 34px; }
}

/* ---- 14. public status page ---------------------------------------------- */
body.status main { max-width: 780px; margin-top: -50px; padding-top: 0; }
.sp-head { background: var(--nav); color: #faf8f4; padding: 34px 0 70px; }
.sp-wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sp-brand { display: flex; align-items: center; gap: 12px; }
.sp-head h1 { color: #faf8f4; margin: 0; }
.plogo { height: 46px; }
.sp-head .button.ghost { background: transparent; color: #faf8f4; border-color: rgba(255, 255, 255, .3); }
.sp-head .button.ghost:hover { border-color: #faf8f4; }
.sp-intro { margin: 0 0 14px; color: #cfc8bd; position: relative; top: -14px; }
.overall { display: flex; gap: 14px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); }
.overall b { display: block; font: 800 22px var(--display); }
.overall span { color: var(--muted); font-size: 13.5px; }
.overall-down b { color: var(--down); }
.ov-mark { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--up); position: relative; }
.ov-mark::after { content: ""; position: absolute; left: 13px; top: 8px; width: 9px; height: 16px; border: solid #faf8f4; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.overall-partial .ov-mark { background: var(--warn); } .overall-down .ov-mark { background: var(--down); }
.overall-partial .ov-mark::after, .overall-down .ov-mark::after { left: 17px; top: 8px; width: 0; height: 14px; border-width: 0 0 0 4px; transform: none; border-radius: 2px; }
.svcs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); margin-top: 16px; overflow: hidden; }
.svc { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.svc:last-child { border-bottom: 0; }
.svc-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.svc .bars { height: 34px; margin: 10px 0 6px; }
.svc .bars i:hover { opacity: .7; }
.timeline { list-style: none; margin: 0; padding: 4px 0 0; }
.timeline li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--line); margin-left: 8px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--up); border: 2px solid var(--bg); }
.timeline li.open::before { background: var(--down); }
.timeline li:last-child { border-left-color: transparent; }
.tl-when { font-size: 13px; color: var(--muted); }
.tl-note { margin-top: 4px; color: var(--muted); }
.subscribe { margin-top: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: 22px; }
.subscribe h2 { margin: 0 0 12px; font-size: 18px; }
.sub-row { display: flex; gap: 10px; }
.sub-row input { flex: 1; }
footer { margin-top: 40px; color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
footer a { text-decoration: none; font-weight: 600; }
footer .theme { border-color: var(--line); color: var(--muted); }
footer .theme:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 640px) { .sp-head h1 { font-size: 24px; } .sp-sub { display: none; } .sub-row { flex-direction: column; } }

/* ---- 15. artwork ------------------------------------------------------------- */
.art { display: block; max-width: 100%; height: auto; }
.shot { filter: drop-shadow(0 18px 30px rgba(18, 17, 16, .25)); }
.hero { grid-template-columns: 1fr 1.1fr; padding: 48px 20px 48px 56px; overflow: hidden; }
.hero-text { position: relative; }
.hero-text .goose { position: absolute; right: -10px; top: -22px; width: 86px; height: 86px; }
.hero-shot { transform: perspective(1400px) rotateY(-10deg) rotateX(3deg); transform-origin: left center; margin-right: -60px; }
.hero .cta { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.where { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; align-items: center; margin: 40px 0 10px; }
.where h2 { margin-top: 0; }
.where p { font-size: 16px; }
.pulse { transform-origin: center; animation: pulse 2.4s ease-out infinite; transform-box: fill-box; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }
.auth-shot { position: relative; margin-top: 30px; max-width: 480px; }
.auth-shot .goose { position: absolute; right: -24px; bottom: -34px; }
.empty-art { display: flex; gap: 24px; align-items: center; padding: 28px 24px; }
.empty-art h3 { margin-bottom: 6px; }
.empty-art p { color: var(--muted); max-width: 440px; }
.empty-art .button { margin-top: 4px; }
label.tp .tp-i { width: 22px; height: 22px; margin-top: 1px; color: var(--muted); }
label.tp:has(input:checked) .tp-i { color: var(--accent); }
.bars-anim rect { transform-origin: center bottom; transform-box: fill-box; animation: grow .9s cubic-bezier(.2, .8, .3, 1) backwards; }
.bars-anim rect:nth-child(odd) { animation-delay: .15s; } .bars-anim rect:nth-child(3n) { animation-delay: .3s; }
@keyframes grow { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .pulse, .bars-anim rect { animation: none; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 28px 22px; }
  .hero-shot { transform: none; margin: 10px 0 0; }
  .hero-text .goose { display: none; }
  .where { grid-template-columns: 1fr; }
  .auth .auth-shot { display: none; }
  .empty-art { flex-direction: column; text-align: center; }
}

/* ---- 16. logo mark and home sections ------------------------------------------ */
.mark { flex: none; }
.logo .mark { border-radius: 0; }
img.mark { display: inline-block; vertical-align: -4px; }
footer .brandmark, footer.site .brandmark { vertical-align: -6px; margin-right: 4px; }
.top .logo .mark, .hero .mark { --mark-head: var(--ink); }
:root[data-theme="dark"] .top .logo .mark { --mark-head: #faf8f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top .logo .mark { --mark-head: #faf8f4; } }
footer.site .mark { vertical-align: -5px; margin-right: 4px; --mark-head: var(--ink); }
.auth-shot .goose { z-index: 2; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 10px; }
.steps > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 22px 16px; }
.steps .n { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 15px var(--display); margin-bottom: 12px; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); margin: 0; }
.feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.feat > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 14px; }
.feat .i { width: 26px; height: 26px; color: var(--accent); margin-bottom: 10px; }
.feat h3 { font-size: 16px; margin-bottom: 4px; }
.feat p { color: var(--muted); font-size: 14px; margin: 0; }
.where.flip { grid-template-columns: 1.1fr 1fr; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 20px 20px; display: flex; flex-direction: column; }
.plan.pick { border-color: var(--ink); }
.plan .tag { position: absolute; top: -10px; left: 16px; background: var(--accent); color: var(--accent-ink); font: 700 11.5px var(--body); padding: 2px 8px; border-radius: 3px; letter-spacing: .02em; }
.plan h3 { margin-bottom: 2px; }
.plan .price { font: 800 30px var(--display); letter-spacing: -.02em; }
.plan .price small { font: 600 14px var(--body); color: var(--muted); margin-left: 2px; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 18px; font-size: 14px; }
.plan li { padding: 6px 0; border-top: 1px solid var(--line); }
.plan .button { margin-top: auto; justify-content: center; }
footer.site { max-width: 1080px; margin: 50px auto 0; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .where.flip { grid-template-columns: 1fr; } .where.flip .art { order: 2; } }

/* ---- 17. marketing page (home) ------------------------------------------------ */
body.marketing .top { border-bottom: 1px solid var(--line); max-width: none; padding: 14px 40px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
body.marketing .top nav a:not(.button) { color: var(--text); }
body.marketing main { max-width: none; padding: 0; overflow-x: hidden; }
.mk-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 70px 40px 60px; position: relative; }
.mk-hero::before { content: none; }
.mk-hero-text { position: relative; }
.mk-hero h1 { font-size: 54px; line-height: 1.04; letter-spacing: -.03em; margin: 18px 0 16px; max-width: 560px; }
.mk-hero p.big { font-size: 19px; color: var(--muted); max-width: 520px; }
.mk-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 26px; }
.live { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; border: 1px solid var(--line); border-left: 3px solid var(--up); border-radius: 6px; background: var(--surface); padding: 7px 12px 7px 12px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap; overflow: hidden; }
.live span { overflow: hidden; text-overflow: ellipsis; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--up); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); animation: livedot 2s ease-out infinite; }
.live em { font-style: normal; }
.live:hover { border-color: var(--up); color: var(--text); }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.proof { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.proof b { color: var(--ink); font: 800 18px var(--display); margin-right: 4px; }
.mk-hero-shot { position: relative; }

.mk-section { max-width: 1180px; margin: 0 auto; padding: 60px 40px; }
.mk-section + .mk-section { padding-top: 10px; }
.center { text-align: center; }
h2.center { font-size: 36px; letter-spacing: -.02em; margin: 0 auto 10px; max-width: 760px; }
.mk-section > .lede { margin: 0 auto 36px; max-width: 640px; font-size: 17px; }
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 4px rgba(18, 17, 16, .04), 0 16px 40px -20px rgba(18, 17, 16, .25); padding: 32px 28px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.mk-card h3 { font-size: 20px; margin: 18px 0 8px; }
.mk-card p { color: var(--muted); flex: 1; }
.mk-card a { font-weight: 600; color: var(--ink); }
svg.big { width: 72px; height: 72px; }
svg.big.sm { width: 52px; height: 52px; flex: none; }
.mk-band { background: none; color: var(--text); padding: 56px 40px 40px; margin: 10px auto 0; max-width: 1180px; border-top: 1px solid var(--line); }
.mk-band h2 { color: var(--ink); text-align: left !important; max-width: 1100px; margin: 0 auto; }
.mk-band > p.center { text-align: left; max-width: 1100px; margin: 0 auto; }
.mk-band a { color: var(--ink); font-weight: 600; }
.mk-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 26px auto 22px; max-width: 1100px; }
.mk-lists > div { background: none; color: var(--text); border-radius: 0; padding: 0; }
.mk-lists h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--body); }
.mk-lists ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.mk-lists li { padding: 9px 0 9px 22px; position: relative; break-inside: avoid; font-size: 15.5px; border-top: 1px solid var(--line); }
.mk-lists li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px; border: solid var(--up); border-width: 0 0 2px 2px; transform: rotate(-45deg); background: none; border-radius: 0; }
.mk-lists li::after { content: none; }
.mk-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin-top: 24px; }
.mk-rows > div { display: flex; gap: 16px; align-items: flex-start; }
.mk-rows h3 { font-size: 17px; margin: 6px 0 6px; }
.mk-rows p { color: var(--muted); margin: 0; font-size: 14.5px; }
.mk-cta { max-width: 1180px; margin: 20px auto 0; padding: 40px; display: flex; align-items: center; gap: 28px; background: var(--surface-2); border-radius: 18px; }
.mk-cta h2 { margin: 0 0 4px; }
.mk-cta p { margin: 0; color: var(--muted); }
.mk-cta .button { margin-left: auto; }
body.marketing footer.site { max-width: 1180px; padding: 20px 40px 40px; }
@media (max-width: 960px) {
  .mk-hero { grid-template-columns: 1fr; padding: 40px 20px 20px; }
  .mk-hero h1 { font-size: 36px; }
  .mk-hero-shot { transform: none; margin: 20px 0 0; }
  .mk-cards, .mk-rows { grid-template-columns: 1fr 1fr; }
  .mk-section { padding: 40px 20px; }
  .mk-lists { grid-template-columns: 1fr; }
  body.marketing .top { padding: 12px 16px; }
  .mk-cta { flex-direction: column; text-align: center; margin: 20px 16px; }
  .mk-cta .button { margin: 0; }
}
@media (max-width: 600px) { .mk-cards, .mk-rows { grid-template-columns: 1fr; } .mk-lists ul { columns: 1; } }

/* ---- 18. the owner's icon set ------------------------------------------------- */
.ico { display: inline-flex; width: var(--s); height: var(--s); flex: none; vertical-align: middle; }
.ico img { width: var(--s); height: var(--s); display: block; }
.ico .ico-dark { display: none; }
:root[data-theme="dark"] .ico .ico-light { display: none; } :root[data-theme="dark"] .ico .ico-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico .ico-light { display: none; } :root:not([data-theme="light"]) .ico .ico-dark { display: block; } }
.ico.tile img { border-radius: 22%; }
.nico { width: 22px; height: 22px; flex: none; }
.side nav a .nico { opacity: .85; } .side nav a.on .nico, .side nav a:hover .nico { opacity: 1; }
.ph > div:first-child:has(> .ico) { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.ph > div:first-child:has(> .ico) > .ico { grid-row: 1 / span 2; }
.ph > div:first-child:has(> .ico) > h1, .ph > div:first-child:has(> .ico) > .lede { grid-column: 2; }
.ph > div:first-child:has(> .ico) > h1:last-child { grid-row: 1 / span 2; }
.cards .c-ink .ico-light { display: none; } .cards .c-ink .ico-dark { display: block; }
.cards > div { padding-right: 70px; }
.cards > div > .ico { position: absolute; right: 18px; top: 18px; }
.cards .c-down { background: color-mix(in srgb, var(--down) 5%, var(--surface)); border-color: color-mix(in srgb, var(--down) 35%, var(--line)); }
.cards .c-up { background: var(--surface); }
.cards .c-up b { color: var(--up); }
.cards .c-ink { background: var(--nav); border-color: var(--nav); color: #f2f3f5; }
.cards .c-ink b { color: #faf8f4; } .cards .c-ink span { color: #b3b8bf; }
.cards .c-used { background: var(--surface); }
.empty-art .ico { flex: none; }
.auth-shot .tile { position: absolute; right: -10px; bottom: -40px; filter: drop-shadow(0 10px 20px rgba(18, 17, 16, .3)); }
.hero-text .ico { position: absolute; right: -10px; top: -30px; }
.mk-card .ico { margin-bottom: 4px; }
.mk-rows .ico { flex: none; margin-top: 2px; }
.mk-cta .ico { flex: none; }

/* ---- 19. monitoring dashboard: overview, events, monitor cards -------------------- */
.overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; margin-bottom: 20px; }
.overview .card { margin: 0; }
.ov-chart .chart { margin-top: 4px; }
.ov-chart .mark { fill: var(--down); opacity: .18; }
.legend { margin: 8px 0 0; }
.legend i { display: inline-block; width: 14px; height: 3px; background: var(--accent); vertical-align: middle; margin: 0 4px 0 2px; border-radius: 2px; }
.legend .lg-mark { background: var(--down); opacity: .7; width: 2px; height: 12px; margin-left: 14px; }
.events { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.events li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.events li:last-child { border: 0; }
.events li i { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.events .ev-down i { background: var(--down); }
.events .ev-up i { background: var(--up-bar); }
.events .ev-ack i { background: var(--warn); }
.events .ev-alert i { background: var(--accent); }
.layout { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: auto; }
.layout a { padding: 6px 11px; text-decoration: none; color: var(--muted); font-size: 16px; line-height: 1; background: var(--surface); }
.layout a.on { background: var(--surface-2); color: var(--ink); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 16px; }
.mcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 16px 14px; text-decoration: none; color: var(--text); position: relative; transition: transform .12s, box-shadow .12s, border-color .12s; }
.mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--muted); color: var(--text); }
.mcard.st-down { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); background: color-mix(in srgb, var(--down) 6%, var(--surface)); }
.mcard.st-paused, .mcard.st-pending { opacity: .75; }
.mc-top { display: flex; align-items: center; gap: 10px; }
.mc-top .ti { flex: none; }
.mc-name { font-weight: 700; font-size: 15.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-top .st { font-size: 13px; }
.mc-sub { color: var(--muted); font-size: 13px; margin: 4px 0 10px 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark { width: 100%; height: 44px; display: block; }
.sp-line { fill: none; stroke: var(--up); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sp-area { fill: var(--up); opacity: .12; }
.st-down .sp-line { stroke: var(--down); } .st-down .sp-area { fill: var(--down); }
.sp-none { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mc-foot { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mc-foot span { white-space: nowrap; }
.mc-foot b { color: var(--text); font-size: 14px; margin-right: 3px; }
.mc-why { margin-top: 10px; font-size: 13px; color: var(--down); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .name .ti { margin-right: 8px; vertical-align: -6px; }
.list .name .ti + a { font-weight: 700; }
@media (max-width: 980px) { .overview { grid-template-columns: 1fr; } .mgrid { padding: 12px; grid-template-columns: 1fr; } }

/* ---- 20. real product screenshots ------------------------------------------------ */
.shot-real { display: block; width: 100%; height: auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(18, 17, 16, .45); background: var(--surface); }
.shot-real img { width: 100%; height: auto; display: block; }
.mk-hero-shot .shot-real { width: 100%; }
.auth-shot .shot-real { box-shadow: 0 30px 60px -30px rgba(18, 17, 16, .6); border-color: rgba(255, 255, 255, .12); }
.shot-status { max-width: 520px; }
@media (max-width: 960px) { .mk-hero-shot .shot-real { width: 100%; } }

/* ---- 21. monitor page v2 --------------------------------------------------------- */
.status-hero { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; }
.status-hero.sh-up { background: var(--surface); }
.status-hero.sh-down { background: color-mix(in srgb, var(--down) 5%, var(--surface)); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }
.sh-main b { display: block; font: 800 26px/1.15 var(--display); margin-top: 8px; }
.sh-main small { display: block; font: 400 14px var(--body); color: var(--muted); margin-top: 2px; }
.sh-why { margin-top: 8px; color: var(--down); font-weight: 600; }
.sh-bars .bars.mini { height: 34px; }
.chart .mark { fill: var(--down); opacity: .18; }
.events.big { max-height: none; }
.events.big li { padding: 12px 0; align-items: flex-start; }
.events.big li i { margin-top: 5px; }
.ev-body { flex: 1; min-width: 0; }
.ev-note { margin-top: 4px; }
.ev-ack { margin-top: 8px; }
.ev-ack input { max-width: 260px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 14px 64px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.checks li:last-child { border: 0; }
.checks .st { padding: 0; background: none; min-width: 0; }
.checks .st-down::before { background: var(--down); }
@media (max-width: 700px) { .status-hero { grid-template-columns: 1fr; } }

/* ---- 22. sign-in page ------------------------------------------------------------ */
.auth-points { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; }
.auth-points .ico { flex: none; }
.auth-points .ico .ico-light { display: none; } .auth-points .ico .ico-dark { display: block; }
.auth-points b { display: block; color: #faf8f4; font-size: 15px; }
.auth-points span { color: var(--nav-text); font-size: 14px; }
.auth-side .auth-shot { margin-top: 28px; }
.form-goose { margin-bottom: 12px; }
.auth-main .narrow h1 { margin-top: 0; }

.split .cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.split .cards > div { padding: 16px 52px 14px 16px; min-width: 0; }
.split .cards > div > .ico { right: 12px; top: 14px; }
.split .cards b { font-size: 26px; }

.locs-table { max-width: 760px; margin: 24px auto 10px; }
/* ---- 23. world map ----------------------------------------------------------------- */
.where .worldmap { max-width: 100%; }

/* ---- 24. certificate / domain expiry block ------------------------------------------ */
.expiry { display: flex; flex-direction: column; gap: 2px; }
.expiry b { font: 800 30px/1.1 var(--display); color: var(--up); }
.expiry.warn b { color: var(--warn); } .expiry.bad b { color: var(--down); }
.expiry-bar { height: 8px; border-radius: 4px; background: var(--none); margin: 8px 0 4px; overflow: hidden; }
.expiry-bar i { display: block; height: 100%; background: var(--up); border-radius: 4px; }
.expiry.warn .expiry-bar i { background: var(--warn); } .expiry.bad .expiry-bar i { background: var(--down); }

/* ---- 25. ping latency block ------------------------------------------------------------- */
.latency { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.latency b { display: block; font: 800 30px/1.1 var(--display); }
.latency span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.locs li.fastest > span:first-child { font-weight: 700; }
.locs li.fastest > span:last-child { color: var(--up); }

/* ---- 26. chart range picker, per-location lines ----------------------------------------------- */
.chart-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.ranges { display: flex; flex-wrap: wrap; gap: 2px; }
.ranges a { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.ranges a:hover { background: var(--none); color: var(--ink); }
.ranges a.on { background: var(--ink); color: var(--bg); font-weight: 600; }
.chart-tools select { font-size: 13px; padding: 5px 8px; }
.chart .loc-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.loc-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.loc-legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.loc-legend input { margin: 0; }
.loc-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }

/* ---- 27. legal and docs pages ------------------------------------------------------------- */
.legal { max-width: 760px; margin: 40px auto 80px; padding: 0 20px; }
.legal h1 { font: 800 38px/1.1 var(--display); margin: 0 0 6px; }
.legal h2 { font: 700 20px/1.2 var(--display); margin: 28px 0 8px; }
.legal p, .legal li { line-height: 1.6; }
.legal table.plain th { text-align: left; white-space: nowrap; vertical-align: top; padding-right: 16px; }
.legal pre { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; }

/* ---- 28. two-factor setup ------------------------------------------------------------------ */
.qr { background: #faf8f4; border-radius: 12px; padding: 12px; display: inline-block; margin: 6px 0 10px; }
.qr svg { display: block; width: 200px; height: 200px; }
pre.codes { font-size: 16px; letter-spacing: 1px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; display: inline-block; }

/* ---- 29. billing plans inside the app, status page forms ---------------------------------- */
body.app .plans { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
body.app .plan { padding: 18px 16px 16px; }
body.app .plan .price { font-size: 26px; }
body.app .plan ul { font-size: 13.5px; }
details.add { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); padding: 0; max-width: 640px; }
details.add > summary { cursor: pointer; padding: 16px 22px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 10px; }
details.add > summary::before { content: "+"; font: 700 20px/1 var(--display); color: var(--accent); }
details.add[open] > summary::before { content: "\2212"; }
details.add > .form { border: 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }

/* ---- 30. phones ------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .copy-row { flex-wrap: wrap; } .copy-row input { flex-basis: 100%; }
  body.app main { overflow-x: hidden; padding: 16px 14px 60px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cards > div { padding: 14px 14px; }
  .cards b { font-size: 22px; }
  .cards span { padding-right: 30px; font-size: 12.5px; }
  .cards .ico { width: 24px; height: 24px; }
  .overview, .split, .status-hero { grid-template-columns: 1fr; }
  .mgrid { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .mcard { min-width: 0; overflow: hidden; }
  .filters { padding: 10px; gap: 8px; }
  .filters input[type="search"], .filters input[name="q"] { flex: 1 1 100%; }
  .filters select { flex: 1 1 40%; }
  .latency { gap: 18px; }
  .latency b { font-size: 24px; }
  .chart text { font-size: 15px; }
  .ranges a { padding: 4px 7px; font-size: 12px; }
  table.plain, .list table { display: block; overflow-x: auto; }
  .ph .actions { width: 100%; }
}

/* ---- 31. plan cards: footer line always on the bottom edge, lists start level ------------------- */
.plan .sub { min-height: 2.9em; }
.plan > form, .plan > .button, .plan > span.sub:last-child, .plan > a.button { margin-top: auto; }
.plan > span.sub:last-child { min-height: 0; padding-top: 4px; }

/* ---- 32. less template, more console ------------------------------------------------------------ */
.split .cards .ico { display: none; }
.split .cards > div { padding: 16px 18px; }
.split .cards b { font-size: 26px; }
.card-note { margin: -4px 0 8px; }
.num, .cards b, .latency b, .expiry b, .locs .sub, .facts dd { font-variant-numeric: tabular-nums; }
.loc-legend input { accent-color: var(--muted); }
.mk-real { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.mk-real h2 { margin-top: 0; }
.mk-real-text p { font-size: 16.5px; line-height: 1.6; }
.mk-real-shot { margin: 0; }
.mk-real-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px -24px rgba(18, 17, 16, .45); }
.mk-what { max-width: 860px; }
.mk-plain { font-size: 18px; line-height: 1.65; color: var(--text); }
.mk-rows > div { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 900px) { .mk-real { grid-template-columns: 1fr; gap: 20px; } }
.who .sub { word-break: normal; overflow-wrap: break-word; }
.who a.link { color: var(--side-text); text-decoration: underline; text-underline-offset: 3px; }
.who a.link:hover { color: var(--side-on); }

/* ---- 33. brand mark: navy goose on light, cream goose on navy ------------------------------------ */
.brandmark.on-dark .ico-light { display: none; } .brandmark.on-dark .ico-dark { display: block; }
.side .brandmark { margin-right: 2px; }

/* ---- 34. probe map ------------------------------------------------------------------------------- */
.worldmap { width: 100%; height: auto; display: block; border-radius: var(--r-l); border: 1px solid var(--line);
  --wm-sea: #ebe7df; --wm-land: #d9d3c8; --wm-coast: #c6bfb3; --wm-arc: var(--accent); --wm-label: #17181b; --wm-halo: #ebe7df; --wm-off: #a6abb3;
  background: var(--wm-sea); }
:root[data-theme="dark"] .worldmap { --wm-sea: #0b0c0e; --wm-land: #24262a; --wm-coast: #3a3d43; --wm-label: #f2f3f5; --wm-halo: #0b0c0e; --wm-off: #6b7078; border-color: #2a2d32; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .worldmap { --wm-sea: #0b0c0e; --wm-land: #24262a; --wm-coast: #3a3d43; --wm-label: #f2f3f5; --wm-halo: #0b0c0e; --wm-off: #6b7078; border-color: #2a2d32; } }
.wm-land { fill: var(--wm-land); stroke: var(--wm-coast); stroke-width: .5; }
.wm-arcs path { fill: none; stroke: var(--wm-arc); stroke-width: .9; stroke-dasharray: 2 3; opacity: .55; }
.wm-arcs path.off { stroke: var(--wm-off); opacity: .35; }
.wm-pin { fill: var(--accent); stroke: var(--wm-sea); stroke-width: 1.6; }
.wm-pulse { fill: var(--accent); opacity: .22; }
.wm-city.off .wm-pin { fill: var(--wm-off); }
.wm-city.off .wm-label { fill: var(--wm-off); }
.wm-label { font: 600 11.5px var(--body); fill: var(--wm-label); paint-order: stroke; stroke: var(--wm-halo); stroke-width: 3px; stroke-linejoin: round; }
.where .worldmap { max-width: 100%; }

/* ---- 35. wordmark: Honk + Watch (brand sheet) ---------------------------------------------------- */
.wm2 { color: var(--accent); }
.logo { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.num, .locs .sub, .chart text, code, pre, .loc-legend .sub { font-family: var(--mono); }
.num { font-size: .94em; }
.cards b, .latency b, .expiry b { white-space: nowrap; }

/* ---- 36. status page: days before monitoring began stay quiet; home page status section -------- */
.svc .bars i.none { opacity: .4; }
.mk-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.mk-real-shot .shot-real { box-shadow: 0 18px 40px -24px rgba(18, 17, 16, .45); }
@media (max-width: 900px) { .mk-flip .mk-real-shot { order: 2; } }

/* ---- 37. read-only demo ------------------------------------------------------------------------- */
.demo-bar { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); font-size: 14px; }
.demo-bar a { font-weight: 600; }
/* nothing that changes data is offered in the demo (the server refuses it anyway) */
body.demo main form[method="post"], body.demo main a[href$="/edit"], body.demo main a[href^="/monitors/new"],
body.demo main .actions, body.demo main input[type="checkbox"][form="bulk"], body.demo main #all, body.demo main #all2 { display: none !important; }
.who .button.sm { align-self: flex-start; }

/* ---- 38. error pages ----------------------------------------------------------------------------- */
.err { max-width: 560px; margin: 70px auto 90px; padding: 0 20px; text-align: center; }
.err .err-goose { display: inline-flex; margin-bottom: 10px; }
.err-code { font: 600 15px var(--mono); color: var(--muted); margin: 0; }
.err h1 { font: 800 38px/1.1 var(--display); margin: 0 0 10px; }
.err .lede { margin: 0 auto 24px; max-width: 460px; }
.err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---- 39. copy-ready share links ------------------------------------------------------------------ */
.share-url { margin: -2px 0 18px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); }
.share-url label { display: block; margin: 0 0 6px; font-weight: 600; }
.share-url p.sub { margin: 6px 0 0; }
.copy-row { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; background: var(--surface); }
.copy-row .button, .copy-row button { flex: none; height: 38px; }
.page-card { max-width: 640px; margin-bottom: 12px; }
.page-card .share-url { margin: 8px 0 0; }
body.demo .page-card ~ form, body.demo details.add { display: none; }

/* ---- 40. warm carbon: flat surfaces, crisp 1px borders, accent only where it acts --------------- */
.card, .cards > div, .mcard, .form, .narrow, .plan, .status-hero, .overall, .svcs, .mk-card { box-shadow: none; }
.mcard:hover { box-shadow: none; border-color: var(--muted); }
.mk-band .mk-intro { max-width: 760px; margin: 14px 0 0; font-size: 17px; color: var(--muted); }
.mk-band .mk-intro, .mk-band .mk-lists { margin-left: auto; margin-right: auto; }
.mk-band .mk-intro { max-width: 1100px; }
/* login side panel is always dark: dark screenshot and cream goose in both modes */
.auth-shot .shot-real .ico-light { display: none !important; } .auth-shot .shot-real .ico-dark { display: block !important; }

/* ---- 41. dashboard hierarchy: health line, quieter card footers, one-line filters ----------------- */
.health { margin: 4px 0 0; font-size: 17px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.health::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--none); flex: none; }
.health b { color: var(--ink); font-weight: 700; }
.health.h-up::before { background: var(--up-bar); } .health.h-up b { color: var(--up); }
.health.h-down::before { background: var(--down); } .health.h-down b { color: var(--down); }
.mc-foot { display: flex; align-items: baseline; gap: 14px; flex-wrap: nowrap; overflow: hidden; }
.mc-foot small { color: var(--muted); font-size: 12px; }
.mc-foot .mc-ago { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mcard.st-down { border-left: 4px solid var(--down); }
.mcard.st-down .mc-why { font-weight: 600; }
.filters { flex-wrap: nowrap; }
.filters input[name=q] { min-width: 140px; }
.filters select { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1100px) { .filters { flex-wrap: wrap; } }
.svc-why { display: block; font-weight: 400; font-size: 13px; color: var(--down); margin-top: 2px; }
.mk-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1100px; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; }
.mk-three > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.mk-three h3 { margin: 0 0 6px; font-size: 19px; }
.mk-three p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 800px) { .mk-three { grid-template-columns: 1fr; gap: 18px; } }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 42. light mode, calmer: the uptime card is a normal card, events never scroll, faint incident stripes ---- */
:root:not([data-theme="dark"]) .cards .c-ink { background: var(--surface); border-color: var(--line); color: var(--text); }
:root:not([data-theme="dark"]) .cards .c-ink b { color: var(--ink); } :root:not([data-theme="dark"]) .cards .c-ink span { color: var(--muted); }
:root:not([data-theme="dark"]) .cards .c-ink .ico-light { display: block; } :root:not([data-theme="dark"]) .cards .c-ink .ico-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cards .c-ink { background: var(--nav); border-color: var(--nav); color: #f2f3f5; }
  :root:not([data-theme="light"]) .cards .c-ink b { color: #faf8f4; } :root:not([data-theme="light"]) .cards .c-ink span { color: #b3b8bf; }
  :root:not([data-theme="light"]) .cards .c-ink .ico-light { display: none; } :root:not([data-theme="light"]) .cards .c-ink .ico-dark { display: block; } }
.events { max-height: none; overflow: visible; }
.chart .mark { fill: var(--down); opacity: .7; }  /* incidents: thin, solid, clearly red */
.overview { align-items: start; }

/* ---- 43. sidebar follows the theme: light sidebar in light mode, dark in dark mode ------------------- */
:root { --side-bg: #fbfaf7; --side-text: #57534d; --side-on: #181817; --side-hover: rgba(24, 23, 22, .05);
  --side-active: rgba(24, 23, 22, .07); --side-line: #e3ded4; }
:root[data-theme="dark"] { --side-bg: #0b0c0e; --side-text: #a6abb3; --side-on: #f2f3f5; --side-hover: rgba(242, 243, 245, .05);
  --side-active: rgba(242, 243, 245, .08); --side-line: rgba(242, 243, 245, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --side-bg: #0b0c0e; --side-text: #a6abb3; --side-on: #f2f3f5;
  --side-hover: rgba(242, 243, 245, .05); --side-active: rgba(242, 243, 245, .08); --side-line: rgba(242, 243, 245, .08); } }
.side { border-right: 1px solid var(--side-line); }
.side .logo { color: var(--side-on); }
.nicon .nico-d { display: none; }
:root[data-theme="dark"] .nicon .nico-l { display: none; } :root[data-theme="dark"] .nicon .nico-d { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nicon .nico-l { display: none; } :root:not([data-theme="light"]) .nicon .nico-d { display: inline; } }

.facts dd.slowest { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locs li > span:first-child { white-space: nowrap; }
.locs li .sub { white-space: nowrap; font-size: 12.5px; }

/* ---- 44. wall screen: no menu, bigger type, updates itself ------------------------------------------ */
.wall-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-top: 6px; }
.wall-tools .live-note { font-size: 12.5px; white-space: nowrap; }
body.wall .side, body.wall .demo-bar, body.wall .filters, body.wall .bulk, body.wall .notice,
body.wall .cards .c-used a, body.wall main form[method="post"] { display: none !important; }
body.wall.app { display: block; }
body.wall.app main { max-width: none; padding: 22px 28px 40px; }
body.wall h1 { font-size: 34px; }
body.wall .wall-clock { font: 600 22px var(--mono); color: var(--muted); margin-left: 10px; vertical-align: 4px; }
body.wall .health { font-size: 22px; }
body.wall .health::before { width: 16px; height: 16px; }
body.wall .cards b { font-size: 44px; }
body.wall .mgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
body.wall .mc-name { font-size: 17px; }
body.wall .mcard { pointer-events: none; }
body.wall input[type="checkbox"][form="bulk"] { display: none; }
@media (max-width: 860px) { .wall-tools .live-note { display: none; } }

/* ---- 45. design audit 30 Oct: flat, quiet, readable --------------------------------------------- */
.shot-real, .mk-real-shot img, .mk-real-shot .shot-real, .auth-shot .shot-real { box-shadow: none !important; filter: none !important; border: 1px solid var(--line); border-radius: var(--r); }
.wm-pulse { display: none; }                         /* no halos on map pins */
.st-up::before, .st-down::before, .live i { box-shadow: none !important; animation: none !important; }
.cards > div > b { padding-right: 0; }
@media (min-width: 961px) { .mk-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }  /* phones keep one column */
.mk-hero .cta-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.demo-note { padding: 18px 20px; }
.demo-note p { margin: 0 0 10px; }

/* ---- 46. second pass: no tinted callouts, quiet empty history ---------------------------------- */
.demo-note { background: var(--surface-2); }
.bars.big i.none { opacity: .35; }

/* ---- 47. pricing: four self-serve plans, Enterprise as a wide row below ----------------------- */
.plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.plan.pick { border: 2px solid var(--accent); padding: 21px 19px 19px; }
.plan .tag { border-radius: 3px; }
.plan-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 28px; align-items: center; margin-top: 16px; }
.plan-wide .sub { min-height: 0; margin: 0; }
.plan-wide ul { margin: 0; columns: 2; column-gap: 24px; }
.plan-wide li { break-inside: avoid; }
.plan-wide > .button { margin-top: 0; }
.plan-wide + .sub { margin-top: 22px; }
@media (max-width: 960px) {
  .plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-wide { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .plans.four { grid-template-columns: 1fr; }
  .plan-wide ul { columns: 1; }
}

/* ---- 47b. tablets: the longer top menu (Honk Radar added) still fits on one line ---------------------- */
@media (max-width: 900px) {
  header.top nav { gap: 12px; }
  header.top .theme, header.top nav a.nav-x[href="/docs/api"] { display: none; }
}

/* ---- 48. phones: the top menu fits on one line ------------------------------------------------- */
@media (max-width: 640px) {
  header.top { padding-left: 16px; padding-right: 16px; gap: 10px; }
  header.top nav { gap: 8px; }
  header.top nav .nav-x, header.top .theme { display: none; }   /* phones follow their own light/dark setting */
  header.top .logo .wordmark { font-size: 19px; }
  header.top .button.sm { padding-left: 11px; padding-right: 11px; }
}

/* ---- 49. home, second review pass: bigger product, two-city diagram, section contrast ----------- */
@media (min-width: 961px) { .mk-hero { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); max-width: 1240px; } }
:root[data-theme="dark"] .shot-real { border-color: #3a3d43; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-real { border-color: #3a3d43; } }

.vote { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.vote > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.vote-head { font: 700 14px var(--display); margin: 0 0 8px; }
.vote ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.vote li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.vote li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--up-bar); }
.vote li.bad::before { background: var(--down); }
.vote li span { margin-left: auto; color: var(--muted); font: 12.5px var(--mono); }
.vote li.bad span { color: var(--down); }
.mk-real-text .vote-out { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.vote-out.ok { color: var(--up); } .vote-out.bad { color: var(--down); }
@media (max-width: 420px) { .vote { grid-template-columns: 1fr; } }

.mk-dark { background: #0b0c0e; color: #f2f3f5; margin: 50px 0 0;
  --ink: #f2f3f5; --text: #f2f3f5; --muted: #a6abb3; --line: #2a2d32; --surface: #17181b; }
.mk-dark .where { margin: 0 auto; padding-top: 64px; padding-bottom: 64px; }
.mk-dark h2 { color: #f2f3f5; }
.mk-dark a { color: #f2f3f5; }
.mk-dark .worldmap { --wm-sea: #17181b; --wm-land: #24262a; --wm-coast: #3a3d43; --wm-label: #f2f3f5; --wm-halo: #17181b; --wm-off: #6b7078; border-color: #2a2d32; }
:root[data-theme="dark"] .mk-dark { background: #17181b; border-top: 1px solid #2a2d32; border-bottom: 1px solid #2a2d32; }
:root[data-theme="dark"] .mk-dark .worldmap { --wm-sea: #0b0c0e; --wm-halo: #0b0c0e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-dark { background: #17181b; border-top: 1px solid #2a2d32; border-bottom: 1px solid #2a2d32; }
  :root:not([data-theme="light"]) .mk-dark .worldmap { --wm-sea: #0b0c0e; --wm-halo: #0b0c0e; }
}
.mk-dark + .mk-section { padding-top: 60px; }

.mk-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 48px 48px 40px; margin-top: 30px; }
@media (max-width: 960px) { .mk-band { margin-left: 16px; margin-right: 16px; padding: 32px 20px 28px; } }

/* ---- 50. app dashboard: compact header, lighter type, clearer small icons (30 Oct review) -------- */
h1 { font-weight: 700; letter-spacing: -.01em; }
.ph { margin-bottom: 14px; }
.cards { gap: 12px; margin-bottom: 18px; }
.cards > div { padding: 15px 18px 14px; }
.cards b { font: 700 26px/1.15 var(--display); letter-spacing: -.01em; }
.cards span { font-size: 13px; margin-top: 3px; }
.side nav a .nico { opacity: 1; }

/* ---- 51. monitor form: the alert rule in one sentence ------------------------------------------ */
.form .rule { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); font-weight: 600; font-size: 14px; }

/* ---- 52. cleanup pass (30 Oct review): tighter rhythm, fewer boxes, one-colour menu icons --------- */
.mk-section { padding-top: 44px; padding-bottom: 44px; }
.mk-section + .mk-section { padding-top: 0; }
.mk-dark .where { padding-top: 48px; padding-bottom: 48px; }
.mk-dark { margin-top: 36px; }
.mk-dark + .mk-section { padding-top: 44px; }
.mk-band { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 40px 40px 8px; margin-top: 8px; }
@media (max-width: 960px) { .mk-band { margin-left: 0; margin-right: 0; padding: 32px 20px 8px; } }
.mk-cta { background: none; border-top: 1px solid var(--line); border-radius: 0; padding: 36px 40px; margin-top: 0; }
.mk-real { gap: 32px; }

.nmask { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.side nav a .nmask { color: var(--side-text); opacity: .9; }
.side nav a:hover .nmask { opacity: 1; }
.side nav a.on .nmask { color: var(--accent); opacity: 1; }

.filters select { flex: 0 0 auto; }  /* never clip "Any status": the search box gives way instead */

/* ---- 53. what each number is: a plain label above the value, in the list and on the cards ------- */
.metric small { display: block; font: 500 12px/1.3 var(--body); color: var(--muted); letter-spacing: 0; text-transform: none; }
.metric b { display: block; font: 600 15px/1.3 var(--mono); color: var(--ink); }
.list td.metric { vertical-align: middle; }
.mc-foot .metric b { font-size: 14px; }
.filters label.check { white-space: nowrap; }

/* ---- 54. DNS checks: the answers each city got ------------------------------------------------- */
.locs .answers { font: 12.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* ---- 55. charts: Line / Bars switch; a fainter fill in dark mode (orange over near-black reads brown) -- */
.chart .bars { display: none; }
.chart .bars rect { fill: var(--accent); opacity: .85; }
:root[data-chart="bars"] .chart .bars { display: inline; }
:root[data-chart="bars"] .chart .area, :root[data-chart="bars"] .chart .line { display: none; }
.charttype { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; margin-left: 12px; flex: none; }
.charttype button { background: none; border: 0; border-radius: 0; color: var(--muted); font: 600 12.5px var(--body); padding: 4px 10px; cursor: pointer; }
.charttype button + button { border-left: 1px solid var(--line); }
:root:not([data-chart="bars"]) .charttype [data-chart="line"], :root[data-chart="bars"] .charttype [data-chart="bars"] { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .chart .area { opacity: .06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart .area { opacity: .06; } }
.spark .sp-bars { display: none; }
.spark .sp-bars rect { fill: var(--up); opacity: .8; }
.st-down .spark .sp-bars rect { fill: var(--down); }
:root[data-chart="bars"] .spark .sp-bars { display: inline; }
:root[data-chart="bars"] .spark .sp-line, :root[data-chart="bars"] .spark .sp-area { display: none; }

/* ---- 56. phones (30 Oct check at 375 px) ------------------------------------------------------- */
@media (max-width: 900px) {
  .mk-flip { grid-template-columns: 1fr; }            /* the status-page section stacks like the others */
}
@media (max-width: 860px) {
  .who .sub { display: none; }                        /* demo / shared footer: one short row in the top bar */
  .who a.link, .who-row { white-space: nowrap; }
  .who { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 640px) {
  /* charts keep a readable size and scroll sideways instead of shrinking their labels to nothing */
  .ov-chart, .card:has(> svg.chart) { overflow-x: auto; }
  svg.chart { min-width: 560px; }
}
@media (max-width: 700px) {
  /* list rows: name and status on top, last 24 hours and the latest result below */
  .listcard .list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 14px; }
  .listcard .list td { display: block; padding: 0; }
  .listcard .list td:has(> input[name="ids"]), .list td.sub.nowrap { display: none; }
  .listcard .list td.name { grid-column: 1; grid-row: 1; }
  .listcard .list td:has(> .st) { grid-column: 2; grid-row: 1; justify-self: end; }
  .listcard .list td.minibars { grid-column: 1 / -1; grid-row: 2; }
  .listcard .list td.minibars .bars.mini { max-width: 100%; }
  .listcard .list td.metric { grid-column: 1 / -1; grid-row: 3; text-align: left; }   /* result on its own line, clear of the bars */
}
@media (max-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr); }   /* never wider than the screen: the chart scrolls inside its card */
  .split > *, .split .card, .overview > * { min-width: 0; }
}

/* DNS answers: their own wrapping line under the city, at any width */
.locs li:has(.answers) { flex-wrap: wrap; }
.locs li:has(.answers) > .sub { flex: 1 1 100%; white-space: normal; min-width: 0; padding-left: 18px; }
.locs .answers { display: block; }

/* ---- 57. per-city chart as bars: one bar per city, its average over the range ---------------------------- */
.loc-bars { display: none; margin-top: 4px; }
.lb-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 64px; gap: 12px; align-items: center; padding: 5px 0; }
.lb-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-track { height: 14px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.lb-track i { display: block; height: 100%; border-radius: 3px; }
.lb-ms { font: 13px var(--mono); text-align: right; color: var(--muted); }
.loc-bars .sub { margin: 10px 0 0; }
:root[data-chart="bars"] .loc-bars { display: block; }
:root[data-chart="bars"] svg.chart.multi, :root[data-chart="bars"] .loc-bars ~ .loc-legend { display: none; }
@media (max-width: 640px) { .lb-row { grid-template-columns: 92px minmax(0, 1fr) 58px; gap: 8px; } }
.card-head .charttype { margin-left: auto; }   /* stays top right when the heading wraps */

/* ---- 58. world map with 26 cities: small pins, region names with a count, arcs from the central server ---- */
.worldmap .wm-pin { stroke-width: 1.2; }
.wm-arcs path { stroke-width: .7; opacity: .4; }
.wm-region { font: 700 12.5px var(--body); fill: var(--wm-label); paint-order: stroke; stroke: var(--wm-halo); stroke-width: 3px; stroke-linejoin: round; }
.wm-count { font: 500 11px var(--body); fill: var(--wm-off); }

/* ---- 59. Cloudflare Turnstile check on sign-up, login and reset: keep its space so the button does not jump ---- */
.narrow .cf-turnstile { min-height: 65px; margin: 0 0 14px; }

/* ---- 60. "Continue with Google" on login and sign-up: Google's plain button, then a thin "or" line ---------- */
.google-btn { width: 100%; justify-content: center; height: 42px; gap: 10px; background: #faf8f4; color: #1f1f1f; border-color: #c9c4ba; font-weight: 500; }
.google-btn:hover { filter: none; background: #f3f0ea; color: #1f1f1f; border-color: #8f8a82; }
.google-btn svg { flex: none; }
.google-btn { margin-top: 14px; }   /* breathing room under the page heading */
:root[data-theme="dark"] .google-btn { background: #131314; color: #e3e3e3; border-color: #8e918f; }
:root[data-theme="dark"] .google-btn:hover { background: #1f2125; color: #e3e3e3; }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0 16px !important; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .google-btn { background: #131314; color: #e3e3e3; border-color: #8e918f; }
  :root:not([data-theme="light"]) .google-btn:hover { background: #1f2125; color: #e3e3e3; }
}

/* ---- 61. billing page plan forms: the Freemius pay-monthly/yearly choice above Buy; Manage and Cancel stacked ---- */
.plan form { margin-top: auto; display: grid; gap: 8px; }
.plan form + form { margin-top: 8px; }

/* ---- 62. billing: buttons side by side in the "Your plan" card, the cancel and thanks pages -------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.btn-row form { margin: 0; }
.billing-limits { max-width: 460px; }

/* ---- 63. staff back office (/admin): a wrapping top nav, two columns that stack, long values that wrap ---------- */
.admin-nav { flex-wrap: wrap; margin: -6px 0 18px; }
.bo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.bo-grid > * { min-width: 0; }
@media (max-width: 900px) { .bo-grid { grid-template-columns: 1fr; } }
table.bo { width: 100%; }
table.bo td { overflow-wrap: anywhere; }
.bo-link { margin-top: 6px; }
.bo-link input[type=email] { width: auto; flex: 1 1 160px; }
.bo-note { padding: 14px 18px; margin-bottom: 10px; }
.bo-note p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pager { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 14px; }

/* ---- 64. status page email updates: confirm and manage cards, long addresses wrap ---------------------------- */
.sub-manage + .sub-manage { margin-top: 16px; }
.sub-manage b, .sub-manage .check { overflow-wrap: anywhere; }
.sub-manage .cols { margin-top: 12px; }

/* ---- 65. support: contact form, ticket threads (staff replies and notes set apart), the footer mail line ------ */
.support-form .cf-turnstile { min-height: 65px; margin: 0 0 14px; }
.bo-note.msg-staff { background: var(--surface-2); }
.bo-note.msg-note { background: var(--surface-2); border-style: dashed; }
.ticket-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .ticket-grid { grid-template-columns: 1fr; } }
.ticket-status select { width: auto; flex: 1 1 160px; }
.foot-mail, .foot-mail a { font-weight: 400; overflow-wrap: anywhere; }

/* ---- 66. back office plans (/admin/plans): a wide table that scrolls sideways on a phone, small inputs ------- */
.bo-plans { overflow-x: auto; margin-bottom: 18px; }
.bo-plans table.list { min-width: 860px; margin: 0; }
.bo-plans input:not([type=checkbox]), .bo-plans select { width: 100%; min-width: 90px; }
.bo-plans td { vertical-align: top; }
.bo-plans .button, .bo-plans button.sm { margin-top: 6px; }
.bo-bad { color: var(--down); font-size: 13px; margin-top: 4px; }
.bo-preview .mk-section { padding: 0 0 20px; }

/* ---- 67. staff portal (app/portal.py): the line under the back office menu, the sign-in form ------------------ */
.portal-off { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -8px 0 18px; }
.portal-signin { max-width: 420px; }

/* ---- 68. third-party services: the component picker in the monitor form, the status card on the monitor page -- */
.tp-events { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.tp-events li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.tp-events li:last-child { border: 0; }
.tp-events .sub { display: block; }
.tp-card h4 { margin: 14px 0 4px; font: 700 14px var(--display); }

/* Dotted world map (home and /locations), from the owner's design, 31 Oct 2026. */
.dotmap { width: 100%; height: auto; display: block; overflow: visible; }
.dotmap{--wm-bg:var(--bg,#FFFFFF);--wm-land:#C2CBD6;--wm-label:#2A3441;--wm-up:#14A86B;--wm-warn:#C77C00;--wm-down:#D93A2B;--wm-off:#8A94A3;--wm-glow:.14}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dotmap{--wm-bg:var(--bg,#0B0F14);--wm-land:#2F3A4A;--wm-label:#C9D3DF;--wm-up:#3DDC97;--wm-warn:#F5B83D;--wm-down:#FF6B5E;--wm-off:#6B7787;--wm-glow:.16}}
:root[data-theme="dark"] .dotmap{--wm-bg:var(--bg,#0B0F14);--wm-land:#2F3A4A;--wm-label:#C9D3DF;--wm-up:#3DDC97;--wm-warn:#F5B83D;--wm-down:#FF6B5E;--wm-off:#6B7787;--wm-glow:.16}
.dotmap .wm-land{fill:none;stroke:var(--wm-land);stroke-width:4.2px;stroke-linecap:round}
.dotmap .wm-city{--c:var(--wm-up)}
.dotmap .wm-city.degraded{--c:var(--wm-warn)}
.dotmap .wm-city.down{--c:var(--wm-down)}
.dotmap .wm-city.offline{--c:var(--wm-off)}
.dotmap .wm-city.offline .wm-ring,.dotmap .wm-city.offline .wm-glow{display:none}
.dotmap .wm-glow{fill:var(--c);opacity:var(--wm-glow)}
.dotmap .wm-ring{fill:none;stroke:var(--c);stroke-width:1.5px;transform-box:fill-box;transform-origin:center;opacity:0;animation:dmPulse 3.2s ease-out infinite}
.dotmap .wm-city.down .wm-ring{animation-duration:1.4s}
.dotmap .wm-pin{fill:var(--c);stroke:var(--wm-bg);stroke-width:2px}
.dotmap .wm-pin,.dotmap .wm-glow{transform-box:fill-box;transform-origin:center}
.dotmap .wm-label{font:500 12.5px var(--body);fill:var(--wm-label);paint-order:stroke;stroke:var(--wm-bg);stroke-width:4px;stroke-linejoin:round}
@keyframes dmPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.dotmap .wm-ring{animation:none;opacity:.35;transform:scale(1.4)}}
@media (max-width:720px){.dotmap .wm-land{stroke-width:6.2px}.dotmap .wm-label{display:none}.dotmap .wm-pin{transform:scale(1.8);stroke-width:1.2px}.dotmap .wm-glow{transform:scale(1.6)}.dotmap .wm-ring{animation:none;opacity:0}}
.mk-dark .dotmap { --wm-bg: #0b0c0e; --wm-land: #2F3A4A; --wm-label: #C9D3DF; --wm-up: #3DDC97; --wm-warn: #F5B83D; --wm-down: #FF6B5E; --wm-off: #6B7787; --wm-glow: .16; }
.where .dotmap { max-width: 100%; }
:root[data-theme="dark"] .mk-dark .dotmap { --wm-bg: #17181b; }  /* halos match the section behind the map */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk-dark .dotmap { --wm-bg: #17181b; } }
.dotmap .wm-glow { display: none; }  /* no glows on map pins, as with .wm-pulse */
.where .dotmap .wm-label { display: none; }  /* ~6px at home size; the cities are listed beside it and on hover */
.sh-why.s-warn { color: var(--warn); }  /* third-party degraded or maintenance: not an outage */

/* ---- 69. /isitdown: "Is it down right now?" pages over the status page directory (app/isitdown.py) ---------- */
.idn { max-width: 1080px; }
header.top nav a { white-space: nowrap; }
.idn > .lede { margin: 0 0 14px; max-width: 680px; font-size: 16px; }
.idn .st { text-transform: none; }
.idn-search { display: flex; gap: 8px; max-width: 560px; margin: 0 0 8px; }
.idn-search input { flex: 1; min-width: 0; }
.idn-find { max-width: 420px; }   /* service and category pages: search another service without going back */
.idn-verdict + .idn-find { margin: -8px 0 24px; }
.idn > .lede + .idn-find { margin-bottom: 18px; }
.idn-table td:first-child { width: 34%; }
.idn-table td:nth-child(2) { width: 150px; }
.idn-table td .sub { margin-left: 6px; }
.idn-cols { list-style: none; margin: 0 0 8px; padding: 0; columns: 4 190px; column-gap: 28px; }
.idn-cols li { padding: 6px 0; break-inside: avoid; border-top: 1px solid var(--line); }
.idn-cols li .st { margin-left: 6px; font-size: 13px; }
.idn-cat { margin: 26px 0 8px; font-size: 16px; }
.idn-cat .sub { font: 400 13.5px var(--body); margin-left: 4px; }
.st-minor { color: var(--warn); } .st-minor::before { background: var(--warn); }
.st-major { color: var(--down); font-weight: 700; } .st-major::before { background: var(--down); }
.st-maint { color: var(--muted); } .st-maint::before { background: var(--muted); }
.st-unknown { color: var(--muted); } .st-unknown::before { background: var(--none); }
.idn-verdict { margin: 14px 0 24px; }
.idn-verdict b { font-size: 21px; line-height: 1.3; }
.idn-verdict a { color: inherit; }
.overall-maint .ov-mark { background: var(--muted); }
.overall-unknown .ov-mark { background: var(--none); border: 1px solid var(--line); }
.overall-maint .ov-mark::after, .overall-unknown .ov-mark::after { left: 17px; top: 8px; width: 0; height: 14px; border-width: 0 0 0 4px; transform: none; border-radius: 2px; }
.overall-unknown .ov-mark::after { border-color: var(--muted); }
.idn-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.idn-two .card h2 { margin: 0 0 10px; font-size: 17px; }
.idn-group { margin: 14px 0 4px; font: 700 14px var(--display); }
.idn-group:first-of-type { margin-top: 4px; }
.idn-parts { list-style: none; margin: 0 0 6px; padding: 0; font-size: 14px; }
.idn-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.idn-parts li:last-child { border-bottom: 0; }
.idn-parts li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.idn-parts .st { font-size: 13px; }
.idn-watch { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.idn-watch > div { flex: 1 1 380px; }
.idn-watch h2 { margin: 0 0 6px; font-size: 17px; }
.idn-watch p { margin: 0 0 6px; }
.idn-cta { display: flex; gap: 14px; align-items: center; margin: 0; }
@media (max-width: 760px) {
  .idn-two { grid-template-columns: 1fr; gap: 0; }
  .idn-table td:first-child, .idn-table td:nth-child(2) { width: auto; }
  .idn-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
  .idn-table tr:last-child { border-bottom: 0; }
  .idn-table td { border-bottom: 0; padding: 10px 14px; }
  .idn-table td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
  .idn-table td:nth-child(3):empty { display: none; }
  .idn-verdict b { font-size: 18px; }
}
/* 69b. /isitdown verdict detail: how wide the problem is, on its own line under the answer */
.overall .idn-detail { display: block; margin: 4px 0 6px; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
/* 69c. Honk Radar history, own checks and lists (2 Nov 2026) */
.overall .idn-last { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.idn-history .card-head .sub b { color: var(--ink); }
.idn-days { margin: 6px 0 4px; }
.idn-days i.maint, .idn-legend i.maint { background: var(--muted); }
.idn-history .idn-d30 { display: none; }
.idn-pop { columns: 3 250px; }
.idn-pop li { display: flex; align-items: baseline; gap: 6px; }
.idn-pop li > a { min-width: 0; overflow-wrap: anywhere; }
.idn-pop li .st { margin-left: auto; padding-left: 8px; white-space: nowrap; }
.idn-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; }
.idn-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.idn-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--none); }
.idn-legend i.ok { background: var(--up-bar); } .idn-legend i.warn { background: var(--warn); } .idn-legend i.bad { background: var(--down); }
.idn-legend i.none { border: 1px solid var(--line); }
.idn-own-verdict { font: 700 17px/1.35 var(--display); margin: 0 0 8px; }
.idn-cities .idn-city-r { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 12px; text-align: right; }
.idn-cities .st { white-space: normal; }
.idn-cities li > span:first-child { min-width: 7em; }
.idn-cities .idn-city-r .sub { font-variant-numeric: tabular-nums; }
.idn-for { margin-left: 8px; white-space: nowrap; }
.idn-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--none); margin-right: 8px; vertical-align: 1px; flex: none; }
.idn-dot.st-up { background: var(--up); } .idn-dot.st-minor { background: var(--warn); }
.idn-dot.st-major { background: var(--down); } .idn-dot.st-maint { background: var(--muted); }
.idn-dot::before { content: none; }
.idn-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.idn-cats li .sub { margin-left: 4px; }
.idn-recent { width: 100%; border: 0; background: none; margin: 0; }
.idn-recent tr:last-child td { border-bottom: 0; }
.idn-recent td { padding: 9px 12px 9px 0; vertical-align: top; }
.idn-recent td:last-child { overflow-wrap: anywhere; }
.idn-faq { max-width: 720px; }
.idn-faq h3 { margin: 18px 0 4px; font-size: 16px; }
@media (max-width: 760px) {
  .idn-days i:nth-child(-n+60) { display: none; }
  .idn-history .idn-d90 { display: none; }
  .idn-history .idn-d30 { display: inline; }
  .idn-recent tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .idn-recent td { padding: 0; border: 0; }
  .idn-for { display: block; margin: 2px 0 0; }
}
/* 69d. Honk Radar on its own host (radar.honkwatch.com, _radar_base.html): the header with "by HonkWatch", the home's
   top, the vendor alerts block, plan rows and the footer */
.rd-brand { display: flex; align-items: center; gap: 2px 14px; min-width: 0; }
.rd-by { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rd-by:hover { color: var(--ink); }
.rd-home h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; margin: 4px 0 10px; }
.rd-home > .lede { font-size: 17px; }
.rd-home .idn-search { max-width: 620px; margin-bottom: 4px; }
.rd-home .idn-search input, .rd-home .idn-search button { height: 44px; font-size: 16px; }
.rd-home .idn-search button { line-height: 42px; }
.rd-block { scroll-margin-top: 90px; }
.rd-vendors { margin-top: 36px; }
.rd-vendors p.sub { margin: 0; }
.rd-pricing { margin-top: 36px; }
.rd-pricing > .lede { margin: 0 0 14px; max-width: 720px; }
.rd-plans { width: 100%; }
.rd-plans td:first-child { width: 36%; }
.rd-plans td:first-child .sub { display: block; margin-top: 2px; }
.rd-plans .rd-price { white-space: nowrap; }
.rd-plans .rd-price b { font: 700 18px var(--display); }
.rd-plans .rd-go { text-align: right; }
body.radar footer.site { max-width: 1080px; }   /* the footer's edges line up with the page (.idn), not the site's 1180 */
.rd-foot { flex-wrap: wrap; }
.rd-foot .rd-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 960px) {
  body.radar footer.site { padding-left: 20px; padding-right: 20px; }   /* as .mk-section below 960 px */
}
@media (max-width: 900px) {
  .rd-brand { flex-direction: column; align-items: flex-start; gap: 0; }
  .rd-by { margin: -6px 0 0 51px; font-size: 12px; }   /* under the wordmark: a 42 px goose plus the logo's 9 px gap */
}
@media (max-width: 760px) {
  .rd-plans thead { display: none; }
  .rd-plans tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .rd-plans tr:last-child { border-bottom: 0; }
  .rd-plans td, .rd-plans td:first-child { width: auto; padding: 0; border: 0; }
  .rd-plans .rd-price { grid-column: 2; grid-row: 1; text-align: right; }
  .rd-plans td[data-unit] { grid-column: 1 / -1; }
  .rd-plans td[data-unit]::after { content: " " attr(data-unit); color: var(--muted); }
  .rd-plans .rd-go { grid-column: 1 / -1; text-align: left; padding-top: 4px; }
}
@media (max-width: 640px) {
  .rd-home h1 { font-size: 30px; }
}
/* 69e. Honk Radar lists with brand logos (3 Nov 2026): the logo tile, the card grid, the sidebar and pager of
   /radar/all and the category pages (_radar_list.html, _isitdown.html's logo macro) */
:root { --rl-light: #f3f0ea; --rl-dark: #26282d; }   /* tiles that hold a logo drawn on transparent: always light or dark */
:root[data-theme="dark"] { --rl-light: #e6e2d9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rl-light: #e6e2d9; } }
.rl { --rl: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--rl); height: var(--rl); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.rl-28 { --rl: 28px; border-radius: var(--r-s); }
.rl-36 { --rl: 36px; }
.rl-56 { --rl: 56px; border-radius: var(--r-l); }
.rl img { display: block; }
.rl-none img { width: 100%; height: 100%; object-fit: cover; }   /* an icon with its own background fills the tile */
.rl-light { background: var(--rl-light); }
.rl-dark { background: var(--rl-dark); border-color: var(--rl-dark); }
.rl-letter { color: var(--muted); font: 700 18px var(--display); }   /* no logo: a plain tile with the first letter */
.rl-28.rl-letter { font-size: 13px; }
.rl-56.rl-letter { font-size: 22px; }
.rd-head { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; }
.rd-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.rd-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rd-who > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.rd-all-link { margin: 4px 0 0; }
.rd-gridbox { container-type: inline-size; }
.rd-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rd-grid > li { display: flex; min-width: 0; }
.rd-card { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.rd-card:hover { border-color: var(--muted); background: var(--surface-2); }
.rd-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-card > .rl { grid-column: 1; grid-row: 1; }
.rd-card-t { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rd-card-t b { font: 600 15px/1.3 var(--body); overflow-wrap: anywhere; }
.rd-cat { color: var(--muted); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.rd-sub { display: flex; flex-direction: column; gap: 1px; }   /* category, then the state, always on its own line: cards line up */
.rd-sub .st { font-size: 13px; }
.rd-card::after { content: ""; grid-column: 3; grid-row: 1; width: 7px; height: 7px; margin-right: 2px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
.rd-card-note { grid-column: 2 / -1; grid-row: 2; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.rd-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.rd-side { display: flex; flex-direction: column; gap: 14px; }   /* flows with the page: main scrolls, so a sticky sidebar would not stick */
.rd-side .idn-search { max-width: none; margin: 0; }
.rd-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.rd-switch a { padding: 7px 4px; border: 1px solid transparent; border-radius: var(--r-s); color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; white-space: nowrap; }
.rd-switch a:hover { color: var(--ink); }
.rd-switch a[aria-current] { background: var(--surface); border-color: var(--line); color: var(--ink); }
.rd-side-h { margin: 0 0 4px; font: 700 14px var(--display); }
.rd-cats { list-style: none; margin: 0; padding: 0; }
.rd-cats a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 10px; border-left: 2px solid transparent; border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--text); font-size: 14px; text-decoration: none; }
.rd-cats a:hover { background: var(--surface-2); }
.rd-cats a[aria-current] { background: var(--surface-2); border-left-color: var(--accent); font-weight: 600; }
.rd-cn { display: flex; flex-direction: column; min-width: 0; }
.rd-bad { color: var(--down); font-size: 12.5px; font-weight: 500; }
.rd-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.rd-allcats summary { padding: 7px 10px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.rd-allcats summary::-webkit-details-marker { display: none; }
.rd-allcats .rd-s-shut, .rd-allcats[open] .rd-s-open { display: none; }
.rd-allcats[open] .rd-s-shut { display: inline; }
.rd-catsel { display: none; gap: 8px; align-items: center; }
.rd-catsel select { flex: 1; min-width: 0; height: 44px; font-size: 16px; }
.rd-catsel.auto button { display: none; }
.rd-count { margin: 0 0 10px; }
.rd-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rd-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.rd-num, .rd-prev { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-s); color: var(--text); font-variant-numeric: tabular-nums; text-decoration: none; }
a.rd-num:hover, .rd-prev:hover { background: var(--surface-2); }
b.rd-num { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.rd-gap { padding: 0 2px; color: var(--muted); }
@container (max-width: 539px) { .rd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {   /* the sidebar becomes a row above the grid: search, switch and a category select */
  .rd-layout { grid-template-columns: minmax(0, 1fr); }
  .rd-side { margin-bottom: 18px; }
  .rd-catlist { display: none; }
  .rd-catsel { display: flex; }
}
@media (max-width: 560px) {
  .rd-head h1 { font-size: 26px; }
  .rd-pn { flex: 1 0 100%; }
  .rd-pages { flex: 1 0 100%; justify-content: space-between; }
  .rd-pages .rd-num, .rd-pages .rd-gap { display: none; }
}

/* ---- 70. third-party settings in the monitor form: side menu, severity choices, parts grouped by product ------ */
.form.wide > div.tps[data-for] { max-width: none; }
.tps-menu { display: none; }
.tps-sec h2 { font: 700 17px/1.3 var(--display); margin: 0 0 12px; }
.tps-sec h2:focus { outline: none; }
.tps-body > .tps-sec + .tps-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.tps-menu a { display: block; padding: 8px 10px 8px 12px; border-left: 2px solid transparent; border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--muted); text-decoration: none; font-size: 14px; }
.tps-menu a:hover { color: var(--ink); background: var(--surface-2); }
.tps-menu a[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--surface-2); border-left-color: var(--accent); }
/* two columns when the form itself is wide enough (the app menu takes room too), stacked below that */
.tps.tps-js { container-type: inline-size; display: flex; gap: 28px; align-items: flex-start; }
.tps-body { flex: 1 1 0; min-width: 0; }
@container (min-width: 600px) {
  .tps-js .tps-menu { display: flex; flex: 0 0 180px; flex-direction: column; gap: 2px; padding-right: 14px; border-right: 1px solid var(--line); }
  .tps-js .tps-sec:not(.on) { display: none; }
  .tps-js .tps-body > .tps-sec + .tps-sec { margin-top: 0; padding-top: 0; border-top: 0; }
}
.tps-opts { padding-bottom: 6px; }
.form label.check.tps-opt { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; }
.tps-opt input { margin-top: 4px; flex: none; }
.tps-opt span { min-width: 0; }
.tps-opt b { display: block; font-weight: 600; font-size: 14.5px; }
.tps-opt small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.tpp { margin: 4px 0 12px; }
.tpp-tools { display: flex; flex-wrap: wrap; gap: 0 12px; }
.form .tpp-tools label { flex: 1 1 220px; min-width: 0; margin-bottom: 10px; }
.form .tpp-tools .tpp-region { flex: 0 1 230px; }
.tpp-list { max-height: 420px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.tpp-list:empty { display: none; }
.tpp-g + .tpp-g { border-top: 1px solid var(--line); }
.tpp-head { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.tpp-head input { flex: none; margin: 0; }
.form button.tpp-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: auto; line-height: 1.35; padding: 10px 0; background: none; border: 0; border-radius: 0; color: var(--ink); font-weight: 600; text-align: left; white-space: normal; }
.form button.tpp-toggle:hover { filter: none; color: var(--ink); }
.tpp-toggle::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 3px 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.tpp-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -3px; }
.tpp-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tpp-picked { color: var(--muted); font-weight: 400; font-size: 13px; white-space: nowrap; }
.tpp-n { color: var(--muted); font-weight: 400; font-size: 13px; white-space: nowrap; }
.tpp-rows { padding: 0 12px 8px 36px; }
.form .tpp-rows label.check { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 5px 0; font-size: 14.5px; overflow-wrap: anywhere; }
.tpp-rows label.check input { flex: none; margin-top: 4px; }
.tpp-rows label.check > span { flex: 1; min-width: 0; }
.tpp-rows label.check > span.tpp-st { flex: none; min-width: auto; font-size: 13px; white-space: nowrap; }
.tpp-more { margin: 6px 0 4px; }
.tpp-count { margin: 8px 0 0; font-weight: 600; font-size: 14px; }
/* an older whole-region pick on AWS, Google Cloud or Azure: one line saying so, a button per region to untick it */
.tpp-legacy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.tpp-legacy[hidden] { display: none; }
.tpp-legacy p { flex: 1 1 100%; margin: 0; }
.form .tpp-legacy button.sm { height: auto; min-height: 30px; line-height: 1.35; padding: 5px 11px; white-space: normal; text-align: left; }
/* the region chosen under Region as one pick ("All products in Cape Town"), and a closed product's status word */
.form label.check.tpp-all { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-weight: 600; font-size: 14.5px; }
.form label.check.tpp-all[hidden] { display: none; }
.tpp-all input { flex: none; margin-top: 3px; }
.tpp-name .tpp-st { display: block; font-weight: 400; font-size: 13px; }
.tpp-count:focus { outline: none; }
@media (max-width: 640px) {
  .tpp-list { max-height: 60vh; }
  .tpp-rows { padding-left: 14px; }
  .form .tpp-tools .tpp-region { flex: 1 1 100%; }
}