/* ==========================================================================
   ATS Resume Builder - builder.css
   Everything inside #resume-builder-app: sticky toolbar, mobile tab bar
   (hidden here, shown by responsive.css), the three-panel workspace
   (Edit / Preview / ATS Check), the ATS panel's desktop drawer
   treatment, the mobile bottom action bar (hidden here, shown by
   responsive.css), and the shared modal. Relies entirely on the tokens
   defined in main.css. Desktop/base rules live here; responsive.css only
   ever overrides what changes at narrower breakpoints, so the two never
   duplicate a full ruleset.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. App shell
   ------------------------------------------------------------------------- */
.rb-app {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--rb-topbar-height));
    overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   2. Sticky toolbar
   ------------------------------------------------------------------------- */
.rb-toolbar {
    position: sticky;
    top: var(--rb-topbar-height);
    z-index: var(--rb-z-sticky-toolbar);
    display: flex;
    align-items: center;
    gap: var(--rb-space-3);
    min-height: var(--rb-builder-toolbar-height);
    padding: var(--rb-space-2) var(--rb-space-3);
    background: var(--rb-color-surface);
    border-bottom: 1px solid var(--rb-color-border);
    box-shadow: var(--rb-shadow-card);
}

.rb-toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
}

.rb-toolbar-group--actions {
    margin-left: auto;
}

.rb-save-status {
    margin: 0 0 0 auto;
    padding: 0;
    font-size: 0.82rem;
    color: var(--rb-color-muted);
    white-space: nowrap;
}

.rb-toolbar-group--actions ~ .rb-save-status,
.rb-save-status ~ .rb-toolbar-group--actions {
    margin-left: 0;
}

/* -------------------------------------------------------------------------
   3. Buttons + icons
   ------------------------------------------------------------------------- */
.rb-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rb-space-2);
    min-height: 38px;
    min-width: 38px;
    padding: 8px var(--rb-space-3);
    border: 1px solid transparent;
    border-radius: var(--rb-radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--rb-color-surface-muted);
    color: var(--rb-color-text);
    white-space: nowrap;
    transition: background-color var(--rb-transition-fast), border-color var(--rb-transition-fast),
        color var(--rb-transition-fast), opacity var(--rb-transition-fast);
}

.rb-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* .rb-btn's own unconditional "display: inline-flex" above is an author
   rule, so it beats the browser's built-in "[hidden] { display: none }"
   rule at equal specificity (both are single-selector, and author rules
   always win over the UA stylesheet) - without this override, setting
   .hidden = true on any .rb-btn (e.g. skills-manager.js hiding the
   rename button on non-custom categories) would silently do nothing.
   Two-selector specificity here (.rb-btn[hidden]) is what actually wins. */
.rb-btn[hidden] {
    display: none;
}

.rb-btn--primary {
    background: var(--rb-color-primary);
    color: var(--rb-color-inverse);
}

.rb-btn--primary:hover:not(:disabled) {
    background: var(--rb-color-primary-dark);
}

.rb-btn--secondary {
    background: var(--rb-color-secondary);
    color: var(--rb-color-inverse);
}

.rb-btn--ghost {
    background: transparent;
    border-color: var(--rb-color-border);
    color: var(--rb-color-muted);
}

.rb-btn--ghost:hover:not(:disabled) {
    border-color: var(--rb-color-primary);
    color: var(--rb-color-primary);
}

.rb-btn--icon {
    background: transparent;
    border-color: var(--rb-color-border);
    color: var(--rb-color-muted);
    padding: 8px;
}

.rb-btn--icon:hover:not(:disabled) {
    border-color: var(--rb-color-primary);
    color: var(--rb-color-primary);
}

.rb-btn--danger-ghost {
    background: transparent;
    border-color: var(--rb-color-error);
    color: var(--rb-color-error);
    min-height: 32px;
    font-size: 0.78rem;
}

.rb-btn--danger-ghost:hover:not(:disabled) {
    background: var(--rb-color-error-soft);
}

.rb-btn[aria-expanded="true"],
.rb-btn.is-active {
    background: var(--rb-color-primary-soft);
    border-color: var(--rb-color-primary);
    color: var(--rb-color-primary-dark);
}

/* -------------------------------------------------------------------------
   4. Mobile tab bar (hidden on desktop - see responsive.css)
   ------------------------------------------------------------------------- */
.rb-mobile-tabs {
    display: none;
    position: sticky;
    top: calc(var(--rb-topbar-height) + var(--rb-builder-toolbar-height));
    z-index: var(--rb-z-sticky-toolbar);
    height: var(--rb-mobile-tabs-height);
    background: var(--rb-color-surface);
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-mobile-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--rb-color-muted);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.rb-mobile-tab.is-active {
    color: var(--rb-color-primary);
    border-bottom-color: var(--rb-color-primary);
}

/* -------------------------------------------------------------------------
   5. Workspace grid: Edit (sidebar + editor) | Preview
   ------------------------------------------------------------------------- */
.rb-workspace {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--rb-space-3);
    padding: var(--rb-space-3);
    min-height: 0;
}

.rb-panel {
    min-height: 0;
}

.rb-panel--edit {
    display: grid;
    grid-template-columns: var(--rb-sidebar-width) minmax(0, 1fr);
    gap: var(--rb-space-3);
    min-height: 0;
}

/* -------------------------------------------------------------------------
   6. Sidebar
   ------------------------------------------------------------------------- */
.rb-sidebar {
    display: flex;
    flex-direction: column;
    padding: var(--rb-space-3);
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    box-shadow: var(--rb-shadow-card);
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
}

.rb-sidebar-heading {
    margin: 0 0 var(--rb-space-2);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rb-color-muted);
}

.rb-sidebar-help {
    margin: 0 0 var(--rb-space-2);
    color: var(--rb-color-muted);
    font-size: 0.72rem;
}

.rb-section-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rb-section-nav-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: var(--rb-radius-sm);
}

.rb-section-nav-item.is-dragging {
    opacity: 0.45;
}

.rb-section-nav-item.is-hidden-section {
    background: var(--rb-color-surface-muted);
}

.rb-section-nav-main {
    min-width: 0;
}

.rb-section-nav-btn {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rb-radius-sm);
    color: var(--rb-color-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.rb-section-nav-btn span,
.rb-section-status {
    display: block;
}

.rb-section-status {
    margin-top: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--rb-color-muted);
}

.rb-section-status[data-status="complete"] { color: var(--rb-color-success, #166534); }
.rb-section-status[data-status="incomplete"] { color: var(--rb-color-warning-dark, #92400e); }

.rb-section-visibility {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px 4px;
    font-size: 0.68rem;
    color: var(--rb-color-muted);
}

.rb-section-visibility span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rb-section-locked {
    display: block;
    padding: 0 10px 4px;
    color: var(--rb-color-muted);
    font-size: 0.68rem;
}

.rb-section-order-actions {
    display: grid;
    grid-template-columns: repeat(2, 26px);
    gap: 2px;
}

.rb-section-order-actions[hidden] {
    display: none;
}

.rb-section-move {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-color-surface);
    color: var(--rb-color-text);
    cursor: pointer;
}

.rb-section-move:hover:not(:disabled) {
    border-color: var(--rb-color-primary);
    color: var(--rb-color-primary);
}

.rb-section-move:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.rb-drag-handle {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--rb-color-muted);
    line-height: 12px;
    cursor: grab;
}

.rb-section-nav-btn:hover {
    background: var(--rb-color-surface-muted);
}

.rb-section-nav-btn.is-active,
.rb-section-nav-btn[aria-current="true"] {
    background: var(--rb-color-primary-soft);
    border-color: var(--rb-color-primary);
    color: var(--rb-color-primary-dark);
    font-weight: 700;
}

/* Fresher-mode prominence for Projects/Internships (see
   assets/js/form-manager.js's updateModeRecommendations). Stacks with
   .is-active/[aria-current] rather than replacing them, so the
   currently-open section still reads as "open" even while emphasized. */
.rb-section-nav-btn.is-mode-emphasized {
    border-color: var(--rb-color-secondary);
    color: var(--rb-color-secondary);
    font-weight: 700;
}

.rb-section-nav-btn.is-mode-emphasized::after {
    content: "\2605";
    margin-left: 6px;
    font-size: 0.75em;
}

/* -------------------------------------------------------------------------
   7. Editor panel / form fields
   ------------------------------------------------------------------------- */
.rb-editor-panel {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
    padding: var(--rb-space-4);
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    box-shadow: var(--rb-shadow-card);
    overflow-y: auto;
    scroll-behavior: smooth;
}

.rb-form-section {
    padding: 0;
    border: 0;
    margin: 0;
    scroll-margin-top: var(--rb-space-3);
}

.rb-form-section h2 {
    font-size: 1rem;
    padding-bottom: var(--rb-space-2);
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-form-section--placeholder {
    opacity: 0.85;
}

.rb-section-coming-soon {
    margin: 0;
    padding: var(--rb-space-3);
    background: var(--rb-color-surface-muted);
    border: 1px dashed var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
    color: var(--rb-color-muted);
    font-size: 0.85rem;
}

.rb-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rb-space-3);
}

.rb-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
    margin-bottom: var(--rb-space-3);
}

.rb-field input,
.rb-field textarea,
.rb-field select {
    min-width: 0;
    max-width: 100%;
}

.rb-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--rb-space-2);
}

.rb-field label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rb-color-text);
}

.rb-field input[type="text"],
.rb-field input[type="email"],
.rb-field input[type="tel"],
.rb-field input[type="url"],
.rb-field input[type="month"],
.rb-field textarea {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--rb-color-text);
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
}

.rb-field textarea {
    resize: vertical;
}

.rb-field input:focus-visible,
.rb-field textarea:focus-visible {
    outline: 3px solid var(--rb-color-focus);
    outline-offset: 1px;
    border-color: var(--rb-color-primary);
}

.rb-field-hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--rb-color-muted);
}

.rb-field-hint.is-out-of-range {
    color: var(--rb-color-warning);
    font-weight: 700;
}

.rb-field-required {
    color: var(--rb-color-error);
}

.rb-field-error {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rb-color-error);
}

.rb-field-error[hidden] {
    display: none;
}

.rb-field input[aria-invalid="true"],
.rb-field textarea[aria-invalid="true"] {
    border-color: var(--rb-color-error);
}

/* Resume-mode selector (Personal Details section) ------------------- */
.rb-resume-mode-field {
    margin-bottom: var(--rb-space-4);
    padding-bottom: var(--rb-space-3);
    border-bottom: 1px dashed var(--rb-color-border);
}

.rb-field-label-static {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rb-color-text);
}

.rb-segmented-control {
    display: inline-flex;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-pill);
    overflow: hidden;
}

.rb-segmented-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rb-segmented-option span {
    display: block;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rb-color-muted);
    cursor: pointer;
}

.rb-segmented-option input:checked + span {
    background: var(--rb-color-primary);
    color: var(--rb-color-inverse);
}

.rb-segmented-option input:focus-visible + span {
    outline: 3px solid var(--rb-color-focus);
    outline-offset: -3px;
}

/* Summary / Career Objective section extras -------------------------- */
.rb-warning-banner {
    margin: 0 0 var(--rb-space-3);
    padding: var(--rb-space-2) var(--rb-space-3);
    background: var(--rb-color-warning-soft);
    border: 1px solid var(--rb-color-warning);
    border-radius: var(--rb-radius-sm);
    color: var(--rb-color-warning);
    font-size: 0.82rem;
    font-weight: 600;
}

.rb-warning-banner[hidden] {
    display: none;
}

.rb-recommend-hint {
    margin: 0 0 var(--rb-space-2);
}

.rb-recommend-hint.is-recommended {
    color: var(--rb-color-primary-dark);
    font-weight: 700;
}

.rb-recommend-hint.is-recommended::before {
    content: "\2605 ";
}

.rb-section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rb-space-3);
    padding-bottom: var(--rb-space-2);
    margin-bottom: var(--rb-space-2);
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-section-heading-row h2 {
    padding-bottom: 0;
    border-bottom: 0;
}

.rb-visibility-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rb-color-muted);
    cursor: pointer;
}

/* Non-blocking sensitive-personal-data advisory (Achievements/Custom
   Section descriptions, Additional Information's free-text fields) -
   deliberately styled as a warning, not an error, since nothing here is
   actually invalid - see validation.js's detectSensitiveData. */
.rb-sensitive-warning {
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--rb-color-warning-soft);
    border: 1px solid var(--rb-color-warning);
    border-radius: var(--rb-radius-sm);
    color: var(--rb-color-warning);
    font-weight: 600;
}

.rb-sensitive-warning[hidden] {
    display: none;
}

.rb-repeatable-entry {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    padding: var(--rb-space-3);
    margin: 0 0 var(--rb-space-3);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-color-surface-muted);
}

.rb-repeatable-entry:last-child {
    margin-bottom: 0;
}

.rb-add-entry-btn {
    align-self: flex-start;
}

/* Work Experience entries ------------------------------------------- */
.rb-experience-entry {
    padding: 0;
    overflow: hidden;
}

.rb-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-2);
    padding: var(--rb-space-2) var(--rb-space-3);
    background: var(--rb-color-surface);
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-entry-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px;
    background: none;
    border: 0;
    color: var(--rb-color-text);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.rb-entry-summary-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-entry-collapse-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform var(--rb-transition-fast);
}

.rb-experience-entry.is-collapsed .rb-entry-collapse-icon {
    transform: rotate(-90deg);
}

.rb-entry-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.rb-entry-controls .rb-btn--icon {
    min-height: 32px;
    min-width: 32px;
    padding: 6px;
}

.rb-entry-controls .rb-btn--icon .rb-icon {
    width: 15px;
    height: 15px;
}

.rb-entry-body {
    padding: var(--rb-space-3);
}

.rb-experience-entry.is-collapsed .rb-entry-body {
    display: none;
}

.rb-entry-date-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rb-entry-date-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-bullets-block {
    margin-top: var(--rb-space-2);
}

.rb-bullets-list {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-2);
    margin: var(--rb-space-2) 0;
    padding: 0;
    list-style: none;
}

.rb-bullet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--rb-space-2);
    padding: var(--rb-space-2);
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
}

.rb-bullet-field {
    display: block;
}

.rb-bullet-textarea {
    width: 100%;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--rb-color-text);
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
    resize: vertical;
}

.rb-bullet-controls {
    display: flex;
    gap: 4px;
}

/* Custom Sections: items nest one level inside their section, so this
   list gets a left border + indent to read as "belonging to" the
   section card above it, distinguishing the nesting visually without
   a third level of card-in-card styling. */
.rb-custom-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
    margin: var(--rb-space-3) 0;
    padding-left: var(--rb-space-3);
    border-left: 3px solid var(--rb-color-border);
}

.rb-custom-items-list:empty {
    margin: 0;
    padding: 0;
    border-left: 0;
}

.rb-bullet-controls .rb-btn--icon {
    min-height: 30px;
    min-width: 30px;
    padding: 5px;
}

.rb-bullet-controls .rb-btn--icon .rb-icon {
    width: 14px;
    height: 14px;
}

.rb-bullet-controls .rb-btn--danger-ghost {
    min-height: 30px;
}

.rb-bullet-hint {
    grid-column: 1 / -1;
}

.rb-bullet-hint[hidden] {
    display: none;
}

/* Technical Skills / Soft Skills --------------------------------------- */
.rb-skill-category-picker {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-2);
    margin-bottom: var(--rb-space-3);
}

.rb-skill-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rb-space-2);
}

.rb-skill-preset-chip {
    padding: 5px 12px;
    background: var(--rb-color-surface);
    border: 1px dashed var(--rb-color-border);
    border-radius: var(--rb-radius-pill);
    color: var(--rb-color-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.rb-skill-preset-chip:hover {
    border-style: solid;
    border-color: var(--rb-color-primary);
    background: var(--rb-color-primary-soft);
}

.rb-skill-custom-add {
    display: flex;
    align-items: flex-end;
    gap: var(--rb-space-2);
}

.rb-skill-custom-add .rb-field {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.rb-skill-categories-list {
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-3);
}

.rb-skill-category {
    padding: var(--rb-space-3);
    background: var(--rb-color-surface-muted);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
}

.rb-skill-category-header {
    display: flex;
    align-items: center;
    gap: var(--rb-space-2);
    margin-bottom: var(--rb-space-2);
}

.rb-skill-category-name {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--rb-color-text);
}

.rb-skill-category-name-input {
    flex: 1 1 auto;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    border: 1px solid var(--rb-color-primary);
    border-radius: var(--rb-radius-sm);
}

.rb-skill-category-header .rb-entry-controls {
    flex-shrink: 0;
}

.rb-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--rb-space-2);
    min-height: 0;
}

.rb-skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-pill);
    font-size: 0.82rem;
    color: var(--rb-color-text);
}

.rb-skill-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--rb-color-surface-muted);
    border: 0;
    border-radius: 50%;
    color: var(--rb-color-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.rb-skill-tag-remove:hover {
    background: var(--rb-color-error-soft);
    color: var(--rb-color-error);
}

.rb-skill-tag-input {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
}

/* Printable resume: one plain-text line per skill category, no bars,
   ratings, or icons (project rule 19/20). */
.rb-resume-skill-category-line {
    margin: 0 0 4px;
}

/* -------------------------------------------------------------------------
   8. Preview panel + the A4 resume document
   ------------------------------------------------------------------------- */
.rb-preview-panel {
    display: flex;
    flex-direction: column;
    background: var(--rb-color-surface);
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius);
    box-shadow: var(--rb-shadow-card);
    overflow: hidden;
    min-height: 0;
}

.rb-preview-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rb-space-3);
    padding: var(--rb-space-2) var(--rb-space-3);
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-preview-panel-header h2 {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rb-color-muted);
}

.rb-preview-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--rb-color-muted);
}

.rb-preview-settings {
    display: grid;
    gap: var(--rb-space-3);
    padding-top: var(--rb-space-3);
}

.rb-preview-settings[hidden] {
    display: none;
}

.rb-format-panel {
    position: relative;
}

.rb-format-heading {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rb-color-primary);
}

.rb-format-panel {
    width: min(680px, 100%);
}

.rb-preview-settings label,
.rb-template-picker legend {
    display: grid;
    gap: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rb-color-muted);
}

.rb-preview-settings select,
.rb-preview-settings input[type="color"] {
    min-height: 30px;
    padding: 3px 24px 3px 7px;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-small);
    background: var(--rb-color-surface);
    color: var(--rb-color-text);
    font: inherit;
}

.rb-template-picker {
    margin: 0;
    padding: 0;
    border: 0;
}

.rb-template-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: var(--rb-space-2);
}

.rb-template-card {
    position: relative;
    padding: var(--rb-space-2);
    border: 2px solid var(--rb-color-border);
    border-radius: var(--rb-radius-small);
    background: var(--rb-color-surface);
    cursor: pointer;
}

.rb-template-card:has(input:focus-visible) {
    outline: 3px solid var(--rb-color-focus);
    outline-offset: 2px;
}

.rb-template-card.is-active {
    border-color: var(--rb-color-primary);
    box-shadow: 0 0 0 1px var(--rb-color-primary);
}

.rb-template-card input {
    position: absolute;
    opacity: 0;
}

.rb-template-card-preview {
    display: grid;
    gap: 3px;
    height: 38px;
    margin-bottom: 5px;
    padding: 6px;
    background: #fff;
    border: 1px solid #cbd5e1;
}

.rb-template-card-preview i {
    display: block;
    height: 2px;
    background: #64748b;
}

.rb-template-card small {
    display: block;
    font-weight: 400;
}

.rb-format-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: var(--rb-space-2);
}

.rb-range-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rb-range-control input { min-width: 0; }
.rb-range-control output { min-width: 48px; color: var(--rb-color-text); }

.rb-format-warnings {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--rb-color-warning-dark, #92400e);
    font-size: 0.78rem;
}

.rb-format-warnings:not(:has(li:not([hidden]))) {
    display: none;
}

.rb-preview-surface {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    padding: var(--rb-space-4);
    background: var(--rb-color-surface-muted);
}

.rb-preview-placeholder {
    color: var(--rb-color-muted);
    font-size: 0.9rem;
}

/* The printable resume document: an A4-proportioned page, deliberately
   plain and black-on-white, single column, free of decorative graphics
   (project rule 19/20). Width scales down to fit narrower preview
   columns; height grows past one A4-height with its own scrollbar
   rather than clipping content, since resume length varies. */
.rb-print-area {
    width: 100%;
    max-width: var(--rb-a4-width);
    min-height: var(--rb-page-height, 1123px);
    margin: 0 auto;
    background-color: #ffffff;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--rb-page-height, 1123px) - 2px),
        #cbd5e1 calc(var(--rb-page-height, 1123px) - 2px),
        #cbd5e1 var(--rb-page-height, 1123px)
    );
    color: #111111;
    padding: 0;
    box-shadow: var(--rb-shadow-card);
    overflow-wrap: anywhere;
    transition: min-height 120ms ease;
}

.rb-resume-doc {
    font-family: var(--rb-resume-font, Arial, sans-serif);
    font-size: var(--rb-body-size, 10.5pt);
    line-height: var(--rb-line-height, 1.35);
    padding: var(--rb-page-margin, 0.65in);
}

.rb-resume[data-paper-size="A4"] { max-width: 210mm; }
.rb-resume[data-paper-size="Letter"] { max-width: 8.5in; }

.rb-resume-header {
    margin-bottom: var(--rb-space-3);
    padding-bottom: var(--rb-space-2);
    border-bottom: 2px solid #111111;
}

.rb-resume-header h1 {
    margin: 0;
    font-size: 1.6rem;
}

.rb-resume-job-title {
    margin: 2px 0;
    font-weight: 600;
}

.rb-resume-contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--rb-space-2);
    margin: 4px 0 0;
    font-size: 0.85rem;
}

.rb-resume-contact-line span:empty {
    display: none;
}

.rb-resume-contact-line span:not([hidden]):not(:last-child)::after {
    content: "\2022";
    margin-left: var(--rb-space-2);
    color: #555555;
}

.rb-resume-contact-line a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rb-preserve-lines {
    white-space: pre-line;
}

.rb-resume-section {
    margin-bottom: var(--rb-space-3);
}

.rb-resume-section h2 {
    margin: 0 0 6px;
    font-size: var(--rb-heading-size, 14pt);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #999999;
    padding-bottom: 2px;
}

.rb-resume--modern-ats .rb-resume-section h2,
.rb-resume--modern-ats .rb-resume-header {
    border-color: var(--rb-accent, #1f4e79);
}

.rb-resume--modern-ats .rb-resume-section h2 {
    color: var(--rb-accent, #1f4e79);
}

.rb-resume[data-bullet-style="disc"] ul { list-style-type: disc; }
.rb-resume[data-bullet-style="circle"] ul { list-style-type: circle; }
.rb-resume[data-bullet-style="square"] ul { list-style-type: square; }
.rb-resume[data-bullet-style="dash"] ul { list-style-type: "–  "; }

.rb-resume-entry {
    margin-bottom: var(--rb-space-2);
    break-inside: avoid;
}

.rb-resume-entry-title-line {
    display: flex;
    justify-content: space-between;
    gap: var(--rb-space-2);
    font-weight: 700;
    font-size: 1em;
    margin: 0;
}

.rb-resume-entry-subtitle-line {
    display: flex;
    justify-content: space-between;
    gap: var(--rb-space-2);
    font-style: italic;
    color: #333333;
}

.rb-resume-entry-tech-line {
    margin: 2px 0 0;
    font-size: 0.88em;
    color: #333333;
}

.rb-resume-entry ul {
    margin: 4px 0 0;
    padding-left: 1.1rem;
}

.rb-resume-achievement-list {
    margin: 0;
    padding-left: 1.2rem;
}

.rb-resume-achievement-list > li {
    padding-left: 2px;
}

.rb-skill-tag,
.rb-skill-category-name,
.rb-keyword-chip,
.rb-resume-contact-line,
.rb-resume-entry {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Template variants: presentation only, never the underlying structure
   or data-field vocabulary (see templates/*.php). */
.rb-resume--modern-ats .rb-resume-header {
    border-bottom-color: var(--rb-accent, #1f4e79);
}

.rb-resume--modern-ats .rb-resume-section h2 {
    color: var(--rb-accent, #1f4e79);
    border-bottom-color: var(--rb-accent, #1f4e79);
}

.rb-resume--compact-professional .rb-resume-section {
    margin-bottom: var(--rb-space-2);
}

.rb-resume--fresher-resume .rb-resume-header {
    text-align: center;
    border-bottom-color: var(--rb-accent, #1f4e79);
}

.rb-resume--fresher-resume .rb-resume-contact-line {
    justify-content: center;
}

/* -------------------------------------------------------------------------
   9. ATS panel - desktop slide-in drawer (mobile treatment overrides
   this back to a normal in-flow tab panel - see responsive.css)
   ------------------------------------------------------------------------- */
.rb-panel--ats {
    position: fixed;
    top: calc(var(--rb-topbar-height) + var(--rb-builder-toolbar-height));
    right: 0;
    bottom: 0;
    z-index: var(--rb-z-drawer);
    display: flex;
    flex-direction: column;
    gap: var(--rb-space-4);
    width: var(--rb-ats-drawer-width);
    max-width: 100%;
    padding: var(--rb-space-3);
    background: var(--rb-color-surface);
    box-shadow: var(--rb-shadow-card);
    border-left: 1px solid var(--rb-color-border);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--rb-transition-medium), visibility var(--rb-transition-medium);
}

.rb-panel--ats.is-open {
    transform: translateX(0);
    visibility: visible;
}

.rb-ats-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--rb-z-drawer-backdrop);
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--rb-transition-medium), visibility var(--rb-transition-medium);
}

.rb-ats-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.rb-ats-block h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rb-color-muted);
}

.rb-ats-score-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.rb-ats-score-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--rb-color-primary-dark);
}

.rb-ats-score-max {
    font-size: 0.9rem;
    color: var(--rb-color-muted);
}

.rb-ats-score-meter {
    height: 10px;
    margin-top: var(--rb-space-2);
    overflow: hidden;
    border-radius: var(--rb-radius-pill);
    background: var(--rb-color-border);
}

.rb-ats-score-meter span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--rb-color-primary);
    transition: width 180ms ease;
}

.rb-ats-score-label {
    margin-top: 2px;
    font-size: 0.82rem;
    color: var(--rb-color-muted);
}

.rb-ats-block h3 {
    margin: var(--rb-space-3) 0 var(--rb-space-1);
    font-size: 0.78rem;
    color: var(--rb-color-text);
}

.rb-ats-category-scores {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
}

.rb-ats-category-scores li {
    display: flex;
    justify-content: space-between;
    gap: var(--rb-space-2);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-ats-checks {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
}

.rb-ats-checks--passed { color: var(--rb-color-success, #166534); }
.rb-ats-checks--warnings { color: var(--rb-color-warning-dark, #92400e); }

.rb-writing-warnings {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.76rem;
}

.rb-writing-warnings li {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border-left: 3px solid var(--rb-color-warning, #d97706);
    background: #fffbeb;
    color: #78350f;
}

.rb-writing-warnings small {
    color: var(--rb-color-text);
}

.rb-writing-disclaimer {
    color: var(--rb-color-muted);
    font-size: 0.7rem;
}

.rb-ats-disclaimer {
    margin: var(--rb-space-3) 0 0;
    padding: var(--rb-space-2);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-color-surface-muted);
    color: var(--rb-color-muted);
    font-size: 0.72rem;
}

.rb-ats-suggestions {
    margin: var(--rb-space-2) 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--rb-color-text);
}

.rb-ats-suggestion-link {
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--rb-color-primary-dark);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rb-ats-suggestion-link:hover {
    color: var(--rb-color-primary);
}

.rb-ats-checklist {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
}

.rb-ats-checklist li {
    display: flex;
    justify-content: space-between;
    gap: var(--rb-space-2);
    padding: 5px 7px;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
}

.rb-ats-checklist li strong {
    font-size: 0.7rem;
}

.rb-ats-checklist [data-checklist-state="complete"] strong {
    color: var(--rb-color-success, #166534);
}

.rb-ats-checklist [data-checklist-state="warning"] strong {
    color: var(--rb-color-warning-dark, #92400e);
}

.rb-ats-checklist [data-checklist-state="missing"] strong {
    color: var(--rb-color-danger, #b91c1c);
}

.rb-keyword-results {
    margin-top: var(--rb-space-3);
    font-size: 0.85rem;
}

.rb-keyword-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rb-space-2);
    margin-top: var(--rb-space-2);
}

.rb-keyword-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.rb-keyword-summary p {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--rb-color-border);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-color-surface-muted);
}

.rb-keyword-summary strong {
    font-size: 1rem;
    color: var(--rb-color-primary-dark);
}

.rb-keyword-summary span {
    color: var(--rb-color-muted);
    font-size: 0.68rem;
}

.rb-keyword-results section h3 {
    margin: var(--rb-space-3) 0 5px;
    font-size: 0.76rem;
}

.rb-keyword-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rb-keyword-results-placeholder {
    color: var(--rb-color-muted);
}

.rb-keyword-chip {
    display: inline-block;
    margin: 0;
    padding: 2px 10px;
    border: 0;
    border-radius: var(--rb-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: copy;
}

.rb-keyword-chip--matched {
    background: var(--rb-color-success-soft);
    color: var(--rb-color-success);
}

.rb-keyword-chip--missing {
    background: var(--rb-color-error-soft);
    color: var(--rb-color-error);
}

.rb-keyword-chip--frequent {
    background: var(--rb-color-primary-soft);
    color: var(--rb-color-primary-dark);
}

.rb-keyword-chip--phrase {
    background: #ede9fe;
    color: #5b21b6;
}

.rb-keyword-chip--resume-only {
    background: var(--rb-color-surface-muted);
    color: var(--rb-color-muted);
}

.rb-keyword-empty {
    margin: 0;
    color: var(--rb-color-muted);
}

.rb-keyword-truth-warning {
    margin: var(--rb-space-3) 0 0;
    padding: var(--rb-space-2);
    border-left: 3px solid var(--rb-color-warning, #d97706);
    background: #fffbeb;
    color: #78350f;
    font-size: 0.75rem;
}

@media (max-width: 480px) {
    .rb-keyword-summary {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   10. Mobile bottom action bar (hidden on desktop - see responsive.css)
   ------------------------------------------------------------------------- */
.rb-mobile-action-bar {
    display: none;
    position: sticky;
    bottom: 0;
    z-index: var(--rb-z-sticky-toolbar);
    height: var(--rb-mobile-actionbar-height);
    background: var(--rb-color-surface);
    border-top: 1px solid var(--rb-color-border);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.08);
}

.rb-action-bar-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    background: none;
    border: none;
    color: var(--rb-color-muted);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.rb-action-bar-btn--primary {
    color: var(--rb-color-primary);
}

/* -------------------------------------------------------------------------
   11. Modal
   ------------------------------------------------------------------------- */
.rb-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--rb-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rb-space-3);
    background: rgba(15, 23, 42, 0.5);
}

.rb-modal-overlay[hidden] {
    display: none;
}

body.rb-modal-open {
    overflow: hidden;
}

.rb-modal {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--rb-color-surface);
    border-radius: var(--rb-radius);
    box-shadow: var(--rb-shadow-card);
}

.rb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rb-space-3) var(--rb-space-4);
    border-bottom: 1px solid var(--rb-color-border);
}

.rb-modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.rb-modal-close {
    background: none;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--rb-color-muted);
}

.rb-modal-body {
    padding: var(--rb-space-4);
    white-space: pre-line;
}

.rb-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rb-space-2);
    padding: var(--rb-space-3) var(--rb-space-4);
    border-top: 1px solid var(--rb-color-border);
}