/* Customer portal: the product theme (light, mobile-first).

   Colours. Every colour on the page is a var() from the brand palette: PortalPalette derives it
   from the two colours in Portal:Brand, and App.razor writes it into the page head as an inline
   :root style ahead of this sheet (portal branding design, section 4). This file writes no colour
   of its own (no hex, no rgb()) and declares none of the palette's names; a wash or a shadow is
   color-mix() over a palette colour (Safari 16.2 and later; an older Safari drops only those
   washes and shadows). PortalBrandContractTests holds all of it.

   Roles. Blue is the action colour: buttons, links, the header band, the chosen option. Green is
   the accent: the header's stripe, the progress bar, the "on" dot, the paid tick. White on the
   brand green measures 3.0:1 and the dark green on white 4.3:1, both under the 4.5:1 small words
   need, so no button is green and no words on a light ground are drawn in green. */
:root {
  /* Type. The colours are the palette's (above). */
  --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Sora", var(--font-body);
  /* type scale */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 15px;
  /* uppercase label tracking (matches the Field app) */
  --track-label: .06em;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 90% -10%, color-mix(in srgb, var(--brand-green) 10%, transparent), transparent 60%),
    radial-gradient(760px 460px at 0% 2%, color-mix(in srgb, var(--brand-blue) 10%, transparent), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--brand-blue); text-decoration: none; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 6px; }

/* ---- mobile app column ---- */
.app-frame {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 60px -30px color-mix(in srgb, var(--ink) 40%, transparent);
}

/* ---- signed-in header: a band from the dark blue to the brand blue, white words, and the green
   stripe under it (portal branding design, section 5) ---- */
.appbar {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px;
  background: linear-gradient(90deg, var(--brand-blue-dark), var(--brand-blue));
  color: var(--surface);
  border-bottom: 3px solid var(--brand-green);
}
.appbar .who { font-weight: 600; }
.appbar .who small { display: block; color: color-mix(in srgb, var(--surface) 78%, transparent); font-weight: 400; font-size: var(--fs-sm); }
.appbar .avatar {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); color: var(--brand-blue-dark); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}

/* ---- the logo (HciLogo.razor): the HCI mark beside the brand's name and tagline ---- */
.hci-logo { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.hci-logo .hci-mark { display: block; flex: none; }
.hci-logo .hci-wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.hci-logo .hci-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.hci-logo .hci-tagline { font-size: var(--fs-sm); color: var(--muted); }
/* In the header the mark sits on a white tile: its blue swoosh is the band's own colour.
   content-box, so the padding goes round the 28 px the img asks for instead of out of it. */
.hci-logo.small .hci-mark { box-sizing: content-box; padding: 4px 6px; background: var(--surface); border-radius: 8px; }

.content { flex: 1; padding-bottom: 84px; }
.pad { padding: 6px 20px 18px; }
.content > .pad { padding-top: 14px; }

/* ---- spacing scale (vertical rhythm between blocks) ---- */
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 18px; }

/* ---- typography helpers ---- */
.h1 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.015em; margin: 6px 0 2px; }
/* Off the screen but still in the accessibility tree (never display:none/visibility:hidden), so
   Blazor's focusBySelector can still tabIndex=-1 it and focus it on navigation — for the pages
   that need a real h1 for FocusOnNavigate/screen readers but don't want one shown (Home already
   has its own large "Next payment" heading in the hero). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.tiny { font-size: var(--fs-sm); }
.sect { font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 18px 4px 8px; }
.money { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row + .row { margin-top: 6px; }

/* ---- buttons / fields ---- */
.btn {
  display: block; width: 100%; text-align: center; border: 0; cursor: pointer;
  background: var(--brand-blue); color: var(--surface); font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-base); padding: 14px; border-radius: 12px;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand-blue) 60%, transparent);
}
.btn:hover { background: var(--brand-blue-dark); }
.btn:disabled { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn:disabled:hover { background: var(--line); }
.btn.ghost { background: var(--surface); color: var(--brand-blue); box-shadow: none; border: 1.5px solid var(--line-strong); }
.btn.ghost:hover { background: var(--surface-alt); }

.field {
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 10px 14px; margin-top: 10px;
}
.field:focus-within { border-color: var(--brand-blue); }
.field label { display: block; font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field input {
  border: 0; outline: 0; width: 100%; background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); padding: 2px 0 0;
}
.field input::placeholder { color: var(--faint); }

/* ---- cards / lists ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
/* Ink words on the green tint, and the green in the dot: the dark green would be 3.9:1 here. */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600;
  padding: 5px 10px; border-radius: 999px; background: var(--brand-green-tint); color: var(--ink);
  flex: none; white-space: nowrap;
}
.chip.quiet { background: var(--surface-alt); color: var(--brand-blue-dark); } /* unused today (its callers were removed under #85); kept for the future card-management screens */
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green); }
/* A tappable chip-shaped action (as opposed to .chip, which is status-only and never a link or
   button): full 40px hit target, an outline so it doesn't compete visually with .chip's filled
   status look, and flex:none/white-space:nowrap so it never gets squeezed or wraps mid-word. */
.chip-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--brand-blue); color: var(--brand-blue); font-size: var(--fs-sm); font-weight: 600;
  background: var(--surface); text-decoration: none; flex: none; white-space: nowrap;
}
.chip-link:hover { background: var(--surface-alt); }

.list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.li { background: var(--surface); padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.li .ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-alt); display: grid; place-items: center; flex: none; color: var(--brand-green-dark); font-weight: 600; font-size: var(--fs-md); }
.li .ico svg { width: 18px; height: 18px; }
.li .grow, .method .grow { flex: 1; min-width: 0; }
.li .grow b { font-weight: 600; font-size: var(--fs-md); }
.li .grow small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.li .amt { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* A paid amount is ink; the green tick in .ico beside it says "paid" (see the header comment). */
.li .amt.pos { color: var(--ink); }

.progress { height: 7px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; border: 1px solid var(--line); }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-green-dark), var(--brand-green)); }

/* ---- dashboard hero ---- */
/* The top margin is new with the header band: the hero used to sit under white space, and now it
   would touch the green stripe. */
.hero {
  position: relative; margin: 14px 20px 0; border-radius: 20px; overflow: hidden;
  background: linear-gradient(155deg, var(--brand-blue), var(--brand-blue-dark) 82%); color: var(--surface);
  padding: 20px 20px 22px;
}
.hero .orbitfield { position: absolute; inset: 0; pointer-events: none; }
.hero .k { font-size: var(--fs-sm); letter-spacing: var(--track-label); text-transform: uppercase; color: color-mix(in srgb, var(--surface) 78%, transparent); }
.hero .big { font-family: var(--font-display); font-weight: 700; font-size: 36px; margin: 3px 0 1px; color: var(--surface); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hero .due { color: var(--brand-green-tint); font-weight: 600; font-size: 14px; }
.hero .due.warn { color: var(--warning-tint); }
/* The primary button is the hero's own blue, so on the hero it turns white with dark-blue words. */
.hero .btn { margin-top: 16px; background: var(--surface); color: var(--brand-blue-dark); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--ink) 55%, transparent); }
.hero .btn:hover { background: var(--brand-blue-tint); }
.orbit-sat { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .orbit-sat { animation: orbit 7s linear infinite; transform-origin: 240px 60px; }
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* ---- bottom tab bar ---- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 460px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); background: var(--surface); padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
  z-index: 20;
}
.tab { display: grid; justify-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; background: none; border: 0; cursor: pointer; text-decoration: none; }
.tab.on { color: var(--brand-blue); }
.tab .g { width: 22px; height: 22px; }

/* ---- payment ---- */
.seg { display: flex; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg .o { flex: 1; text-align: center; font-size: var(--fs-md); font-weight: 600; padding: 11px 9px; border-radius: 9px; color: var(--muted); background: none; border: 0; cursor: pointer; font-family: var(--font-body); line-height: 1.5; }
.seg .o.on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--ink) 20%, transparent); }
.brk { display: flex; flex-direction: column; gap: 9px; }
.brk .r { display: flex; justify-content: space-between; font-size: var(--fs-md); }
.brk .r.mut { color: var(--muted); }
.brk .total { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 3px; display: flex; justify-content: space-between; align-items: baseline; }
.brk .total b { font-family: var(--font-display); font-size: 20px; }
.method { display: flex; align-items: center; gap: 12px; }
.method .brandcard { width: 42px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue)); flex: none; display: grid; place-items: center; color: var(--surface); font-size: 10px; font-weight: 700; letter-spacing: .5px; font-family: var(--font-display); }

/* ---- autopay ---- */
.cadence { display: flex; flex-wrap: wrap; gap: 8px; }
.cadence .c { font-size: var(--fs-sm); font-weight: 600; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--line-strong); color: var(--muted); background: var(--surface); cursor: pointer; font-family: var(--font-body); line-height: 1.5; }
.cadence .c.on { border-color: var(--brand-blue); color: var(--brand-blue); background: var(--brand-blue-tint); }
/* A reassurance, on the green tint: ink words, the green in the icon. */
.callout { display: flex; gap: 10px; background: var(--brand-green-tint); border: 1px solid color-mix(in srgb, var(--brand-green) 30%, transparent); border-radius: 12px; padding: 12px; font-size: var(--fs-sm); color: var(--ink); }
.callout svg { flex: none; margin-top: 1px; color: var(--brand-green-dark); }
.callout.danger { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); margin-bottom: 6px; }

/* ---- sign in ---- */
.signin { display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; }
.brandblock { text-align: center; padding-top: 44px; }
.brandblock .wm { display: flex; justify-content: center; }
.trust { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: var(--fs-xs); }
.lock { width: 13px; height: 13px; flex: none; }

/* ---- footer (PortalFooter.razor): the company, and who to call ---- */
.portal-footer {
  max-width: 460px; margin: 0 auto; padding: 18px 20px 24px;
  text-align: center; font-size: var(--fs-sm); color: var(--muted);
}
.portal-footer a { color: var(--brand-blue); font-weight: 600; }
.portal-footer a:hover { text-decoration: underline; }
.portal-footer .legal { margin-top: 4px; font-size: var(--fs-xs); }
/* On a phone the tab bar is fixed over the last 84 px of the screen and the footer is the last
   thing on the page, so a signed-in page keeps that much room under it. */
body:has(.tabbar) .portal-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---- desktop: frame the mobile column as a centered card ---- */
@media (min-width: 768px) {
  body { padding: 40px 0; }
  .app-frame {
    max-width: 520px;
    min-height: 0;
    border-radius: 24px;
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: 0 30px 80px -44px color-mix(in srgb, var(--ink) 50%, transparent);
  }
  /* sign-in: center the content instead of stretching it over the viewport */
  .signin {
    min-height: 0;
    justify-content: flex-start;
    gap: 6px;
    padding-bottom: 26px;
  }
  .brandblock { padding-top: 40px; }
  /* tab bar rides the bottom of the card, not the viewport */
  .tabbar {
    position: sticky;
    left: auto; transform: none;
    max-width: none;
  }
  .content { padding-bottom: 24px; }
  /* The tab bar rides the card here, so the footer below the card needs no room for it. */
  .portal-footer { max-width: 520px; padding-top: 16px; }
  body:has(.tabbar) .portal-footer { padding-bottom: 24px; }
}

/* ---- blazor error banner: hidden until Blazor shows it on a real error ---- */
#blazor-error-ui {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--warning-tint); color: var(--warning); border-top: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  padding: 10px 16px; font-size: var(--fs-md); text-align: center;
}
#blazor-error-ui .reload { color: inherit; text-decoration: underline; font-weight: 600; margin-left: 6px; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 8px; font-size: 18px; line-height: 1; vertical-align: middle; }