/* Site Monitor customer portal.

   THE SAME PRODUCT AS THE APPLIANCE UI, deliberately: a customer who signs in
   here and clicks through to their dashboard should not notice a seam. The
   tokens, the components and the layout (a left sidebar with grouped nav, a
   top bar, a page heading with eyebrow/title/subtitle, panels, stat cards,
   badges, tables) are netdash-appliance internal/web/static/style.css's, which
   in turn are the owner's reference design (site-monitor-fullscreen.html).
   Where a rule here has the same name as one there it means the same thing;
   keep the two in step.

   ONE FILE, ONE REQUEST, under its content-hashed URL (internal/portal/assets).
   No web fonts (the system UI stack is the reference design's own fallback
   chain), no CDN, no images: the icons are an inline SVG sprite in base.html.

   THIS FILE ALSO STYLES THE RESELLER SURFACE (/_v), which shares it rather than
   carrying its own so the two cannot drift; its .topnav bar is near the end.

   CONTRAST is the appliance's, measured there with the dataviz validator:
   --muted #5f6962 is 5.3:1 on --bg and 5.7:1 on --paper; each status word on
   its own tint is AA at the 12px+ sizes used here. --teal is CHROME ONLY — the
   mark, links, the active rule, primary buttons — and never a status colour. */

:root {
  color-scheme: light;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- the reference design's palette (same values as the appliance) ---- */
  --bg:       #f6f7f4;   /* page plane */
  --paper:    #ffffff;   /* panels, tables, inputs */
  --nav:      #f0f2ed;   /* the sidebar */
  --ink:      #252e2b;   /* primary text */
  --ink-2:    #4a5550;   /* secondary text */
  --muted:    #5f6962;   /* labels — darkened from the mockup's #77817a for AA */
  --line:     #e1e6df;   /* hairlines */
  --line-2:   #edf0eb;   /* row rules inside a panel */
  --teal:     #24594f;   /* brand: chrome only */
  --teal-dk:  #173e36;
  --mint:     #e4eee7;
  --hover:    #e7ebe4;

  /* Status: text-capable steps plus the tint each sits on. Reserved for state,
     always beside a word. */
  --red:      #a8463a;  --redbg:     #fbefeb;
  --amber:    #8a6420;  --amberbg:   #fbf5e7;
  --green:    #2f6b4c;  --greenbg:   #ecf4ec;
  --slate:    #56646c;  --slatebg:   #eef2f4;

  /* ---- aliases, the names the appliance's rules are written against ---- */
  --surface:   var(--paper);
  --surface-2: #f3f5f1;
  --text:      var(--ink);
  --text-2:    var(--ink-2);
  --grid:      var(--line-2);
  --border:    var(--line);
  --brand:     var(--teal);
  --accent:    var(--teal);
  --good:      var(--green);
  --warning:   var(--amber);
  --critical:  var(--red);
  --radius:    9px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-ui);
}
button, input, select, textarea { font: inherit; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
code { color: var(--ink-2); }
h1, h2, h3 { color: var(--ink); }
h2 { margin: 0 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -0.2px; }
p { margin: 0 0 10px; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { border-radius: 4px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--teal); color: #fff; padding: 10px 14px; border-radius: 6px;
}
.skip:focus { top: 12px; text-decoration: none; }
/* Read aloud, never drawn: the name of an otherwise empty header cell. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.icon {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ================================================================
   THE LAYOUT: fixed sidebar | top bar + page  (the appliance's)
   ================================================================ */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 228px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
  background: var(--nav);
  border-right: 1px solid var(--line);
  /* The ONE region that may scroll when its contents outgrow the screen.
     Sign out is not in it — see base.html. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.workspace { margin-left: 228px; min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); padding: 0 6px 20px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.4px; line-height: 1.15;
}
.brand:hover { text-decoration: none; }
.brand small, .wordmark small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.brandmark {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  background: var(--teal); color: #fff;
  display: grid; place-items: center;
}
.brandmark .icon { width: 20px; height: 20px; stroke-width: 2; }

.site-picker {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px;
  padding: 11px 12px; margin-bottom: 10px; min-width: 0;
}
.site-picker .icon { color: var(--teal); }
.site-picker strong { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.site-picker small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.nav-group-label {
  margin: 0; padding: 16px 12px 6px;
  font-size: 11px; font-weight: 650; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted);
}
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  min-height: 44px;
  padding: 9px 12px; margin: 1px 0;
  border-radius: 6px;
  color: var(--ink-2); font-size: 13.5px;
}
.nav-link .icon { color: var(--muted); }
.nav-link:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav-link.active { background: #dfe9e0; color: #1d4a40; font-weight: 650; }
.nav-link.active .icon { color: var(--teal); }
.nav-link.active::before {
  content: ""; position: absolute; left: -16px; top: 12px;
  width: 3px; height: 20px; border-radius: 0 2px 2px 0; background: var(--teal);
}
.sidebar-bottom { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid var(--line); }

/* ---- the top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 32px;
  background: rgba(246, 247, 244, 0.94);
  border-bottom: 1px solid var(--line);
}
/* The breadcrumb is the ONLY shrinkable thing in the bar, and it shrinks a
   hundred times faster than anything else: any width shortage is taken from
   it and never from the actions cluster, which keeps Sign out on screen. */
.topbar .crumb { flex: 1 1 auto; min-width: 0; flex-shrink: 100; overflow: hidden; }
.crumb ol { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none;
            font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.crumb li { overflow: hidden; text-overflow: ellipsis; }
.crumb li + li::before { content: "/"; margin-right: 8px; color: #c9d1c7; }
.crumb b { font-weight: 600; color: var(--ink); }
.topbar .navactions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto; white-space: nowrap;
}
.whoami { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.whoami > a { color: var(--ink-2); padding: 12px 6px; font-size: 13px; }
.whoami > a.active { color: var(--teal); font-weight: 600; }
.whoami .who { color: var(--muted); font-weight: 400; }

/* ---- the drawer control: hidden while the sidebar is always shown ---- */
.navtoggle { display: none; }
.menubtn { display: none; }
.navscrim { display: none; }

/* ---- the page ---- */
main {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px;
}
main:focus { outline: none; }
.foot {
  display: flex; justify-content: space-between; gap: 20px;
  margin: 0 32px; padding: 16px 0 20px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}

.page-heading {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-bottom: 22px;
}
.page-heading .actions:empty { display: none; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted);
}
h1 {
  margin: 0 0 6px;
  font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.8px;
  overflow-wrap: anywhere;
}
.subtitle { margin: 0; font-size: 13px; color: var(--muted); max-width: 75ch; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ================================================================
   COMPONENTS (the appliance's, from the reference design)
   ================================================================ */

.panel, .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px 20px;
  margin-bottom: 20px;
  min-width: 0;
}
.panel.flush { padding: 0; overflow: hidden; }
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px 14px; flex-wrap: wrap;
}
.panel-head h2 { margin: 0; }
.panel-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); max-width: 90ch; }
.panel-body { padding: 0 22px 18px; }
.panel > :last-child { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* Stat cards. */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 20px;
}
.stat {
  display: block; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; color: var(--ink);
}
.stat-label { display: flex; justify-content: space-between; align-items: center; gap: 8px;
              font-size: 12.5px; color: var(--ink-2); }
.stat-label .icon { width: 16px; height: 16px; color: var(--muted); }
.stat-value {
  margin: 10px 0 6px;
  font-size: 30px; font-weight: 500; letter-spacing: -1px; line-height: 1.1;
  overflow-wrap: anywhere;
}
.stat-foot { font-size: 12px; color: var(--muted); min-height: 1.4em; }

/* Notices: a quiet explanatory box, and its amber/red variants. */
.notice {
  padding: 12px 16px; margin: 0 0 20px;
  background: #f3f6ef; border: 1px solid #e1e8da; border-radius: 7px;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.notice p { margin: 0 0 8px; }
.notice p:last-child, .notice ul:last-child { margin-bottom: 0; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice li { margin: 4px 0; }
.notice.warning { background: var(--amberbg); border-color: #ecdcb8; color: #6e501a; }
.notice.critical { background: var(--redbg); border-color: #efd2ca; color: #87372d; }

.flash {
  display: block;
  background: var(--greenbg);
  border: 1px solid #d3e4d5;
  border-left: 3px solid var(--good);
  border-radius: 7px;
  color: var(--ink);
  padding: 11px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.flash p { margin: 4px 0; }
.flash.error { background: var(--redbg); border-color: #efd2ca; border-left-color: var(--critical); }

/* The inline refusal on the add-contact form, beside the field it is about. */
.addrerr {
  max-width: 70ch; font-size: 13px; color: var(--ink);
  background: var(--redbg); border: 1px solid #efd2ca;
  border-left: 3px solid var(--critical); border-radius: 7px;
  padding: 9px 12px; margin: 6px 0 10px;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.empty { color: var(--muted); margin: 0; padding: 4px 0; }
.help, .note { color: var(--muted); font-size: 12.5px; line-height: 1.55; max-width: 80ch; }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: break-word; }
/* A second line inside a cell: a version, a detail, a reason. */
.sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.chip {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 9px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
  vertical-align: middle;
}
.chip.bad { color: var(--critical); border-color: #efd2ca; background: var(--redbg); }

/* ---------- badges (dot + word: never colour alone) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap;
  border: 1px solid transparent;
  color: var(--slate); background: var(--slatebg);
  vertical-align: middle;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.b-good { color: var(--good); }
.b-warn { color: var(--warning); }
.b-crit { color: var(--critical); }
.b-muted { color: var(--muted); }
.badge.b-good  { background: var(--greenbg); }
.badge.b-warn  { background: var(--amberbg); }
.badge.b-crit  { background: var(--redbg); }
.badge.b-muted { background: #f1f3ef; }
/* The older text-only status classes, still used for the words in a log row. */
.ok { color: var(--good); font-weight: 600; }
.warn { color: var(--warning); font-weight: 600; }
.bad { color: var(--critical); font-weight: 600; }

/* ---------- tables ---------- */

/* .tablewrap is a wide table's own scroll container, so between phone and
   desktop widths a table too wide for its panel scrolls SIDEWAYS INSIDE ITS
   OWN BOX instead of forcing the document wider than the viewport. On a phone
   the tables do not scroll at all: they become cards (the handset block). */
.tablewrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.grid th {
  text-align: left;
  color: var(--muted);
  background: #fafbf8;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--grid);
  vertical-align: top;
}
table.grid tbody tr:hover > td { background: #fafcf9; }
table.grid tr:last-child td { border-bottom: none; }
.panel.flush table.grid th:first-child, .panel.flush table.grid td:first-child { padding-left: 22px; }
.panel.flush table.grid th:last-child, .panel.flush table.grid td:last-child { padding-right: 22px; }
table.grid td.act { text-align: right; white-space: nowrap; }
table.grid td.act .inlineform { display: inline-block; margin: 2px 0 2px 6px; }
table.grid td.act > .btn { margin: 2px 0 2px 6px; }
th.acth { text-align: right; }
td.ttl strong { font-weight: 650; }

/* A key/value table (My account, the release confirmation): the label column
   is a label, not a column heading. */
table.grid.kv th {
  background: none; border-top: 0;
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500;
  color: var(--ink-2); width: 34%; white-space: normal;
  border-bottom: 1px solid var(--grid);
  padding-left: 0;
}
table.grid.kv { margin-bottom: 14px; }
table.grid.kv td { padding-right: 0; overflow-wrap: anywhere; }
table.grid.kv tr:last-child th { border-bottom: none; }

/* A generated one-time password or a serial: monospaced, large enough to be
   read off the screen and typed correctly, and one click selects all of it. */
code.otp { font-family: var(--font-mono); font-size: 16px; letter-spacing: 1px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px;
  user-select: all; overflow-wrap: anywhere; }

/* ---------- forms & controls ---------- */

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input:not([type]), select, textarea {
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #d5ddd2;
  border-radius: 6px;
  padding: 9px 11px;
  min-height: 42px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #abc9b9;
  outline-offset: 0;
  border-color: var(--teal);
}
input::placeholder { color: #8a938c; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--teal); margin: 0; }

label { color: var(--ink); font-size: 13px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; max-width: 760px; }
.formgrid .span2 { grid-column: 1 / -1; }
/* A one-field form whose button sits beside the field. */
.formrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.formrow .field { margin-bottom: 0; }
.grow { flex: 1 1 260px; min-width: 0; }
form.formrow .field.grow { max-width: 520px; }
.formfoot { margin: 4px 0 14px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
fieldset.choices { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
fieldset.choices legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; float: left; width: 100%; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 15px;
  font-weight: 600;
  min-height: 42px;
  cursor: pointer;
  text-align: center;
}
a.btn:hover { text-decoration: none; }
.btn:hover { background: #eef2ed; border-color: #becbc0; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.primary:hover { background: var(--teal-dk); border-color: var(--teal-dk); }
.btn.danger { border-color: #e6c8c0; color: var(--critical); }
.btn.danger:hover { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn.quiet { color: var(--ink-2); }
.btn.sm { padding: 6px 12px; min-height: 36px; font-size: 13px; }
.inlineform { display: inline; margin: 0; }

/* ---------- the rename pencil (appliances list) ----------
   The device name with a small pencil beside it. A <details>, so it needs no
   script: the form unfolds in place under the name. */
details.rename { display: inline-block; max-width: 100%; }
details.rename > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); border-radius: 5px; padding: 2px 4px; margin: -2px -4px;
}
details.rename > summary::-webkit-details-marker { display: none; }
details.rename > summary:hover { background: var(--hover); }
details.rename .pencil { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
details.rename > summary:hover .pencil,
details.rename > summary:focus-visible .pencil,
details.rename[open] .pencil { color: var(--teal); }
details.rename .renameform { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
details.rename .renameform input[type=text] { width: 16em; max-width: 60vw; min-height: 36px; padding: 6px 9px; }

/* ================================================================
   THE PUBLIC PAGES: sign-in, sign-up, the code, an invitation, and a
   message for somebody not signed in. No sidebar (base.html), so they sit
   on the bare canvas as one centred card.
   ================================================================ */
main.bare { max-width: 1100px; padding: 6vh 16px 32px; }
.signin { max-width: 440px; margin: 0 auto; }
main.bare > .flash { max-width: 440px; margin: 0 auto 16px; }
.signin.card { padding: 26px 28px 24px; }
.signin h1 { font-size: 24px; margin-bottom: 14px; }
.signin label { display: block; margin: 14px 0 5px; }
.signin form > .btn { width: 100%; margin-top: 20px; }
.signin .note { margin-top: 14px; }
.signin .page-heading { margin-bottom: 12px; }
.signin .panel { border: 0; padding: 0; margin: 0; }
.wordmark {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px; font-weight: 700; font-size: 17px; letter-spacing: -0.4px; line-height: 1.15;
}

/* ---------- the public marketing landing page ----------
   Prose, not a dashboard: measured line length, generous spacing. --teal is
   chrome here as everywhere: the wordmark, the rule under it, the bullet. */
.landing { max-width: 820px; margin: 0 auto; padding: 0 0 32px; }
.landing .lhero { text-align: center; padding: 10px 0 10px; }
.loginmark { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 0; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.loginmark .bm { color: var(--ink); font-weight: 300; }
.loginmark .bt { color: var(--teal); font-weight: 650; margin-left: -6px; }
.loginmark .rule { display: inline-block; width: 30px; height: 1px; background: var(--teal); opacity: .75; }
.loginmark .prod { color: var(--ink-2); font-size: 12.5px; letter-spacing: 0.16em; }
.landing h1 { margin: 16px auto 0; font-size: 34px; letter-spacing: -1px; max-width: 24ch; }
.landing h2 {
  margin: 36px 0 8px; font-size: 19px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.lead { color: var(--ink-2); font-size: 16px; margin: 14px 0 0; }
.lead.small { font-size: 15px; }
.lead b, .landing li b { color: var(--ink); }
.landing .lhero .lead { max-width: 64ch; margin-left: auto; margin-right: auto; }
.lcta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 22px 0 6px; }
.lcta .btn { min-height: 44px; padding: 11px 22px; }
.landing .help { max-width: none; }
.lsil { list-style: none; margin: 10px 0 0; padding: 0; }
.lsil > li {
  position: relative; margin: 14px 0; padding: 14px 18px 14px 34px;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
}
.lsil > li::before {
  content: ""; position: absolute; left: 16px; top: 22px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}
.lcols { margin: 12px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; color: var(--ink-2); }
.lcols > li { margin: 6px 0; break-inside: avoid; }
.lfoot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.lfoot p { margin: 12px auto; }

/* ---------- the reseller surface (/_v) ----------
   A plain top bar rather than the sidebar: two links, one personal action. The
   three-part structure (brand · .navlinks · .whoami) keeps Sign out a sibling
   of the links so nothing in them can displace it. */
.topnav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 0 16px; background: var(--nav); border-bottom: 1px solid var(--line);
}
.topnav a { color: var(--ink-2); padding: 12px 12px; font-weight: 500; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--ink); text-decoration: none; }
.topnav a.active { color: var(--teal); border-bottom-color: var(--teal); }
.topnav .brand { padding: 12px 14px 12px 0; font-size: 15px; gap: 5px; border-bottom: 0; }
.topnav .brand .bm { color: var(--ink); }
.topnav .brand .bt { color: var(--teal); }
.topnav .brand .bp { color: var(--muted); font-size: 11px; font-weight: 500; }
.topnav .navlinks { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.topnav .whoami { margin-left: auto; }
.lab { display: block; font-weight: 600; margin: 0 0 3px; font-size: 13px; }
.dim { color: var(--muted); font-size: 12.5px; }
.card.signin { margin-top: 0; }

/* ================================================================
   NARROW SCREENS: the sidebar becomes a drawer — at the appliance's own
   1100px, so the two surfaces fold at the same width.
   ================================================================ */
@media (max-width: 1100px) {
  .workspace { margin-left: 0; }
  .sidebar {
    width: 260px; max-width: 86vw;
    transform: translateX(-102%);
    transition: transform 0.18s ease;
    box-shadow: 15px 0 40px rgba(21, 40, 25, 0.12);
    visibility: hidden;          /* out of the tab order while closed */
  }
  .navtoggle:checked ~ .sidebar { transform: none; visibility: visible; }
  .navtoggle:checked ~ .navscrim {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(20, 37, 29, 0.28);
  }
  /* The checkbox is the accessible control: visually hidden, still focusable
     and announced, and Space toggles it. Its visible face is the Menu label. */
  .navtoggle {
    display: block; position: fixed; top: 12px; left: 16px; z-index: 31;
    width: 1px; height: 1px; margin: 0; opacity: 0;
  }
  .menubtn {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    min-height: 44px; padding: 8px 12px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer;
  }
  .navtoggle:focus-visible ~ .workspace .menubtn { outline: 2px solid var(--teal); outline-offset: 2px; }
  .topbar { padding: 8px 16px; }
  main { padding: 20px 16px 24px; }
  .foot { margin: 0 16px; }
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ================================================================
   HANDSET  (max-width: 560px)
   ================================================================
   THE APPLIANCE'S BREAKPOINT, deliberately: 560 sits above every portrait
   phone (320-430 CSS px, 540 on the widest foldables) and below every tablet.
   Two surfaces of one product folding at two widths is how they stop reading
   as one product.

   THREE THINGS HAPPEN HERE:
     1. every table becomes a stack of cards (below);
     2. every form is one column, full width;
     3. everything touchable is at least 44px tall.
   The document never gets wider than the screen — not by hiding overflow,
   which would make content unreachable, but by nothing being wider.

   Placed LAST because most of what it overrides has the same specificity, so
   source order decides.
   ================================================================ */
@media (max-width: 560px) {

  /* ---- the top bar: Menu, then the personal actions ----
     The breadcrumb drops out and the actions may WRAP onto a second line
     rather than run off the edge: shrinking costs height, never Sign out. The
     account address drops out too (it is in the link's title and first on
     My account). */
  .topbar { gap: 8px; padding: 6px 10px; min-height: 58px; flex-wrap: wrap; }
  .topbar .crumb { display: none; }
  .topbar .navactions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; flex-shrink: 1; }
  .whoami { gap: 4px; }
  .whoami .who { display: none; }
  .whoami > a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; }

  main { padding: 16px 12px 24px; }
  main.bare { padding: 16px 12px 24px; }
  .foot { margin: 0 12px; }
  h1 { font-size: 24px; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; margin-bottom: 16px; }
  .page-heading .actions, .page-heading .actions .btn, .page-heading .actions .inlineform { width: 100%; }
  .panel, .card { padding: 14px 14px 16px; }
  .panel.flush { padding: 0; }
  .panel-head { padding: 14px 14px 10px; }
  .panel-body { padding: 0 14px 14px; }
  .stats { gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat-value { font-size: 26px; }

  /* ---- EVERY TABLE BECOMES A CARD PER ROW ----
     Each cell carries its column's name in data-label, which this prints in
     the same muted uppercase the <th> uses on a wide screen; the header row is
     hidden (it is what makes a real table everywhere wider). td.ttl is the
     card's heading and needs no label; td.act is the controls, full width at
     the foot of the card, stacked so "Open dashboard" and "Remove" are never
     two adjacent same-sized targets.

     The label is an inline-block in normal flow and the cell stays
     display: block — not a flex container, because these cells hold mixed
     inline content and a flex container would make each text run its own
     item. */
  table.grid.cards,
  table.grid.cards > tbody { display: block; width: 100%; }
  table.grid.cards > thead { display: none; }
  table.grid.cards > tbody > tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  table.grid.cards > tbody > tr:last-child { border-bottom: 0; }
  table.grid.cards > tbody > tr:hover > td { background: none; }
  table.grid.cards > tbody > tr > td,
  .panel.flush table.grid.cards > tbody > tr > td {
    display: block;
    padding: 5px 0;
    border-bottom: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;   /* nothing in a card may widen the document */
  }
  table.grid.cards td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 11ch;
    margin-right: 8px;
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  /* A value set on its own line under the label stays under the label. */
  table.grid.cards td[data-label] .sub { margin-left: calc(11ch + 8px); }
  table.grid.cards td.ttl { font-size: 15px; font-weight: 600; padding: 0 0 6px; }
  table.grid.cards td.ttl .sub { font-weight: 400; }
  table.grid.cards td.act { padding: 6px 0 0; }
  table.grid.cards td.act .inlineform { display: block; margin: 0; }
  table.grid.cards td.act .btn,
  table.grid.cards td.act > .btn {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
  }
  table.grid.cards td.act > .muted { display: block; padding: 4px 0; }
  /* A card table needs no scroll container; the plain .tablewrap rule above
     is inert because nothing in a card is wider than the card. */
  .tablewrap > table.grid:not(.cards) { width: max-content; min-width: 100%; }

  /* The key/value tables: the label above its value, both full width. */
  table.grid.kv, table.grid.kv tbody, table.grid.kv tr, table.grid.kv th, table.grid.kv td { display: block; width: 100%; }
  table.grid.kv th { border-bottom: 0; padding: 8px 0 0; }
  table.grid.kv td { padding: 2px 0 8px; border-bottom: 1px solid var(--grid); }
  table.grid.kv tr:last-child td { border-bottom: 0; }
  code.otp { font-size: 14px; letter-spacing: 0.5px; }

  /* ---- the rename pencil: a finger-sized target ---- */
  details.rename { display: block; }
  details.rename > summary { min-height: 44px; margin: 0 -4px; }
  details.rename .renameform { flex-wrap: wrap; }
  details.rename .renameform input[type=text] { width: 100%; max-width: none; min-height: 44px; }
  details.rename .renameform .btn { width: 100%; }

  /* ---- forms: one column, full width, 44px ---- */
  .formgrid { grid-template-columns: 1fr; }
  .formrow { flex-direction: column; align-items: stretch; }
  .formrow .field, form.formrow .field.grow { max-width: none; width: 100%; flex: 0 0 auto; }
  .formrow > .btn, .formrow > .grow { width: 100%; }
  .formfoot .btn, .btnrow .btn, .btnrow .inlineform { width: 100%; }
  .btn,
  .btn.sm {
    min-height: 44px;
    padding: 11px 14px;
  }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"],
  input[type="date"], input:not([type]), select {
    min-height: 44px;
    font-size: 16px;            /* below 16px iOS zooms the page on focus */
  }
  .signin.card { padding: 20px 16px; }

  /* ---- the reseller bar ---- */
  .topnav { padding: 0 8px; }
  .topnav .navlinks { order: 2; flex: 1 0 100%; border-top: 1px solid var(--line); }
  .topnav a { padding: 13px 10px; }
  .topnav .whoami .btn { min-height: 44px; }

  /* ---- the landing page ---- */
  .landing h1 { font-size: 26px; }
  .lcols { columns: 1; }
  .lcta .btn { width: 100%; }
}