/* ──────────────────────────────────────────────────────────────────────────
   The portal's own few rules.

   Everything else comes from Control's stylesheets, linked not copied. What
   is here is only what Control has no opinion about, because it has no
   equivalent screen: a customer looking at their own invoices.

   Nothing in this file may declare a colour. Control's tokens decide those.
   ────────────────────────────────────────────────────────────────────────── */

/* Control's own sign-in card has no heading: the wordmark and the sub line are
   the whole label. The portal needs one, because three different pages share
   the card and "Sign in" and "Choose a new password" are not the same errand.
   Its own class, rather than borrowing .card__title, which is left-aligned and
   beats a .u-center loaded before it. */
.pt-title      { margin: 0 0 var(--s-1); text-align: center;
                 font-size: 15px; font-weight: 700; }
.pt-sub        { margin: 0 0 var(--s-5); text-align: center;
                 font-size: 12px; color: var(--text-muted); }

/* The link row under the button. Control's .signin__note is the quieter line
   below it, and both live INSIDE the card: body.signin is a flex row, so a
   sibling of the card is laid out as a second column beside it. */
.pt-alt        { margin-top: var(--s-4); text-align: center; font-size: 12px; }
.pt-inset      { margin-bottom: var(--s-4); }
.pt-flash      { max-width: 23rem; }

/* Which is also why the signed-out body stacks: a flash and the card are two
   children, and a row would put them side by side. */
body.signin    { flex-direction: column; gap: var(--s-4); }

/* Control's .page__header is "heading on the left, actions on the right": a
   flex row. These pages have no actions, so an eyebrow, a title and a lede
   inside it came out as three columns. A plain block is what was wanted. */
.pt-head       { margin-bottom: var(--s-5); }

/* The footer note sits apart from the last card rather than against it. */
.pt-foot       { margin-top: var(--s-6); }

/* Two cards side by side, equal height. Control's .page__split is the same
   shape, but it is 2fr/1fr for a form beside its help; here the two halves
   carry equal weight. */
.pt-split      { display: grid; grid-template-columns: 1fr 1fr;
                 gap: var(--s-4); align-items: stretch; }
.pt-split > *  { min-width: 0; }
@media (max-width: 860px) { .pt-split { grid-template-columns: 1fr; } }

/* An amount, and the row of money that goes with it. */
.pt-amount     { font-size: 18px; font-weight: 700; }

/* ── the overview ─────────────────────────────────────────────────────────
   A customer signing in wants four numbers before anything else: what they
   owe, when it is due, what they are on, and who can get in. */
.pt-stats      { display: grid; gap: var(--s-4); margin-bottom: var(--s-4);
                 grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pt-stat       { position: relative; }
.pt-stat__icon { display: inline-flex; align-items: center; justify-content: center;
                 width: 34px; height: 34px; border-radius: var(--radius-md);
                 margin-bottom: var(--s-3); }
.pt-stat__icon .material-symbols-rounded { font-size: 19px; }
/* The chip palette, reused: these already mean something in this system, so a
   badge is not a new colour, it is an existing one said again. */
.pt-stat__icon--money  { background: var(--chip-green-bg);  color: var(--chip-green-text); }
.pt-stat__icon--when   { background: var(--chip-purple-bg); color: var(--chip-purple-text); }
.pt-stat__icon--plan   { background: var(--chip-gray-bg);   color: var(--chip-gray-text); }
.pt-stat__icon--people { background: var(--chip-pink-bg);   color: var(--chip-pink-text); }
.pt-stat .ctl-figure   { margin: 0; }
.pt-stat p             { margin: 0 0 var(--s-1); }
.pt-stat p:last-child  { margin-bottom: 0; }

/* The overview summarises the plan as one chip per area. The full list lives
   on its own page, because 46 names rendered here buried everything else. */
.pt-groups     { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pt-groups .chip strong { margin-left: var(--s-1); }

/* The plan page, where the full list does belong, grouped the way the
   catalogue groups it. */
.pt-features       { display: grid; gap: var(--s-5);
                     grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pt-feature-group p { margin: 0 0 var(--s-2); }
.pt-feature-list   { margin: 0; padding: 0; list-style: none;
                     display: flex; flex-direction: column; gap: var(--s-1); }
.pt-feature-list li { font-size: 13px; color: var(--text-secondary);
                      display: flex; gap: var(--s-2); }
.pt-feature-list li::before { content: "✓"; color: var(--success); font-weight: 700; }

.pt-note       { margin: var(--s-2) 0 0; }

/* The interval beside a big figure: "/ year". */
.pt-per        { font-size: 14px; font-weight: 400; }

/* Modules the plan does NOT carry, listed so a customer can see what else
   exists rather than discover it missing. Same list, struck through. */
.pt-feature-list--off li          { color: var(--text-muted); }
.pt-feature-list--off li::before  { content: "+"; color: var(--text-muted); }

/* ── viewing as a customer ────────────────────────────────────────────────
   Deliberately loud and deliberately not a chip: this is the one state where
   what you are looking at is not yours, and the cost of forgetting is writing
   in somebody else's account. It sits above the page on every screen. */
.pt-impersonate     { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--s-4); flex-wrap: wrap;
                 padding: var(--s-3) var(--s-5);
                 background: var(--warning-bg); color: var(--warning-text);
                 border-bottom: 1px solid var(--warning-border);
                 font-size: 13px; font-weight: 500; }
.pt-impersonate span { display: inline-flex; align-items: center; gap: var(--s-2); }
.pt-impersonate .material-symbols-rounded { font-size: 18px; }
.pt-impersonate .btn { background: var(--warning-text); color: var(--bg-surface); }