/*
 * CV maker - builder and landing styles.
 *
 * Scoped to the .xrb (builder) and .xrl (landing/list) roots so nothing here can reach the rest of
 * the public site, which carries its own stylesheet. The rendered resume inside the preview iframe
 * is styled entirely by its own template sheet - this file never reaches into it, which is what
 * keeps "what you see is what you download" true.
 *
 * Left alongside the legacy cv.css until Phase 8 removes the old app; the two never load together.
 */

/* Both roots declare the tokens. The landing page carries .xrl, not .xrb, so scoping them to the
   builder alone left every .xrl rule resolving --xrb-accent to nothing: a Build-my-resume button
   with no fill, invisible card borders and icons falling back to black. */
.xrb,
.xrl {
    --xrb-line: #dde1e6;
    --xrb-bg: #f5f6f8;

    /* The site's own brand colours, not a blue of our own. --color1 (blue) and --color2 (red) are
       set by the theme layer for every domain and both light and dark mode, so a builder that
       hard-codes its own blue is the one part of the page that goes out of date when the brand
       does. The fallbacks are only there for a page that somehow loads this sheet without the
       theme - they are the current values, not a second opinion. */
    --xrb-accent: var(--color1, #0c5da9);
    --xrb-accent-light: var(--color1_light, #0f77d9);
    --xrb-on-accent: var(--color1_contrast, #ffffff);

    /* Red is the brand's second colour, used where something is destructive or needs attention -
       never as decoration. */
    --xrb-alert: var(--color2, #be1325);
    --xrb-alert-light: var(--color2_light, #e81c31);
    --xrb-on-alert: var(--color2_contrast, #ffffff);

    --xrb-text: #23282d;
    --xrb-muted: #6b7280;

    display: flex;
    flex-direction: column;
    min-height: 70vh;
    color: var(--xrb-text);
    font-size: 14px;
}

/* ---------------------------------------------------------------- hero header */

/* The one row that says what this page is. White, quiet, and carrying only the two actions a
   visitor came for - everything else moved into the tool column, where it can sit open beside the
   preview instead of dropping over it. */
.xrb-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--xrb-line);
    background: #fff;
}

.xrb-hero-title {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 3px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--xrb-text);
}

/* Kept for any markup that still puts an icon inside the heading. */
.xrb-hero-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    /* Strong theme colour as the tile, its contrast colour as the glyph. */
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-size: 15px;
}

.xrb-hero-sub {
    margin: 0;
    max-width: 620px;
    font-size: 13px;
    color: var(--xrb-muted);
}

.xrb-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

/* ---------------------------------------------------------------- toolbar */

.xrb-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px;
    border-bottom: 1px solid var(--xrb-line);
    background: #fafbfc;
}

.xrb-bar-icon { color: var(--xrb-muted); font-size: 12px; }

.xrb-bar-left,
.xrb-bar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.xrb-title {
    min-width: 220px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
    color: var(--xrb-text);
}

.xrb-title:hover { border-color: var(--xrb-line); }
.xrb-title:focus { border-color: var(--xrb-accent); background: #fff; outline: none; }

/* The save state is the only feedback an autosaving editor gives, so it has to be readable at a
   glance without pulling the eye away from the field being typed in. */
.xrb-state { font-size: 12px; color: var(--xrb-muted); }
.xrb-state--busy { color: var(--xrb-muted); }
.xrb-state--ok { color: #1a7f37; }
.xrb-state--error { color: var(--xrb-alert); font-weight: 600; }

.xrb-progress { display: flex; gap: 6px; align-items: center; }
.xrb-progress-bar {
    display: block;
    width: 90px;
    height: 7px;
    border-radius: 4px;
    background: #e6e8eb;
    overflow: hidden;
}
.xrb-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--xrb-accent);
    transition: width .25s ease;
}
.xrb-progress-num { font-size: 12px; color: var(--xrb-muted); }

.xrb-btn {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--xrb-accent);
    border-radius: 5px;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.xrb-btn { color: var(--xrb-on-accent); }
.xrb-btn:hover { background: var(--xrb-accent-light); border-color: var(--xrb-accent-light);
                 color: var(--xrb-on-accent); text-decoration: none; }
.xrb-btn--ghost { background: #fff; color: var(--xrb-accent); }
.xrb-btn--ghost:hover { background: #f0f4f8; border-color: var(--xrb-accent);
                        color: var(--xrb-accent); }

/* Destructive actions carry the brand red rather than a red of our own. */
.xrb-btn--danger { border-color: #d9dde2; background: #fff; color: var(--xrb-alert); }
.xrb-btn--danger:hover { border-color: var(--xrb-alert); background: #fdf2f3;
                         color: var(--xrb-alert); }
.xrb-btn--sm { padding: 4px 9px; font-size: 12px; }

.xrb-select,
.xrb-input {
    /* Without border-box the padding and border are added to the 100% width, which pushed the
       textarea 4px past the viewport on a phone and gave the whole page a horizontal scrollbar. */
    box-sizing: border-box;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--xrb-line);
    border-radius: 5px;
    background: #fff;
    font-size: 13px;
    color: var(--xrb-text);
}
.xrb-select:focus,
.xrb-input:focus { border-color: var(--xrb-accent); outline: none; }
.xrb-input--num { max-width: 90px; }
.xrb-textarea { min-height: 96px; resize: vertical; }

.xrb-field-inline { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--xrb-muted); }
.xrb-field-inline .xrb-select { width: auto; min-width: 150px; }

.xrb-notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 16px;
    border-bottom: 1px solid #f2e3b3;
    background: #fdf7e3;
    font-size: 13px;
}

/* A machine wrote this one. Warmer than an error and louder than the guest notice, because it is
   asking the client to do something before they send the document to an employer. */
/* Asking the client to do something before they send the file: the brand red's edge, not a
   colour of our own. */
.xrb-notice--review {
    border-bottom-color: var(--xrb-alert);
    background: #fdf2f3;
}
.xrb-notice--review > i { color: var(--xrb-alert); }

/* ---------------------------------------------------------------- design drawer */

/* Template gallery and theme controls. Collapsed by default: a client sets the look twice and
   then spends an hour typing, so this must not hold screen space it is not earning. */
.xrb-design {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 22px;
    padding: 14px;
    border-bottom: 1px solid var(--xrb-line);
    background: #fbfcfd;
}

.xrb-design-head {
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--xrb-muted);
}




.xrb-tag {
    padding: 1px 6px;
    border-radius: 9px;
    background: #eef1f4;
    font-size: 10px;
    color: var(--xrb-muted);
}
/* ATS-safe is the one property a client should be able to see without reading anything, because
   it is the difference between a resume a machine can read and one it silently drops. */
.xrb-tag--ats { background: #e7f4ea; color: #1a7f37; }

.xrb-input--color { height: 34px; padding: 3px; cursor: pointer; }
.xrb-range { width: 100%; }
.xrb-hint-inline { color: var(--xrb-muted); font-weight: 400; }

/* ---------------------------------------------------------------- profile review panel */

/* Both bridge directions render here: import offers what the CRM holds, push offers what the resume
   could give back. The old value and the new one are always shown side by side, because the whole
   promise of the bridge is that nothing changes without the client seeing what it replaces. */
.xrb-review {
    padding: 14px;
    border-bottom: 1px solid var(--xrb-line);
    background: #fbfcfd;
}

.xrb-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
}

.xrb-review-intro { margin-bottom: 12px; font-size: 13px; color: var(--xrb-muted); max-width: 720px; }

.xrb-review-rows {
    /* A cap, not a scroller for a handful of rows: it only bites on a long import list. */
    max-height: 62vh;
    overflow-y: auto;
    border: 1px solid var(--xrb-line);
    border-radius: 6px;
    background: #fff;
}

.xrb-review-row {
    display: grid;
    grid-template-columns: 22px minmax(120px, 1.1fr) minmax(0, 2fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 9px 12px;
    border-bottom: 1px solid #eef1f4;
    cursor: pointer;
}
.xrb-review-row:last-child { border-bottom: 0; }
.xrb-review-row:hover { background: #f7f9fb; }

.xrb-review-label { font-size: 13px; font-weight: 600; }

.xrb-review-vals {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: baseline;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

/* The value being replaced is struck through, so a row that overwrites something reads as a
   replacement rather than as an addition. */
.xrb-review-old { color: var(--xrb-muted); text-decoration: line-through; }
.xrb-review-old:empty::before { content: "(empty)"; text-decoration: none; }
.xrb-review-arrow { color: var(--xrb-muted); }
.xrb-review-new { color: var(--xrb-text); font-weight: 600; }

.xrb-review-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 11px; }
.xrb-review-empty { padding: 16px; color: var(--xrb-muted); font-size: 13px; }

@media (max-width: 767.98px) {
    .xrb-design { grid-template-columns: 1fr; gap: 16px; }
    .xrb-tpl { width: calc(50% - 4px); }
    .xrb-review-row { grid-template-columns: 22px minmax(0, 1fr); }
    .xrb-review-vals { grid-column: 2; }
}

/* ---------------------------------------------------------------- dropdown menus */

/* The download and assistant menus. Plain absolute positioning rather than a popover library: two
   menus do not justify a dependency, and a menu that closes when the page scrolls is not a bug
   worth importing code to avoid. */
.xrb-menu { position: relative; }

.xrb-menu-list {
    position: absolute;
    inset-inline-end: 0;
    z-index: 30;
    min-width: 260px;
    margin-top: 4px;
    padding: 5px;
    border: 1px solid var(--xrb-line);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.xrb-menu-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.xrb-menu-item:hover { background: #f2f6fa; text-decoration: none; }

.xrb-menu-title { display: block; font-size: 13px; font-weight: 600; color: var(--xrb-text); }
.xrb-menu-note { display: block; font-size: 11.5px; color: var(--xrb-muted); }

/* ---------------------------------------------------------------- assistant panel */

.xrb-ai,
.xrb-share {
    padding: 14px;
    border-bottom: 1px solid var(--xrb-line);
    background: #fbfcfd;
}

.xrb-ai-quota { margin-inline-start: auto; margin-inline-end: 10px; font-size: 11.5px; color: var(--xrb-muted); }

.xrb-ai-body { max-width: 760px; }
.xrb-ai-busy { color: var(--xrb-muted); font-size: 13px; }
.xrb-ai-error { color: var(--xrb-alert); font-size: 13px; }
.xrb-ai-ok { color: #1a7f37; font-size: 13px; }
.xrb-ai-note { font-size: 12.5px; color: var(--xrb-muted); }

.xrb-ai-text {
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--xrb-line);
    border-radius: 6px;
    background: #fff;
    font-size: 13.5px;
    line-height: 1.5;
}

.xrb-ai-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

/* One variant per row with its own accept button: the client is choosing between three lines, not
   reading a paragraph of options. */
.xrb-ai-variant {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.xrb-ai-variant .xrb-ai-text { flex: 1; margin: 0; }

.xrb-ai-score {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 12px;
    font-size: 34px;
    font-weight: 700;
    color: var(--xrb-accent);
}
.xrb-ai-score > span { font-size: 15px; font-weight: 400; color: var(--xrb-muted); }

.xrb-ai-group { margin-bottom: 12px; }
.xrb-ai-group-head {
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--xrb-muted);
}

.xrb-ai-list { margin: 0; padding-inline-start: 18px; font-size: 13px; }
.xrb-ai-list li { margin-bottom: 5px; }

/* A missing keyword is the actionable half of an ATS score, so it reads as a gap rather than as a
   badge the client has earned. */
.xrb-tag--missing { background: #fdf2f3; color: var(--xrb-alert); }

/* ---------------------------------------------------------------- share panel */

.xrb-share-new {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}
.xrb-share-new .xrb-field { margin: 0; min-width: 170px; }

.xrb-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #eef1f4;
}
.xrb-share-row:last-child { border-bottom: 0; }
.xrb-share-row .xrb-input { flex: 1; min-width: 220px; font-size: 12px; }
.xrb-share-meta { font-size: 11.5px; color: var(--xrb-muted); }

@media (max-width: 767.98px) {
    .xrb-menu-list { position: fixed; inset-inline: 10px; min-width: 0; }
    .xrb-ai-variant { flex-direction: column; }
    .xrb-share-new { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- three panes */

.xrb-main {
    display: grid;
    /* The tool column is wide enough for two controls per row: the design panel used to be seven
       full-width selects, which made the column a ladder you scrolled past to reach the sections. */
    grid-template-columns: 330px minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    background: var(--xrb-bg);
}

/* The three panes grow to their natural height and the page scrolls once.
   They used to scroll independently, which sounded tidy and read as three nested scrollbars - the
   browser's, the builder's and the column's - where a flick of the wheel moved whichever one the
   pointer happened to be over. The preview keeps its place by sticking instead of by scrolling. */
.xrb-side,
.xrb-editor,
.xrb-preview {
    min-width: 0;
}

.xrb-side {
    padding: 12px;
    border-right: 1px solid var(--xrb-line);
    background: #fff;
}

/* Each tool is its own titled box, open, in one column - so changing a colour and watching the
   preview move are the same glance. */
.xrb-group-box {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef1f4;
}
.xrb-group-box:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.xrb-group-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--xrb-muted);
}
.xrb-group-title > i { color: var(--xrb-accent); font-size: 12px; }

.xrb-group-hint { margin: 0 0 9px; font-size: 11.5px; line-height: 1.45; color: var(--xrb-muted); }


.xrb-nav-head {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--xrb-muted);
}

.xrb-nav-list { margin: 0; padding: 0; list-style: none; }

.xrb-nav-item {
    display: flex;
    gap: 6px;
    align-items: center;
    border-radius: 6px;
    padding: 1px 3px;
}
.xrb-nav-item:hover { background: #f4f6f8; }
.xrb-nav-item.is-active { background: #eaf1f8; }
/* A hidden section still shows in the navigator - it holds the owner's data and they need to be
   able to switch it back on - but it reads as switched off. */
.xrb-nav-item.is-hidden .xrb-nav-btn { color: var(--xrb-muted); text-decoration: line-through; }

.xrb-nav-grip { cursor: grab; color: #c3c8ce; font-size: 11px; letter-spacing: -2px; }
.xrb-nav-item--fixed .xrb-nav-grip { visibility: hidden; }

.xrb-nav-btn {
    flex: 1;
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 7px 2px;
    border: 0;
    background: none;
    font-size: 13px;
    text-align: start;
    color: var(--xrb-text);
    cursor: pointer;
}

/* The glyph carries the section faster than the word does, which matters now that all twelve are
   listed rather than only the ones a client switched on. */
.xrb-nav-icon {
    flex: none;
    width: 16px;
    font-size: 12px;
    text-align: center;
    color: var(--xrb-accent);
}
.xrb-nav-item.is-hidden .xrb-nav-icon { color: #b9c0c7; }

.xrb-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* How much the section holds. A number beats opening it to find out. */
.xrb-nav-count {
    flex: none;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    background: #eef2f6;
    font-size: 10.5px;
    color: var(--xrb-muted);
    text-align: center;
}

.xrb-nav-check { margin: 0; cursor: pointer; }
.xrb-nav-always { padding-inline-end: 4px; color: #c3c8ce; font-size: 10px; }
.xrb-nav-grip--empty { width: 9px; }

.xrb-nav-add { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--xrb-line); }

.xrb-todo { margin-top: 16px; font-size: 12px; color: var(--xrb-muted); }
.xrb-todo-head { margin-bottom: 4px; font-weight: 700; color: var(--xrb-text); }
.xrb-todo ul { margin: 0; padding-inline-start: 16px; }
.xrb-todo li { margin-bottom: 3px; }
.xrb-todo-done { color: #1a7f37; }

/* ---------------------------------------------------------------- design panel */

/* Two per row. Template, font, size, spacing, paper and language are all short choices - stacking
   them full-width wasted the column's height on six identical boxes. */
.xrb-design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-bottom: 12px;
}
.xrb-design-grid .xrb-field { margin-bottom: 0; min-width: 0; }
.xrb-design-grid .xrb-field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xrb-design-block { margin-bottom: 12px; }

.xrb-design-label {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--xrb-muted);
}
.xrb-design-label > i { color: var(--xrb-accent); font-size: 11px; }

/* The swatch grid: ten by ten, every colour dark enough to read on white. Collapsed by default -
   a hundred squares open at all times would dominate the column. */
.xrb-swatch-toggle {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-inline-start: auto;
    padding: 2px 7px;
    border: 1px solid var(--xrb-line);
    border-radius: 20px;
    background: #fff;
    font-size: 11px;
    color: var(--xrb-muted);
    cursor: pointer;
}
.xrb-swatch-toggle:hover { border-color: var(--xrb-accent); }

.xrb-swatch-current {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
}

.xrb-swatches {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    padding: 7px;
    border: 1px solid var(--xrb-line);
    border-radius: 7px;
    background: #fbfcfd;
}

.xrb-swatch {
    aspect-ratio: 1;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    /* No inner border by default: a hundred outlined squares read as a grid of boxes rather than as
       a range of colour. The selected one gets a ring instead. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.xrb-swatch:hover { transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, .3); }
.xrb-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--xrb-text); }

/* ---------------------------------------------------------------- section help + tools */

/* One line of advice under the section heading. Quiet enough to ignore once you know the section,
   present enough to answer "what goes in here" the first time. */
.xrb-pane-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: -6px 0 14px;
    padding: 9px 11px;
    border-inline-start: 3px solid var(--xrb-accent);
    border-radius: 0 6px 6px 0;
    background: #f5f8fc;
    font-size: 12.5px;
    line-height: 1.5;
    color: #47525d;
}
.xrb-pane-hint > i { margin-top: 2px; color: var(--xrb-accent); }

/* The assistant, where the work is. */
.xrb-pane-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-bottom: 16px;
}
.xrb-pane-tools-note { flex: 1; min-width: 220px; font-size: 11.5px; color: var(--xrb-muted); }

/* Before and after, so accepting a rewrite is a decision rather than a leap. */
.xrb-diff {
    margin-bottom: 9px;
    border: 1px solid var(--xrb-line);
    border-radius: 7px;
    overflow: hidden;
    font-size: 13px;
}
.xrb-diff-before,
.xrb-diff-after { padding: 8px 11px; line-height: 1.5; }
.xrb-diff-before { background: #fbfbfc; color: var(--xrb-muted); }
.xrb-diff-after { background: #f5faf6; border-top: 1px solid var(--xrb-line); }
.xrb-diff span {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .7;
}

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

/* A field whose answer is one of a few words, as buttons instead of a text box. The selected one is
   filled rather than outlined: at a glance the row should read as an answer, not as a set of
   options still waiting. */
.xrb-field--choice > span { margin-bottom: 5px; }

.xrb-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.xrb-choice {
    padding: 5px 11px;
    border: 1px solid var(--xrb-line);
    border-radius: 20px;
    background: #fff;
    font-size: 12px;
    line-height: 1.35;
    color: var(--xrb-text);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.xrb-choice:hover { border-color: var(--xrb-accent); background: #f4f8fc; }
.xrb-choice.is-active {
    border-color: var(--xrb-accent);
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-weight: 600;
}

/* "Other" reads as an escape hatch rather than as one of the answers. */
.xrb-choice--other { border-style: dashed; color: var(--xrb-muted); }
.xrb-choice--other.is-active { border-style: solid; color: var(--xrb-on-accent); }

.xrb-choice-input { margin-top: 6px; }

/* The glyph beside a field's name. Muted, because it is a signpost and not information. */
.xrb-field-icon {
    width: 13px;
    margin-inline-end: 5px;
    font-size: 10.5px;
    text-align: center;
    color: var(--xrb-accent);
    opacity: .75;
}

/* ---------------------------------------------------------------- editor */

.xrb-editor { padding: 16px; }
.xrb-loading { color: var(--xrb-muted); }

.xrb-pane { max-width: 640px; }

.xrb-pane-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.xrb-pane-title {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
}
.xrb-pane-title:hover { border-color: var(--xrb-line); }
.xrb-pane-title:focus { border-color: var(--xrb-accent); background: #fff; outline: none; }
.xrb-pane-title-static { font-size: 16px; font-weight: 700; }

.xrb-pane-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-size: 13px;
}

/* The same on/off switch as the section list, beside the heading being edited. */
.xrb-pane-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    font-size: 11.5px;
    color: var(--xrb-muted);
    white-space: nowrap;
    cursor: pointer;
}

.xrb-field--suggest > span::after {
    /* Says a list is there without adding a control that competes with the input. */
    content: ' \2304';
    color: var(--xrb-accent);
}

.xrb-field { display: block; margin-bottom: 11px; }
.xrb-field > span {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    color: var(--xrb-muted);
}
.xrb-field--check { display: flex; gap: 7px; align-items: center; }
.xrb-field--check > span { margin: 0; font-size: 13px; color: var(--xrb-text); }

.xrb-group {
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--xrb-line);
    border-radius: 6px;
    background: #fff;
}
.xrb-group > legend { padding: 0 5px; font-size: 12px; font-weight: 700; color: var(--xrb-muted); }
.xrb-hint { margin-bottom: 8px; font-size: 12px; color: var(--xrb-muted); }

.xrb-items { margin-bottom: 12px; }

.xrb-item {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--xrb-line);
    border-radius: 6px;
    background: #fff;
}

.xrb-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.xrb-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-size: 11px;
}

.xrb-bullet-row,
.xrb-link-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

/* ---------------------------------------------------------------- preview */

.xrb-preview {
    padding: 12px;
    border-inline-start: 1px solid var(--xrb-line);
}

.xrb-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--xrb-muted);
}

/* The preview follows the page instead of scrolling inside its own box, so the sheet stays beside
   whatever section is being edited without adding a scrollbar of its own. */
.xrb-preview-inner {
    position: sticky;
    top: 12px;
}

.xrb-preview-frame {
    width: 100%;
    height: calc(100vh - 190px);
    border: 1px solid var(--xrb-line);
    border-radius: 4px;
    background: #fff;
}

/* ---------------------------------------------------------------- narrow screens */

/* Under a tablet the three panes stack: the navigator becomes a strip, the editor takes the width,
   and the preview sits underneath rather than being squeezed into a column too narrow to read. */
@media (max-width: 991.98px) {
    .xrb-main { grid-template-columns: 1fr; }
    /* On one column the design controls have the whole width, so three per row reads better than
       two half-width boxes with a lot of space beside them. */
    .xrb-design-grid { grid-template-columns: repeat(3, 1fr); }

    .xrb-side,
    .xrb-editor,
    .xrb-preview {
        max-height: none;
        overflow: visible;
    }

    .xrb-side { border-right: 0; border-bottom: 1px solid var(--xrb-line); }
    .xrb-preview { border-inline-start: 0; border-top: 1px solid var(--xrb-line); }
    .xrb-preview-frame { height: 70vh; }
    .xrb-pane { max-width: none; }
}

@media (max-width: 575.98px) {
    .xrb-bar { flex-direction: column; align-items: stretch; }
    .xrb-bar-right { justify-content: space-between; }
    .xrb-title { min-width: 0; width: 100%; }

    .xrb-hero { padding: 14px; }
    .xrb-hero-title { font-size: 18px; }
    .xrb-hero-actions { width: 100%; }
    .xrb-hero-actions .xrb-menu { flex: 1; }
    .xrb-hero-actions .xrb-btn { width: 100%; justify-content: center; }

    /* Ten columns of swatches on a 375px screen is a 30px square each - still tappable, and
       keeping the grid square is what makes the range readable. */
    .xrb-swatches { gap: 2px; }

    .xrb-design-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- landing and list */

.xrl { padding: 8px 0 28px; }
.xrl-title { margin: 0 0 10px; font-size: 28px; font-weight: 700; }
.xrl-desc { max-width: 680px; margin-bottom: 18px; color: #4b5563; }

.xrl-start {
    display: inline-block;
    margin-bottom: 22px;
    padding: 11px 22px;
    border-radius: 6px;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-size: 15px;
    text-decoration: none;
}
.xrl-start:hover { background: var(--xrb-accent-light); color: var(--xrb-on-accent); text-decoration: none; }

.xrl-points { max-width: 680px; padding-inline-start: 18px; color: #4b5563; }
.xrl-points li { margin-bottom: 7px; }
.xrl-sub { margin: 24px 0 10px; font-size: 19px; font-weight: 700; }

.xrl-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.xrl-template {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #dde1e6;
    border-radius: 6px;
    background: #fff;
}
.xrl-badge {
    padding: 2px 7px;
    border-radius: 10px;
    background: #eaf1f8;
    font-size: 11px;
    color: var(--xrb-accent);
}

/* ---------------------------------------------------------------- resume cards */

/* Rendered by xResumes::row(), shared with the client portal and the CP list, so the card is
   styled once here and inherits the panel's own look when it appears there. */
.xr-cards { display: flex; flex-wrap: wrap; gap: 12px; }

.xr-card {
    width: 230px;
    padding: 14px;
    border: 1px solid #dde1e6;
    border-radius: 7px;
    background: #fff;
}

.xr-card-title {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--xrb-accent);
    text-decoration: none;
}
.xr-card-title:hover { text-decoration: underline; }

.xr-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 11px;
    color: #6b7280;
}

.xr-card-progress {
    height: 5px;
    border-radius: 3px;
    background: #eceef1;
    overflow: hidden;
}
.xr-card-progress > span { display: block; height: 100%; background: var(--xrb-accent); }

.xr-card-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.xr-card-flag { padding: 2px 7px; border-radius: 10px; font-size: 10px; }
.xr-card-flag--review { background: #fdf7e3; color: #8a6d1f; }
.xr-card-flag--archived { background: #f3f4f6; color: #6b7280; }

.xr-empty { padding: 18px; border: 1px dashed #dde1e6; border-radius: 7px; color: #6b7280; }

/* ================================================================ the guided tour
 *
 * The page dims and one element stays lit. The dark part is four rectangles around the target
 * rather than one panel with a hole punched in it: a real gap means the element underneath keeps
 * its own styling and stays clickable, which is what lets a step demonstrate rather than describe.
 */

body.xrt-open { overflow: hidden; }

.xrt { position: fixed; inset: 0; z-index: 9000; }

.xrt-shade {
    position: fixed;
    background: rgba(16, 22, 28, .62);
    cursor: pointer;
}

/* The lit element gets a ring rather than a fill, so nothing of it is hidden. */
.xrt-ring {
    position: fixed;
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--xrb-accent, #0c5da9), 0 0 0 6px rgba(12, 93, 169, .25);
    pointer-events: none;
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

.xrt-card {
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 16px 18px 14px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    font-size: 13px;
    line-height: 1.55;
    color: #23282d;
}

.xrt-card-step {
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--xrb-accent, #0c5da9);
}

.xrt-card-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.xrt-card-text { margin: 0 0 14px; color: #47525d; }

.xrt-card-foot { display: flex; gap: 8px; align-items: center; }
.xrt-card-foot .xrt-skip { margin-inline-end: auto; }
.xrt-card-foot button[disabled] { opacity: .45; cursor: default; }

.xrt-dots { display: flex; gap: 4px; margin-inline-end: 4px; }
.xrt-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d3d8dd;
}
.xrt-dot.is-active { background: var(--xrb-accent, #0c5da9); }

@media (max-width: 575.98px) {
    .xrt-card { width: calc(100vw - 24px); padding: 14px; }
    .xrt-dots { display: none; }
}

/* ---------------------------------------------------------------- menu buttons and editable titles */

/* The caret in a button that opens a menu. Slightly faded and pushed to the end of the button, so
   it reads as a property of the button rather than as a second icon competing with the first. */
.xrb-caret {
    margin-inline-start: 2px;
    opacity: .75;
    font-size: .85em;
    transition: transform .15s ease;
}

.xrb-btn[aria-expanded="true"] .xrb-caret {
    transform: rotate(180deg);
}

/* An editable heading has to look editable before it is clicked. The pencil sits inside the field's
   own box at the trailing edge, the underline appears on hover, and the whole thing turns into a
   normal-looking input on focus - the same progression the resume title in the bar above uses. */
.xrb-pane-title {
    background-image: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding-inline-end: 30px;
}

.xrb-pane-title-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.xrb-pane-title-wrap .xrb-pane-title {
    width: 100%;
}

.xrb-pane-title-pen {
    position: absolute;
    inset-inline-end: 8px;
    pointer-events: none;
    font-size: .8rem;
    opacity: .45;
    transition: opacity .15s ease;
}

.xrb-pane-title:hover {
    border-color: var(--xrb-line, rgba(0, 0, 0, .18));
    background: rgba(0, 0, 0, .02);
}

.xrb-pane-title-wrap:hover .xrb-pane-title-pen,
.xrb-pane-title:focus + .xrb-pane-title-pen {
    opacity: .9;
}

.xrb-pane-title:focus {
    border-color: var(--xrb-accent);
    background: transparent;
}

/* The note under an editable heading. Said once per section, quietly - loud enough to be found the
   first time and small enough to be ignored every time after. */
.xrb-pane-title-note {
    display: block;
    font-size: .72rem;
    opacity: .6;
    margin: 2px 0 0 0;
}

/* "Add your first job" is a different act from "Add another", so it gets a different weight: an
   empty section needs the button to look like the next thing to do. */
.xrb-add--first {
    font-weight: 600;
}

/* ---------------------------------------------------------------- panels that answer the client */

/* Every full-width panel that opens under the header carries the same tint.
   These are the places the builder answers a question or asks one - what it wants to import, what
   the assistant wrote, the links this resume has out in the world. On the same white as the rest of
   the page they read as more page and get missed; the tint and a heading icon make them read as a
   reply. Written as one rule over all of them so a panel added later cannot quietly be the odd one
   out - which is exactly what happened to the sharing panel. */
.xrb-panel-tint,
#xrb_review,
#xrb_ai,
#xrb_share {
    background: #fffaf0;
    border: 1px solid #f0e0bd;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(120, 90, 20, .07);
}

#xrb_review .xrb-review-head,
#xrb_ai .xrb-ai-head,
#xrb_share .xrb-review-head {
    gap: 8px;
}

/* The sharing panel used its own near-white background, set before the tint existed. Cleared here so
   the rule above is the only thing that decides how a panel looks. */
.xrb-share {
    background: none;
}

.xrb-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-inline-end: 8px;
    border-radius: 6px;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent, #fff);
    font-size: .8rem;
}

/* The waiting state, in the place the answer will appear. A spinner somewhere else on the page is a
   spinner nobody looks at. */
.xrb-waiting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    font-size: 13px;
    color: var(--xrb-muted);
}

.xrb-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, .12);
    border-top-color: var(--xrb-accent);
    border-radius: 50%;
    animation: xrb-spin .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes xrb-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- the saved / failed message */

/* "Saved to your documents" used to be grey text in a corner. An action the client asked for has to
   answer where they are looking, and loudly enough to be believed. */
.xrb-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.xrb-state:empty { padding: 0; }

.xrb-state--ok {
    background: #e8f6ec;
    color: #1c6b34;
}

.xrb-state--error {
    background: #fdecec;
    color: #a11b1b;
}

.xrb-state--busy {
    background: #eef3fa;
    color: var(--xrb-accent);
}

/* The follow-up link a finished action can offer - "see it in your documents". */
.xrb-state-link {
    margin-inline-start: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------------------------------------------------------------- sections as cards */

/* Each section is a card, the way the Design tools are a box: without a frame the heading, the tip,
   the hint, the assistant button and the first field all ran together as one grey column and it was
   never obvious where one section ended. */
.xrb-pane {
    padding: 14px 16px 18px;
    border: 1px solid var(--xrb-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.xrb-editor {
    padding: 12px;
}

/* Breathing room under the rename tip, so it does not touch the section's own advice. */
.xrb-pane-title-note {
    margin-bottom: 10px;
}

.xrb-pane-hint {
    margin-top: 0;
}

/* An item inside a section is a card within the card, with its own number and its own space. */
.xrb-item {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #eef1f4;
    border-radius: 8px;
    background: #fcfdfe;
}

.xrb-item:last-of-type { margin-bottom: 16px; }

/* ---------------------------------------------------------------- the photo toggle */

/* The note used to sit on the same line as the label, which pushed the checkbox out of line with
   every other control in the column. It belongs underneath, quieter. */
.xrb-field--check.xrb-field--noted {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: start;
}

.xrb-check-note {
    grid-column: 2;
    font-size: .72rem;
    font-style: normal;
    line-height: 1.35;
    color: var(--xrb-muted);
}

/* ---------------------------------------------------------------- date fields */

/* Dates are free text and always will be - a resume must be able to say just a year. What they no
   longer have is a native <datalist>: the browser sizes that popup to the input, so a narrow "From"
   field cropped every suggestion to "202..". This is our own panel, sized to its contents. */
.xrb-date-wrap {
    position: relative;
    display: flex;
    gap: 6px;
    align-items: center;
}

.xrb-date-wrap .xrb-input { flex: 1 1 auto; }

.xrb-date-btn {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid var(--xrb-line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    color: var(--xrb-accent);
}

.xrb-date-btn:hover { background: #f4f7fb; }

.xrb-date-pop {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    /* As wide as the field it belongs to, so the months and years run the whole row instead of
       stacking into a narrow column with empty space beside it. */
    width: 100%;
    min-width: 250px;
    padding: 10px;
    border: 1px solid var(--xrb-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}

.xrb-date-pop[hidden] { display: none; }

/* The months and years fill the row: as many per line as fit, rather than three. */
.xrb-date-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 5px;
}

.xrb-date-grid--days {
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
}

.xrb-date-pick {
    padding: 5px 4px;
    border: 1px solid var(--xrb-line);
    border-radius: 5px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.xrb-date-pick:hover { background: var(--xrb-accent); color: var(--xrb-on-accent, #fff); border-color: var(--xrb-accent); }
.xrb-date-pick.is-active { background: var(--xrb-accent); color: var(--xrb-on-accent, #fff); border-color: var(--xrb-accent); }

.xrb-date-label {
    margin: 8px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--xrb-muted);
}

.xrb-date-label:first-child { margin-top: 0; }

.xrb-date-scroll {
    max-height: 148px;
    overflow-y: auto;
    /* Room for the scrollbar, so the last column of years is never half-hidden under it - the same
       cropping that made the native datalist unusable for these fields. */
    padding-inline-end: 4px;
}

.xrb-date-now {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef1f4;
}

/* ---------------------------------------------------------------- the landing page */

/* The offer and the action, side by side with the three steps: a visitor deciding whether to start
   wants to know what they get and how much work they are agreeing to, in one screen. */
.xrl-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin-bottom: 30px;
}

.xrl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--xrb-accent) 12%, #fff);
    color: var(--xrb-accent);
    font-size: 12px;
    font-weight: 700;
}

.xrl-title { margin: 0 0 10px; font-size: 32px; font-weight: 800; line-height: 1.15; }
.xrl-desc { max-width: 680px; margin-bottom: 18px; font-size: 15.5px; color: #4b5563; }

.xrl-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.xrl-start {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.xrl-second {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 11px 18px;
    border: 1px solid var(--xrb-line);
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    text-decoration: none;
}

.xrl-ticks { max-width: 640px; margin: 0; padding: 0; list-style: none; color: #4b5563; }
.xrl-ticks li { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.xrl-ticks i { color: var(--xrb-accent); }

/* The three steps. Numbered, because the point is that there are only three. */
.xrl-steps { display: grid; gap: 10px; }

.xrl-step {
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 12px 14px;
    border: 1px solid var(--xrb-line);
    border-radius: 10px;
    background: #fff;
}

.xrl-step-num {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
    font-weight: 800;
}

.xrl-step strong { font-size: 14.5px; }
.xrl-step span:last-child { font-size: 13px; color: #6b7280; }

.xrl-sub { margin: 30px 0 8px; font-size: 20px; font-weight: 700; }
.xrl-sub i { color: var(--xrb-accent); }
.xrl-sub-note { margin: 0 0 14px; font-size: 13.5px; color: #6b7280; }

/* The reasons, as cards - a bulleted paragraph of three lines was read as decoration. */
.xrl-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.xrl-card {
    padding: 16px;
    border: 1px solid var(--xrb-line);
    border-radius: 10px;
    background: #fff;
}

.xrl-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 8px;
    /* Strong colour behind, its contrast in front: --color1_bg is the strong colour in some themes,
       which would make the icon vanish into its own tile. */
    background: var(--xrb-accent);
    color: var(--xrb-on-accent);
}

.xrl-card strong { display: block; margin-bottom: 5px; font-size: 15px; }
.xrl-card p { margin: 0; font-size: 13.5px; color: #6b7280; }

/* The gallery draws each template at a third of its size, so a whole page is visible as a page. */
.xrl-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.xrl-tpl { margin: 0; }

.xrl-tpl-shot {
    position: relative;
    overflow: hidden;
    height: 270px;
    border: 1px solid var(--xrb-line);
    border-radius: 8px;
    background: #fff;
}

/* The sample is a real render in an iframe, scaled down: an A4 page at 33% is legible as a shape,
   which is all a gallery has to say. Pointer events off so the card stays a card. */
.xrl-tpl-shot iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 300%;
    border: 0;
    transform: scale(.3333);
    transform-origin: top left;
    pointer-events: none;
}

.xrl-tpl figcaption { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 8px 2px 0; }
.xrl-tpl-name { font-weight: 700; font-size: 14px; }
.xrl-tpl-note { flex: 1 1 100%; font-size: 12.5px; color: #6b7280; }

.xrl-badge {
    padding: 1px 7px;
    border-radius: 999px;
    background: #e8f6ec;
    color: #1c6b34;
    font-size: 11px;
    font-weight: 700;
}

.xrl-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--xrb-line);
}

.xrl-foot-note { font-size: 13px; color: #6b7280; }

@media (max-width: 861.98px) {
    .xrl-hero { grid-template-columns: 1fr; }
    .xrl-title { font-size: 26px; }
}

/* ---------------------------------------------------------------- the client's document rows */

/* A document row is the file plus what can be done with it. The import action sits beside the file
   rather than inside its link, because a link inside a link is not a thing. */
.xcvp-file-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.xcvp-file-wrap .xcvp-file { flex: 1 1 320px; margin-bottom: 0; }

.xcvp-btn {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--xrb-line);
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.xcvp-btn:hover { background: #f4f7fb; text-decoration: none; }
.xcvp-btn i { color: var(--xrb-accent); }

/* The import tool under the client's CV folder. Framed, because it is an action on the list above
   rather than another row in it. */
.xcvp-docs { margin-bottom: 14px; }

.xcvp-import {
    padding: 14px;
    border: 1px dashed var(--xrb-line);
    border-radius: 10px;
    background: #fffaf0;
}

.xcvp-import-head {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 2px 8px;
    margin-bottom: 10px;
}

.xcvp-import-head i { color: var(--xrb-accent); }
.xcvp-import-head strong { font-size: 14.5px; }
.xcvp-import-head span { grid-column: 2; font-size: 12.5px; color: #6b7280; }

.xcvp-import-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- the landing page's advice */

/* The section guide: a definition list, because that is what it is - a name and what it is for. */
.xrl-guide {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--xrb-line);
    border-radius: 10px;
    background: #fff;
}

.xrl-guide-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--xrb-accent);
}

.xrl-guide-note { margin: 0 0 12px; font-size: 13px; color: #6b7280; }

.xrl-guide-list { margin: 0; }

.xrl-guide-list dt {
    font-size: 14px;
    font-weight: 700;
}

.xrl-guide-list dd {
    margin: 2px 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #4b5563;
}

.xrl-guide-list dd:last-child { margin-bottom: 0; }

/* The questions. <details> so they are open to a search engine and closed to a reader who does not
   need them, with no script involved. */
.xrl-faq { display: grid; gap: 8px; }

.xrl-faq-item {
    padding: 12px 14px;
    border: 1px solid var(--xrb-line);
    border-radius: 8px;
    background: #fff;
}

.xrl-faq-item summary {
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.xrl-faq-item summary::marker { color: var(--xrb-accent); }

.xrl-faq-item p {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #4b5563;
}

.xrl-faq-item[open] { border-color: color-mix(in srgb, var(--xrb-accent) 40%, var(--xrb-line)); }

/* Where to go next. */
.xrl-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.xrl-related-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid var(--xrb-line);
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
}

.xrl-related-item:hover { background: #f7f9fb; text-decoration: none; }
.xrl-related-item i { margin-top: 2px; color: var(--xrb-accent); }
.xrl-related-item strong { display: block; font-size: 14px; }
.xrl-related-item em { font-style: normal; font-size: 12.5px; color: #6b7280; }

/* ---------------------------------------------------------------- the Design panel */

/* Design is a panel of settings, not a list of rows: framed, with its title inside the frame and
   room around the controls, so it reads as one place to change how the resume looks. */
.xrb-group-box--design {
    padding: 12px;
    border: 1px solid var(--xrb-line);
    border-radius: 10px;
    background: #fbfcfd;
    box-shadow: inset 0 1px 0 #fff;
}

.xrb-group-box--design .xrb-group-title {
    margin: -12px -12px 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--xrb-line);
    border-radius: 10px 10px 0 0;
    background: #fff;
}

.xrb-group-box--design .xrb-design-grid { gap: 10px; }

.xrb-group-box--design .xrb-field { margin-bottom: 0; }

/* The swatch row and the photo toggle get their own space inside the panel rather than butting up
   against the selects above them. */
.xrb-group-box--design .xrb-design-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--xrb-line);
}

.xrb-group-box--design .xrb-field--check {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--xrb-line);
}

/* ---------------------------------------------------------------- landing page polish */

/* The page needs breathing room of its own: the site's .page-content gives it almost none, which is
   what made every block look pasted onto the edge of the screen. */
.xrl {
    padding: 22px 24px 34px;
}

/* The hero sits on a tinted panel so the offer reads as one thing rather than as three stray
   paragraphs, and the steps beside it get a white card each. */
.xrl-hero {
    padding: 22px;
    border: 1px solid var(--xrb-line);
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--xrb-accent) 6%, #fff) 0%, #fff 100%);
}

/* A primary action has to look pressable: weight, a shadow that lifts it off the panel, and a
   hover that moves. Without the tokens this button had no fill at all - it read as a text link. */
.xrl-start {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--xrb-accent) 32%, transparent);
    transition: transform .12s ease, box-shadow .12s ease;
}

.xrl-start:hover {
    color: var(--xrb-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--xrb-accent) 42%, transparent);
}

.xrl-start:active { transform: translateY(0); }

.xrl-second:hover { border-color: var(--xrb-accent); color: var(--xrb-accent); text-decoration: none; }

/* Two columns for the guide on a wide screen: a definition list one item per row left half the
   page empty and pushed the FAQ below the fold for no reason. */
@media (min-width: 992px) {
    .xrl-guide-list {
        columns: 2;
        column-gap: 28px;
    }

    /* A term and its description must not be split down the middle of a column break. */
    .xrl-guide-list dt { break-after: avoid; break-inside: avoid; }
    .xrl-guide-list dd { break-inside: avoid; margin-bottom: 14px; }

    .xrl-faq {
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }

    .xrl-faq-item[open] { grid-column: 1 / -1; }
}

/* The three steps read as one row on a wide screen and stack below it, rather than being a narrow
   column of cards beside a wide block of text. */
@media (min-width: 1200px) {
    .xrl-steps { grid-template-columns: 1fr; }
}

@media (max-width: 861.98px) {
    .xrl { padding: 16px 14px 26px; }
    .xrl-hero { padding: 16px; }
    .xrl-steps { grid-template-columns: 1fr; }
}

/* The gallery caption and the cards sit closer to their heading than to the block above. */
.xrl-sub { margin-top: 34px; }
.xrl-sub:first-of-type { margin-top: 26px; }

/* ---------------------------------------------------------------- anchors that are buttons */

/* The site sets `a, a:link { color: var(--color1) }`, and `a:link` outranks a single class - so
   every anchor we style as a button drew its text in the site's link blue on a blue background,
   and only turned white on hover, where our own :hover rule finally won. Matching the element as
   well as the class puts these back in charge of their own colour in every state. */
.xrl a.xrl-start,
.xrl a.xrl-start:link,
.xrl a.xrl-start:visited,
.xrl a.xrl-start:hover,
.xrl a.xrl-start:focus,
.xrl a.xrl-start:active {
    color: var(--xrb-on-accent, #fff);
}

.xrl a.xrl-second,
.xrl a.xrl-second:link,
.xrl a.xrl-second:visited {
    color: var(--xrb-ink, #1f2937);
}

.xrl a.xrl-related-item,
.xrl a.xrl-related-item:link,
.xrl a.xrl-related-item:visited {
    color: inherit;
}

.xcvp a.xcvp-btn,
.xcvp a.xcvp-btn:link,
.xcvp a.xcvp-btn:visited {
    color: var(--xrb-ink, #1f2937);
}

/* ---------------------------------------------------------------- the guide, three across */

/* The three groups of the section guide sit side by side on a wide screen: stacked, each one was a
   full-width band and the page became a long scroll of boxes. */
@media (min-width: 992px) {
    .xrl-guides {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        align-items: start;
    }

    .xrl-guides .xrl-guide { margin-bottom: 0; height: 100%; }

    /* One column inside each box now that there are three boxes across. */
    .xrl-guide-list { columns: auto; }
    .xrl-guide-list dd { margin-bottom: 12px; }
}

/* ---------------------------------------------------------------- the brand's second colour */

/* --color2 is the site's red, and red has one job here: the two places where the client is being
   warned rather than informed. Used anywhere else it competes with the accent and stops meaning
   anything - which is why most of this app is one colour. */
.xrl-card--warn {
    border-color: color-mix(in srgb, var(--xrb-alert) 35%, var(--xrb-line));
    background: color-mix(in srgb, var(--xrb-alert) 4%, #fff);
}

.xrl-card--warn .xrl-card-icon {
    background: var(--xrb-alert);
    color: #fff;
}

/* The review banner on a resume a machine wrote - the one notice in the builder that is a warning
   about the content itself rather than a status. */
.xrb-notice--review {
    border-inline-start: 4px solid var(--xrb-alert);
}

/* ---------------------------------------------------------------- an editable heading looks like a field */

/* The grey only appeared on hover, which is no use to someone who has not thought to hover: the
   heading now reads as a field from the moment the section opens, and the hover state is the
   confirmation rather than the announcement. */
.xrb-pane-title {
    border-color: var(--xrb-line);
    background: #f6f8fa;
}

.xrb-pane-title:hover {
    border-color: color-mix(in srgb, var(--xrb-accent) 45%, var(--xrb-line));
    background: #eef3f8;
}

.xrb-pane-title:focus {
    border-color: var(--xrb-accent);
    background: #fff;
}

.xrb-pane-title-pen { opacity: .6; }

/* ---------------------------------------------------------------- focus mode */

/* Hides the site's own header so the builder's h1 sits at the top of the window. Display rather
   than removal, and the button says which way it goes, so nobody can get stranded on a page with
   no navigation. */
body.xrb-focus #header {
    display: none;
}

body.xrb-focus .xrb-hero {
    border-radius: 0 0 12px 12px;
}

#xrb_focus_btn[aria-pressed="true"] {
    border-color: var(--xrb-accent);
    color: var(--xrb-accent);
    background: color-mix(in srgb, var(--xrb-accent) 8%, #fff);
}

/* ---------------------------------------------------------------- a panel with nothing to do */

.xrb-review-nothing {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--xrb-muted);
}

.xrb-review-nothing i { color: #1c6b34; }

/* Hidden buttons must actually go, including the flex row's gap around them. */
.xrb-review-foot [hidden] { display: none !important; }

/* ---------------------------------------------------------------- the app's own heading */

/* The icon is the mark of the app, not a tile: no box, no fill, just the glyph at the size of both
   lines beside it - and the title and its sentence share one left edge, which they could not while
   the icon lived inside the h1 and indented only the first line. */
.xrb-hero-text {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.xrb-hero-icon {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
    color: var(--xrb-accent);
    opacity: .92;
}

.xrb-hero-lines { min-width: 0; }

.xrb-hero-lines .xrb-hero-title {
    display: block;
    margin: 0 0 2px;
}

/* ---------------------------------------------------------------- the date field, on one line */

/* The calendar button belongs at the end of the field's own row. It dropped to a line of its own
   because the input carries width:100% from .xrb-input and pushed it out of the flex row. */
.xrb-date-wrap {
    flex-wrap: nowrap;
}

.xrb-date-wrap .xrb-input {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
}

.xrb-date-btn {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

/* Tighter buttons: 31 days and 12 months in as few rows as the width allows, rather than a panel
   taller than the field it belongs to. */
.xrb-date-grid {
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 4px;
}

.xrb-date-grid--days {
    grid-template-columns: repeat(auto-fit, minmax(29px, 1fr));
}

.xrb-date-pick {
    padding: 4px 2px;
    font-size: 11.5px;
    line-height: 1.25;
}

.xrb-date-label {
    margin: 7px 0 3px;
    font-size: 10px;
}

.xrb-date-pop {
    padding: 9px;
}

/* ---------------------------------------------------------------- the walkthrough card */

/* The card was a paragraph with three grey buttons under it, and Skip read as the least important
   thing on it when it is the one a hurried visitor wants. Now: a header row with the step count and
   a real close cross, the step's own icon beside the title, and arrows on Back and Next so the three
   controls are told apart at a glance rather than read. */
.xrt-card {
    width: 360px;
    padding: 0 0 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
}

.xrt-card-head {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 9px 14px;
    border-bottom: 1px solid #eef1f4;
    background: color-mix(in srgb, var(--xrb-accent, #0c5da9) 7%, #fff);
}

.xrt-card-step {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.xrt-card-step i { opacity: .7; }

/* One close control, used by the cross in the header and shared with the invitation card. */
.xrt-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
}

.xrt-close:hover { background: rgba(0, 0, 0, .06); color: #23282d; }

.xrt-card-title {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 12px 14px 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

/* The icon of whatever this step is about: the calendar for dates, the palette for design, the wand
   for the assistant. It is what makes the card read as part of this app. */
.xrt-card-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 15px;
    color: var(--xrb-accent, #0c5da9);
}

.xrt-card-text { margin: 0 14px 14px; }

.xrt-card-foot {
    padding: 0 12px;
}

.xrt-card-foot .xrt-next i,
.xrt-card-foot .xrt-back i { font-size: .85em; }

.xrt-card-foot .xrt-skip { color: #6b7280; }
.xrt-card-foot .xrt-skip:hover { color: var(--xrb-alert, #be1325); border-color: currentColor; }

/* ---------------------------------------------------------------- the invitation */

/* Asked, not launched - and asked where it cannot be missed. The first version sat in the corner by
   the header button and went unread, which is the same as not asking at all. */
.xrt-invite-wrap {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.xrt-invite-back {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    animation: xrt-fade-in .18s ease-out;
}

.xrt-invite {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 26px 28px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    text-align: center;
    animation: xrt-pop-in .2s ease-out;
}

@keyframes xrt-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes xrt-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.xrt-invite-x {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
}

/* One large mark instead of a tiny inline icon: it is what makes the card read as an offer rather
   than as a warning. Accent colour on a tint of itself, so it follows the site's theme. */
.xrt-invite-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--xrb-accent, #0c5da9) 12%, #fff);
    color: var(--xrb-accent, #0c5da9);
    font-size: 28px;
}

.xrt-invite-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    color: #1f2937;
}

.xrt-invite-text {
    margin: 0 auto 20px;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
}

.xrt-invite-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.xrt-invite-foot .xrb-btn { padding: 10px 18px; font-size: 14.5px; }

.xrt-invite-note {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    color: #6b7280;
}

@media (max-width: 575.98px) {
    .xrt-invite { padding: 22px 18px 18px; }
    .xrt-invite-title { font-size: 19px; }
    .xrt-invite-foot .xrb-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- the resume's own name */

/* The name of the resume is an editable field and looked like a heading, exactly as the section
   headings did before they were given a box. Same treatment, same reason. */
.xrb-title {
    border: 1px solid var(--xrb-line);
    border-radius: 7px;
    background: #f6f8fa;
    padding-inline-end: 30px;
}

.xrb-title-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.xrb-title-pen {
    position: absolute;
    inset-inline-end: 9px;
    pointer-events: none;
    font-size: .8rem;
    opacity: .55;
}

.xrb-title:hover {
    border-color: color-mix(in srgb, var(--xrb-accent) 45%, var(--xrb-line));
    background: #eef3f8;
}

.xrb-title:focus {
    border-color: var(--xrb-accent);
    background: #fff;
}

.xrb-title-wrap:hover .xrb-title-pen,
.xrb-title:focus + .xrb-title-pen { opacity: .9; }

/* ---------------------------------------------------------------- a notice can always be dismissed */

.xrb-notice { position: relative; }

.xrb-notice-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 14px;
    cursor: pointer;
}

.xrb-notice-close:hover { background: rgba(0, 0, 0, .07); opacity: 1; }

/* Seventeen steps is more dots than a 360px card has room for in one line. */
.xrt-dots {
    flex-wrap: wrap;
    max-width: 132px;
    row-gap: 3px;
}