/**
 * The client home - one card per capability.
 *
 * Scoped under `.client-home` throughout. index.html carries three other
 * stylesheets plus a large inline <style>, and generic class names there have
 * collided before.
 *
 * The page owns its own horizontal padding. Every other section gets its inset
 * from a `.control-bar` this screen does not have, which is why the cards used
 * to run off both edges of the window.
 */

.client-home {
    --home-surface: #ffffff;
    --home-sunken: #f8fafc;
    --home-border: #e2e8f0;
    --home-border-strong: #cbd5e1;
    --home-text: #1a202c;
    --home-muted: #64748b;
    --home-brand: #b9f040;

    /* Four states, four colours, and nothing else distinguishes them. A card's
       severity has to be readable before its words are. */
    --home-ready: #15803d;
    --home-ready-bg: #f0fdf4;
    --home-waiting: #b45309;
    --home-waiting-bg: #fffbeb;
    --home-attention: #b91c1c;
    --home-attention-bg: #fef2f2;
    --home-off: #64748b;
    --home-off-bg: #f1f5f9;

    /* A width, not the window. Five cards stretched across a 27" display are
       further apart than they are wide, and the eye stops reading them as a
       set. */
    max-width: 1400px;
    padding: 28px 32px 56px;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.client-home__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.client-home__logo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    padding: 4px;
    box-sizing: border-box;
}

.client-home__identity {
    min-width: 0;
}

.client-home__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--home-text);
}

/* The one sentence the cards cannot say between them. The dot says it first. */
.client-home__subtitle {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--home-muted);
}

.client-home__subtitle-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--home-ready);
}

.client-home__subtitle[data-state="attention"] {
    color: var(--home-attention);
    font-weight: 600;
}

.client-home__subtitle[data-state="attention"] .client-home__subtitle-dot {
    background: var(--home-attention);
}

/* ── cards ──────────────────────────────────────────────────────────────── */

.client-home__grid {
    display: grid;
    /* 232px so the five capabilities stay on one row down to a 1280 laptop -
       the screen's whole claim is that one glance answers "what is on?", and a
       fifth card orphaned onto a second row breaks it. Below 720px they stack. */
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    align-items: stretch;
    gap: 14px;
}

/* The banner keeps the left, the remaining cards stack down the right. Only
   reachable while the surveys question is up, which is also the only time the
   grid is short enough for the pairing to balance. */
.client-home__split {
    display: grid;
    grid-template-columns: minmax(0, 820px) minmax(280px, 360px);
    align-items: start;
    gap: 20px;
}

.client-home__split .client-home__banner {
    /* The column is the width now. */
    max-width: none;
    margin-bottom: 0;
}

.client-home__grid--stacked {
    grid-template-columns: minmax(0, 1fr);
}

/* Stacked, a card is wider than it is tall, so the arrow moves to the middle of
   the right edge and stops reserving a band of empty space under the text. Three
   loose cards ran taller than the banner they are meant to sit beside. */
.client-home__grid--stacked .client-home__card {
    padding-bottom: 16px;
    padding-right: 42px;
}

.client-home__grid--stacked .client-home__card--interactive::after {
    top: 50%;
    bottom: auto;
    right: 18px;
    margin-top: -8px;
}

.client-home__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Room at the bottom right for the affordance arrow, on every card, so a
       card that grows one does not reflow. */
    padding: 16px 18px 34px;
    /* Grid stretch alone does not reliably size a <button> as a flex item. */
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-left: 3px solid var(--home-off);
    border-radius: 12px;
    text-align: left;
    font: inherit;
    color: inherit;
    position: relative;
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.client-home__card[data-state="ready"] { border-left-color: var(--home-ready); }
.client-home__card[data-state="waiting"] { border-left-color: var(--home-waiting); }
.client-home__card[data-state="attention"] { border-left-color: var(--home-attention); }
.client-home__card[data-state="off"] { border-left-color: var(--home-border-strong); }

.client-home__card--interactive {
    cursor: pointer;
}

/* The arrow is the only thing on the card that says "this opens something".
   Faint at rest so five of them do not compete with the states, solid on
   hover. It is decoration: the element is a <button>, which is what actually
   announces the affordance. */
.client-home__card--interactive::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 14px;
    height: 8px;
    /* An arrowhead drawn from two borders - no glyph, so nothing to read out. */
    border-right: 1.5px solid var(--home-muted);
    border-bottom: 1.5px solid var(--home-muted);
    transform: rotate(-45deg);
    opacity: 0.35;
    transition: opacity 120ms ease, transform 120ms ease;
}

.client-home__card--interactive:hover,
.client-home__card--interactive:focus-visible {
    border-color: var(--home-border-strong);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.client-home__card--interactive:hover::after,
.client-home__card--interactive:focus-visible::after {
    opacity: 0.8;
    transform: rotate(-45deg) translate(2px, 2px);
}

.client-home__card--interactive:focus-visible {
    outline: 2px solid var(--home-text);
    outline-offset: 2px;
}

/* A card with nowhere to go is not a button and must not look like one: it sits
   on the sunken surface, so "nothing here yet" reads before the words do. */
.client-home__card--static {
    background: var(--home-sunken);
    border-color: #e8edf3;
}

.client-home__card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    /* Inside a <button>, so phrasing elements only - this needs the box
       behaviour back that a <div> would have given for free. */
    width: 100%;
    margin-bottom: 2px;
}

/* Wraps rather than truncates. The capability's name is the one thing on the
   card that cannot be inferred from anything else, so an ellipsis here ("CHECKOUT
   S...") costs more than a second line does. */
.client-home__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
    color: #475569;
}

/* Sentence case, unlike the label above it. Two all-caps runs on one row read
   as one shouted string, and "ACTION NEEDED" set in caps is wide enough to
   ellipsis the capability's own name out of a 250px column - which it did. */
.client-home__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.client-home__state-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.client-home__state[data-state="ready"] { color: var(--home-ready); background: var(--home-ready-bg); }
.client-home__state[data-state="waiting"] { color: var(--home-waiting); background: var(--home-waiting-bg); }
.client-home__state[data-state="attention"] { color: var(--home-attention); background: var(--home-attention-bg); }
.client-home__state[data-state="off"] { color: var(--home-off); background: var(--home-off-bg); }

.client-home__headline {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--home-text);
    /* Merchant-supplied domains and long headlines wrap rather than push the
       card wider than its column. */
    overflow-wrap: anywhere;
}

.client-home__card--static .client-home__headline {
    color: #475569;
}

.client-home__detail {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--home-muted);
    overflow-wrap: anywhere;
}

/* ── the surveys split ──────────────────────────────────────────────────── */

.client-home__banner {
    /* A question, not a status strip. Held to the width of the two answers so
       it reads as one block rather than a full-bleed band of white. */
    max-width: 820px;
    margin-bottom: 22px;
    padding: 20px 22px 22px;
    border: 1px solid var(--home-border);
    border-radius: 12px;
    background: var(--home-surface);
    /* The one thing on this page that is a question rather than a status. */
    box-shadow: inset 3px 0 0 var(--home-brand);
}

.client-home__banner-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--home-text);
}

.client-home__banner-text {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--home-muted);
}

.client-home__banner-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

/* Two answers to one question, so neither is styled as the recommended one. */
.client-home__option {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--home-border);
    border-radius: 10px;
    background: var(--home-surface);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.client-home__option:hover {
    border-color: var(--home-border-strong);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.client-home__option:focus-visible {
    outline: 2px solid var(--home-text);
    outline-offset: 2px;
}

.client-home__option-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--home-text);
}

.client-home__option-detail {
    font-size: 13px;
    line-height: 1.45;
    color: var(--home-muted);
}

.client-home__button {
    padding: 8px 14px;
    border: 1px solid var(--home-border-strong);
    border-radius: 8px;
    background: var(--home-surface);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--home-text);
    cursor: pointer;
}

.client-home__button:hover {
    border-color: var(--home-muted);
}

/* ── loading and error ──────────────────────────────────────────────────── */

.client-home__message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 680px;
    padding: 16px 18px;
    border: 1px solid var(--home-border);
    border-radius: 12px;
    background: var(--home-surface);
    font-size: 14px;
    color: var(--home-muted);
}

.client-home__message--error {
    border-color: #fecaca;
    background: var(--home-attention-bg);
    color: var(--home-attention);
}

.client-home__message--error .client-home__button {
    border-color: #fca5a5;
    color: var(--home-attention);
    background: var(--home-surface);
}

/* Skeletons hold the real layout, so nothing jumps when the answer lands. */
.client-home__skeleton-block,
.client-home__card--skeleton {
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafc 50%, #eef2f7 75%);
    background-size: 400% 100%;
    animation: client-home-shimmer 1.4s ease-in-out infinite;
}

.client-home__card--skeleton {
    border-color: transparent;
    border-left-color: transparent;
    min-height: 118px;
}

.client-home__skeleton-block {
    border-radius: 6px;
}

.client-home__skeleton-block--title {
    width: 180px;
    height: 20px;
}

.client-home__skeleton-block--subtitle {
    width: 240px;
    height: 14px;
    margin-top: 8px;
}

@keyframes client-home-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */

/* Too narrow to sit the cards beside the banner: back to one column above the
   other, and the cards go back to filling the row rather than stacking. */
@media (max-width: 1120px) {
    .client-home__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-home__split .client-home__banner {
        max-width: 820px;
    }

    .client-home__grid--stacked {
        grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    }

    /* Back in a row, so back to the ordinary card. Otherwise this brand's cards
       carry the stacked treatment at a width where every other brand's do not. */
    .client-home__grid--stacked .client-home__card {
        padding-bottom: 34px;
        padding-right: 18px;
    }

    .client-home__grid--stacked .client-home__card--interactive::after {
        top: auto;
        bottom: 14px;
        right: 16px;
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .client-home {
        padding: 20px 16px 40px;
    }

    .client-home__grid,
    .client-home__grid--stacked {
        grid-template-columns: 1fr;
    }

    .client-home__banner-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-home__card,
    .client-home__card--interactive::after,
    .client-home__option {
        transition: none;
    }

    .client-home__card--interactive:hover,
    .client-home__card--interactive:focus-visible {
        transform: none;
    }

    .client-home__skeleton-block,
    .client-home__card--skeleton {
        animation: none;
    }
}