/* ──────────────────────────────────────────────────────────────────────────
   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); }

/* ── company details and checkout ─────────────────────────────────────── */
.pt-missing      { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
.pt-missing li   { margin-bottom: var(--s-1); }
.pt-declaration  { font-size: 13px; color: var(--text-secondary);
                   border-left: 2px solid var(--border); padding-left: var(--s-4);
                   margin: 0 0 var(--s-4); }
.pt-buyrow       { display: flex; gap: var(--s-2); flex-wrap: wrap;
                   margin-top: var(--s-3); }
.pt-steps        { margin: 0; padding-left: var(--s-5); font-size: 13px;
                   color: var(--text-secondary); }
.pt-steps li     { margin-bottom: var(--s-2); }

/* The receipt form, separated from the transfer details above it so it does
   not read as another instruction to follow. */
.pt-proof        { margin-top: var(--s-5); padding-top: var(--s-4);
                   border-top: 1px solid var(--border); }

/* Change and cancel sit side by side, the same size. A cancel button made
   small or hidden is a complaint somebody writes publicly later. */
.pt-cancel-actions      { display: flex; gap: var(--s-3); flex-wrap: wrap;
                          align-items: center; margin-top: var(--s-3); }
.pt-cancel-actions form { margin: 0; }

/* Prose needs a measure. These lines were running the full width of a card
   on a wide screen, which is roughly 180 characters and unreadable. */
.pt-measure    { max-width: 68ch; }
.pt-terms      { margin: var(--s-4) 0; max-width: 34rem; }

/* A module you can buy on its own: what it is on the left, what it costs and
   the button on the right. One row per module rather than a card each, because
   there are a dozen of them and a dozen cards is a scroll, not a choice. */
.pt-addon        { display: flex; gap: var(--s-5); justify-content: space-between;
                   align-items: flex-start; flex-wrap: wrap;
                   padding: var(--s-4) 0; border-top: 1px solid var(--border); }
.pt-addon:first-of-type { border-top: 0; }
.pt-addon > div  { min-width: 0; }
.pt-addon__name  { font-weight: 600; margin: 0 0 var(--s-1); }
.pt-addon form   { margin-top: var(--s-2); }
@media (max-width: 640px) { .pt-addon { flex-direction: column; }
                            .pt-addon .u-right { text-align: left; } }

/* ── Usage ──────────────────────────────────────────────────────────────
   One allowance per block: the name and the figure on one line, a bar under
   it, and anything to do about it below that. A table was the first attempt
   and the bar had nowhere to live in a cell. */
.pt-usage        { padding: var(--s-4) 0; border-top: 1px solid var(--border); }
.pt-usage:first-of-type { border-top: 0; padding-top: 0; }
.pt-usage__head  { display: flex; justify-content: space-between; align-items: baseline;
                   gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-2); }
.pt-usage__name  { font-weight: 600; }

/* A native <progress>, so the figure is an attribute rather than an inline
   style and a screen reader has something to read. Fixed height, never
   min-height: a bar that grows with its contents moves everything under it.
   The three pseudo-elements are the only way to colour one, and they cannot
   be combined into a single rule — a selector a browser does not recognise
   invalidates the whole block. */
.pt-bar          { display: block; width: 100%; height: 8px; appearance: none;
                   border: 1px solid var(--border); border-radius: var(--radius-pill);
                   background: var(--bg-subtle); overflow: hidden; }
.pt-bar::-webkit-progress-bar   { background: var(--bg-subtle); }
.pt-bar::-webkit-progress-value { background: var(--text-primary);
                                  transition: width var(--t-fast) ease; }
.pt-bar::-moz-progress-bar      { background: var(--text-primary); }

.pt-bar--high::-webkit-progress-value { background: var(--warning-text); }
.pt-bar--high::-moz-progress-bar      { background: var(--warning-text); }
.pt-bar--full::-webkit-progress-value { background: var(--chip-pink-text); }
.pt-bar--full::-moz-progress-bar      { background: var(--chip-pink-text); }