/* ==========================================================================
   Shoku — referral-partner dashboard: LAYOUT ONLY.

   Three sheets, in this order, and each owns one thing:

     styles.css   design tokens + marketing primitives   owned by shoku-web
     app.css      the shared product layer               owned by shoku-ui
     partners.css layout for THIS site's own features    here

   Everything this file used to hold — a card, a field, a label, a status
   panel, a pill, a table, an empty state — is now in app.css, where the
   contractor workspace and the homeowner site use the same one. What is left
   below is the handful of arrangements that exist nowhere else: the two sign-in
   steps sharing one document, and the shape of the commission ledger.

   The rules: never redeclare a token, never restyle a class one of the sheets
   above already defines, and no literal colour anywhere. tests/design-contract
   .spec.ts fails the build on all three.
   ========================================================================== */

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

/* The two steps live in one document and are toggled by [data-step] on the
   card, so entering a code never costs a navigation — and a failed code keeps
   the email the partner already typed. */
[data-step="email"] .step-code,
[data-step="code"] .step-email { display: none; }

/* The address the code was sent to is the one fact a partner has to check
   ("did I type it right?"), so it is the emphasised part of the sentence
   rather than — as it was — the smallest and dimmest text in the card. It also
   has to be breakable: a long address on a phone otherwise runs out of the
   card it sits in. */
.sent-to {
  color: var(--on-surface);
  overflow-wrap: anywhere;
}

/* ---- Commission ledger --------------------------------------------------- */

/* Title and the timezone note, on one line until there is no room for two. */
.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* A column, because the paging error now lives here — beside the button that
   was pressed rather than in the page status line a screenful above it. */
.ledger-foot {
  display: grid;
  gap: var(--space-4);
}

.ledger-foot > [role="status"]:empty { margin-block-start: calc(-1 * var(--space-4)); }

.ledger-foot__action {
  display: flex;
  justify-content: center;
}

/* First paint is the shape of the answer rather than three lines of text that
   later reflow the whole page. Heights only — .skeleton itself, with its
   tonal shimmer and its reduced-motion behaviour, belongs to app.css. */
.skeleton-stat    { height: 7.875rem; }   /* was 8rem; the rendered tile is 126px */
.skeleton-row     { height: 3.5rem; }     /* unchanged */
.skeleton-heading { height: 2.25rem; max-inline-size: 14rem; }
.skeleton-thead   { height: 2.25rem; }

/* ---- Partner code -------------------------------------------------------- */

/* Where to send a tradesman, under the code itself. Bounded, or one sentence
   stretches the page head's action column across the whole page at 1440. */
#partner-code-hint { max-inline-size: 22rem; }

/* And the destination has to read as one: styles.css makes every <a> inherit
   its colour and drops the underline, which inside dim hint text leaves the
   one link on this page indistinguishable from the sentence around it. The
   app footer's idiom — underlined, not orange, because R4 keeps orange for the
   action to take and this is where to go, not what to do. */
#partner-code-hint a {
  color: var(--on-surface-variant);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Reserved widths ----------------------------------------------------- */

/* Labels that swap must not move their neighbours. */
#copy-code { min-inline-size: 5.25rem; justify-content: flex-end; }
#load-more { min-inline-size: 7.5rem; }
#resend    { min-inline-size: 10rem; }

/* Leading text must not reflow to two lines when data loads. */
#partner-summary { min-block-size: 2lh; }