/* Homebase "Paper" appearance, shared by our own pages (home/sign-in, team).
   Tokens are copied from the Homebase artifact's .theme-paper so the colours match exactly. */
:root {
  color-scheme: light;
  --color-surface-0: oklch(0.985 0.006 75deg);
  --color-surface-1: oklch(0.98875 0.0045 75deg);
  --color-surface-2: oklch(0.9925 0.003 75deg);
  --color-surface-3: oklch(0.99625 0.0015 75deg);
  --color-surface-4: oklch(1 0 75deg);
  --color-content-0: oklch(0.22 0.008 70deg);
  --color-content-1: oklch(0.4 0.007 70deg);
  --color-content-2: oklch(0.52 0.006 70deg);
  --color-content-3: oklch(0.62 0.005 70deg);
  --color-content-4: oklch(0.72 0.004 70deg);
  --color-edge: oklch(85.92% 0.0135 75);
  --color-edge-muted: oklch(90.67% 0.0089 75);
  --color-accent: oklch(0.5 0.13 250deg);
  --color-on-accent: #fff;
  --color-red: oklch(62.51% 0.2414 25.33);
  --color-orange: oklch(70.86% 0.2077 47.6);
  --color-green: oklch(64.14% 0.1655 149.6);
  --color-teal: oklch(66.2% 0.1453 182.5);
  --color-yellow: oklch(83.13% 0.1532 86.05);

  --color-page: var(--color-surface-0);
  --color-panel: var(--color-surface-1);
  --color-card: var(--color-surface-4);
  --color-control: var(--color-surface-1);
  --color-ink: var(--color-content-0);
  --color-ink-muted: var(--color-content-1);
  --color-ink-subtle: var(--color-content-2);
  --color-ink-placeholder: var(--color-content-4);
  --color-hover: color-mix(in oklch, var(--color-content-0) 3%, transparent);
  --color-active: color-mix(in oklch, var(--color-content-0) 6%, transparent);
  --color-success: var(--color-green);
  --color-failure: var(--color-red);
  --accent-soft: color-mix(in srgb, var(--color-accent) 13%, transparent);
  --good-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
  --good-ink: color-mix(in srgb, var(--color-success) 70%, var(--color-ink));
  --bad-bg: color-mix(in srgb, var(--color-failure) 13%, transparent);
  --bad-ink: color-mix(in srgb, var(--color-failure) 78%, var(--color-ink));
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--color-page); color: var(--color-ink);
  font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
a { color: var(--color-ink); text-decoration-color: var(--color-edge); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* The panel everything sits in, like Homebase's main area */
.frame {
  min-height: calc(100dvh - 24px); background: var(--color-panel);
  border: 1px solid var(--color-edge); border-radius: 16px;
}
.frame main { max-width: 1040px; margin: 0 auto; padding: 20px 16px 60px; display: grid; gap: 16px; }

/* Header, as Homebase's header.top */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
header.top h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
header.top .sub { color: var(--color-ink-muted); font-size: 13px; margin-top: 2px; }
.brandline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--color-ink-subtle); margin-bottom: 4px; }

/* Cards */
.card { background: var(--color-card); border: 1px solid var(--color-edge); border-radius: 16px; padding: 16px; min-width: 0; }
.card h2 { font-size: 14px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card h2 .count { font-weight: 500; color: var(--color-ink-subtle); font-size: 12px; }
.note { color: var(--color-ink-muted); font-size: 13px; line-height: 1.5; margin: 10px 0 0; max-width: 78ch; }

/* Controls */
label { display: grid; gap: 5px; font-size: 12px; font-weight: 500; color: var(--color-ink-muted); min-width: 0; }
input, select, textarea {
  font: inherit; color: var(--color-ink); min-height: 34px; padding: 0 10px; width: 100%; min-width: 0;
  background: var(--color-control); border: 1px solid var(--color-edge-muted); border-radius: 9px;
}
input::placeholder { color: var(--color-ink-placeholder); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--color-accent); background: var(--color-surface-4); }
select:disabled, input:disabled { opacity: .55; }
input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--color-accent); }

.btn, button.btn {
  font: inherit; font-size: 13px; font-weight: 500; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--color-edge); background: var(--color-card); color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--color-hover); }
.btn.pri { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
.btn.pri:hover { filter: brightness(1.08); background: var(--color-accent); }
.btn:disabled { opacity: .5; cursor: default; }
.linkbtn { font: inherit; font-weight: 500; color: var(--color-ink-muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-edge); text-underline-offset: 2px; }
.linkbtn:hover { color: var(--color-ink); text-decoration-color: currentColor; }

/* Tables, as Homebase's table.data */
.tw { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-ink-subtle); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--color-edge); white-space: nowrap; }
table.data td { padding: 7px 10px; border-bottom: 1px solid var(--color-edge-muted); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--color-hover); }
table.data td small { display: block; color: var(--color-ink-subtle); font-size: 11.5px; }
table.data td b { font-weight: 600; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge.good { color: var(--good-ink); background: var(--good-bg); }
.badge.critical { color: var(--bad-ink); background: var(--bad-bg); }
.badge.neutral { color: var(--color-ink-muted); background: var(--color-edge-muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* Status lines */
.msg { min-height: 1.4em; font-size: 13px; color: var(--color-ink-muted); }
.msg.err { color: var(--bad-ink); }
.msg.ok { color: var(--good-ink); }
.msg:empty { min-height: 0; margin: 0 !important; }

@media (max-width: 520px) {
  body { padding: 0; }
  .frame { border: 0; border-radius: 0; min-height: 100dvh; }
}