/* ============================================================================
   Urban Stream / inet — shared design system
   One source of truth for every surface. Surfaces are selected by a body class:
     .app--admin   dense staff console — neutral surface, pink accent
     .app--portal  customer portal    — pink-branded
     .app--public  marketing/signup   — pink-branded hero
   ========================================================================== */

:root {
  /* Brand (Urban Stream pink) */
  --brand:#f03878; --brand-600:#d62a66; --brand-700:#b81c57;
  --brand-50:#fdecf3; --brand-100:#fbd9e6; --brand-line:#efdce6;
  --ink-plum:#241924;

  /* Accent = brand, unified across all surfaces */
  --accent:var(--brand);
  --accent-strong:var(--brand-700);      /* AA-safe pink for text/links on white */

  /* Neutral surfaces (admin default) */
  --bg:#f6f7f9; --card:#fff; --line:#e6e8ec;
  --ink:#111827; --mut:#5b6270; --mut-2:#7a8393;

  /* Dark chrome (nav) */
  --nav-bg:#0f172a; --nav-hover:#1e293b; --nav-ink:#cbd5e1; --nav-ink-dim:#9aa7b8;

  /* Status */
  --ok-bg:#dcfce7;  --ok-ink:#15803d;
  --warn-bg:#fef3c7;--warn-ink:#92600a;
  --bad-bg:#fee2e2; --bad-ink:#b42318;
  --info-bg:#e0f2fe;--info-ink:#075985;

  /* Provider brand hues */
  --gc:#0b8a6a; --stripe:#5b3cc4;

  /* Radius / spacing / elevation */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --shadow-1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-2:0 6px 20px rgba(16,24,40,.09);
  --shadow-pink:0 14px 36px rgba(180,28,87,.10);

  /* Type */
  --font: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-base:15px; --lh:1.55;

  /* Buttons (AA-safe: white on --brand alone is only 3.3:1) */
  --btn-bg:var(--brand-700); --btn-bg-hover:#a11a4e;

  --focus:0 0 0 3px rgba(240,56,120,.40);
  --t:140ms ease;

  --wrap:1100px;
}

/* ------------------------------------------------------------------ base */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font:var(--fs-base)/var(--lh) var(--font);
  color:var(--ink); background:var(--bg);
}
a { color:var(--accent-strong); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
h1 { font-size:20px; margin:0 0 var(--sp-4); letter-spacing:-.01em; }
h2 { font-size:16px; margin:26px 0 10px; }

/* Visible keyboard focus everywhere (was missing outside public pages) */
:where(a,button,.btn,input,select,textarea,[tabindex]):focus-visible {
  outline:none; box-shadow:var(--focus); border-radius:var(--r-sm);
}

/* Surface base font sizes */
.app--admin  { --fs-base:14px; }
.app--portal { --fs-base:15px; --bg:#fbf5f8; --nav-bg:var(--ink-plum); --nav-hover:#3a2c3a; --wrap:880px; }
.app--public { --fs-base:16px; --bg:#fbf5f8; --wrap:900px; }
.app--admin body, .app--portal body { background:var(--bg); }

/* ------------------------------------------------------------------ layout */
.wrap { max-width:var(--wrap); margin:24px auto; padding:0 20px; }
main.wrap, main.wrap:focus { outline:none; }

/* ------------------------------------------------ header / nav (admin+portal) */
header.top { background:var(--nav-bg); color:#fff; }
header.top .topwrap, header.top .bar {
  max-width:var(--wrap); margin:0 auto; padding:0 20px; min-height:54px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; row-gap:0;
}
/* Admin has many tabs: give the nav its own full-width row below the brand/user
   bar so it never overflows, however many tabs there are. Portal (.bar/.r) keeps
   its single row. */
.app--admin header.top .topwrap { padding-top:6px; padding-bottom:6px; }
.app--admin header.top nav { order:2; flex-basis:100%; margin-top:2px; }
.app--admin header.top .right { order:1; }
header.top .brand {
  font-weight:800; font-size:17px; letter-spacing:.02em; color:#fff; margin-right:18px;
  display:inline-flex; align-items:center; gap:9px;
}
header.top .brand:hover { text-decoration:none; opacity:.9; }
header.top .brand img { height:22px; width:auto; display:block; }
header.top nav { display:flex; gap:2px; flex-wrap:wrap; }
header.top nav a {
  color:var(--nav-ink); font-weight:500; padding:7px 12px; border-radius:var(--r-sm);
  transition:background var(--t), color var(--t); white-space:nowrap;
}
header.top nav a:hover { color:#fff; background:var(--nav-hover); text-decoration:none; }
header.top nav a.active, header.top nav a.on { color:#fff; background:var(--nav-hover); box-shadow:inset 0 -2px 0 var(--brand); }
header.top .right, header.top .r { margin-left:auto; display:flex; align-items:center; gap:14px; }
header.top .user { color:var(--nav-ink-dim); font-size:12.5px; }
header.top .logout, header.top .r a { color:var(--nav-ink); font-size:13px; }
header.top .logout:hover, header.top .r a:hover { color:#fff; }

.badge { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11px; font-weight:700; }
.badge.live { background:#fee2e2; color:#b42318; }
.badge.dry  { background:#dcfce7; color:#15803d; }

/* ------------------------------------------------------------ cards + grid */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:18px 0; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; box-shadow:var(--shadow-1);
}
.card .n { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.card .l { color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
a.card, .card--link { transition:box-shadow var(--t), transform var(--t); }
a.card:hover, .card--link:hover { box-shadow:var(--shadow-2); text-decoration:none; }

/* ---------------------------------------------------------------- tables */
.table-wrap { width:100%; overflow-x:auto; border-radius:var(--r); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
th { background:#f9fafb; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); font-weight:600; }
.app--portal th { background:#faf2f6; }
tbody tr:nth-child(even) td { background:#fcfcfd; }
.app--portal tbody tr:nth-child(even) td { background:#fdf8fb; }
tbody tr:hover td { background:var(--brand-50); }
tr:last-child td { border-bottom:none; }
.r { text-align:right; } .mut { color:var(--mut); }

/* empty state */
.empty { text-align:center; color:var(--mut); padding:26px 16px; }
.empty .empty__title { color:var(--ink); font-weight:600; margin-bottom:4px; }

/* --------------------------------------------------------- pills + alerts */
.pill { display:inline-block; padding:2px 9px; border-radius:var(--r-sm); font-size:12px; font-weight:600; }
.pill.ok  { background:var(--ok-bg);  color:var(--ok-ink); }
.pill.warn{ background:var(--warn-bg);color:var(--warn-ink); }
.pill.bad { background:var(--bad-bg); color:var(--bad-ink); }
.pill.info{ background:var(--info-bg);color:var(--info-ink); }
.pill.neutral{ background:#eef1f5;color:var(--mut); }

/* alert = banner (was faked with .pill + inline padding) */
.alert { display:flex; gap:9px; align-items:flex-start; padding:11px 14px; border-radius:var(--r);
  border:1px solid; font-size:14px; margin:12px 0; }
.alert__icon { flex:none; font-weight:700; line-height:1.4; }
.alert.info { background:#eff8ff; border-color:#b9e0fe; color:#0b4a6f; }
.alert.ok   { background:#ecfdf3; border-color:#a6f0c6; color:#0a5b34; }
.alert.warn { background:#fffaeb; border-color:#fde995; color:#7a5300; }
.alert.bad  { background:#fef3f2; border-color:#fdc4bf; color:#912018; }

.prov-gocardless { color:var(--gc); font-weight:600; }
.prov-stripe { color:var(--stripe); font-weight:600; }
.prov-bank,.prov-cash,.prov-other { color:var(--mut); }

/* --------------------------------------------------------------- buttons */
button, .btn {
  display:inline-block; background:var(--btn-bg); color:#fff; border:1px solid transparent;
  padding:9px 16px; border-radius:var(--r-sm); font-weight:600; font-size:14px; line-height:1.2;
  cursor:pointer; text-align:center; text-decoration:none; transition:background var(--t), box-shadow var(--t);
}
button:hover, .btn:hover { background:var(--btn-bg-hover); text-decoration:none; }
.btn--secondary, .btn.grey { background:#fff; color:var(--ink); border-color:var(--line); }
.btn--secondary:hover, .btn.grey:hover { background:#f3f4f6; }
.btn--danger { background:#b42318; } .btn--danger:hover { background:#912018; }
.btn--ghost { background:transparent; color:var(--accent-strong); border-color:transparent; }
.btn--ghost:hover { background:var(--brand-50); }
.btn--sm { padding:5px 10px; font-size:12.5px; }
button:disabled, .btn:disabled { opacity:.55; cursor:not-allowed; }

/* ----------------------------------------------------------------- forms */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
select, textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:14px; font-family:inherit; color:var(--ink); background:#fff;
}
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8393' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:30px; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--brand); }
input[type=checkbox], input[type=radio] { accent-color:var(--brand); width:auto; }
label { font-size:13px; color:var(--mut); }
.field { margin-bottom:14px; }
.field > label { display:block; margin-bottom:5px; }
.btn--block { display:block; width:100%; }

/* staff login card (admin surface) */
.login { max-width:360px; margin:12vh auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-2); }
.btn--sso { display:block; text-align:center; font-weight:700; background:var(--brand-700); color:#fff;
  padding:12px; border-radius:var(--r); transition:background var(--t); }
.btn--sso:hover { background:var(--btn-bg-hover); text-decoration:none; }

/* ============================================================ PUBLIC pages */
.app--public { color:var(--ink-plum); }
.app--public a { color:var(--brand-700); }
.app--public .top { position:relative; text-align:center; padding:56px 20px 40px; color:var(--ink-plum);
  background:radial-gradient(120% 90% at 50% -10%, var(--brand-50) 0%, var(--bg) 70%); }
.app--public .corner { position:absolute; top:18px; right:20px; font-size:14px; font-weight:700;
  color:var(--brand-700); border:1px solid var(--brand-100); background:#fff; padding:8px 14px; border-radius:var(--r-pill); }
.app--public .corner:hover { border-color:var(--brand); color:var(--brand); text-decoration:none; }
.app--public .logo { width:min(280px,70vw); height:auto; display:block; margin:0 auto 22px; }
.app--public .top h1 { color:var(--ink-plum); font-size:32px; letter-spacing:-.5px; text-wrap:balance; margin:0 0 10px; }
.app--public .top h1 em { font-style:normal; color:var(--brand-700); }
.app--public .top p { margin:0 auto; max-width:44ch; color:var(--body,#5b535e); font-size:18px; }
.app--public .wrap { margin-top:8px; }
.app--public .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
@media (max-width:640px){ .app--public .cards { grid-template-columns:1fr; } }
.app--public .card { border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-pink);
  border-color:var(--brand-line); display:flex; flex-direction:column; }
.app--public .tag { align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill); margin-bottom:14px; background:var(--brand-50); color:var(--brand-700); }
.app--public .card h2 { margin:0 0 8px; font-size:21px; }
.app--public .card p { margin:0 0 22px; color:#5b535e; font-size:15px; flex:1; }
.app--public .btn { font-weight:800; padding:14px 20px; border-radius:var(--r); font-size:16px; }
.app--public .btn-pink { background:var(--btn-bg); color:#fff; }
.app--public .btn-pink:hover { background:var(--btn-bg-hover); }
.app--public .btn-ink { background:var(--ink-plum); color:#fff; }
.app--public .btn-ink:hover { background:#3a2c3a; }
.app--public .accountbar { background:var(--ink-plum); color:#fff; border-radius:var(--r-lg); padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; }
.app--public .accountbar span { font-size:15px; opacity:.92; }
.app--public .accountbar a { font-weight:800; background:var(--btn-bg); color:#fff; padding:12px 20px; border-radius:var(--r); white-space:nowrap; }
.app--public .accountbar a:hover { background:var(--btn-bg-hover); text-decoration:none; }
.app--public footer { max-width:var(--wrap); margin:26px auto 44px; padding:0 16px; color:#a99aa4; font-size:13px; text-align:center; }

/* Centered single-card public forms (signup / login / result) */
.app--public .panel { max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--brand-line);
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-pink); }
.app--public .panel--narrow { max-width:420px; text-align:center; }

/* public form pages (signup / login / result) */
.app--public .hero { position:relative; text-align:center; padding:44px 20px 60px;
  background:radial-gradient(120% 90% at 50% -10%, var(--brand-50), var(--bg) 70%); }
.app--public .hero .logo { width:min(220px,64vw); margin:0 auto 16px; }
.app--public .hero h1 { font-size:28px; letter-spacing:-.3px; margin:0 0 8px; }
.app--public .hero p { margin:0; color:#5b535e; }
.app--public .panel { max-width:560px; margin:-40px auto 40px; padding:26px; background:#fff;
  border:1px solid var(--brand-line); border-radius:var(--r-lg); box-shadow:var(--shadow-pink); }
.app--public .panel--narrow { max-width:420px; margin:0 auto; text-align:center; }
.app--public .center-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(120% 60% at 50% 0%, var(--brand-50), var(--bg) 70%); }
.app--public label { display:block; font-weight:600; font-size:14px; margin:14px 0 5px; color:var(--ink-plum); }
.app--public input, .app--public select, .app--public textarea { border-color:#e3cdd8; font-size:15px; }
.app--public .btn--block { display:block; width:100%; margin-top:22px; }
.app--public .plans { margin-top:6px; }
.app--public .plan { display:flex; align-items:center; gap:12px; border:1px solid var(--brand-line);
  border-radius:10px; padding:12px; margin-bottom:8px; cursor:pointer; }
.app--public .plan:hover { border-color:var(--brand); }
.app--public .plan input { width:auto; }
.app--public .plan .t { font-weight:600; }
.app--public .plan .p { margin-left:auto; font-weight:700; color:var(--brand-700); }
.app--public .plan .mut { color:#5b535e; font-size:13px; font-weight:400; }
.app--public input.code { letter-spacing:6px; text-align:center; font-size:22px; }
.app--public .muted { color:#5b535e; font-size:13px; text-align:center; margin-top:16px; }
.app--public .muted a { color:var(--brand-700); }
.app--public .notice { background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  border-radius:9px; padding:10px 12px; font-size:14px; margin-top:16px; }
.app--public .consent { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:#5b535e; margin:18px 0 6px; }
.app--public .consent input { margin-top:3px; }
.app--public .whatsnext { font-size:13px; color:#5b535e; background:#faf6f8; border:1px solid var(--brand-line);
  border-radius:10px; padding:12px 14px; margin-top:16px; }
.app--public .whatsnext strong { color:var(--ink-plum); }
.app--public .whatsnext ol { margin:6px 0 0; padding-left:18px; }
.app--public .status-mark { width:56px; height:56px; border-radius:50%; color:#fff; font-size:30px;
  line-height:56px; text-align:center; margin:0 auto 14px; background:var(--brand); }
.app--public .status-mark.err { background:#b42318; }
.app--public .status-mark.neutral { background:#8a7d86; }

/* honeypot */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* portal footer */
.portal-foot { max-width:var(--wrap); margin:30px auto; padding:0 18px; color:var(--mut-2); font-size:12px; }
.portal-foot a { color:var(--mut); }

/* note box (portal info) */
.note { background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  padding:10px 14px; border-radius:var(--r); margin:12px 0; font-size:14px; }

/* -------------------------------------------------------- layout helpers */
.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:720px){ .cols-2 { grid-template-columns:1fr; } }

/* toolbar (page header row: title + actions) */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.toolbar h1 { margin:0; }
.toolbar .spacer { margin-left:auto; }
.toolbar .actions { display:flex; gap:8px; flex-wrap:wrap; }

/* pager */
.pager { display:flex; align-items:center; gap:12px; justify-content:center; margin:16px 0 4px; }
.pager__status { font-size:13px; color:var(--mut); }
.pager span[aria-disabled] { opacity:.45; cursor:default; }

/* filter toggle group (was inline bg swaps) */
.toggle a { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:13px; color:var(--ink); background:#fff; margin-right:6px; transition:background var(--t),border-color var(--t); }
.toggle a:hover { border-color:var(--brand); text-decoration:none; }
.toggle a.on { background:var(--brand-700); border-color:var(--brand-700); color:#fff; }

/* -------------------------------------------------------- responsive nav */
@media (max-width:820px){
  header.top .topwrap, header.top .bar { height:auto; padding:8px 14px; flex-wrap:wrap; }
  header.top nav { order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  header.top .right, header.top .r { margin-left:auto; }
  header.top .user { display:none; }
  .wrap { margin:16px auto; }
}

/* ------------------------------------------------------------ motion pref */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}