/**
 * Member dashboard (the Console).
 *
 * Scoped entirely under .cm-dash so nothing here can reach the public profile, the
 * chapter pages or the directory.
 *
 * Specificity note: the theme's stylesheet is printed AFTER the plugin's (both hook
 * wp_enqueue_scripts at the default priority and the plugin file loads first), and it
 * carries unscoped `.form-group input {...}` rules with a 19px box-shadow. Every control
 * rule below is therefore scoped to .cm-dash - (0,2,1) or better - and explicitly resets
 * box-shadow, so the theme cannot win on source order.
 *
 * @package ChapterMembership
 */

.cm-dash {
    --cm-navy: #12244B;
    --cm-navy-deep: #173650;
    --cm-navy-lift: #1A3160;
    --cm-orange: #D47E2E;
    --cm-orange-dark: #A96423;
    --cm-orange-deep: #8C521D;
    --cm-grey: #F6F6F6;
    --cm-border: #E0E0E0;
    --cm-field: rgba(18, 36, 75, .52);
    --cm-ink: #12244B;
    --cm-ink-55: rgba(18, 36, 75, .66);
    --cm-ok: #2E7D5B;
    --cm-ok-bg: #E8F3ED;
    --cm-bad: #A32B38;
    --cm-bad-bg: #FBEFF1;

    display: block;
    align-items: start;
    color: var(--cm-ink);

    /* Capped and centred. Left to fill a 2560px monitor the stat tiles stretch into
       letterboxes and the shortcut rows put their chevron a foot from their label. The
       mockup used the same 1140px measure. */
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 48px;
}

/* ---------- Topbar + navrail ---------- */

/* Concept B puts identity in a topbar and navigation in a horizontal rail beneath it,
   rather than the dark sidebar of Concept A. The nav keeps the .cm-nav / .cm-nav-btn
   class names on purpose: the reveal-on-select and fade logic in dashboard.js is written
   against them and is orientation-agnostic. */
.cm-dash .cm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 14px;
}

.cm-dash .cm-ident { display: flex; align-items: center; gap: 11px; min-width: 0; }

.cm-dash .cm-ident__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    background: var(--cm-orange);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.cm-dash .cm-ident__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cm-dash .cm-ident__who { min-width: 0; display: flex; flex-direction: column; }
.cm-dash .cm-ident__who b { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--cm-navy); }
.cm-dash .cm-ident__who small { font-size: 12px; color: var(--cm-ink-55); margin-top: 1px; }

/*
 * THE RAIL WRAPS. IT NEVER SCROLLS.
 *
 * It used to be a horizontal scroller with its scrollbar deliberately hidden, which on a
 * 390px phone left FOUR of the seven panes - Member Shared Data, Officer, Account and
 * Billing - off the right-hand edge with nothing on screen to say they were there. Billing
 * is both the pane a member most needs and the last one in the row. Wrapping costs about
 * 100px of height on a phone and hides nothing at any width.
 *
 * flex-wrap applies at EVERY width rather than only under the breakpoint below, so an
 * unusually long officer label, a translation, or a member browsing at large text size
 * wraps onto a second line instead of quietly hiding a tab again.
 */
.cm-dash .cm-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--cm-border);
}

.cm-dash .cm-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--cm-ink-55);
    background: none;
    border: 0;
    /* The active marker is a 3px underline, so the resting state reserves the same 3px.
       Without it every tab shifts up by three pixels the moment it is selected. */
    border-bottom: 3px solid transparent;
    padding: 0 14px;
    min-height: 52px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.cm-dash .cm-nav-btn:hover { color: var(--cm-navy); }

.cm-dash .cm-nav-btn.is-active {
    color: var(--cm-navy);
    font-weight: 700;
    border-bottom-color: var(--cm-orange);
}

.cm-dash .cm-nav-btn:focus-visible {
    outline: 3px solid var(--cm-orange);
    outline-offset: -3px;
    border-radius: 6px;
}

/* ---------- Panes ---------- */
.cm-dash .cm-pane[hidden] { display: none; }

.cm-dash .cm-pane-head {
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cm-border);
}

.cm-dash .cm-pane-head h2 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--cm-navy);
}

.cm-dash .cm-pane-head p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cm-ink-55);
    max-width: 68ch;
}

/* ---------- Cards ---------- */
.cm-dash .cm-card {
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
}

.cm-dash .cm-card[hidden] { display: none; }

.cm-dash .cm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--cm-border);
}

.cm-dash .cm-card-head h3 {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cm-navy);
}

.cm-dash .cm-card-body { padding: 22px; }

.cm-dash .cm-card-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    background: var(--cm-grey);
    border-top: 1px solid var(--cm-border);
}

.cm-dash .cm-status {
    flex: 1;
    font-size: 13px;
    color: var(--cm-ink-55);
}

.cm-dash .cm-status.is-dirty { color: var(--cm-orange-dark); font-weight: 700; }
.cm-dash .cm-status.is-saved { color: var(--cm-ok); font-weight: 700; }
.cm-dash .cm-status.is-error { color: var(--cm-bad); font-weight: 700; }

/* ---------- Fields ---------- */
.cm-dash .cm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cm-dash .cm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-dash .cm-span-2 { grid-column: 1 / -1; }

.cm-dash .cm-field label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cm-navy);
}

.cm-dash .cm-req { color: var(--cm-orange-dark); }

.cm-dash .cm-field input[type="text"],
.cm-dash .cm-field input[type="email"],
.cm-dash .cm-field input[type="tel"],
.cm-dash .cm-field input[type="url"],
.cm-dash .cm-field input[type="number"],
.cm-dash .cm-field input[type="password"],
.cm-dash .cm-field textarea {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--cm-ink);
    background: #fff;
    border: 1.5px solid var(--cm-field);
    border-radius: 9px;
    padding: 11px 13px;
    min-height: 46px;
    height: auto;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.cm-dash .cm-field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }

.cm-dash .cm-field input:focus,
.cm-dash .cm-field textarea:focus {
    outline: none;
    border-color: var(--cm-orange-dark);
    box-shadow: 0 0 0 3px rgba(212, 126, 46, .18);
}

.cm-dash .cm-field input[readonly] { background: var(--cm-grey); color: var(--cm-ink-55); }

.cm-dash .cm-hint { font-size: 12px; color: var(--cm-ink-55); }

/* A short explanatory paragraph inside a card - readable, unlike the 12px field hint. */
.cm-dash .cm-note {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cm-ink-55);
}
.cm-dash .cm-note strong { color: var(--cm-navy); font-weight: 700; }

.cm-dash .cm-err {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--cm-bad);
}

.cm-dash .cm-err:empty { display: none; }

.cm-dash .cm-divider {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cm-ink-55);
    margin: 24px 0 14px;
}

.cm-dash .cm-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: #FBF9F6;
    border: 1px solid var(--cm-border);
    border-radius: 9px;
    padding: 13px 15px;
    margin-bottom: 16px;
    cursor: pointer;
}

.cm-dash .cm-check input {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    flex: none;
    accent-color: var(--cm-orange-dark);
}

.cm-dash .cm-check b { display: block; font-size: 14px; font-weight: 700; }
.cm-dash .cm-check small { display: block; font-size: 12.5px; color: var(--cm-ink-55); margin-top: 3px; }

.cm-dash .cm-locked {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cm-border);
    font-size: 13px;
    color: var(--cm-ink-55);
}

.cm-dash .cm-locked strong { color: var(--cm-navy); font-weight: 700; }

/* ---------- Buttons ---------- */
.cm-dash .cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1.5px solid transparent;
    border-radius: 9px;
    padding: 12px 20px;
    min-height: 46px;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.cm-dash .cm-btn-sm { min-height: 40px; padding: 9px 14px; font-size: 12.5px; }

.cm-dash .cm-btn-primary { background: var(--cm-orange-dark); color: #fff; }
.cm-dash .cm-btn-primary:hover { background: var(--cm-orange-deep); color: #fff; }

.cm-dash .cm-btn-ghost { background: #fff; border-color: var(--cm-field); color: var(--cm-navy); }
.cm-dash .cm-btn-ghost:hover { border-color: var(--cm-navy); color: var(--cm-navy); }

.cm-dash .cm-btn-danger { background: #fff; border-color: #E4C3C8; color: var(--cm-bad); }
.cm-dash .cm-btn-danger:hover { background: var(--cm-bad-bg); }
.cm-dash .cm-btn-danger.is-armed { background: var(--cm-bad); border-color: var(--cm-bad); color: #fff; }

.cm-dash .cm-btn:focus-visible { outline: 3px solid rgba(212, 126, 46, .5); outline-offset: 2px; }
.cm-dash .cm-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Photo ---------- */
.cm-dash .cm-photo-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cm-border);
}

.cm-dash .cm-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    border: 3px solid var(--cm-grey);
    background: var(--cm-grey);
}

.cm-dash .cm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-dash .cm-photo-actions { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.cm-dash .cm-photo-actions small { font-size: 12px; color: var(--cm-ink-55); }

/* ---------- Business card ---------- */
.cm-dash .cm-biz-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Round, matching the directory card and the public profile. It is fitted whole rather
   than cropped - see .cm-card__mark.is-biz - so a wide wordmark keeps its name. */
.cm-dash .cm-biz-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid var(--cm-border);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: none;
}

/* The inset lives on the image so a wordmark stays off the rim, and the initials - which
   carry their own fill - can still reach the edge instead of floating inside the frame. */
.cm-dash .cm-biz-logo img {
    width: 100%; height: 100%;
    padding: 6px;
    box-sizing: border-box;
    object-fit: contain;
    display: block;
}

.cm-dash .cm-biz-initials {
    width: 100%;
    height: 100%;
    /* Round, like the frame around it. A 7px radius here is what drew a square inside a
       circle once the frame stopped being a rounded rectangle. */
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--cm-navy), #3A4C72);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
}

.cm-dash .cm-biz-headings { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-dash .cm-biz-headings small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cm-ink-55);
}
.cm-dash .cm-biz-headings b { font-size: 16.5px; font-weight: 700; color: var(--cm-navy); margin-top: 2px; }
.cm-dash .cm-biz-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Add second business ---------- */
.cm-dash .cm-add-biz {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: #FCFAF7;
    border: 2px dashed var(--cm-field);
    border-radius: 12px;
    padding: 22px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.cm-dash .cm-add-biz:hover { border-color: var(--cm-orange-dark); background: #FDF3E9; }
.cm-dash .cm-add-biz:focus-visible { outline: 3px solid rgba(212, 126, 46, .5); outline-offset: 2px; }
.cm-dash .cm-add-biz[hidden] { display: none; }

.cm-dash .cm-add-biz-plus {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FDF1E4;
    color: var(--cm-orange-dark);
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 700;
    flex: none;
}

.cm-dash .cm-add-biz b { display: block; font-size: 16px; font-weight: 700; }
.cm-dash .cm-add-biz small { display: block; font-size: 13px; color: var(--cm-ink-55); margin-top: 3px; }

/* ---------- Messages ---------- */
.cm-dash .cm-msg { margin-bottom: 16px; }
.cm-dash .cm-msg:empty { display: none; }

.cm-dash .cm-msg > div {
    border-radius: 9px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 500;
}

.cm-dash .cm-msg .is-ok { background: var(--cm-ok-bg); color: #1F5B41; }
.cm-dash .cm-msg .is-bad { background: var(--cm-bad-bg); color: var(--cm-bad); }

/* ---------- Responsive ---------- */

/* ---------------- billing ---------------- */

/* The lapsed-member banner. Deliberately the first thing in the pane column: this member
   is locked out of editing, and being told why beats discovering it by clicking. */
.cm-dash .cm-locked-banner {
    border: 1.5px solid #E7C9A2;
    border-left: 4px solid var(--cm-orange);
    background: #FDF6EE;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.cm-dash .cm-locked-banner b {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cm-navy);
    margin-bottom: 6px;
}

.cm-dash .cm-locked-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cm-ink-55);
}

.cm-dash .cm-locked-banner__note {
    margin-top: 8px !important;
    font-size: 13px;
}

/* Status pill in a card head. */
.cm-dash .cm-pill {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}

.cm-dash .cm-pill--ok   { background: var(--cm-ok-bg);  color: var(--cm-ok); }
.cm-dash .cm-pill--warn { background: #FBF1E3;          color: var(--cm-orange-deep); }
.cm-dash .cm-pill--bad  { background: var(--cm-bad-bg); color: var(--cm-bad); }

/* Fact pairs: amount, renewal date. */
.cm-dash .cm-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 44px;
    margin: 0;
}

.cm-dash .cm-facts > div { margin: 0; }

.cm-dash .cm-facts dt {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cm-ink-55);
    margin-bottom: 4px;
}

.cm-dash .cm-facts dd {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: var(--cm-navy);
    /* Prices and dates sit in a row and must not jitter between renders. */
    font-variant-numeric: tabular-nums;
}

.cm-dash .cm-facts dd span {
    font-size: 14px;
    font-weight: 400;
    color: var(--cm-ink-55);
}

/* The card on file. */
.cm-dash .cm-cardline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0;
    font-size: 15px;
    color: var(--cm-navy);
}

.cm-dash .cm-cardline__brand { font-weight: 700; }

.cm-dash .cm-cardline__num {
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

.cm-dash .cm-cardline__exp {
    font-size: 13px;
    color: var(--cm-ink-55);
}

/* Stripe Elements host. Stripe injects an iframe here, so this element is styled as the
   field and the iframe is left to size itself inside it. */
.cm-dash .cm-cardform { margin-top: 18px; }

.cm-dash .cm-cardform > label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cm-navy);
    margin-bottom: 7px;
}

.cm-dash #cm-card-element {
    padding: 13px 14px;
    background: #fff;
    border: 1.5px solid var(--cm-field);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .15s ease;
}

.cm-dash #cm-card-element.StripeElement--focus { border-color: var(--cm-navy); }
.cm-dash #cm-card-element.StripeElement--invalid { border-color: var(--cm-bad); }

.cm-dash .cm-cardform__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* Cancelling is destructive, so it is the only ghost button that turns red - and only
   once armed, so the resting state does not shout at a member who is just looking. */
.cm-dash .cm-btn-danger.is-armed {
    background: var(--cm-bad);
    border-color: var(--cm-bad);
    color: #fff;
}

@media (max-width: 640px) {
    .cm-dash .cm-facts { gap: 14px 28px; }
    .cm-dash .cm-facts dd { font-size: 19px; }
    .cm-dash .cm-cardform__actions { flex-direction: column; }
    .cm-dash .cm-cardform__actions .cm-btn { width: 100%; }
}
/*
 * Below the width where all seven fit on one line, the tabs become chips.
 *
 * A wrapped underline-tab bar reads badly: the active underline lands in the middle of the
 * block and the rows run into each other with nothing separating them. Chips also give an
 * older member a target with a visible edge rather than a word with a line under it.
 *
 * 1200px, not the ~1064px where the rail actually starts to wrap: the theme container and
 * its padding vary by page, and chips on a single row look perfectly normal, whereas
 * wrapped underline-tabs do not. Erring wide costs nothing and removes the ugly case.
 */
@media (max-width: 1199.98px) {
    .cm-dash .cm-topbar { padding-bottom: 10px; }

    .cm-dash .cm-nav {
        gap: 8px;
        margin-bottom: 22px;
        padding-bottom: 18px;
    }

    .cm-dash .cm-nav-btn {
        min-height: 44px;
        padding: 0 15px;
        font-size: 13.5px;
        background: #fff;
        border: 1.5px solid var(--cm-border);
        border-radius: 999px;
    }

    .cm-dash .cm-nav-btn:hover { border-color: var(--cm-navy); }

    .cm-dash .cm-nav-btn.is-active {
        background: var(--cm-navy);
        border-color: var(--cm-navy);
        color: #fff;
    }

    .cm-dash .cm-nav-btn:focus-visible { border-radius: 999px; }
}

@media (max-width: 640px) {
    .cm-dash .cm-nav { gap: 6px; }
    .cm-dash .cm-nav-btn { padding: 0 12px; gap: 6px; font-size: 13px; }
}

@media (max-width: 479.98px) {
    /*
     * Text only on the narrowest phones.
     *
     * Each icon costs about 26px of chip width, which on a 360px screen was the difference
     * between three rows and five - 263px of tab rail before any content. The labels are
     * the thing being read here; the icons were decoration next to them.
     */
    .cm-dash .cm-nav-btn .cm-ico { display: none; }
    .cm-dash .cm-nav-btn { padding: 0 13px; }
}

@media (max-width: 640px) {
    .cm-dash .cm-grid { grid-template-columns: 1fr; }
    .cm-dash .cm-card-body { padding: 18px; }
    .cm-dash .cm-card-head, .cm-dash .cm-card-foot { padding-left: 18px; padding-right: 18px; }
    .cm-dash .cm-pane-head h2 { font-size: 22px; }

    /* iOS Safari force-zooms the page whenever a focused control computes below 16px,
       and never zooms back out. Many members will only ever see this on a phone. */
    .cm-dash .cm-field input[type="text"],
    .cm-dash .cm-field input[type="email"],
    .cm-dash .cm-field input[type="tel"],
    .cm-dash .cm-field input[type="url"],
    .cm-dash .cm-field input[type="number"],
    .cm-dash .cm-field input[type="password"],
    .cm-dash .cm-field textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-dash * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

.cm-dash .cm-note--muted {
    padding: 12px 14px;
    background: var(--cm-grey);
    border-radius: 8px;
    margin-bottom: 0;
}

/* ---------------- billing: plans and cards ---------------- */

.cm-dash .cm-plans,
.cm-dash .cm-cards {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-dash .cm-plan,
.cm-dash .cm-cardrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    border: 1.5px solid var(--cm-border);
    border-radius: 10px;
    background: #fff;
}

/* The plan they are on, and the card that gets charged, are the two things a member
   scans for. Both carry the same left marker so the answer is findable without reading. */
.cm-dash .cm-plan.is-current,
.cm-dash .cm-cardrow.is-default {
    border-color: var(--cm-navy);
    box-shadow: inset 3px 0 0 var(--cm-orange);
}

.cm-dash .cm-plan__info,
.cm-dash .cm-cardrow__info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

.cm-dash .cm-plan__info { flex-direction: column; gap: 2px; }
.cm-dash .cm-plan__info b { font-size: 15px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-plan__info small { font-size: 13px; color: var(--cm-ink-55); }

.cm-dash .cm-plan__badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--cm-orange-deep);
    white-space: nowrap;
}

.cm-dash .cm-cardrow__info b { font-size: 14.5px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-cardrow__num { font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--cm-navy); }
.cm-dash .cm-cardrow__info small { font-size: 12.5px; color: var(--cm-ink-55); font-variant-numeric: tabular-nums; }

.cm-dash .cm-cardrow__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cm-dash .cm-cardrow__actions .cm-btn { padding: 7px 12px; font-size: 12.5px; }

.cm-dash .cm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Set when a plan switch is refused for want of a card, to lead the eye to the fix. */
.cm-dash .cm-card.is-flagged {
    border-color: var(--cm-orange);
    box-shadow: 0 0 0 3px rgba(212, 126, 46, .16);
}

@media (max-width: 640px) {
    .cm-dash .cm-plan,
    .cm-dash .cm-cardrow { flex-direction: column; align-items: stretch; gap: 10px; }
    .cm-dash .cm-cardrow__actions .cm-btn { flex: 1; }
}

.cm-dash .cm-status--inline { display: block; margin-top: 12px; }
.cm-dash .cm-status--inline:empty { display: none; }

/* ================= overview ================= */

/* One icon rule for the whole dashboard. Stroke-only at 1.75 keeps the weight close to
   MADE TOMMY's own, so an icon beside a label does not read as heavier than the word. */
.cm-dash .cm-ico {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-dash .cm-ico--sm { width: 16px; height: 16px; }

/* Nav items become icon + label. */
.cm-dash .cm-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-dash .cm-nav-btn .cm-ico { opacity: .72; transition: opacity .15s ease, transform .15s ease; }
.cm-dash .cm-nav-btn:hover .cm-ico { opacity: 1; }
.cm-dash .cm-nav-btn.is-active .cm-ico { opacity: 1; }

/* ---- hero ---- */

.cm-dash .cm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px;
    padding: 30px 32px;
    margin-bottom: 26px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--cm-navy-lift) 0%, var(--cm-navy) 55%, #0E1D3E 100%);
    box-shadow: 0 20px 44px -22px rgba(18, 36, 75, .55);
}

.cm-dash .cm-eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.cm-dash .cm-hero h2 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.22;
    font-weight: 800;
    color: #fff;
}

/* The second clause is the quieter half of the sentence, so it is set lighter rather
   than smaller - the line stays one thought. */
.cm-dash .cm-hero h2 span { font-weight: 300; color: rgba(255, 255, 255, .74); }

.cm-dash .cm-hero__sub {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 52ch;
}

.cm-dash .cm-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.cm-dash .cm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
}

.cm-dash .cm-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5FBF8F;
    box-shadow: 0 0 0 4px rgba(95, 191, 143, .22);
}

/* Slow, shallow, and only on the live pip - a heartbeat, not a strobe. */
@media (prefers-reduced-motion: no-preference) {
    .cm-dash .cm-chip--live .cm-pip { animation: cmPulse 2.6s ease-in-out infinite; }
}

@keyframes cmPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(95, 191, 143, .22); }
    50%      { box-shadow: 0 0 0 7px rgba(95, 191, 143, .07); }
}

.cm-dash .cm-hero__card {
    padding: 20px 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    align-self: start;
}

.cm-dash .cm-hero__card h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.cm-dash .cm-hero__plan { margin: 0 0 3px; font-size: 17px; font-weight: 700; color: #fff; }
.cm-dash .cm-hero__renew { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .74); }

.cm-dash .cm-hero__progress { margin: 16px 0 18px; }

.cm-dash .cm-track {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

.cm-dash .cm-track__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cm-orange), #E9A863);
    transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-dash .cm-track__fill { animation: cmFill .9s cubic-bezier(.22, .8, .3, 1) both; }
}

@keyframes cmFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.cm-dash .cm-track__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .62);
}

.cm-dash .cm-btn-hero {
    width: 100%;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border-color: #fff;
    color: var(--cm-navy);
}

.cm-dash .cm-btn-hero:hover { background: var(--cm-grey); border-color: var(--cm-grey); }
.cm-dash .cm-btn-hero .cm-ico { transition: transform .18s ease; }
.cm-dash .cm-btn-hero:hover .cm-ico { transform: translateX(3px); }

/* ---- stat tiles ---- */

.cm-dash .cm-stats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cm-dash .cm-stats-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--cm-navy); }

/* Previous years of shared data: a small read-only table. Scrolls sideways inside its card
   on a phone rather than pushing the page wider. */
.cm-dash .cm-years-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cm-dash .cm-years { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.cm-dash .cm-years th,
.cm-dash .cm-years td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--cm-border); font-variant-numeric: tabular-nums; }
.cm-dash .cm-years thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-ink-55); }
.cm-dash .cm-years th:first-child,
.cm-dash .cm-years td:first-child,
.cm-dash .cm-years .is-text { text-align: left; }
.cm-dash .cm-years tbody th { font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-years tbody tr:last-child th,
.cm-dash .cm-years tbody tr:last-child td { border-bottom: 0; }
.cm-dash .cm-stats-head p { margin: 0; font-size: 12.5px; color: var(--cm-ink-55); }

.cm-dash .cm-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.cm-dash .cm-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid var(--cm-border);
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cm-dash .cm-stat:hover {
    transform: translateY(-3px);
    border-color: var(--cm-navy);
    box-shadow: 0 6px 14px rgba(18, 36, 75, .09), 0 30px 56px -18px rgba(18, 36, 75, .34);
}

.cm-dash .cm-stat:active { transform: translateY(-1px); }

.cm-dash .cm-stat__top { display: flex; align-items: center; gap: 9px; }

.cm-dash .cm-stat__ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--cm-orange-dark);
    background: #FBF1E3;
}

.cm-dash .cm-stat__label { font-size: 12.5px; font-weight: 500; color: var(--cm-ink-55); }

.cm-dash .cm-stat__value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--cm-navy);
    font-variant-numeric: tabular-nums;
}

/* ---- shortcuts ---- */

.cm-dash .cm-jumps { display: grid; gap: 12px; }

.cm-dash .cm-jump {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid var(--cm-border);
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cm-dash .cm-jump:hover {
    transform: translateY(-2px);
    border-color: var(--cm-navy);
    box-shadow: 0 4px 10px rgba(18, 36, 75, .07), 0 22px 40px -18px rgba(18, 36, 75, .3);
}

.cm-dash .cm-jump__ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: var(--cm-navy);
    background: var(--cm-grey);
}

.cm-dash .cm-jump__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cm-dash .cm-jump__txt b { font-size: 15px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-jump__txt small { font-size: 12.5px; color: var(--cm-ink-55); }

.cm-dash .cm-jump__go { color: var(--cm-ink-55); transition: transform .18s ease, color .18s ease; }
.cm-dash .cm-jump:hover .cm-jump__go { transform: translateX(3px); color: var(--cm-navy); }

/* ---- entrance ---- */

/* Staggered, and only ever on load. --cm-i orders the tiles; anything without it simply
   arrives at once, which is the correct fallback rather than a broken cascade. */
@media (prefers-reduced-motion: no-preference) {
    .cm-dash .cm-hero,
    .cm-dash .cm-stat,
    .cm-dash .cm-jump {
        animation: cmRise .5s cubic-bezier(.22, .8, .3, 1) both;
        animation-delay: calc(var(--cm-i, 0) * 55ms);
    }
}

@keyframes cmRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .cm-dash .cm-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 22px; }
    .cm-dash .cm-hero h2 { font-size: 23px; }
    .cm-dash .cm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .cm-dash .cm-stats { grid-template-columns: minmax(0, 1fr); }
    .cm-dash .cm-stats-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cm-dash .cm-stat__value { font-size: 26px; }
}

/* ---------------- overview: bands and listings ---------------- */

.cm-dash .cm-band-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 30px 0 14px;
}

.cm-dash .cm-band-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-band-head p { margin: 4px 0 0; font-size: 13px; color: var(--cm-ink-55); }

.cm-dash .cm-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--cm-orange-dark);
    background: none;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    transition: color .15s ease;
}

.cm-dash .cm-linkbtn:hover { color: var(--cm-orange-deep); }
.cm-dash .cm-linkbtn .cm-ico { transition: transform .18s ease; }
.cm-dash .cm-linkbtn:hover .cm-ico { transform: translateX(3px); }

.cm-dash .cm-stat__hint { font-size: 11.5px; line-height: 1.4; color: var(--cm-ink-55); }

.cm-dash .cm-listings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cm-dash .cm-listing {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--cm-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cm-dash .cm-listing:hover {
    transform: translateY(-2px);
    border-color: var(--cm-navy);
    box-shadow: 0 4px 10px rgba(18, 36, 75, .07), 0 22px 40px -18px rgba(18, 36, 75, .3);
}

.cm-dash .cm-listing__top {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--cm-border);
}

/* Round, same as everywhere else a business logo appears. Fitted, not cropped. */
.cm-dash .cm-listing__logo {
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--cm-border);
    background: #fff;
    font-weight: 800;
    font-size: 13px;
    color: var(--cm-navy);
    overflow: hidden;
}

.cm-dash .cm-listing__logo img {
    width: 100%; height: 100%;
    padding: 5px;
    box-sizing: border-box;
    object-fit: contain;
    display: block;
}

.cm-dash .cm-listing__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-dash .cm-listing__id b { font-size: 15px; font-weight: 700; color: var(--cm-navy); line-height: 1.25; }

.cm-dash .cm-listing__cat {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cm-orange-dark);
}

.cm-dash .cm-listing__body { padding: 15px 18px; flex: 1; }
.cm-dash .cm-listing__body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--cm-ink-55); }
.cm-dash .cm-listing__empty { font-style: italic; }

.cm-dash .cm-contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.cm-dash .cm-contacts li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--cm-navy);
    min-width: 0;
}

.cm-dash .cm-contacts li .cm-ico { color: var(--cm-ink-55); }
.cm-dash .cm-contacts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cm-dash .cm-listing__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: var(--cm-grey);
    border-top: 1px solid var(--cm-border);
}

.cm-dash .cm-btn-sm { padding: 7px 13px; font-size: 12.5px; }

.cm-dash .cm-pubtag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cm-ok);
}

.cm-dash .cm-pubtag .cm-pip { background: var(--cm-ok); box-shadow: none; }
.cm-dash .cm-pubtag.is-hidden { color: var(--cm-ink-55); }
.cm-dash .cm-pubtag.is-hidden .cm-pip { background: var(--cm-field); }

.cm-dash .cm-listing__slot {
    margin-left: auto;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cm-ink-55);
}

/* The add-a-second-business card is the same footprint as a listing, drawn as an
   invitation rather than a record. */
.cm-dash .cm-listing--add {
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 20px;
    text-align: center;
    font: inherit;
    cursor: pointer;
    border-style: dashed;
    background: var(--cm-grey);
}

.cm-dash .cm-listing--add b { font-size: 15px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-listing--add small { font-size: 12.5px; line-height: 1.5; color: var(--cm-ink-55); max-width: 34ch; }

.cm-dash .cm-listing__addic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: var(--cm-orange-dark);
    background: #FBF1E3;
}

@media (prefers-reduced-motion: no-preference) {
    .cm-dash .cm-listing {
        animation: cmRise .5s cubic-bezier(.22, .8, .3, 1) both;
        animation-delay: calc(var(--cm-i, 0) * 55ms);
    }
}

@media (max-width: 780px) {
    .cm-dash .cm-listings { grid-template-columns: minmax(0, 1fr); }
    .cm-dash .cm-band-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------------- pane heads, profile uploader ---------------- */

.cm-dash .cm-backlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cm-ink-55);
    background: none;
    border: 0;
    padding: 0 10px 0 0;
    margin: 0 0 10px -2px;
    min-height: 34px;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.cm-dash .cm-backlink:hover { color: var(--cm-navy); transform: translateX(-2px); }

/* A form that holds more than one card needs the cards spaced from each other, which the
   single-card layout never had to say. */
.cm-dash form > .cm-card + .cm-card { margin-top: 18px; }

.cm-dash .cm-uploader {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cm-dash .cm-avatar-lg {
    width: 78px;
    height: 78px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cm-grey);
    display: grid;
    place-items: center;
}

.cm-dash .cm-avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cm-dash .cm-uploader__meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 180px; }
.cm-dash .cm-uploader__meta strong { font-size: 14px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-uploader__meta span { font-size: 12.5px; color: var(--cm-ink-55); }

.cm-dash .cm-uploader__ctrls { display: flex; gap: 10px; flex: none; }
.cm-dash .cm-uploader__ctrls .cm-btn { display: inline-flex; align-items: center; gap: 7px; }

/* Visually hidden rather than display:none - a hidden file input cannot be reached by
   keyboard, and the label is what the member actually clicks. */
.cm-dash .cm-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cm-dash .cm-file-input:focus-visible + .cm-btn {
    outline: 3px solid var(--cm-orange);
    outline-offset: 2px;
}

/* A plain rule, distinct from .cm-divider, which is the LABELLED divider the business
   card already uses to caption a group. Both existed as .cm-divider for one commit and
   the later rule flattened the captioned one to a 1px line with text inside it. */
.cm-dash .cm-rule {
    height: 1px;
    border: 0;
    background: var(--cm-border);
    margin: 24px 0 18px;
}

.cm-dash .cm-sub-h {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cm-ink-55);
}

/* ---------------- stepper, switch, password meter ---------------- */

.cm-dash .cm-stepper { display: flex; align-items: center; gap: 8px; }

.cm-dash .cm-stepper input[type="number"] {
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    padding-left: 6px;
    padding-right: 6px;
    /* The spinners duplicate the buttons either side and shrink the tap target. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.cm-dash .cm-stepper input[type="number"]::-webkit-outer-spin-button,
.cm-dash .cm-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cm-dash .cm-step {
    width: 44px;
    height: 46px;
    flex: none;
    border-radius: 10px;
    cursor: pointer;
    border: 1.5px solid var(--cm-field);
    background: #fff;
    color: var(--cm-navy);
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .12s ease, border-color .15s ease;
}

.cm-dash .cm-step:hover { background: var(--cm-grey); border-color: var(--cm-navy); }
.cm-dash .cm-step:active { transform: scale(.94); }

/* Switch. The whole row is the label, so the hit area is the row rather than the 48px
   track - the same reason the checkbox it replaces was wrapped in a label. */
.cm-dash .cm-switch-row {
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    padding: 14px 0;
    min-height: 44px;
}

.cm-dash .cm-switch-row .cm-switch-row__txt { flex: 1 1 auto; min-width: 0; }
.cm-dash .cm-switch-row b { display: block; font-size: 14.5px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-switch-row small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--cm-ink-55); }

.cm-dash .cm-switch { position: relative; flex: none; width: 48px; height: 28px; }

.cm-dash .cm-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.cm-dash .cm-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--cm-field);
    transition: background .15s ease;
    pointer-events: none;
}

.cm-dash .cm-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(18, 36, 75, .3);
    transition: transform .15s ease;
}

.cm-dash .cm-switch input:checked + .cm-switch__track { background: var(--cm-orange); }
.cm-dash .cm-switch input:checked + .cm-switch__track::after { transform: translateX(20px); }

.cm-dash .cm-switch input:focus-visible + .cm-switch__track {
    outline: 3px solid var(--cm-orange);
    outline-offset: 3px;
}

/* Password strength. Four segments rather than a word alone: the shape reads before the
   label does, and the label still says why. */
.cm-dash .cm-pw-meter { display: flex; gap: 5px; margin-top: 9px; }

.cm-dash .cm-pw-meter i {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--cm-border);
    transition: background .2s ease;
}

.cm-dash .cm-pw-meter.s1 i:nth-child(1) { background: var(--cm-bad); }
.cm-dash .cm-pw-meter.s2 i:nth-child(-n+2) { background: var(--cm-orange-dark); }
.cm-dash .cm-pw-meter.s3 i:nth-child(-n+3) { background: var(--cm-orange); }
.cm-dash .cm-pw-meter.s4 i { background: var(--cm-ok); }

.cm-dash .cm-pw-note { font-size: 12px; color: var(--cm-ink-55); margin: 7px 0 0; }

/* ---------------- officer resource library ---------------- */

.cm-dash .cm-docs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.cm-dash .cm-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--cm-border);
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cm-dash .cm-doc:hover {
    transform: translateY(-2px);
    border-color: var(--cm-navy);
    box-shadow: 0 4px 10px rgba(18, 36, 75, .07), 0 22px 40px -18px rgba(18, 36, 75, .3);
}

.cm-dash .cm-doc__ic {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    color: var(--cm-orange-dark);
    background: #FBF1E3;
}

.cm-dash .cm-doc__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cm-dash .cm-doc__txt b { font-size: 14.5px; font-weight: 700; color: var(--cm-navy); }
.cm-dash .cm-doc__txt small { font-size: 12.5px; line-height: 1.5; color: var(--cm-ink-55); }

.cm-dash .cm-doc__meta {
    flex: none;
    font-size: 12px;
    color: var(--cm-ink-55);
    font-variant-numeric: tabular-nums;
}

.cm-dash .cm-doc .cm-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }

.cm-dash .cm-field select {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--cm-ink);
    background: #fff;
    border: 1.5px solid var(--cm-field);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: none;
    min-height: 46px;
}

.cm-dash .cm-field select:focus { border-color: var(--cm-navy); outline: none; }

@media (prefers-reduced-motion: no-preference) {
    .cm-dash .cm-doc {
        animation: cmRise .5s cubic-bezier(.22, .8, .3, 1) both;
        animation-delay: calc(var(--cm-i, 0) * 45ms);
    }
}

@media (max-width: 640px) {
    .cm-dash .cm-doc { flex-wrap: wrap; }
    .cm-dash .cm-doc__txt { flex-basis: 100%; order: 2; }
    .cm-dash .cm-doc__meta { order: 3; }
    .cm-dash .cm-doc .cm-btn { order: 4; margin-left: auto; }
}

@media (max-width: 640px) {
    .cm-dash .cm-field select { font-size: 16px; }
}

/* ---------------- business logo: a control that says what it is ----------------
   It was a button reading "Logo" beside a tile, which never said it was an upload,
   what it accepted, or that the tile was the result. It is now a labelled target
   that also takes a drop. */

.cm-dash .cm-logo-drop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1.5px dashed var(--cm-border-strong);
    border-radius: 11px;
    background: #fff;
    color: var(--cm-navy);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.cm-dash .cm-logo-drop .cm-ico { color: var(--cm-orange-dark); }
.cm-dash .cm-logo-drop:hover {
    border-color: var(--cm-orange);
    background: rgba(212, 126, 46, .06);
}

/* Dragging a file over it. Solid rather than dashed, because the dashed edge is the
   invitation and a solid one reads as "let go here". */
.cm-dash .cm-logo-drop.is-over {
    border-style: solid;
    border-color: var(--cm-orange);
    background: rgba(212, 126, 46, .12);
    color: var(--cm-orange-dark);
}

/* The input is visually hidden, so its focus ring has to be drawn on the label - the
   only part of the control anyone can see. */
.cm-dash .cm-file-input:focus-visible + .cm-logo-drop {
    outline: 3px solid var(--cm-orange);
    outline-offset: 2px;
}

/* Says what a good logo looks like, at the moment someone is deciding what to upload. */
.cm-dash .cm-logo-hint {
    margin-top: 4px;
    font-size: 11.5px;
    font-style: normal;
    line-height: 1.45;
    color: var(--cm-ink-40);
}

@media (max-width: 640px) {
    .cm-dash .cm-logo-hint { display: none; }
    .cm-dash .cm-logo-drop { padding: 8px 12px; font-size: 12.5px; }
}