/*
 * Shared components of the redesigned portal. Class names are documented with markup in ui-preview/COOKBOOK.md
 * and shown live on /_preview/kit. Colours only through --ms-* tokens (ms-tokens.css).
 *
 *   page frame     ms-main, ms-page-header, ms-section
 *   cards          ms-card (+head/body/foot), ms-list/ms-row, ms-dl
 *   dashboard      ms-kpi-grid/ms-kpi, ms-attention, ms-meter
 *   tables         ms-table-card, ms-table (+ is-stack phone rows)
 *   status         ms-pill, ms-dot, ms-banner, ms-empty
 *   actions        ms-btn, ms-tabs, ms-chip
 *   forms          ms-field, ms-input, ms-choice, ms-summary, ms-form-actions
 *   catalog        ms-product-grid/ms-product-card, ms-price, ms-mark
 *   dialog         ms-dialog
 */

/* ======================= page frame ======================= */
.ms-main {
    width: 100%;
    /* Fills the space next to the nav up to --ms-content-w; past that the leftover width is
       shared on both sides, so very wide screens get centred content instead of an empty right half. */
    max-width: var(--ms-content-w);
    margin: 0 auto;
    padding: 24px var(--ms-page-pad) 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ms-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

.ms-page-heading { min-width: 0; }

.ms-page-title {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.ms-page-sub {
    margin-top: 4px;
    color: var(--ms-muted);
    font-size: 0.9375rem;
    max-width: 62ch;
}

.ms-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--ms-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ms-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ms-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .ms-main { padding-top: 16px; padding-bottom: 32px; gap: 14px; }
    .ms-page-title { font-size: 1.25rem; }
    .ms-page-sub { font-size: 0.875rem; }
    .ms-page-actions { width: 100%; }
    .ms-page-actions .ms-btn { flex: 1 1 auto; }
}

/* two-column dashboard-style layout: main column + side column, single column below 1024px */
.ms-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.ms-layout > * { min-width: 0; }
.ms-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (max-width: 1023.98px) {
    .ms-layout { grid-template-columns: minmax(0, 1fr); }
    .ms-layout > .is-first-on-small { order: -1; }
}

.ms-grid-2,
.ms-grid-3 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ms-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023.98px) { .ms-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ms-grid-2, .ms-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ======================= cards ======================= */
.ms-card,
.ms-table-card,
.ms-kpi,
.ms-attention,
.ms-product-card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-card);
    box-shadow: var(--ms-shadow);
    color: var(--ms-text);
}

.ms-card,
.ms-table-card { overflow: hidden; }

.ms-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ms-grid);
}

.ms-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.ms-card-sub {
    margin-top: 2px;
    color: var(--ms-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.ms-card-body { padding: 20px; }

.ms-card-foot {
    padding: 12px 20px;
    background: var(--ms-sunk);
    border-top: 1px solid var(--ms-line);
}

.ms-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .ms-card-head { padding: 12px 16px; }
    .ms-card-body { padding: 16px; }
    .ms-card-foot { padding: 12px 16px; }
}

/* ---------- list rows (launchpad, shortcuts, instances) ---------- */
.ms-list > li + li,
.ms-list > .ms-row + .ms-row { border-top: 1px solid var(--ms-grid); }

.ms-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    min-width: 0;
    color: var(--ms-text);
}

.ms-body a.ms-row:hover {
    background: var(--ms-row-hover);
    text-decoration: none;
}

.ms-row-lead {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ms-accent-subtle);
    color: var(--ms-accent-text);
    font-size: 1.0625rem;
}

.ms-row-body { flex: 1 1 auto; min-width: 0; }
.ms-row-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ms-row-meta { display: block; color: var(--ms-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ms-row-trail { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ms-faint); }

@media (max-width: 767.98px) {
    .ms-row { padding: 12px 16px; flex-wrap: wrap; }
    .ms-row-trail { margin-left: auto; }
}

/* ---------- definition list (company, read-only facts) ---------- */
.ms-dl > div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ms-grid);
}

.ms-dl > div:last-child { border-bottom: 0; }
.ms-dl dt { color: var(--ms-muted); font-size: 0.8125rem; font-weight: 500; }
.ms-dl dd { text-align: right; font-weight: 500; overflow-wrap: anywhere; }

/* ======================= dashboard ======================= */
.ms-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1023.98px) { .ms-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ms-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    min-width: 0;
}

.ms-body a.ms-kpi:hover {
    border-color: var(--ms-line-strong);
    background: var(--ms-row-hover);
    text-decoration: none;
}

.ms-kpi-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ms-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ms-dot {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ms-neutral-dot);
}

.ms-dot.is-ok { background: var(--ms-ok-dot); }
.ms-dot.is-warn { background: var(--ms-warn-dot); }
.ms-dot.is-err { background: var(--ms-err-dot); }
.ms-dot.is-info { background: var(--ms-info-dot); }

.ms-kpi-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ms-kpi-meta { color: var(--ms-faint); font-size: 0.75rem; }

.ms-meter {
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 8px;
    border: 0;
    border-radius: var(--ms-radius-pill);
    background: var(--ms-grid);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.ms-meter::-webkit-progress-bar { background: var(--ms-grid); }
.ms-meter::-webkit-progress-value { background: var(--ms-accent); border-radius: var(--ms-radius-pill); }
.ms-meter::-moz-progress-bar { background: var(--ms-accent); border-radius: var(--ms-radius-pill); }

/* "needs a look" cards. Tone: is-ok | is-warn | is-err | is-info (default) */
.ms-attention-list { display: grid; gap: 10px; }

.ms-attention {
    --tone-bg: var(--ms-info-bg);
    --tone-text: var(--ms-info-text);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    min-width: 0;
    color: var(--ms-text);
}

.ms-attention.is-ok { --tone-bg: var(--ms-ok-bg); --tone-text: var(--ms-ok-text); }
.ms-attention.is-warn { --tone-bg: var(--ms-warn-bg); --tone-text: var(--ms-warn-text); }
.ms-attention.is-err { --tone-bg: var(--ms-err-bg); --tone-text: var(--ms-err-text); }

.ms-body a.ms-attention:hover {
    border-color: var(--ms-line-strong);
    text-decoration: none;
}

.ms-attention-icon {
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tone-bg);
    color: var(--tone-text);
    font-size: 1.0625rem;
}

.ms-attention-body { flex: 1 1 auto; min-width: 0; }
.ms-attention-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ms-attention-text { display: block; margin-top: 2px; color: var(--ms-muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ms-attention-more { color: var(--ms-faint); }
.ms-attention-trail { flex: 0 0 auto; align-self: center; color: var(--ms-faint); }

/* ======================= status ======================= */
.ms-pill {
    --pill-bg: var(--ms-neutral-bg);
    --pill-text: var(--ms-neutral-text);
    --pill-dot: var(--ms-neutral-dot);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: var(--ms-radius-pill);
    background: var(--pill-bg);
    color: var(--pill-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.ms-pill::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pill-dot);
}

.ms-pill-ok { --pill-bg: var(--ms-ok-bg); --pill-text: var(--ms-ok-text); --pill-dot: var(--ms-ok-dot); }
.ms-pill-warn { --pill-bg: var(--ms-warn-bg); --pill-text: var(--ms-warn-text); --pill-dot: var(--ms-warn-dot); }
.ms-pill-err { --pill-bg: var(--ms-err-bg); --pill-text: var(--ms-err-text); --pill-dot: var(--ms-err-dot); }
.ms-pill-info { --pill-bg: var(--ms-info-bg); --pill-text: var(--ms-info-text); --pill-dot: var(--ms-info-dot); }
.ms-pill-neutral { --pill-bg: var(--ms-neutral-bg); --pill-text: var(--ms-neutral-text); --pill-dot: var(--ms-neutral-dot); }
.ms-pill.is-plain::before { display: none; }

.ms-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 8px;
    border-radius: var(--ms-radius-pill);
    background: var(--ms-neutral-bg);
    color: var(--ms-neutral-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 22px;
}

/* inline message. Tone: ms-banner-ok | -warn | -err | -info */
.ms-banner {
    --tone-bg: var(--ms-info-bg);
    --tone-text: var(--ms-info-text);
    --tone-dot: var(--ms-info-dot);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--tone-dot);
    border-radius: var(--ms-radius-card);
    background: var(--tone-bg);
    color: var(--tone-text);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ms-banner > i { flex: 0 0 auto; font-size: 1.0625rem; line-height: 1.4; }
.ms-banner > div,
.ms-banner > span { flex: 1 1 auto; min-width: 0; }
.ms-banner strong { display: block; font-weight: 600; }
.ms-banner-ok { --tone-bg: var(--ms-ok-bg); --tone-text: var(--ms-ok-text); --tone-dot: var(--ms-ok-dot); }
.ms-banner-warn { --tone-bg: var(--ms-warn-bg); --tone-text: var(--ms-warn-text); --tone-dot: var(--ms-warn-dot); }
.ms-banner-err { --tone-bg: var(--ms-err-bg); --tone-text: var(--ms-err-text); --tone-dot: var(--ms-err-dot); }
.ms-body .ms-banner a { color: inherit; font-weight: 600; text-decoration: underline; }

/* empty / error / outage state. Add is-error for an unavailable (not empty) list. */
.ms-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 24px;
    text-align: center;
}

.ms-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--ms-accent-subtle);
    color: var(--ms-accent-text);
    font-size: 1.5rem;
}

.ms-empty.is-error .ms-empty-icon { background: var(--ms-warn-bg); color: var(--ms-warn-text); }
.ms-empty h2,
.ms-empty h3 { font-size: 1rem; }
.ms-empty p { max-width: 46ch; color: var(--ms-muted); }
.ms-empty .ms-btn { margin-top: 10px; }

/* ======================= buttons, tabs, chips ======================= */
.ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    color: var(--ms-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ms-btn i { font-size: 0.9375rem; line-height: 1; }
.ms-body a.ms-btn:hover { text-decoration: none; }
.ms-btn:disabled,
.ms-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ms-btn-primary,
.ms-body a.ms-btn-primary {
    background: var(--ms-accent);
    border-color: var(--ms-accent);
    color: var(--ms-on-accent);
}

.ms-btn-primary:hover,
.ms-body a.ms-btn-primary:hover {
    background: var(--ms-accent-hover);
    border-color: var(--ms-accent-hover);
    color: var(--ms-on-accent);
}

.ms-btn-secondary,
.ms-body a.ms-btn-secondary {
    background: var(--ms-surface);
    border-color: var(--ms-line-strong);
    color: var(--ms-text);
}

.ms-btn-secondary:hover,
.ms-body a.ms-btn-secondary:hover {
    background: var(--ms-sunk);
    border-color: var(--ms-faint);
    color: var(--ms-text);
}

.ms-btn-ghost,
.ms-body a.ms-btn-ghost {
    background: transparent;
    color: var(--ms-accent-text);
}

.ms-btn-ghost:hover,
.ms-body a.ms-btn-ghost:hover { background: var(--ms-accent-subtle); color: var(--ms-accent-text); }

.ms-btn-danger,
.ms-body a.ms-btn-danger {
    background: var(--ms-err-bg);
    border-color: var(--ms-err-dot);
    color: var(--ms-err-text);
}

.ms-btn-danger:hover,
.ms-body a.ms-btn-danger:hover {
    background: var(--ms-err-dot);
    border-color: var(--ms-err-dot);
    color: var(--ms-on-accent);
}

.ms-btn-sm { min-height: 30px; padding: 4px 10px; font-size: 0.8125rem; gap: 6px; }
.ms-btn-lg { min-height: 44px; padding: 8px 20px; font-size: 1rem; }
.ms-btn-block { display: flex; width: 100%; }

.ms-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    background: var(--ms-sunk);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-card);
}

.ms-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--ms-radius);
    color: var(--ms-muted);
    font-weight: 500;
    white-space: nowrap;
}

.ms-body .ms-tabs a:hover { color: var(--ms-text); text-decoration: none; }

.ms-body .ms-tabs a[aria-current="page"] {
    background: var(--ms-surface);
    color: var(--ms-text);
    font-weight: 600;
    box-shadow: var(--ms-shadow);
}

.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--ms-radius-pill);
    background: var(--ms-surface);
    font-size: 0.8125rem;
}

/* ======================= tables ======================= */
.ms-table-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ms-grid);
}

.ms-table-scroll { overflow-x: auto; }
.ms-table-scroll:focus-visible { outline-offset: -2px; }

.ms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ms-table th {
    padding: 10px 16px;
    background: var(--ms-sunk);
    border-bottom: 1px solid var(--ms-line);
    color: var(--ms-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.ms-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ms-grid);
    vertical-align: top;
}

.ms-table tbody tr:last-child td { border-bottom: 0; }
.ms-table tbody tr:hover { background: var(--ms-row-hover); }
.ms-table td strong { font-weight: 600; }
.ms-table td small { display: block; margin-top: 2px; color: var(--ms-muted); }
.ms-table .ms-num,
.ms-table th.ms-num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-table .ms-cell-actions { text-align: right; white-space: nowrap; }
.ms-table .ms-cell-actions form { margin: 0; display: inline; }
.ms-table .ms-empty-value { color: var(--ms-faint); }
.ms-table tr.is-muted td { color: var(--ms-muted); }

.ms-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 20px;
    border-top: 1px solid var(--ms-grid);
    color: var(--ms-muted);
    font-size: 0.8125rem;
}

/*
 * Phone: <table class="ms-table is-stack"> becomes one card per row. Every <td> carries data-label="Header text"
 * (rendered above the value, two per line). Classes: ms-cell-main (full width, no label, the row title),
 * ms-cell-wide (full width, keeps its label), ms-cell-actions (full width at the bottom; an empty one is hidden).
 */
@media (max-width: 767.98px) {
    .ms-table.is-stack,
    .ms-table.is-stack tbody,
    .ms-table.is-stack tr,
    .ms-table.is-stack td { display: block; }

    .ms-table.is-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .ms-table.is-stack tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 16px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--ms-line);
    }

    .ms-table.is-stack tbody tr:last-child { border-bottom: 0; }
    .ms-table.is-stack tbody tr:hover { background: transparent; }

    .ms-table.is-stack td {
        padding: 0;
        border: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .ms-table.is-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--ms-faint);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .ms-table.is-stack td.ms-cell-main,
    .ms-table.is-stack td.ms-cell-wide,
    .ms-table.is-stack td.ms-cell-actions { grid-column: 1 / -1; }

    .ms-table.is-stack td.ms-cell-main::before { display: none; }
    .ms-table.is-stack td.ms-cell-main { font-size: 0.9375rem; }
    .ms-table.is-stack td.ms-cell-actions { text-align: left; white-space: normal; padding-top: 4px; }
    .ms-table.is-stack td.ms-cell-actions::before { display: none; }
    .ms-table.is-stack td.ms-cell-actions .ms-btn { width: 100%; min-height: 40px; }
    .ms-table.is-stack td:empty { display: none; }
    .ms-table.is-stack .ms-num,
    .ms-table.is-stack td.ms-num { text-align: left; }

    .ms-table-card-head,
    .ms-table-foot { padding-left: 16px; padding-right: 16px; }
}

/* ======================= forms ======================= */
.ms-form { display: grid; gap: 16px; }
.ms-field { display: grid; gap: 6px; min-width: 0; }

.ms-label {
    color: var(--ms-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ms-label .ms-optional { color: var(--ms-faint); font-weight: 400; }

.ms-input,
.ms-select,
.ms-textarea {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    color: var(--ms-text);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ms-input::placeholder,
.ms-textarea::placeholder { color: var(--ms-faint); opacity: 1; }

.ms-input:hover,
.ms-select:hover,
.ms-textarea:hover { border-color: var(--ms-faint); }

.ms-body .ms-input:focus,
.ms-body .ms-select:focus,
.ms-body .ms-textarea:focus,
.ms-body .ms-input:focus-visible,
.ms-body .ms-select:focus-visible,
.ms-body .ms-textarea:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 0;
    border-color: var(--ms-accent);
}

.ms-select {
    appearance: none;
    padding-right: 36px;
    background-image: var(--ms-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

.ms-textarea { min-height: 96px; resize: vertical; }
.ms-input:disabled,
.ms-select:disabled,
.ms-textarea:disabled { background: var(--ms-sunk); color: var(--ms-muted); cursor: not-allowed; }

.ms-input.is-invalid,
.ms-select.is-invalid,
.ms-textarea.is-invalid { border-color: var(--ms-err-dot); }

.ms-hint { color: var(--ms-muted); font-size: 0.8125rem; }
.ms-field-error { color: var(--ms-err-text); font-size: 0.8125rem; font-weight: 500; }

/* input with a trailing control (password show/hide, units) */
.ms-input-wrap { position: relative; display: block; }
.ms-input-wrap .ms-input { padding-right: 84px; }

.ms-input-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ms-accent-text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.ms-input-toggle:hover { background: var(--ms-accent-subtle); }

.ms-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
}

.ms-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ms-accent); flex: 0 0 18px; }

.ms-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

@media (max-width: 767.98px) {
    .ms-form-actions { flex-direction: column-reverse; align-items: stretch; }
    .ms-form-actions .ms-btn { width: 100%; min-height: 44px; }
    .ms-input,
    .ms-select,
    .ms-textarea { min-height: 44px; font-size: 1rem; }
}

/* choice cards (period, plan): radio inputs, whole card is the target */
.ms-choice-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.ms-choice-group > legend { padding: 0; margin-bottom: 8px; float: none; width: auto; font-size: 0.8125rem; font-weight: 600; }
.ms-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ms-choice { position: relative; display: block; cursor: pointer; }

.ms-choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ms-choice-body {
    display: grid;
    gap: 2px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--ms-radius-card);
    background: var(--ms-surface);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.ms-choice-body strong { font-weight: 600; }
.ms-choice-body small { color: var(--ms-muted); }
.ms-choice:hover .ms-choice-body { border-color: var(--ms-faint); }
.ms-choice input:checked + .ms-choice-body { border-color: var(--ms-accent); background: var(--ms-accent-subtle); box-shadow: 0 0 0 1px var(--ms-accent); }
.ms-choice input:focus-visible + .ms-choice-body { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

/* summary box next to a purchase form */
.ms-summary {
    padding: 16px 20px;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-card);
    background: var(--ms-sunk);
}

.ms-summary h2,
.ms-summary h3 { margin-bottom: 8px; font-size: 0.9375rem; }
.ms-summary dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.ms-summary dt { color: var(--ms-muted); }
.ms-summary dd { font-weight: 500; text-align: right; }
.ms-summary .ms-summary-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ms-line-strong); font-size: 1.0625rem; font-weight: 600; }
.ms-summary .ms-summary-total dd { font-weight: 700; }

/* ======================= catalog ======================= */
.ms-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.ms-product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.ms-product-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 0;
}

.ms-product-head h2,
.ms-product-head h3 { font-size: 1rem; overflow-wrap: anywhere; }
.ms-product-head .ms-pill { margin-top: 4px; }
.ms-product-body { flex: 1 1 auto; display: grid; gap: 12px; align-content: start; padding: 12px 20px 16px; }
.ms-product-desc { color: var(--ms-muted); }
.ms-product-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--ms-grid); background: var(--ms-sunk); }
.ms-product-foot .ms-btn { flex: 1 1 auto; }

/* square product/module mark. Tones: is-retail (info) is-feedback (ok) is-hotel (warn) is-office (err) default (neutral) */
.ms-mark {
    --mark-bg: var(--ms-neutral-bg);
    --mark-text: var(--ms-neutral-text);
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mark-bg);
    color: var(--mark-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.ms-mark.is-retail { --mark-bg: var(--ms-info-bg); --mark-text: var(--ms-info-text); }
.ms-mark.is-feedback { --mark-bg: var(--ms-ok-bg); --mark-text: var(--ms-ok-text); }
.ms-mark.is-hotel { --mark-bg: var(--ms-warn-bg); --mark-text: var(--ms-warn-text); }
.ms-mark.is-office { --mark-bg: var(--ms-err-bg); --mark-text: var(--ms-err-text); }
/* data-ms-accent="#RRGGBB" (validated by ms-app.js, no inline style) tints a mark from the API colour */
.ms-mark[data-ms-accent] { background: var(--ms-accent-item, var(--mark-bg)); color: var(--ms-on-accent); }

.ms-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ms-price strong { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-price span { color: var(--ms-muted); font-size: 0.8125rem; }
.ms-price-list { display: grid; gap: 6px; font-size: 0.8125rem; }
.ms-price-list > div { display: flex; justify-content: space-between; gap: 12px; }
.ms-price-list dt { color: var(--ms-muted); }
.ms-price-list dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ======================= dialog ======================= */
.ms-dialog {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius-card);
    background: var(--ms-surface);
    color: var(--ms-text);
    box-shadow: var(--ms-shadow-pop);
}

.ms-dialog::backdrop { background: var(--ms-scrim); }
.ms-dialog form { position: relative; display: grid; gap: 14px; padding: 24px; margin: 0; }
.ms-dialog-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: var(--ms-radius); background: transparent; color: var(--ms-muted); font-size: 1rem; cursor: pointer; }
.ms-dialog-close:hover { background: var(--ms-nav-hover); color: var(--ms-text); }
.ms-dialog-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ms-warn-bg); color: var(--ms-warn-text); font-size: 1.25rem; }
.ms-dialog h2 { font-size: 1.125rem; }
.ms-dialog p { margin-top: 6px; color: var(--ms-muted); }
.ms-dialog-note { display: flex; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--ms-radius); background: var(--ms-sunk); color: var(--ms-muted); font-size: 0.8125rem; }
.ms-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 767.98px) {
    .ms-dialog form { padding: 20px 16px; }
    .ms-dialog-actions { flex-direction: column-reverse; }
    .ms-dialog-actions .ms-btn { width: 100%; min-height: 44px; }
}

/* pills inside an eyebrow keep their own case */
.ms-eyebrow .ms-pill { text-transform: none; letter-spacing: 0; }