/* WiConnect Customer Portal — page layout.
 *
 * Loaded after wicw-design's tokens.css and base.css, which carry the whole
 * component set (portal-rebuild-spec.md §15). NOTHING HERE REDEFINES A
 * COMPONENT: this file is only the handful of layout shapes the portal's own
 * pages need, built from the same tokens.
 *
 * It exists so the templates can contain ZERO inline styles. A `style="..."`
 * attribute is a token value copied out of the system by hand, and copies
 * drift — the reason the design lives in one vendored, version-pinned place is
 * that every surface stays the same when it changes.
 *
 * Anything here that turns out to be generally useful graduates to
 * wicw-design's base.css at its next version rather than being duplicated into
 * wicw.net or the chat widget.
 */

/* ── Page frame ─────────────────────────────────────────────────────────── */

.page       { padding-block: var(--sp-5) var(--sp-8); }
.topbar     { border-bottom: 1px solid var(--line); background: var(--ground); }
.nav-flush  { border-bottom: 0; }
.form-flush { margin: 0; }
.rule       { margin-block: var(--sp-2) var(--sp-4); }

/* ── Sign-in ────────────────────────────────────────────────────────────── */

.authbox { max-width: 26rem; margin-inline: auto; }

/* The mark and heading above a sign-in form, centred as a unit. */
.authmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

/* A six-digit code is read back off a phone one character at a time, so it is
   set in the mono face and spaced out rather than run together. */
.codeinput {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  letter-spacing: 0.3em;
  text-align: center;
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

/* Cards stack on a phone and fill their track above it. Three across only
   once there is genuinely room, so a card never stretches over dead space. */
.cardgrid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Small stacks inside cards ──────────────────────────────────────────── */

.stack-3 { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.row-2   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* ── Utilities ──────────────────────────────────────────────────────────── */

.center { text-align: center; }

/* ── Contact channels ───────────────────────────────────────────────────── */

/* One address or number and its actions. */
.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.channel:last-child { padding-bottom: 0; border-bottom: 0; }

/* The SMS block is lifted out of the card, because "which number do the outage
   texts reach" is the question this card exists to answer and it should not
   read as just another row (spec §7). Spent here and nowhere else on the page —
   a highlight on everything highlights nothing. */
.smsblock {
  padding: var(--sp-4);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}

/* ── Autopay opt-in, on the payment form ────────────────────────────────── */

.autopay-optin {
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Revealed by the checkbox. Dashed rather than filled: it is an option on the
   form, not a second form. */
.autopay-optin .autopay-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* An invoice number that is also a download. Keeps the mono face so it still
   reads as an identifier, and is underlined so it reads as a link — the number
   is the control, and nothing else in the table is clickable. */
.invoice-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.invoice-link:hover { color: var(--accent-hov); }

/* ── Support cases and their threads ────────────────────────────────────── */

.case {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.case:last-child { padding-bottom: 0; border-bottom: 0; }
.case-closed { color: var(--muted); }

/* The conversation. Indented behind a rule so it reads as belonging to the
   case above it rather than as more case-level detail. */
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line);
}
.thread-entry { display: flex; flex-direction: column; gap: var(--sp-1); }

.closed-cases summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }

/* ── Staff-authored offering copy ───────────────────────────────────────── */

/* The pitch is written in markdown by staff, so its shape is not under the
   template's control. These rules give the generated headings, paragraphs and
   lists the same rhythm as the rest of the page. */
.offering h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.offering h3 { font-size: var(--fs-md); margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.offering p  { margin-bottom: var(--sp-3); }
.offering ul { margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.offering > :last-child { margin-bottom: 0; }

/* ── Daily usage bars (Router card) ─────────────────────────────────────── */

.usagebars { display: flex; flex-direction: column; gap: var(--sp-2); }
/* The bars carry geometry in SVG attributes; only their colour is styling. */
.usagebars svg rect { fill: var(--accent); }
.usagebars svg rect:hover { fill: var(--accent-hov); }

/* ── Admin ──────────────────────────────────────────────────────────────── */

/* §8: deactivated rows shown struck through, as the old admin did — it is the
   fastest way to see why somebody cannot sign in. */
.row-inactive td { text-decoration: line-through; color: var(--muted); }
.row-inactive td a { color: var(--muted); }

/* ── Invoice line items (History) ───────────────────────────────────────── */

.lines summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.linetable { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); }
.linetable td { padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; vertical-align: top;
                border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.linetable tr:last-child td { border-bottom: 0; }