/* =====================================================================
   styleRoadmap.css -- the Road Map page (/admin-roadmap/), 28 Sep 2026.
   Page + script: tt24child/roadmap/. Loaded by functions.php on the
   admin-roadmap page only. Values: --bsm3-* variables from brand.css only
   (the bar width uses --rm-pct, a percentage the script sets). No shadows.
   ===================================================================== */

.rm-root {
    max-width: var(--bsm3-width-extra-wide);
    margin: 0 auto;
    padding: var(--bsm3-space-xl) var(--bsm3-space-lg);
    font-family: var(--bsm3-font-body);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}

.rm-denied {
    padding: var(--bsm3-space-xl);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

/* ---- views: Team hides the technical parts, admin tools only for admins ---- */
.rm-view-team .rm-claude-only,
.rm-view-team .rm-tech {
    display: none;
}

.rm-admin-only {
    display: none;
}

.rm-can-approve .rm-admin-only {
    display: inline-flex;
}

.rm-view-claude .rm-team-only {
    display: none;
}

/* Section tools (rename, reorder, remove, add) only in "Edit sections" mode, admins only */
.rm-sections-only {
    display: none;
}

.rm-can-approve.rm-edit-sections .rm-sections-only {
    display: inline-flex;
}

.rm-can-approve.rm-edit-sections .rm-add-module.rm-sections-only {
    display: flex;
}

/* ---- how to use (Team view) ---- */
.rm-howto {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-md);
    margin-bottom: var(--bsm3-space-lg);
}

.rm-howto-step {
    display: flex;
    flex: 1 1 var(--bsm3-width-narrow);
    align-items: flex-start;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-md);
    border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline);
    border-radius: var(--bsm3-radius-primary-cards);
    background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background);
}

.rm-howto-num {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--bsm3-icon-size-card);
    height: var(--bsm3-icon-size-card);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.rm-howto-text {
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

/* ---- big add button + add form ---- */
.rm-bigadd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
    margin-bottom: var(--bsm3-space-lg);
}

.rm-btn.rm-btn-big {
    padding: var(--bsm3-space-md) var(--bsm3-space-xl);
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
}

.rm-addform {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
    margin-bottom: var(--bsm3-space-lg);
    padding: var(--bsm3-space-lg);
    border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    border-radius: var(--bsm3-radius-primary-cards);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}

.rm-addform-title {
    margin: 0;
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.rm-addform .rm-select {
    max-width: var(--bsm3-width-standard);
}

.rm-type-pick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
}

.rm-type-btn {
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    cursor: pointer;
}

.rm-type-btn-fix.rm-type-btn-on {
    border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
    background-color: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background);
    color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

.rm-type-btn-enh.rm-type-btn-on {
    border-color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon);
    background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background);
    color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong);
}

/* ---- "Open / Close" pill on each section ---- */
.rm-open-pill {
    margin-left: auto;
    padding: var(--bsm3-space-xs) var(--bsm3-space-md);
    border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border);
    border-radius: var(--bsm3-radius-pills);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    white-space: nowrap;
}

.rm-module-toggle:hover .rm-open-pill {
    border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
}

/* ---- head ---- */
.rm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bsm3-space-lg);
    margin-bottom: var(--bsm3-space-lg);
}

.rm-title {
    margin: 0 0 var(--bsm3-space-xs);
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
}

.rm-lead {
    margin: 0;
    max-width: var(--bsm3-width-wide);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

.rm-view-switch {
    display: inline-flex;
    gap: var(--bsm3-space-xs);
    padding: var(--bsm3-space-xs);
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-pills);
}

.rm-view-btn {
    padding: var(--bsm3-pill-chip-padding);
    border: none;
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-transparent);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    cursor: pointer;
}

.rm-view-btn.rm-view-btn-on {
    background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}

/* ---- overall progress ---- */
.rm-overall {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    margin-bottom: var(--bsm3-space-lg);
}

.rm-overall-text {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
}

.rm-bar {
    width: 100%;
    height: var(--bsm3-space-sm);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background);
    overflow: hidden;
}

.rm-bar-fill {
    width: var(--rm-pct);
    height: 100%;
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-body-core-green-16A34A-use-on-body-pillar-accent-icon);
}

/* ---- toolbar ---- */
.rm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
    margin-bottom: var(--bsm3-space-lg);
}

.rm-search,
.rm-input,
.rm-select,
.rm-filter,
.rm-textarea {
    box-sizing: border-box;
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-status-cards);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
}
.rm-filter { font-size: var(--bsm3-text-body-use-on-reading-text); } /* 29 Sep 2026 body-text sweep: reading text split from a mixed rule */

.rm-search {
    flex: 1 1 var(--bsm3-width-narrow);
}

.rm-textarea {
    width: 100%;
    resize: vertical;
}

.rm-input {
    width: 100%;
}

.rm-input-date {
    width: auto;
}

.rm-search:focus,
.rm-input:focus,
.rm-select:focus,
.rm-filter:focus,
.rm-textarea:focus {
    outline: none;
    border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
}

/* ---- buttons ---- */
.rm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bsm3-space-xs);
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    white-space: nowrap;
    cursor: pointer;
}

.rm-btn:hover {
    border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
}

.rm-btn-ghost {
    border-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
}

.rm-btn-primary {
    background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}

.rm-btn-danger {
    border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
    background-color: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background);
    color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

.rm-btn-fix {
    border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
    color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

.rm-btn-enh {
    border-color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon);
    color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong);
}

.rm-mini {
    padding: var(--bsm3-space-xs) var(--bsm3-space-sm);
    border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    cursor: pointer;
}

.rm-mini-danger {
    color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

/* ---- Start here (Claude view) ---- */
.rm-start {
    margin-bottom: var(--bsm3-space-lg);
    padding: var(--bsm3-space-md) var(--bsm3-space-lg);
    border: var(--bsm3-border-default) solid var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline);
    border-radius: var(--bsm3-radius-primary-cards);
    background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

.rm-view-claude .rm-start {
    display: block;
}

.rm-start-title {
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    cursor: pointer;
}

.rm-start-body code,
.rm-text code {
    font-family: var(--bsm3-font-mono);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

/* ---- modules ---- */
.rm-modules {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
}

.rm-loading,
.rm-empty {
    margin: 0;
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}
.rm-empty { font-size: var(--bsm3-text-body-use-on-reading-text); } /* 29 Sep 2026 body-text sweep: reading text split from a mixed rule */

.rm-module {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-md) var(--bsm3-space-lg);
    border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border);
    border-radius: var(--bsm3-radius-primary-cards);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}

.rm-module-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
}

.rm-module-toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    gap: var(--bsm3-space-md);
    padding: 0;
    border: none;
    background-color: var(--bsm3-transparent);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    text-align: left;
    cursor: pointer;
}

.rm-module-name {
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.rm-module-count,
.rm-sub-count {
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

.rm-module-plain,
.rm-sub-plain {
    margin: 0;
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

.rm-section-tools {
    gap: var(--bsm3-space-xs);
}

.rm-section-edit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    margin: var(--bsm3-space-sm) 0;
}

.rm-section-edit .rm-input {
    flex: 1 1 var(--bsm3-width-narrow);
    width: auto;
}

.rm-add-module {
    margin-top: var(--bsm3-space-lg);
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
}

/* ---- sub-modules (the holes) ---- */
.rm-subs {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
    margin-top: var(--bsm3-space-sm);
}

.rm-sub {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    padding: var(--bsm3-space-md);
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-list-rows);
    background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background);
}

.rm-sub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bsm3-space-sm);
}

.rm-sub-name {
    margin: 0;
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.rm-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
}

.rm-add-sub {
    align-self: flex-start;
}

/* ---- item cards ---- */
.rm-items {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
}

.rm-item {
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-left-width: var(--bsm3-border-thick);
    border-radius: var(--bsm3-radius-list-rows);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}

.rm-item-fix {
    border-left-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

.rm-item-enhancement {
    border-left-color: var(--bsm3-color-mind-core-blue-2563EB-use-on-mind-pillar-accent-icon);
}

.rm-item.rm-status-done .rm-item-title,
.rm-item.rm-status-signed_off .rm-item-title {
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
}

.rm-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
    width: 100%;
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border: none;
    background-color: var(--bsm3-transparent);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    text-align: left;
    cursor: pointer;
}

.rm-item-title {
    flex: 1 1 var(--bsm3-width-narrow);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
}

.rm-item-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-xs);
}

.rm-item-body {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    padding: 0 var(--bsm3-space-md) var(--bsm3-space-md);
    border-top: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
}

.rm-label {
    margin: var(--bsm3-space-sm) 0 0;
    font-size: var(--bsm3-size-list-row-subtitle-13px-use-on-h5);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    letter-spacing: var(--bsm3-section-label-tracking);
}

.rm-meta {
    margin: var(--bsm3-space-sm) 0 0;
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

.rm-text {
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

.rm-text-p {
    margin: 0 0 var(--bsm3-space-sm);
}

.rm-text-list {
    margin: 0 0 var(--bsm3-space-sm);
    padding-left: var(--bsm3-space-xl);
}

.rm-link {
    color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong);
    word-break: break-all;
}

.rm-tech {
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-radius: var(--bsm3-radius-status-cards);
    background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background);
}

.rm-controls,
.rm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--bsm3-space-md);
    margin-top: var(--bsm3-space-sm);
}

.rm-ctl,
.rm-field {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
}

.rm-field {
    width: 100%;
}

.rm-ctl-label,
.rm-field-label {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}

.rm-field-hint {
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

.rm-edit {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-md);
    padding-top: var(--bsm3-space-md);
}

/* ---- chips ---- */
.rm-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--bsm3-space-xs) var(--bsm3-space-sm);
    border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    white-space: nowrap;
}

.rm-chip-type-fix,
.rm-chip-priority-high {
    border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
    background-color: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background);
    color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

.rm-chip-type-enhancement,
.rm-chip-status-in_progress {
    border-color: var(--bsm3-color-mind-outline-light-blue-93C5FD-use-on-mind-pillar-outline);
    background-color: var(--bsm3-color-mind-light-sky-blue-DBEAFE-use-on-mind-pillar-background);
    color: var(--bsm3-color-mind-deep-navy-blue-1E40AF-use-on-mind-pillar-strong);
}

.rm-chip-approval-proposed,
.rm-chip-priority-medium,
.rm-chip-status-on_hold,
.rm-chip-waiting {
    border-color: var(--bsm3-color-status-elevated-yellow-EAB308-use-on-status-elevated);
    background-color: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
}

.rm-chip-approval-approved,
.rm-chip-status-signed_off {
    border-color: var(--bsm3-color-body-outline-light-green-86EFAC-use-on-body-pillar-outline);
    background-color: var(--bsm3-color-body-light-mint-DCFCE7-use-on-body-pillar-background);
    color: var(--bsm3-color-body-deep-forest-green-166534-use-on-body-pillar-strong);
}

.rm-chip-approval-rejected,
.rm-chip-priority-low,
.rm-chip-status-not_started {
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
}

/* ---- screenshots ---- */
.rm-shot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
}

.rm-shot {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    width: var(--bsm3-width-narrow);
    margin: 0;
}

.rm-shot-open {
    padding: 0;
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-status-cards);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    overflow: hidden;
    cursor: zoom-in;
}

.rm-shot-img {
    display: block;
    width: 100%;
    height: auto;
}

.rm-shot-caption {
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

.rm-shot-remove {
    align-self: flex-start;
    padding: 0;
    border: none;
    background-color: var(--bsm3-transparent);
    color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    text-decoration: underline;
    cursor: pointer;
}

.rm-shot-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
    margin-top: var(--bsm3-space-sm);
}

.rm-shot-add .rm-input {
    flex: 1 1 var(--bsm3-width-narrow);
    width: auto;
}

.rm-file {
    display: none;
}

/* ---- updates log ---- */
.rm-log-list {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-log-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}

.rm-log-when {
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
    white-space: nowrap;
}

.rm-log-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
    margin-top: var(--bsm3-space-sm);
}

.rm-log-add .rm-input {
    flex: 1 1 var(--bsm3-width-narrow);
    width: auto;
    min-width: 0;
}

.rm-log .rm-field-hint {
    margin: 0 0 var(--bsm3-space-xs);
}

/* ---- toast (small dark box: within the dark-background size limits) ---- */
.rm-toast {
    position: fixed;
    right: var(--bsm3-space-lg);
    bottom: var(--bsm3-space-lg);
    z-index: 99999;
    display: none;
    max-width: var(--bsm3-dark-background-max-width);
    max-height: var(--bsm3-dark-background-max-height);
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    overflow: hidden;
}

.rm-toast.rm-toast-on {
    display: block;
}

.rm-toast.rm-toast-bad {
    background-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
}

/* ---- screenshot lightbox ---- */
.rm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* above Katie and the finder, below the site top bar */
    display: none;
    align-items: center;
    justify-content: center;
    /* top padding clears the WP admin bar + the fixed site top bar (about 92px) */
    padding: 7rem var(--bsm3-space-xl) var(--bsm3-space-xl);
    box-sizing: border-box;
}

.rm-lightbox.rm-lightbox-on {
    display: flex;
}

.rm-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    opacity: var(--bsm3-opacity-high);
}

.rm-lightbox-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    max-width: 100%;
    max-height: 100%;
    padding: var(--bsm3-space-md);
    border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border);
    border-radius: var(--bsm3-radius-primary-cards);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    overflow: auto;
}

.rm-lightbox-close {
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: flex-end;
    padding: var(--bsm3-space-sm) var(--bsm3-space-lg);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border);
    border-radius: var(--bsm3-radius-pills);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-small-12px-use-on-text);
    cursor: pointer;
}

.rm-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 14rem);
    width: auto;
    margin: 0 auto;
    height: auto;
    cursor: zoom-out;
}

.rm-lightbox-caption {
    margin: 0;
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

@media (max-width: 900px) {
    .rm-root {
        padding: var(--bsm3-space-lg) var(--bsm3-space-sm);
    }

    .rm-module {
        padding: var(--bsm3-space-md);
    }

    .rm-sub {
        padding: var(--bsm3-space-sm);
    }

    .rm-shot {
        width: 100%;
    }
}

/* ---------- autosave hint on an open item ---------- */
.rm-autosave-hint {
    margin: var(--bsm3-space-xs) 0 0;
}

/* ---------- Priority list (tick to give to Claude) ---------- */
.rm-wl-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm);
}
.rm-wl-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-xs);
    padding: var(--bsm3-space-xs);
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-pills);
}
.rm-wl-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bsm3-space-sm);
}
.rm-wl-ctl {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
}
.rm-wl-ctl-label {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-tiny-10px-use-on-text);
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
}
.rm-select.rm-select-small {
    padding: var(--bsm3-space-xs) var(--bsm3-space-sm);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}
.rm-select.rm-wl-sel-priority-high {
    border-color: var(--bsm3-color-status-severe-red-C0392B-use-on-status-severe);
    background-color: var(--bsm3-color-attention-pink-FEE2E2-use-on-status-alert-background);
}
.rm-select.rm-wl-sel-priority-medium {
    border-color: var(--bsm3-color-status-elevated-yellow-EAB308-use-on-status-elevated);
    background-color: var(--bsm3-color-caution-cream-FEF3C7-use-on-status-warning-background);
}
.rm-select.rm-wl-sel-priority-low {
    border-color: var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
}
.rm-wl-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bsm3-space-xs);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    cursor: pointer;
}
.rm-wl-list {
    display: flex;
    flex-direction: column;
    border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-list-rows);
}
.rm-wl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm) var(--bsm3-space-md);
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border-bottom: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
}
.rm-wl-row:last-child {
    border-bottom: 0;
}
.rm-wl-check {
    width: var(--bsm3-space-lg);
    height: var(--bsm3-space-lg);
    margin: 0;
    accent-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    cursor: pointer;
}
.rm-wl-text {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    min-width: 0;
}
.rm-wl-where {
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
}
.rm-wl-title {
    padding: 0;
    border: 0;
    background: var(--bsm3-transparent);
    text-align: left;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-size-card-list-title-15px-use-on-h4);
    font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    cursor: pointer;
}
.rm-wl-title:hover,
.rm-wl-title:focus-visible {
    color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    text-decoration: underline;
}
.rm-wl-count {
    margin: 0;
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-medium-14px-use-on-text);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
}

/* ---------- the Claude prompt box ---------- */
.rm-prompt {
    font-family: var(--bsm3-font-mono);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background);
}

/* ---------- quick look (hover = floating peek; button = stays open) ---------- */
.rm-wl-row {
    position: relative;
}
.rm-wl-text {
    position: relative;
    align-items: flex-start;
}
.rm-wl-peek {
    display: none;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    font-family: var(--bsm3-font-body);
    font-size: var(--bsm3-text-body-use-on-reading-text);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
}
.rm-wl-peek .rm-text p {
    margin: 0 0 var(--bsm3-space-xs);
}
.rm-wl-peek-label {
    font-size: var(--bsm3-text-small-12px-use-on-text);
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
}
/* hover or keyboard focus on the title: floating card under it */
.rm-wl-row.rm-wl-row-hover .rm-wl-peek {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    width: min(36rem, 90vw);
    padding: var(--bsm3-space-md);
    border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    border-radius: var(--bsm3-radius-status-cards);
    background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
}
/* Quick look pressed: shown in the row itself */
.rm-wl-row.rm-wl-row-look .rm-wl-peek,
.rm-wl-row.rm-wl-row-look.rm-wl-row-hover .rm-wl-peek {
    display: flex;
    position: static;
    width: auto;
    margin-top: var(--bsm3-space-xs);
    padding: var(--bsm3-space-sm) var(--bsm3-space-md);
    border: var(--bsm3-border-thin) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers);
    border-radius: var(--bsm3-radius-list-rows);
    background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background);
}
.rm-wl-look {
    margin-top: var(--bsm3-space-xs);
}
.rm-wl-row.rm-wl-row-flash {
    background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background);
}

/* ---------- "Back to priority list" at the top right of an open item ---------- */
.rm-item-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--bsm3-space-sm);
}

.rm-wl-peek-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bsm3-space-sm);
}

/* ---------- "Claude Automation and Manual" box (a <details>, closed by default) ---------- */
.rm-claude-box {
    margin-bottom: var(--bsm3-space-lg);
    padding: var(--bsm3-space-md) var(--bsm3-space-lg);
    border: var(--bsm3-border-default) solid var(--bsm3-color-sleep-outline-light-purple-C4B5FD-use-on-sleep-pillar-outline);
    border-radius: var(--bsm3-radius-primary-cards);
    background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background);
    font-family: var(--bsm3-font-body);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
}
.rm-claude-box-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bsm3-space-sm) var(--bsm3-space-md);
    list-style: none;
    cursor: pointer;
}
.rm-claude-box-sum::-webkit-details-marker {
    display: none;
}
.rm-claude-box-title {
    font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}
.rm-claude-box-hint {
    flex: 1 1 auto;
    font-size: var(--bsm3-text-body-use-on-reading-text);
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
}
.rm-claude-box .rm-claude-less {
    display: none;
}
.rm-claude-box[open] .rm-claude-less {
    display: inline-flex;
}
.rm-claude-box[open] .rm-claude-more {
    display: none;
}
.rm-claude-box-body {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-sm);
    margin-top: var(--bsm3-space-md);
}
.rm-claude-box-list {
    display: flex;
    flex-direction: column;
    gap: var(--bsm3-space-xs);
    margin: 0;
    padding-left: var(--bsm3-space-lg);
    font-size: var(--bsm3-text-body-use-on-reading-text);
}
.rm-claude-box-note {
    margin: 0;
    font-size: var(--bsm3-text-body-use-on-reading-text);
}
.rm-skill-src {
    display: none;
}

/* make the "Claude Automation and Manual" heading stand out */
.rm-claude-box {
    border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    border-width: var(--bsm3-border-thick);
}
.rm-claude-box .rm-claude-box-title {
    font-size: var(--bsm3-size-page-title-24px-use-on-h1);
    font-weight: var(--bsm3-weight-bold-700-use-on-h1);
    color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
}
.rm-claude-box .rm-claude-box-hint {
    font-size: var(--bsm3-text-body-use-on-reading-text);
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
}
.rm-claude-box .rm-open-pill {
    border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    background-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general);
    font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4);
}


/* ---------- Road Map V2 (1 Oct 2026, Chris): clear step names, sign-off, key, close, numbered points ---------- */
/* "Finished - needs sign-off" and the module "to sign off" chip: waiting on Chris, so the Sleep purple */
.rm-chip-status-done,
.rm-chip-signoff {
    border-color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
    background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background);
    color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon);
}

/* one-line key under the overall counter */
.rm-key {
    margin: 0;
    color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

/* meaning of the chosen step, under each Status / Approval box */
.rm-ctl-meaning {
    max-width: var(--bsm3-width-narrow);
    color: var(--bsm3-color-ink3-lavender-gray-9D9BBF-use-on-secondary-text);
    font-size: var(--bsm3-text-small-12px-use-on-text);
}

/* Close button(s) inside an opened item */
.rm-item-topbar {
    gap: var(--bsm3-space-sm);
}

/* numbered points */
.rm-text-olist li {
    margin-bottom: var(--bsm3-space-xs);
}