/* R17 — THE TINT CARD. One number-card style, sitewide.
 *
 * Ported from the scanner box: soft tinted fill, matching text, subtle border.
 * Every colour comes from a --tint-* token, so this file names no hue at all
 * and both themes are handled by the token layer rather than by a second
 * stylesheet that can drift from this one.
 *
 * R18b: --tint-rank (emerald) is used ONLY when the headline IS a rank.
 * R18c: employer-position valence does not ship. The variant exists so
 *       clearance day is a flip, and check_palette_law.py proves nothing
 *       renders it -- an unused class is enforced by nothing on its own.
 */

.plens-grid-wrap { list-style: none; margin: 0; padding: 0; }

/* R16 — desktop 4-across, and 2x2 when there are exactly four.
 * auto-fit rather than a fixed count so a 3-tile panel does not leave a hole. */
.plens-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* R16 — mobile: 2 columns, then a single stack when even two will not fit
 * without the big number wrapping. The breakpoint is set by the CONTENT
 * (a 7-character headline at the tile's font-size), not by a device width. */
@media (max-width: 30rem) {
    .plens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 20rem) {
    .plens-grid { grid-template-columns: 1fr; }
}

.tint-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tint-neutral-border);
    background: var(--tint-neutral-bg);
    min-width: 0;          /* so a long label can ellipsize instead of pushing */
}

.tint-card--rank {
    border-color: var(--tint-rank-border);
    background: var(--tint-rank-bg);
}
.tint-card--good    { border-color: var(--tint-good-border);    background: var(--tint-good-bg); }
.tint-card--bad     { border-color: var(--tint-bad-border);     background: var(--tint-bad-bg); }
.tint-card--warn    { border-color: var(--tint-warn-border);    background: var(--tint-warn-bg); }
.tint-card--neutral { border-color: var(--tint-neutral-border); background: var(--tint-neutral-bg); }

/* R16 — the big number leads. tabular-nums so a column of tiles lines up. */
.tint-card__big {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--tint-neutral-text);
    overflow-wrap: anywhere;
}
.tint-card--rank .tint-card__big { color: var(--tint-rank-text); }
.tint-card--good .tint-card__big { color: var(--tint-good-text); }
.tint-card--bad  .tint-card__big { color: var(--tint-bad-text); }
.tint-card--warn .tint-card__big { color: var(--tint-warn-text); }

.tint-card__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary, var(--tint-neutral-text));
    overflow-wrap: anywhere;
}

/* The raw value and, for a rate, BOTH R13 windows. */
.tint-card__sub {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--text-tertiary, var(--tint-neutral-text));
    overflow-wrap: anywhere;
}

/* R5 — the source chip carries the BASIS as well as the source, because the
 * basis string is far too long to be the headline and must not be dropped.
 * It is deliberately the smallest thing on the tile and deliberately present. */
.tint-card__chip {
    margin-top: 0.15rem;
    font-size: 0.6rem;
    line-height: 1.3;
    color: var(--text-tertiary, var(--tint-neutral-text));
    opacity: 0.85;
    overflow-wrap: anywhere;
}

/* A metric that has no card structure yet: renders as prose INSIDE the grid
 * rather than disappearing. Degrading is the correct failure. */
.tint-card--prose .tint-card__sub { font-size: 0.78rem; }

/* R16 — the sector/headcount line compressed to ONE row above the grid. */
.plens-header {
    list-style: none;
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, var(--tint-neutral-text));
}

/* An affordance, not a measurement -- so it is a line, never a tile. */
.plens-action {
    list-style: none;
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, var(--tint-neutral-text));
}

/* R29 — the persona lead-in. A question, set quietly: it frames the grid
 * below without competing with the numbers in it. */
.plens-leadin {
    list-style: none;
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, var(--tint-neutral-text));
}

/* R34 — the rankings wall. Full width, below the panel. */
.plens-wall {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tint-neutral-border);
}
.plens-wall__h {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--text-primary, var(--tint-neutral-text));
}
.plens-wall__note {
    font-size: 0.72rem;
    line-height: 1.4;
    margin: 0 0 0.75rem;
    color: var(--text-tertiary, var(--tint-neutral-text));
}


/* R40 — UNIFORM GEOMETRY. One component, one shape, every section.
 *
 * The grid rows already equalise height (grid stretches by default); what was
 * breaking the rhythm was TEXT LENGTH -- a long label or a four-clause
 * sub-line pushed one card taller and left its neighbours with dead space.
 * Clamping the text is what makes the row uniform, not a fixed height, which
 * would clip instead of wrap.
 *
 * The clamps are generous enough that R41's compact line always fits whole;
 * they exist to catch the outlier, not to truncate the normal case.
 */
.plens-grid { align-items: stretch; }

.tint-card {
    height: 100%;
    justify-content: flex-start;
}

.tint-card__big {
    /* One line, always. A wrapped headline is what made the old strip ragged. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tint-card__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.tint-card__sub {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

/* R41 — the chip is the popover trigger now, not a third line of prose. */
.tint-card__chip {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}


/* R41 — the basis popover. The card carries the minimum that is true alone;
 * this carries the long form.
 *
 * A BUTTON, not a title= attribute: a native tooltip is invisible to keyboard
 * users, unreadable on touch, and cannot be styled to meet AA. This is
 * focusable, tappable, and its text is real DOM the album can assert on.
 */
.tint-card__more {
    margin-top: 0.2rem;
    align-self: flex-start;
    padding: 0.05rem 0.3rem;
    font: inherit;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary, var(--tint-neutral-text));
    background: transparent;
    border: 1px solid var(--tint-neutral-border);
    border-radius: 0.25rem;
    cursor: pointer;
    position: relative;
}
.tint-card__more:hover,
.tint-card__more:focus-visible {
    color: var(--text-primary, var(--tint-neutral-text));
    border-color: var(--tint-neutral-text);
}
.tint-card__more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* The panel is rendered from the data attribute by plens.js on open, so the
 * long-form text is never a second copy in the markup that can drift. */
.tint-card__pop {
    position: absolute;
    z-index: 40;
    left: 0;
    top: calc(100% + 0.3rem);
    width: max(16rem, 100%);
    padding: 0.5rem 0.6rem;
    font-size: 0.68rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    color: var(--text-primary, var(--tint-neutral-text));
    background: var(--surface-raised, var(--tint-neutral-bg));
    border: 1px solid var(--tint-neutral-border);
    border-radius: 0.35rem;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
}
@media (max-width: 30rem) {
    .tint-card__pop { width: 14rem; }
}


/* SCAN-1 — /scan chrome, routed through the brand token.
 *
 * These exist so the template can stop hand-writing `focus:ring-green-500` and
 * friends. Brand colour has ONE source (--color-brand-primary), which is what
 * lets NIGHT_109's light-theme darkening reach every surface at once instead
 * of one template at a time.
 */
.scan-field:focus {
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 1px var(--color-brand-primary);
}
.scan-chip:hover,
.scan-chip:focus-visible {
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}
.scan-link:hover,
.scan-link:focus-visible {
    color: var(--color-brand-primary);
}


/* R39b — the withdrawn family. Same shape as the other outcome families so a
   card cannot pick up a different geometry along with a different colour. */
.tint-card--withdrawn {
    background: var(--tint-withdrawn-bg);
    border-color: var(--tint-withdrawn-border);
}
.tint-card--withdrawn .tint-card__big,
.tint-card--withdrawn .tint-card__label {
    color: var(--tint-withdrawn-text);
}