/* =============================================================================
   ZHosting cPanel UI — shared design system for the hosting control area.

   This is the single stylesheet every cPanel feature area (Domains, Email,
   Files, Databases, Security, …) should build on. Nothing in here is specific
   to one feature: the class names describe *shapes* (card, field, table, badge)
   rather than subjects (redirect, mailbox, database), so a new section can be
   assembled from these pieces without adding CSS.

   VOCABULARY  (all blocks are prefixed `cpanel-` to sit alongside the existing
   `cpanel-manager__*` classes already used by this module)

     Page        .cpanel-page  __header __eyebrow __title __lead __actions
     Card        .cpanel-card  __header __heading __title __desc __aside
                               __body __footer  --flush --muted
     Form        .cpanel-form  __row  __actions
                 .cpanel-grid  --2 --3 --auto        (responsive field grid)
                 .cpanel-field --span-2 --span-full
                 .cpanel-label  .cpanel-required
                 .cpanel-input  .cpanel-select  .cpanel-textarea
                               --readonly (also honours [readonly]/[disabled])
                 .cpanel-hint  .cpanel-error
                 .cpanel-input-group  __addon  __addon--end   (joined controls)
     Choices     .cpanel-choices --inline
                 .cpanel-choice  __control __body __title __hint
     Buttons     .cpanel-btn   --primary --ghost --danger --link --sm --block
                               ([disabled] and .is-loading are styled)
     Lists       .cpanel-table __head __row __cell
                               __cell--primary --muted --mono --actions
                 (column count comes from --cpanel-cols, default 3)
     Feedback    .cpanel-alert --success --error --info --warning  __title
     Misc        .cpanel-badge --neutral --accent --success --warning --danger
                 .cpanel-empty __icon __title __text
                 .cpanel-meta  __item __label __value
                 .cpanel-toolbar  .cpanel-note  .cpanel-divider
                 .cpanel-bar   __fill  --warning --danger   (usage meter; the
                               filled width comes from --cpanel-bar-value, a
                               percentage set inline)
                 .cpanel-crumbs __item __sep     (path / trail navigation)
                 .cpanel-code                    (inline monospace value the
                               customer is meant to copy)

   Widths: the hosting pages sit in a column already narrowed by two sidebars,
   so every grid uses auto-fit + minmax() and collapses on its own — avoid
   adding viewport media queries for layout unless there is no alternative.
   ========================================================================== */

:root {
    /* Brand accent — matches --zh-violet used elsewhere in the theme. */
    --cpui-accent: #6535e8;
    --cpui-accent-strong: #5528d4;
    --cpui-accent-soft: rgba(101, 53, 232, .12);
    --cpui-accent-tint: #f4f0ff;
    --cpui-gradient: linear-gradient(135deg, #6633eb 0%, #4924bd 100%);

    --cpui-ink: #17172a;
    --cpui-ink-soft: #2b2c3d;
    --cpui-muted: #6b6d80;
    --cpui-faint: #8a8c9e;

    --cpui-surface: #ffffff;
    --cpui-surface-sunken: #f5f5f8;
    --cpui-border: #e7e8ee;
    --cpui-border-input: #e2e3ec;

    --cpui-success: #0f7b52;
    --cpui-success-bg: #eaf7f1;
    --cpui-success-border: #bfe6d5;
    --cpui-danger: #c62d42;
    --cpui-danger-bg: #fdeef0;
    --cpui-danger-border: #f5c9d0;
    --cpui-warning: #9a6400;
    --cpui-warning-bg: #fdf4e3;
    --cpui-warning-border: #f0dcb4;
    --cpui-info: #2f4bbd;
    --cpui-info-bg: #eef1fd;
    --cpui-info-border: #ccd5f6;

    --cpui-radius-card: 14px;
    --cpui-radius-control: 10px;
    --cpui-radius-pill: 999px;
    --cpui-pad-card: 28px;
    --cpui-gap: 18px;
}

/* ---------------------------------------------------------------- page ---- */

.cpanel-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--cpui-ink);
}

.cpanel-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.cpanel-page__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--cpui-faint);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cpanel-page__title {
    margin: 0;
    color: var(--cpui-ink);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.cpanel-page__lead {
    margin: 8px 0 0;
    max-width: 68ch;
    color: var(--cpui-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.cpanel-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------------------------------------------------------------- card ---- */

.cpanel-card {
    padding: var(--cpui-pad-card);
    border: 1px solid var(--cpui-border);
    border-radius: var(--cpui-radius-card);
    background: var(--cpui-surface);
}

.cpanel-card--flush {
    padding: 0;
    overflow: hidden;
}

.cpanel-card--muted {
    background: var(--cpui-surface-sunken);
}

/* Heading block: title + explanatory paragraph, with an optional right-hand
   slot (`__aside`) for a count, badge or secondary action. */
.cpanel-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.cpanel-card--flush .cpanel-card__header {
    margin: 0;
    padding: 20px var(--cpui-pad-card);
    border-bottom: 1px solid var(--cpui-border);
}

.cpanel-card__heading {
    min-width: 0;
    flex: 1 1 260px;
}

.cpanel-card__title {
    margin: 0;
    color: var(--cpui-ink);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.cpanel-card__desc {
    margin: 8px 0 0;
    max-width: 72ch;
    color: var(--cpui-muted);
    font-size: .86rem;
    line-height: 1.6;
}

.cpanel-card__desc a {
    color: var(--cpui-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cpanel-card__desc a:hover {
    color: var(--cpui-accent-strong);
}

.cpanel-card__aside {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.cpanel-card__body > * + * {
    margin-top: var(--cpui-gap);
}

.cpanel-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--cpui-border);
}

.cpanel-divider {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: var(--cpui-border);
}

/* ---------------------------------------------------------------- form ---- */

.cpanel-form {
    display: flex;
    flex-direction: column;
    gap: var(--cpui-gap);
}

.cpanel-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--cpui-gap);
}

.cpanel-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* Responsive field grid. auto-fit + minmax means it reflows to the space the
   content column actually has, without knowing the viewport width. */
.cpanel-grid {
    display: grid;
    gap: var(--cpui-gap);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cpanel-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cpanel-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.cpanel-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(140px, auto));
}

.cpanel-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.cpanel-field--span-2 {
    grid-column: span 2;
}

.cpanel-field--span-full {
    grid-column: 1 / -1;
}

/* A span-2 field must not force a horizontal scrollbar once the grid has
   collapsed to a single column. */
@media (max-width: 640px) {
    .cpanel-field--span-2 {
        grid-column: 1 / -1;
    }
}

.cpanel-label {
    color: var(--cpui-ink-soft);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}

.cpanel-required {
    margin-left: 2px;
    color: var(--cpui-danger);
}

.cpanel-input,
.cpanel-select,
.cpanel-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--cpui-border-input);
    border-radius: var(--cpui-radius-control);
    background: var(--cpui-surface);
    color: var(--cpui-ink);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    appearance: none;
}

.cpanel-textarea {
    min-height: 96px;
    resize: vertical;
}

.cpanel-select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6d80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.cpanel-input::placeholder,
.cpanel-textarea::placeholder {
    color: #a9abbb;
}

.cpanel-input:focus,
.cpanel-select:focus,
.cpanel-textarea:focus {
    border-color: var(--cpui-accent);
    box-shadow: 0 0 0 3px var(--cpui-accent-soft);
    outline: none;
}

.cpanel-input--readonly,
.cpanel-input[readonly],
.cpanel-input[disabled],
.cpanel-select[disabled],
.cpanel-textarea[disabled] {
    border-color: var(--cpui-border);
    background-color: var(--cpui-surface-sunken);
    color: var(--cpui-muted);
    cursor: default;
}

.cpanel-input[disabled],
.cpanel-select[disabled] {
    cursor: not-allowed;
}

.cpanel-input--readonly:focus,
.cpanel-input[readonly]:focus {
    border-color: var(--cpui-border);
    box-shadow: none;
}

.cpanel-hint {
    color: var(--cpui-faint);
    font-size: .76rem;
    line-height: 1.5;
}

.cpanel-error {
    color: var(--cpui-danger);
    font-size: .76rem;
    line-height: 1.5;
}

.cpanel-field.is-invalid .cpanel-input,
.cpanel-field.is-invalid .cpanel-select {
    border-color: var(--cpui-danger);
}

/* Joined controls, e.g. a fixed "https://example.com/" prefix before a path
   input. The addon carries the readonly styling so it reads as fixed. */
.cpanel-input-group {
    display: flex;
    min-width: 0;
    align-items: stretch;
}

.cpanel-input-group__addon {
    display: flex;
    max-width: 55%;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--cpui-border);
    border-right: 0;
    border-radius: var(--cpui-radius-control) 0 0 var(--cpui-radius-control);
    background: var(--cpui-surface-sunken);
    color: var(--cpui-muted);
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpanel-input-group__addon--end {
    border-right: 1px solid var(--cpui-border);
    border-left: 0;
    border-radius: 0 var(--cpui-radius-control) var(--cpui-radius-control) 0;
}

.cpanel-input-group .cpanel-input,
.cpanel-input-group .cpanel-select {
    border-radius: 0 var(--cpui-radius-control) var(--cpui-radius-control) 0;
}

.cpanel-input-group__addon--end ~ .cpanel-input,
.cpanel-input-group .cpanel-input:has(+ .cpanel-input-group__addon--end) {
    border-radius: var(--cpui-radius-control) 0 0 var(--cpui-radius-control);
}

.cpanel-input-group .cpanel-input:focus,
.cpanel-input-group .cpanel-select:focus {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------- choices ---- */

.cpanel-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cpanel-choices--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.cpanel-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 24px;
    cursor: pointer;
}

.cpanel-choice__control {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--cpui-accent);
    cursor: pointer;
}

.cpanel-choice__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.cpanel-choice__title {
    color: var(--cpui-ink-soft);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.4;
}

.cpanel-choice__hint {
    color: var(--cpui-faint);
    font-size: .76rem;
    line-height: 1.45;
}

.cpanel-choice__control:focus-visible {
    outline: 2px solid var(--cpui-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- buttons ---- */

.cpanel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--cpui-radius-control);
    background: transparent;
    color: var(--cpui-ink);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.cpanel-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cpui-accent-soft);
}

.cpanel-btn--primary {
    background: var(--cpui-accent);
    color: #fff;
}

.cpanel-btn--primary:hover {
    background: var(--cpui-accent-strong);
    color: #fff;
}

.cpanel-btn--ghost {
    border-color: var(--cpui-border-input);
    background: var(--cpui-surface);
    color: var(--cpui-ink-soft);
}

.cpanel-btn--ghost:hover {
    border-color: var(--cpui-accent);
    color: var(--cpui-accent);
}

.cpanel-btn--danger {
    border-color: transparent;
    background: transparent;
    color: var(--cpui-danger);
}

.cpanel-btn--danger:hover {
    border-color: var(--cpui-danger-border);
    background: var(--cpui-danger-bg);
    color: var(--cpui-danger);
}

.cpanel-btn--link {
    padding: 0;
    color: var(--cpui-accent);
    font-weight: 600;
}

.cpanel-btn--link:hover {
    color: var(--cpui-accent-strong);
    text-decoration: underline;
}

.cpanel-btn--sm {
    padding: 7px 13px;
    font-size: .8rem;
}

.cpanel-btn--block {
    width: 100%;
}

.cpanel-btn[disabled],
.cpanel-btn.is-disabled,
.cpanel-btn[aria-disabled="true"] {
    border-color: transparent;
    background: #e4e5ec;
    color: #9a9cad;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: auto;
}

.cpanel-btn--ghost[disabled],
.cpanel-btn--danger[disabled] {
    border-color: var(--cpui-border);
    background: var(--cpui-surface-sunken);
    color: #9a9cad;
}

.cpanel-btn.is-loading {
    cursor: progress;
    opacity: .75;
}

/* --------------------------------------------------------------- table ---- */

/* Column layout is driven by --cpanel-cols so one class serves every page:
     <div class="cpanel-table" style="--cpanel-cols: 2fr 1fr auto"> */
.cpanel-table {
    --cpanel-cols: 2fr 1fr auto;
    display: flex;
    flex-direction: column;
}

.cpanel-table__head,
.cpanel-table__row {
    display: grid;
    align-items: center;
    gap: 12px 16px;
    grid-template-columns: var(--cpanel-cols);
}

.cpanel-table__head {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--cpui-border);
    color: var(--cpui-faint);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cpanel-table__row {
    padding: 15px 0;
    border-bottom: 1px solid #f0f1f5;
    font-size: .86rem;
}

.cpanel-table__row:last-child {
    border-bottom: 0;
}

.cpanel-card--flush .cpanel-table__head,
.cpanel-card--flush .cpanel-table__row {
    padding-right: var(--cpui-pad-card);
    padding-left: var(--cpui-pad-card);
}

.cpanel-card--flush .cpanel-table__head {
    padding-top: 14px;
}

.cpanel-table__cell {
    min-width: 0;
    color: var(--cpui-ink-soft);
    overflow-wrap: anywhere;
}

.cpanel-table__cell--primary {
    color: var(--cpui-ink);
    font-weight: 600;
}

.cpanel-table__cell--muted {
    color: var(--cpui-muted);
}

.cpanel-table__cell--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.cpanel-table__cell--actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* An expandable detail area belonging to the row above it — an inline edit form,
   for instance. It is a direct child of .cpanel-table (a flex column), so it
   spans the full width without needing to join the row's grid. */
.cpanel-table__panel {
    padding: 18px 0 22px;
    border-bottom: 1px solid #f0f1f5;
    background: var(--cpui-surface-sunken);
}

.cpanel-table__panel[hidden] {
    display: none;
}

.cpanel-card--flush .cpanel-table__panel {
    padding-right: var(--cpui-pad-card);
    padding-left: var(--cpui-pad-card);
}

/* Below this width the grid columns stop being readable, so each row becomes a
   stacked block and the header row is hidden. Cells may carry a data-label to
   keep their meaning. */
@media (max-width: 560px) {
    .cpanel-table__head {
        display: none;
    }

    .cpanel-table__row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 0;
    }

    .cpanel-table__cell--actions {
        justify-content: flex-start;
        margin-top: 6px;
    }

    .cpanel-table__cell[data-label]::before {
        display: block;
        content: attr(data-label);
        color: var(--cpui-faint);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
    }
}

/* -------------------------------------------------------------- alerts ---- */

.cpanel-alert {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 15px;
    border: 1px solid var(--cpui-info-border);
    border-radius: var(--cpui-radius-control);
    background: var(--cpui-info-bg);
    color: var(--cpui-info);
    font-size: .83rem;
    line-height: 1.55;
}

.cpanel-alert__title {
    font-weight: 600;
}

.cpanel-alert--success {
    border-color: var(--cpui-success-border);
    background: var(--cpui-success-bg);
    color: var(--cpui-success);
}

.cpanel-alert--error {
    border-color: var(--cpui-danger-border);
    background: var(--cpui-danger-bg);
    color: var(--cpui-danger);
}

.cpanel-alert--warning {
    border-color: var(--cpui-warning-border);
    background: var(--cpui-warning-bg);
    color: var(--cpui-warning);
}

.cpanel-alert[hidden] {
    display: none;
}

.cpanel-note {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    border-left: 3px solid var(--cpui-accent);
    border-radius: 0 var(--cpui-radius-control) var(--cpui-radius-control) 0;
    background: var(--cpui-accent-tint);
    color: var(--cpui-ink-soft);
    font-size: .82rem;
    line-height: 1.55;
}

/* -------------------------------------------------- badges / meta / empty -- */

.cpanel-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--cpui-radius-pill);
    background: var(--cpui-surface-sunken);
    color: var(--cpui-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.cpanel-badge--accent {
    background: var(--cpui-accent-tint);
    color: var(--cpui-accent);
}

.cpanel-badge--success {
    background: var(--cpui-success-bg);
    color: var(--cpui-success);
}

.cpanel-badge--warning {
    background: var(--cpui-warning-bg);
    color: var(--cpui-warning);
}

.cpanel-badge--danger {
    background: var(--cpui-danger-bg);
    color: var(--cpui-danger);
}

.cpanel-meta {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.cpanel-meta__item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cpanel-meta__label {
    color: var(--cpui-faint);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cpanel-meta__value {
    color: var(--cpui-ink);
    font-size: .95rem;
    font-weight: 600;
}

.cpanel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 24px;
    text-align: center;
}

.cpanel-empty__icon {
    display: flex;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
    align-items: center;
    justify-content: center;
    border-radius: var(--cpui-radius-pill);
    background: var(--cpui-accent-tint);
    color: var(--cpui-accent);
    font-size: 1.15rem;
}

.cpanel-empty__title {
    margin: 0;
    color: var(--cpui-ink);
    font-size: .95rem;
    font-weight: 600;
}

.cpanel-empty__text {
    margin: 0;
    max-width: 46ch;
    color: var(--cpui-muted);
    font-size: .84rem;
    line-height: 1.6;
}

.cpanel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ----------------------------------------------------------------- bar ---- */

/* A usage meter. The fill width is a custom property rather than an inline
   width so the same markup can be reused for quota, per-directory usage and
   any future allowance without a second class:

     <div class="cpanel-bar" style="--cpanel-bar-value: 42%"><span class="cpanel-bar__fill"></span></div>

   Give the wrapper role="img" and an aria-label when the number is not already
   written next to it in text. */
.cpanel-bar {
    --cpanel-bar-value: 0%;
    overflow: hidden;
    width: 100%;
    height: 8px;
    border-radius: var(--cpui-radius-pill);
    background: var(--cpui-surface-sunken);
}

.cpanel-bar__fill {
    display: block;
    width: var(--cpanel-bar-value);
    height: 100%;
    border-radius: inherit;
    background: var(--cpui-accent);
    transition: width .3s ease;
}

.cpanel-bar--warning .cpanel-bar__fill {
    background: var(--cpui-warning);
}

.cpanel-bar--danger .cpanel-bar__fill {
    background: var(--cpui-danger);
}

/* -------------------------------------------------------------- crumbs ---- */

/* A path trail. Wraps rather than scrolls, because a deep path is more useful
   fully visible than on one clipped line. */
.cpanel-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    line-height: 1.5;
}

.cpanel-crumbs__item {
    color: var(--cpui-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cpanel-crumbs__item:hover {
    color: var(--cpui-accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The last crumb is where the customer already is, so it is not a link. */
.cpanel-crumbs__item[aria-current="page"] {
    color: var(--cpui-ink);
    font-weight: 600;
    text-decoration: none;
    cursor: default;
}

.cpanel-crumbs__sep {
    color: var(--cpui-faint);
    user-select: none;
}

/* ---------------------------------------------------------------- code ---- */

/* An exact value the customer is meant to copy — a hostname, a login, a path.
   Selectable on touch and wraps rather than overflowing its card. */
.cpanel-code {
    display: inline-block;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid var(--cpui-border);
    border-radius: 6px;
    background: var(--cpui-surface-sunken);
    color: var(--cpui-ink-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    user-select: all;
}

/* ------------------------------------------------------------ narrow UI --- */

@media (max-width: 575.98px) {
    :root {
        --cpui-pad-card: 20px;
    }

    .cpanel-page__title {
        font-size: 1.35rem;
    }

    .cpanel-btn--block-sm {
        width: 100%;
    }
}

/* An author-level display value beats the browser's own [hidden] rule, so any
   component that sets display must opt back out of it explicitly — the same
   guard .cpanel-table__panel already carries. Without this a value revealed on
   demand (a domain transfer code) would be visible before it was asked for. */
.cpanel-code[hidden] {
    display: none;
}

/* ============================================================== wizards ==== */
/*
   Two components for multi-step flows — "Add a website" and the WordPress
   installer both need them, so they live here rather than in a per-feature
   stylesheet.

     .cpanel-steps   __item __index __label   .is-active .is-done
                     The progress rail across the top of a wizard. It is an <ol>
                     so the order is real to a screen reader, and the current
                     step carries aria-current="step".

     .cpanel-options __... a grid of large, self-contained choices — the "what do
                     you want to put on it" moment, where each option is a whole
                     decision rather than one field in a form. Each option is
                     rendered as its own <form>, so the grid is a layout and not
                     a control, and a keyboard user tabs through real buttons.

   Both collapse on their own: the hosting content column already sits between
   two sidebars, so widths are auto-fit + minmax() rather than breakpoints.
*/

.cpanel-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: cpanel-step;
}

.cpanel-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 130px;
    padding: 8px 12px;
    border: 1px solid var(--cpui-border, #e7e8ee);
    border-radius: 10px;
    background: var(--cpui-surface, #fff);
}

.cpanel-steps__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    color: var(--cpui-muted, #6b6d80);
    font-size: .72rem;
    font-weight: 700;
    background: var(--cpui-accent-soft, rgba(101, 53, 232, .12));
}

.cpanel-steps__label {
    overflow: hidden;
    color: var(--cpui-muted, #6b6d80);
    font-size: .78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpanel-steps__item.is-active {
    border-color: var(--cpui-accent, #6535e8);
    box-shadow: 0 0 0 1px var(--cpui-accent, #6535e8) inset;
}

.cpanel-steps__item.is-active .cpanel-steps__index {
    color: #fff;
    background: var(--cpui-gradient, linear-gradient(135deg, #6633eb 0%, #4924bd 100%));
}

.cpanel-steps__item.is-active .cpanel-steps__label {
    color: var(--cpui-ink, #17172a);
}

.cpanel-steps__item.is-done .cpanel-steps__index {
    color: #1e8e5a;
    background: #e6f7ee;
}

.cpanel-options {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.cpanel-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--cpui-border, #e7e8ee);
    border-radius: 12px;
    background: var(--cpui-surface, #fff);
}

.cpanel-option:hover {
    border-color: var(--cpui-accent, #6535e8);
}

.cpanel-option__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--cpui-gradient, linear-gradient(135deg, #6633eb 0%, #4924bd 100%));
}

.cpanel-option__title {
    color: var(--cpui-ink, #17172a);
    font-size: .95rem;
    font-weight: 650;
}

.cpanel-option__text {
    flex: 1;
    color: var(--cpui-muted, #6b6d80);
    font-size: .82rem;
    line-height: 1.5;
}

.cpanel-option__action {
    margin-top: 4px;
}