/* ============================================================================
   Polyfetti — the partner roster, three pages.

   Layout only. Every colour, radius, shadow and typeface comes from
   ../counter/counter.css, exactly as tools.css does, because the visual
   direction is the owner's and this section is not the place to open it.
   ========================================================================= */

/* Forms here are single-column on every width - there is nothing on these three pages
   worth putting beside something else - so `.wide` is what every field is. The class is
   kept rather than dropped because it is what the counter's own forms already use, and
   two names for one idea is how a section drifts into its own design system. */
.wide { display: block; margin-bottom: 16px; }
.wide input { width: 100%; margin-top: 5px; }
.wide small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { padding: 0; margin-bottom: 9px; }

.head-block { margin: 26px 0 18px; }
.head-block h1 { font-family: var(--round); font-size: clamp(26px, 4.4vw, 38px); margin: 4px 0 10px; }
.head-block .lede { max-width: 56ch; }

/* The numbers a person decides on, pulled out of the prose so they can be
   compared without reading it. Never hard-coded - every one is fetched. */
.figures { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 18px 0; }
.figure { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; }
.figure b { display: block; font-family: var(--round); font-size: 25px; line-height: 1.15; }
.figure span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.figure.undecided b { color: var(--warn); font-size: 19px; }

/* Pay cycles. Two options, and the point of showing them is the DATE each one
   produces for work delivered today, not the sentence describing it. */
.cycles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cycle { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; background: var(--paper-raised); cursor: pointer; display: block; }
.cycle:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-wash); }
.cycle input { margin-right: 8px; }
.cycle b { font-family: var(--round); }
.cycle .note { display: block; color: var(--muted); font-size: 13px; margin-top: 5px; }
.cycle .due { display: block; margin-top: 8px; font-size: 13.5px; }
.cycle .due b { font-variant-numeric: tabular-nums; }
.cycle .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }

/* Roles and pairs: many small checkboxes that must stay legible on a phone. */
.checks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.check { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px 12px; background: var(--paper-raised); cursor: pointer; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.check input { margin-top: 2px; }
.check small { display: block; color: var(--muted); font-size: 12px; }

.pairs { display: flex; flex-wrap: wrap; gap: 7px; }
.pair { border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; font-size: 13px; background: var(--paper-raised); cursor: pointer; }
.pair:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.pair input { margin-right: 6px; }

/* The screening ladder. Ordered because the order is the product: nobody sees a
   real customer document before the agreement is signed, and that is gate 4. */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ladder li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ladder li:last-child { border-bottom: 0; }
.ladder .n { font-family: var(--round); color: var(--muted); font-size: 12.5px; min-width: 2.4em; }
.ladder li.here { color: var(--accent); font-weight: 700; }
.ladder li.done .n { color: var(--good); }

/* The test paper. A real document has repeating groups, so the table has to
   survive a group label appearing mid-list. */
.paper-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.paper-table th, .paper-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.paper-table th { font-weight: 500; color: var(--ink-soft); width: 38%; }
.paper-table tr.group-head td { background: var(--paper-sunk); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.paper-table input { width: 100%; }
.paper-table .shown { font-family: var(--round); }
.paper-table .illegible { color: var(--warn); }
.scroll-x { overflow-x: auto; }

/* The mark. Bars rather than a number alone, because a candidate reading "64"
   cannot see which line lost it. */
.marks { display: grid; gap: 9px; margin: 14px 0; }
.mark { display: grid; grid-template-columns: 8.5em 1fr 4.5em; gap: 10px; align-items: center; font-size: 13.5px; }
.mark .bar { background: var(--paper-sunk); border-radius: 999px; height: 9px; overflow: hidden; }
.mark .bar i { display: block; height: 100%; background: var(--good); }
.mark .bar i.low { background: var(--warn); }
.mark .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.token-box { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.token-box input { flex: 1 1 18em; font-family: ui-monospace, monospace; font-size: 13px; }

code.token { font-size: 12.5px; word-break: break-all; background: var(--paper-sunk); padding: 3px 6px; border-radius: 5px; }

.problem { border: 1px solid var(--shu-edge); background: var(--shu-wash); color: var(--ink); border-radius: var(--r-md); padding: 12px 15px; }
.okbox { border: 1px solid var(--rule); background: var(--good-wash); border-radius: var(--r-md); padding: 12px 15px; }

@media (max-width: 560px) {
  .mark { grid-template-columns: 1fr; gap: 3px; }
  .mark .val { text-align: left; }
}