/* ====================================
   SERVICE BUILDER

   Everything here is scoped to the two page containers so it can't leak into
   the rest of the admin app (the eForm designer in particular). Colours come
   from the Bootstrap theme vars in custom.css - don't hardcode hexes here.
   ==================================== */

/* Global color variables */
:root {
    --panel-bg: var(--bs-gray-100);
    --btn-secondary-bg: var(--bs-gray-200);
    --btn-secondary-border: var(--bs-gray-300);
    --btn-secondary-hover-bg: var(--bs-gray-300);
    --btn-secondary-hover-border: var(--bs-gray-400);
}

.create-service-entry-container,
.service-builder-container {
    /* tweak the feel of the whole builder from these five values */
    --sb-heading: var(--bs-dark); /* #004563 LCC corporate blue */
    --sb-muted: var(--bs-secondary-color);
    --sb-panel: var(--bs-tertiary-bg);
    --sb-form-section-bg: var(--bs-gray-100);
    --sb-secondary-btn-bg: var(--bs-gray-200);
    --sb-secondary-btn-border: var(--bs-gray-300);
    --sb-secondary-btn-hover-bg: var(--bs-gray-300);
    --sb-secondary-btn-hover-border: var(--bs-gray-400);
    --sb-gap: 2rem;
    --sb-focus-ring: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);

    /* centred 80% - the 10% gutters replace side padding */
    width: 80%;
    margin: 0 auto;
    padding: 1.25rem 0 2.5rem;
    color: var(--bs-body-color);
}

.create-service-entry-container h1,
.service-builder-container h1 {
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sb-heading);
}

/* ====================================
   BUILDER SHELL - two columns
   ==================================== */

.sb-eyebrow,
.sb-rail-title {
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0;
}

.sb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.25rem;
}

@media (max-width: 992px) {
    .sb-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* the form itself: one card, sections become divided blocks inside it */
.sb-sheet {
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
    overflow: hidden;
}

.sb-sheet > section {
    margin: 0;
    padding: 1.75rem;
    border-bottom: none;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    background-color: var(--sb-form-section-bg);
}

.sb-sheet > section:first-child {
    border-top: none;
}

.sb-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ====================================
   PROGRESS RAIL
   ==================================== */

.sb-rail {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1.25rem;
}

@media (max-width: 992px) {
    .sb-rail {
        position: static;
    }
}

.sb-rail-card {
    padding: 1.25rem;
    background-color: var(--sb-panel);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.sb-rail-card .sb-rail-title {
    margin-bottom: 1rem;
}

/* numbered steps, joined by a line that fills in as you go */
.sb-spine {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sb-spine li {
    position: relative;
    padding: 0 0 1.25rem 1.875rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.sb-spine li:last-child {
    padding-bottom: 0;
}

.sb-spine li::before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1.5px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    display: grid;
    place-items: center;
}

.sb-spine li::after {
    content: "";
    position: absolute;
    left: 0.59rem;
    top: 1.4rem;
    bottom: 0.125rem;
    width: 1px;
    background-color: var(--bs-border-color);
}

.sb-spine li:last-child::after {
    display: none;
}

.sb-spine li.done {
    color: var(--bs-body-color);
}

.sb-spine li.done::before {
    content: "\2713";
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.sb-spine li.done::after {
    background-color: var(--bs-primary);
}

.sb-spine li.now {
    color: var(--bs-body-color);
    font-weight: 600;
}

.sb-spine li.now::before {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}

/* ====================================
   SERVICE TYPE INFORMATION
   ==================================== */

.sb-info-name {
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sb-heading);
}

.sb-info-summary {
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
}

/* label/value pairs, hanging off a shared column so they line up */
.sb-info-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
    margin: 0.875rem 0 0;
    padding-top: 0.875rem;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.sb-info-facts dt {
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding-top: 0.1rem;
}

.sb-info-facts dd {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.create-service-entry-container > p.lead,
.service-builder-container > p.lead {
    font-size: 1rem;
    color: var(--sb-muted);
    margin-bottom: var(--sb-gap);
    line-height: 1.6;
}

/* ====================================
   SERVICE ENTRY PAGE - CARD GRID
   ==================================== */

.create-service-entry-container .service-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: var(--sb-gap);
}

.create-service-entry-container .service-type-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-top: 4px solid var(--bs-primary);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.create-service-entry-container .service-type-card.card-success {
    border-top-color: var(--bs-success);
}

.create-service-entry-container .service-type-card.card-info {
    border-top-color: var(--bs-info);
}

.create-service-entry-container .service-type-card:hover {
    box-shadow: var(--bs-box-shadow-sm);
    border-color: var(--bs-secondary);
}

.create-service-entry-container .service-type-card h5 {
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--sb-heading);
}

.create-service-entry-container .service-type-card p {
    flex-grow: 1;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sb-muted);
}

.create-service-entry-container .service-type-card .btn {
    align-self: flex-start;
}

.create-service-entry-container .entry-actions {
    margin-top: var(--sb-gap);
    padding-top: var(--sb-gap);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* ====================================
   FORM SECTIONS
   ==================================== */

.service-builder-container h2 {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sb-heading);
}

.service-builder-container h3,
.service-builder-container h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* ====================================
   FORM GROUPS & LABELS
   ==================================== */

.service-builder-container .form-group {
    margin-bottom: 1.5rem;
}

.service-builder-container .form-group:last-child {
    margin-bottom: 0;
}

.service-builder-container .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--bs-body-color);
}

/* app.css sets .question-title to 1.25em globally. Match any element carrying
   it - SearchableDropdown puts it on a <strong>, not a label or legend. */
.service-builder-container .question-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--bs-body-color);
}

/* Required-field marker. Deliberately not danger-red: validation errors own that
   colour, and a red asterisk on a pristine form reads as "this is wrong". */
.service-builder-container .req {
    color: var(--bs-primary);
    font-weight: 700;
    margin-left: 0.125rem;
}

/* sits with the lede as one header block; .sb-layout owns the gap to the sheet */
.service-builder-container > p.lead {
    max-width: 60ch;
    margin-bottom: 0.5rem;
}

.sb-required-note {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin: 0;
}

.service-builder-container .hint-text {
    font-size: 0.875rem;
    color: var(--sb-muted);
    margin-bottom: 0.5rem;
    font-style: normal;
}

.service-builder-container .info-text {
    font-size: 0.9rem;
    color: var(--sb-muted);
    margin-bottom: 0;
}

/* ====================================
   CHECKBOX & RADIO GROUPS

   Bordered rows: bigger hit target than a bare control, and the checked row
   is obvious at a glance.
   ==================================== */

.service-builder-container .checkbox-group,
.service-builder-container .radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0;
}

.service-builder-container .checkbox-label,
.service-builder-container .radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    font-weight: 400;
    cursor: pointer;
    color: var(--bs-body-color);
    line-height: 1.5;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.service-builder-container .checkbox-label:hover,
.service-builder-container .radio-label:hover {
    border-color: var(--bs-primary);
}

.service-builder-container .checkbox-label:has(:checked),
.service-builder-container .radio-label:has(:checked) {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    font-weight: 600;
}

.service-builder-container .checkbox-label:has(:focus-visible),
.service-builder-container .radio-label:has(:focus-visible) {
    box-shadow: var(--sb-focus-ring);
}

/* ====================================
   LOCKED FIELDS

   Edit mode makes some values permanent. Show them plainly rather than as a
   disabled input, which reads as "temporarily unavailable".
   ==================================== */

.service-builder-container .locked-value {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--sb-panel);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.service-builder-container .locked-value code {
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.service-builder-container .radio-label.is-locked {
    color: var(--bs-secondary-color);
    cursor: not-allowed;
    background-color: var(--sb-panel);
}

.service-builder-container .radio-label.is-locked:hover {
    border-color: var(--bs-border-color);
}

.service-builder-container .locked-note {
    margin-left: auto;
    font-family: var(--bs-font-monospace);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.service-builder-container .checkbox-label input[type="checkbox"],
.service-builder-container .radio-label input[type="radio"] {
    flex: none;
    margin: 0;
    cursor: pointer;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--bs-primary);
}

/* ====================================
   INPUT FIELDS
   ==================================== */

.service-builder-container .form-control,
.service-builder-container .form-select {
    border-radius: var(--bs-border-radius);
    border: var(--bs-border-width) solid var(--bs-border-color);
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.service-builder-container .form-control:focus,
.service-builder-container .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: var(--sb-focus-ring);
    outline: none;
}

/* One field width for the whole sheet: the .form-group measure sets it, controls
   fill it. Overrides app.css's .form-textbox (18em) and any per-input caps, which
   otherwise leave every field a different size. */
.sb-sheet .form-control,
.sb-sheet .form-select,
.sb-sheet .form-textbox {
    width: 100%;
    max-width: none;
}

/* ====================================
   TABLES
   ==================================== */

/* overflow-x, not hidden - the model table has to stay scrollable when narrow */
.service-builder-container .table-responsive {
    border-radius: var(--bs-border-radius-lg);
    overflow-x: auto;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.service-builder-container .service-model-table {
    margin: 0;
    background-color: var(--bs-body-bg);
}

.service-builder-container .service-model-table th {
    padding: 0.75rem;
    background-color: var(--sb-panel);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    font-weight: 700;
    color: var(--sb-heading);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.service-builder-container .service-model-table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.service-builder-container .service-model-table tr:last-child td {
    border-bottom: none;
}

.service-builder-container .table-striped {
    --bs-table-striped-bg: white;
}

.service-builder-container .choice-label {
    text-align: right;
    color: var(--sb-muted);
    font-size: 0.875rem;
}

.service-builder-container .checkbox-cell {
    text-align: center;
}

.service-builder-container .property-required-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--bs-primary);
}

/* ====================================
   EMPTY STATE
   ==================================== */

.service-builder-container .empty-state {
    padding: 0;
    margin: 0 0 1rem;
    color: var(--sb-muted);
    font-style: normal;
}

.no-data-message {
    max-width: 600px;
    margin: 4rem auto;
    padding: 2rem;
    text-align: center;
    color: var(--bs-body-color);
}

.no-data-message h1 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--bs-dark);
}

.no-data-message p {
    color: var(--bs-secondary-color);
}

.no-data-message .btn {
    margin-top: 1rem;
}

/* ====================================
   NESTED PANELS
   ==================================== */

/* eForm settings sit directly in the section - no container around them, just
   the flex column that spaces the rows. */
.service-builder-container .eform-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* payments are a genuine sub-group, so this one keeps its panel */
.service-builder-container .payment-config-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    margin-top: 0.25rem;
    background-color: var(--sb-panel);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

/* these panels space their children with flex gap - margins would double it */
.service-builder-container .eform-content > .form-group,
.service-builder-container .payment-config-section > .form-group,
.service-builder-container .payment-config-section > h4 {
    margin-bottom: 0;
}

/* just an alert - it carries its own chrome, don't box it twice */
.service-builder-container .decision-tree-content {
    margin-top: 1.25rem;
}

.service-builder-container .eform-note,
.service-builder-container .alert {
    margin-bottom: 0;
}

.service-builder-container .alert p:last-child {
    margin-bottom: 0;
}

/* ====================================
   BUTTONS
   ==================================== */

.service-builder-container .btn-add-property {
    margin-top: 1rem;
    background-color: var(--sb-secondary-btn-bg);
    border-color: var(--sb-secondary-btn-border);
    color: var(--bs-body-color);
}

.service-builder-container .btn-add-property:hover {
    background-color: var(--sb-secondary-btn-hover-bg);
    border-color: var(--sb-secondary-btn-border);
}

/* ====================================
   VALIDATION
   ==================================== */

.service-builder-container .validation-summary-errors {
    border: var(--bs-border-width) solid var(--bs-danger-border-subtle);
    border-left: 4px solid var(--bs-danger);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-danger-bg-subtle);
}

.service-builder-container .validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.service-builder-container .validation-summary-errors li,
.service-builder-container .validation-message {
    color: var(--bs-danger-text-emphasis);
    font-weight: 500;
}

.service-builder-container .validation-message {
    display: block;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ====================================
   RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    .create-service-entry-container,
    .service-builder-container,
    .manage-service-container {
        --sb-gap: 1.5rem;
        width: 100%;
        padding: 1rem 1rem 1.5rem;
    }

    .create-service-entry-container h1,
    .service-builder-container h1 {
        font-size: 1.75rem;
    }

    .create-service-entry-container .service-type-grid {
        grid-template-columns: 1fr;
    }

    .service-builder-container .service-model-table {
        font-size: 0.875rem;
    }

    .service-builder-container .sb-actions .btn {
        width: 100%;
    }

    .service-builder-container .payment-config-section {
        padding: 1rem;
    }
}

/* ====================================
   MANAGE SERVICE

   Same shell language as the builder: spec-sheet panels rather than a stack
   of tables. Scoped to its own container so nothing leaks.
   ==================================== */

.manage-service-container {
    --sb-heading: var(--bs-dark);
    --sb-panel: var(--bs-tertiary-bg);

    width: 80%;
    margin: 0 auto;
    padding: 1.25rem 0 2.5rem;
}

.manage-service-container h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sb-heading);
}

.manage-service-container h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sb-heading);
}

/* pro-code notice */
.ms-banner {
    display: flex;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.5rem;
    background-color: var(--bs-primary-bg-subtle);
    border: var(--bs-border-width) solid var(--bs-primary-border-subtle);
    border-left: 3px solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
}

.ms-banner p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bs-primary-text-emphasis);
}

/* ====================================
   HEAD
   ==================================== */

.ms-head {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ms-head-main {
    flex: 1 1 380px;
    min-width: 0;
}

.ms-head-tags {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.875rem;
}

.ms-head-actions {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.ms-description {
    max-width: 70ch;
    margin: 0.875rem 0 0;
    color: var(--bs-secondary-color);
}

/* status pills */
.ms-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.6875rem;
    border-radius: 50rem;
    border: var(--bs-border-width) solid transparent;
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ms-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.ms-pill-live {
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
    color: var(--bs-success-text-emphasis);
}

.ms-pill-draft {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

.ms-pill-ended {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.ms-pill-quiet {
    background-color: transparent;
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.ms-pill-quiet::before {
    display: none;
}

/* the integration key - it's an identifier, so it reads as one */
.ms-key {
    font-family: var(--bs-font-monospace);
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    background-color: var(--sb-panel);
    border: var(--bs-border-width) solid var(--bs-border-color);
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius);
}

/* ====================================
   META STRIP
   ==================================== */

.ms-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bs-border-width);
    margin: 1.25rem 0 0;
    background-color: var(--bs-border-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

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

.ms-meta > div {
    background-color: var(--panel-bg);
    padding: 0.875rem 1.125rem;
}

.ms-meta dt {
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.25rem;
}

.ms-meta dd {
    margin: 0;
    font-size: 0.9375rem;
}

.ms-mono {
    font-family: var(--bs-font-monospace);
}

/* ====================================
   PANELS
   ==================================== */

.ms-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
    margin: 1.125rem 0 2rem;
}

@media (max-width: 860px) {
    .ms-panels {
        grid-template-columns: 1fr;
    }
}

.ms-panel {
    display: flex;
    flex-direction: column;
    padding: 1.375rem;
    background-color: var(--panel-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* the eForm is the main thing you came here to open - give it the full row */
.ms-panel-wide {
    grid-column: 1 / -1;
    border-color: var(--bs-primary);
}

.ms-panel-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    /* pill height, so titles line up across a row whether or not there's a pill */
    min-height: 1.75rem;
    margin-bottom: 0.875rem;
}

.ms-panel-head .ms-pill {
    margin-left: auto;
}

.ms-panel-label {
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 1.25rem 0 0.5rem;
}

.ms-panel-note {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bs-secondary-color);
}

.ms-panel-foot {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1.125rem;
}

/* label-left, value-right spec rows */
.ms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.ms-list li {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.ms-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ms-list .t {
    margin-left: auto;
    padding-left: 0.5rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: right;
    overflow-wrap: anywhere;
}

.ms-required {
    font-family: var(--bs-font-monospace);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

/* eForm URL row */
.ms-url {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.875rem;
    background-color: var(--sb-panel);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.ms-url code {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    overflow-wrap: anywhere;
}

.btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--bs-body-color) !important;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg) !important;
    border-color: var(--btn-secondary-hover-border) !important;
}

.ms-url .btn,
.ms-panel-foot .btn img,
.ms-url .btn img {
    flex: none;
}

.ms-url .btn img {
    width: 1rem;
    height: 1rem;
}

/* tags */
.ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ms-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6875rem;
    border-radius: 50rem;
    background-color: var(--bs-primary-bg-subtle);
    border: var(--bs-border-width) solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.8125rem;
}