@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root {
    --bg: #1c1a2b;
    --panel: #242238;
    --panel-2: #2c2a45;
    --accent: #e3a34e;
    --accent-dim: #8a6a3a;
    --sage: #7fa98e;
    --text: #f2efea;
    --muted: #a8a5be;
    --border: #3a3855;
    --border-light: #4a4870;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Work Sans', sans-serif;
    min-height: 100%;
}

h1, h2, h3 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 28px;
    margin-bottom: 4px;
}

h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.text-muted {
    color: var(--muted) !important;
    font-size: 14px;
}

a {
    color: var(--accent);
}

.navbar {
    background: var(--panel) !important;
    border-bottom: 1px solid var(--border);
}

.navbar-brand, .nav-link {
    color: var(--text) !important;
    font-family: 'Fraunces', serif;
}

.container {
    max-width: 900px;
    padding: 40px 24px;
}

textarea, input[type=text], input[type=email], input[type=password] {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    padding: 12px 14px;
}

    textarea:focus, input:focus {
        outline: none;
        border-color: var(--accent);
    }

    textarea:disabled {
        opacity: 0.75;
        cursor: default;
    }

.btn {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    border-radius: 5px;
    padding: 10px 18px;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #1c1a2b;
}

    .btn-primary:hover {
        background: #eab568;
        border-color: #eab568;
        color: #1c1a2b;
    }

.btn-outline-primary, .btn-outline-secondary {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    color: var(--text);
    text-align: left;
}

    .btn-outline-primary:hover, .btn-outline-secondary:hover {
        border-left-color: var(--accent);
        background: #33304e;
        color: var(--text);
    }

.btn-outline-success {
    border-color: var(--sage);
    color: var(--sage);
    background: transparent;
}

    .btn-outline-success:hover {
        background: var(--sage);
        color: #1c1a2b;
    }

.btn-outline-danger {
    border-color: #c96a6a;
    color: #c96a6a;
    background: transparent;
}

    .btn-outline-danger:hover {
        background: #c96a6a;
        color: #1c1a2b;
    }

.btn-link {
    color: var(--muted);
}

    .btn-link:hover {
        color: var(--accent);
    }

#briefBox {
    min-height: 260px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.footer {
    position: static !important;
    margin-top: 48px !important;
    padding-top: 16px;
    border-top: 1px solid var(--border) !important;
    color: var(--muted) !important;
}

body {
    margin-bottom: 0 !important;
}

/* Wizard layout: fixed left sidebar */
.wizard-shell {
    display: block;
}

.stepper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    overflow-y: auto;
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 32px 22px;
    z-index: 10;
}

/* Sidebar navigation switched off by the command bar (e.g. while Finding).
   Only the contents are dimmed: dimming the whole sidebar would also make
   its background see-through, letting the navbar and title-bar lines
   behind it show across the text. */
.stepper-disabled {
    cursor: not-allowed;
}

    .stepper-disabled > * {
        opacity: 0.5;
    }

.wizard-main {
    margin-left: 320px;
    padding: 40px 24px;
}

.container:has(.wizard-shell) {
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 760px) {
    .stepper {
        position: static;
        width: auto;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .wizard-main {
        margin-left: 0;
        padding: 24px;
    }
}

.stepper h1 {
    font-size: 20px;
    margin-bottom: 8px;
}

.stepper .tag {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.step-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 0;
    opacity: 0.45;
}

    .step-item.active {
        opacity: 1;
    }

    .step-item.done {
        opacity: 0.75;
    }

.step-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.step-item.active .step-num {
    background: var(--accent);
    border-color: var(--accent);
    color: #1c1a2b;
}

.step-item.done .step-num {
    background: transparent;
    border-color: var(--sage);
    color: var(--sage);
}

.step-label {
    font-size: 14px;
    line-height: 1.4;
    padding-top: 2px;
}

a.step-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

    a.step-item:hover .step-label {
        color: var(--accent);
    }

.option-thumb {
    width: 100%;
    height: 140px;
    object-fit: contain;
    background: var(--panel-2);
    border-radius: 3px;
    margin-bottom: 8px;
    display: block;
}

.option-thumb-empty {
    border: 1px dashed var(--border-light);
}

/* Uniform button sizing */
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.option-card-wrap {
    display: flex;
    flex-direction: column;
}

    .option-card-wrap form {
        display: flex;
        flex: 1;
    }

.option-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

    .option-card strong {
        font-size: 16px;
        font-weight: 700;
        display: block;
        margin-bottom: 4px;
    }

.option-card-centered {
    align-items: center;
    text-align: center;
}

/* Clamp example/helper text to 2 lines */
.opt-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3em;
    color: var(--muted);
    font-size: 12.5px;
}

/* Narrower input boxes for free-text questions */
.wizard-input {
    width: 60%;
}

@media (max-width: 700px) {
    .wizard-input {
        width: 100%;
    }
}

.validation-error {
    color: #e07a7a;
    font-size: 14px;
    margin: -4px 0 12px;
}

.why-it-matters {
    margin-top: 8px;
    font-size: 12px;
}

    .why-it-matters summary {
        color: var(--accent);
        cursor: pointer;
        font-weight: 600;
    }

    .why-it-matters p {
        color: var(--muted);
        margin-top: 6px;
        line-height: 1.5;
    }

.option-selected {
    border-left-color: var(--accent) !important;
    background: #33304e !important;
    position: relative;
}

.selected-badge {
    display: inline-block;
    margin-top: 6px;
    background: var(--accent);
    color: #1c1a2b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 3px;
}

.account-form {
    max-width: 400px;
}

    .account-form label {
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
        color: var(--muted);
    }

/* My Prompts list */
.prompt-list-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.prompt-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: border-color .15s ease;
}

.prompt-list-item:hover .prompt-card {
    border-color: var(--accent);
}

.prompt-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.tool-badge {
    background: var(--panel-2);
    border: 1px solid var(--border-light);
    color: var(--muted);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Prompt Details page */
.details-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: -40px -24px 24px -64px;
    padding: 16px 24px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--border-light);
}

@media (max-width: 760px) {
    .details-toolbar {
        margin: -24px -24px 24px -24px;
    }
}

.details-toolbar form {
    display: inline;
}

/* Find's "Select a prompt..." dropdown: match the dark theme's inputs */
#findCombo {
    background: var(--panel-2);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    padding: 9px 12px;
    min-width: 260px;
    max-width: 420px;
}

    #findCombo:focus {
        outline: none;
        border-color: var(--accent);
    }

.editing-badge {
    display: inline-block;
    background: var(--panel-2);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.record-title-bar {
    background: var(--panel-2);
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 12px 24px;
}

.result-section {
    margin-top: 12px;
}

.result-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: block;
    margin-top: 8px;
}

.navbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

    .navbar.mb-3 {
        margin-bottom: 0.5rem !important;
    }

.navbar-brand {
    font-size: 18px;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar .nav-link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ====================================================================
   Below: result-form (image/prompt) grid + tightened navbar
   ==================================================================== */

/* Result section: image + prompt side by side, same size */
.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 12px;
}

.result-col-title {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 8px;
}

.result-box {
    width: 100%;
    height: 416px;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: block;
}

img.result-image {
    object-fit: contain;
    background: var(--panel-2);
}

.result-box-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    border: 1px dashed var(--border-light);
    color: var(--muted);
    font-size: 14px;
}

textarea.result-box {
    background: var(--panel-2);
    color: var(--text);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.6;
}

.result-col-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 760px) {
    .result-grid {
        grid-template-columns: 1fr;
    }
}

/* Navbar override (wins over the earlier .navbar rules above via source order + !important) */
.navbar {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: 0 !important;
}

    .navbar.mb-3 {
        margin-bottom: 0.15rem !important;
    }

.navbar-brand {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

.navbar .nav-link {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* The navbar's own inner .container was inheriting the page-content .container's
   40px vertical padding - that's what was actually keeping the navbar tall. */
.navbar .container {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Bootstrap modals: theme to match the dark UI (applies to every modal) */
.modal-content {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border-light);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
}

.modal-title {
    color: var(--text);
    font-family: 'Fraunces', serif;
}

.modal-body {
    color: var(--text);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ====================================================================
   Top bar: the name on the left, the account links on the right,
   always on ONE line - on a phone too.
   The name uses the title lettering; the links use plain lettering and
   the main one (Sign up / Log out) is boxed like a small button.
   ==================================================================== */
.topbar {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .topbar .navbar-brand {
        cursor: default;
        flex: 0 0 auto;
        margin-right: 0;
        font-weight: 600;
        white-space: nowrap;
    }

.topbar-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    min-width: 0; /* lets a long email shrink instead of pushing things onto a new line */
}

.topbar-form {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}

/* Everything on the right: plain lettering, smaller than the name */
.navbar .topbar-right .nav-link {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

/* The email of whoever is logged in: quiet, and cut short with "..." if long */
.navbar .topbar-right .topbar-user {
    color: var(--muted) !important;
    cursor: default;
    font-size: 14px !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar .topbar-right .topbar-link {
    flex: 0 0 auto;
    font-weight: 600;
}

    .navbar .topbar-right .topbar-link:hover {
        color: var(--accent) !important;
    }

/* Sign up / Log out: a small boxed button */
.navbar .topbar-right .topbar-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-weight: 600;
    padding: 7px 14px !important;
    text-decoration: none;
}

    .navbar .topbar-right .topbar-btn:hover,
    .navbar .topbar-right .topbar-btn:focus-visible {
        border-color: var(--accent);
        color: var(--accent) !important;
    }

@media (max-width: 560px) {
    .topbar .navbar-brand {
        font-size: 18px !important;
    }

    /* No room for the email on a phone */
    .navbar .topbar-right .topbar-user {
        display: none;
    }
}

/* ====================================================================
   Home page
   ==================================================================== */
.home {
    text-align: center;
    padding-top: 24px;
}

.home-title {
    font-size: 64px;
    margin-bottom: 28px;
}

.home-quote {
    color: var(--accent);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.45;
    max-width: 760px;
    margin: 0 auto;
}

.home-divider {
    border-color: var(--border);
    opacity: 1;
    margin: 56px 0 48px;
}

.home-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* The big, unmissable action button(s) */
.home-big-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 240px;
    padding: 22px 32px;
    background: var(--accent);
    color: #1c1a2b;
    border: 2px solid var(--accent);
    border-radius: 10px;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

    .home-big-btn:hover {
        background: #eab568;
        color: #1c1a2b;
        transform: translateY(-2px);
    }

.home-big-btn-title {
    font-size: 22px;
    font-weight: 700;
}

.home-big-btn-sub {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.85;
}

.home-big-btn-secondary {
    background: transparent;
    color: var(--accent);
}

    .home-big-btn-secondary:hover {
        background: var(--panel-2);
        color: var(--accent);
    }

.home-how-title {
    margin: 64px 0 24px;
    font-size: 26px;
}

.home-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}

.home-step {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px;
}

    .home-step h3 {
        font-size: 18px;
        margin: 12px 0 6px;
    }

    .home-step p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }

.home-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #1c1a2b;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 760px) {
    .home-title {
        font-size: 44px;
    }

    .home-quote {
        font-size: 20px;
    }

    .home-steps {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   My Briefs list: Home / New buttons above the title
   ==================================================================== */
.list-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

/* Wizard: friendly line shown when creating the very first brief */
.first-brief-welcome {
    background: var(--panel-2);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 16px;
}

/* Sidebar: the user's answer, shown under its question (orange, italic).
   Only the answer gets this look - the question keeps its normal style. */
.step-answer-preview {
    color: var(--accent);
    font-style: italic;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* An answered step stays readable even when it's not the current one */
.step-item.done {
    opacity: 0.9;
}

/* "You are here" bar, in three parts:
   what you are doing (light text) - the brief's title (amber italics) -
   and, while viewing, a small quiet hint. */
.record-title-label {
    color: var(--text);
}

.record-title-name {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
    margin-left: 6px;
}

.record-title-hint {
    color: var(--muted);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-left: 8px;
}

/* ====================================================================
   COMMAND BAR - the one place where the user decides what to do.
   Every button shares one look (.cmd-btn); only Delete is red.
   ==================================================================== */
.details-toolbar {
    gap: 10px 22px; /* row gap, then the wider gap BETWEEN groups */
}

.cmd-group {
    display: flex;
    align-items: center;
    gap: 8px; /* the tighter gap between buttons IN a group */
}

    .cmd-group form {
        display: inline-flex;
        margin: 0;
    }

.cmd-btn {
    background: var(--panel);
    border: 1px solid var(--border-light);
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    padding: 9px 16px;
    min-height: 42px;
    text-align: center;
    white-space: nowrap;
}

    .cmd-btn:hover,
    .cmd-btn:focus-visible {
        background: #33304e;
        border-color: var(--accent);
        color: var(--text);
    }

/* Delete: same shape, red as a warning before the click */
.cmd-btn-danger {
    border-color: #c96a6a;
    color: #e08a8a;
}

    .cmd-btn-danger:hover,
    .cmd-btn-danger:focus-visible {
        background: #c96a6a;
        border-color: #c96a6a;
        color: #1c1a2b;
    }

/* Navigator: first / previous / "Brief 3 of 12" / next / last */
.cmd-nav {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 6px;
    gap: 6px;
}

.cmd-nav-btn {
    min-width: 42px;
    padding: 6px 10px;
    min-height: 34px;
    font-size: 18px;
    line-height: 1;
}

.cmd-nav-label {
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
    padding: 0 8px;
    min-width: 110px;
    text-align: center;
}

/* The Find dropdown sits right next to the Find button */
.cmd-group #findCombo {
    margin-left: 0;
}

/* ====================================================================
   "What to do next" panel (Final Result screen)
   ==================================================================== */
.next-steps {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 22px;
}

    .next-steps summary {
        cursor: pointer;
        display: flex;
        align-items: baseline;
        gap: 14px;
        list-style: none;
    }

        .next-steps summary::-webkit-details-marker {
            display: none;
        }

        .next-steps summary::before {
            content: "▸";
            color: var(--accent);
            font-size: 16px;
        }

    .next-steps[open] summary::before {
        content: "▾";
    }

.next-steps-title {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
}

.next-steps-hint {
    color: var(--muted);
    font-size: 14px;
}

.next-steps-video {
    margin: 14px 0 0;
    font-weight: 600;
}

.next-steps-list {
    margin: 14px 0 4px;
    padding-left: 24px;
    line-height: 1.6;
}

    .next-steps-list li {
        padding: 5px 0 5px 6px;
    }

        .next-steps-list li::marker {
            color: var(--accent);
            font-weight: 700;
        }

        /* A finished step: green tick, softer text */
        .next-steps-list li.next-step-done {
            color: var(--muted);
        }

            .next-steps-list li.next-step-done::after {
                content: "  ✓ Done";
                color: var(--sage);
                font-weight: 700;
            }

/* ====================================================================
   Reference images question: up to 3 blocks (name + what to take)
   ==================================================================== */
.ref-block {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 18px 14px;
    margin-bottom: 12px;
}

.ref-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ref-block-num {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: var(--accent);
}

.ref-block-name {
    flex: 1;
    font-style: italic;
    font-size: 16px;
}

.ref-clear {
    padding: 0;
    font-size: 14px;
}

.ref-name-label,
.ref-uses-label {
    display: block;
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 6px;
}

.ref-uses-label {
    margin-top: 12px;
}

/* The tick-boxes: a real, visible checkbox next to a label and a short hint */
/* As many columns as the window allows (5 or more on a normal screen),
   so the 13 choices take fewer rows and the buttons stay in view. */
.ref-uses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 6px;
}

.ref-use {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    margin: 0;
}

    .ref-use:hover {
        border-color: var(--border-light);
    }

    /* Ticked: amber border so the choice stands out */
    .ref-use:has(input:checked) {
        border-color: var(--accent);
        background: #33304e;
    }

    .ref-use input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        accent-color: var(--accent);
        flex: 0 0 auto;
    }

.ref-use-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ref-use-body strong {
        font-size: 15px;
    }

    .ref-use-body small {
        color: var(--muted);
        font-size: 12.5px;
        line-height: 1.3;
    }

/* Read-only view (while viewing a saved brief) */
.ref-block-readonly .ref-block-head {
    justify-content: flex-start;
}

.ref-uses-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .ref-uses-readonly .selected-badge {
        margin-top: 0;
    }

/* Reference images: the optional note on each image */
.ref-note-label {
    display: block;
    color: var(--muted);
    font-size: 14px;
    margin: 12px 0 6px;
}

/* Slimmer text boxes inside a reference-image block */
.ref-block input[type=text] {
    padding: 8px 12px;
}

/* Next / Add another image / Back: stuck to the bottom of the window so
   they are always in sight, however tall the image blocks are. */
.ref-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -24px;
    padding: 12px 24px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.ref-note-input {
    width: 100%;
}

.ref-note-readonly {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--muted);
}

    .ref-note-readonly em {
        color: var(--text);
    }

/* ====================================================================
   Final Result: click the image to see it large
   ==================================================================== */
.result-image-zoomable {
    cursor: zoom-in;
    transition: border-color .15s ease;
}

    .result-image-zoomable:hover,
    .result-image-zoomable:focus-visible {
        border-color: var(--accent);
        outline: none;
    }

/* The small "Click to enlarge" label sits ON the image (bottom-right corner),
   so it doesn't push the Remove Image button out of line with the others. */
.result-image-wrap {
    position: relative;
}

.result-image-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(28, 26, 43, 0.85);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    color: var(--text);
    font-size: 12.5px;
    padding: 3px 10px;
    pointer-events: none; /* clicks go through to the image */
}

/* The large view: covers the whole window, above the sidebar and command bar */
.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(12, 11, 20, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 24px;
    cursor: zoom-out;
}

.image-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.image-viewer-close {
    position: absolute;
    top: 14px;
    right: 20px;
}

/* While the large view is open, the page behind doesn't scroll */
body.image-viewer-open {
    overflow: hidden;
}

/* ====================================================================
   LANDING PAGE (Home, logged out)
   ==================================================================== */
/* Uses nearly the full width of the window, so wide screens don't show
   empty bands at the sides and the example picture gets real space. */
.container:has(.landing) {
    max-width: 1640px;
    padding-left: 40px;
    padding-right: 40px;
}

.landing {
    padding-top: 12px;
}

/* ---------- Hero: text on the left, example on the right ---------- */
.lp-hero {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* the picture side is the bigger one */
    gap: 56px;
    align-items: center;
}

.lp-eyebrow {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.lp-headline {
    font-size: 44px;
    line-height: 1.12;
    margin-bottom: 20px;
    text-wrap: balance;
}

.lp-headline-accent {
    display: block;
    color: var(--accent);
    margin-top: 8px;
}

.lp-lead {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 28px;
}

.lp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

    .lp-cta .home-big-btn {
        min-width: 210px;
        padding: 16px 26px;
    }

.lp-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    color: var(--muted);
    font-size: 14px;
}

    .lp-trust li::before {
        content: "✓";
        color: var(--sage);
        font-weight: 700;
        margin-right: 7px;
    }

/* The right-hand side: optional photo with the example card over it */
.lp-hero-visual {
    position: relative;
    min-height: 420px;
    aspect-ratio: 3 / 2; /* grows with the window: wide screen = big picture */
    max-height: 640px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: radial-gradient(120% 90% at 85% 10%, #3a3458 0%, var(--panel) 60%);
    /* not clipped: the example card hangs out over the left edge */
    overflow: visible;
}

.lp-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* The example card sits half on the photo, half on the dark space to its
   left, so it doesn't hide the middle of the picture. */
.lp-example {
    position: absolute;
    left: -72px;
    bottom: 32px;
    width: 360px;
    background: rgba(28, 26, 43, 0.96);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

.lp-example-tag {
    display: inline-block;
    background: var(--accent);
    color: #1c1a2b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.lp-example-label {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.lp-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .lp-example-chips span {
        background: var(--panel-2);
        border: 1px solid var(--border-light);
        border-radius: 20px;
        color: var(--accent);
        font-style: italic;
        font-size: 13px;
        padding: 3px 11px;
    }

.lp-example-arrow {
    color: var(--accent);
    font-size: 20px;
    line-height: 1;
    margin: 10px 0 8px 4px;
}

.lp-example-brief {
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* ---------- Sections ---------- */
.lp-section {
    margin-top: 72px;
}

.lp-section-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 26px;
}

    .lp-section-title.lp-left {
        text-align: left;
    }

.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.lp-step,
.lp-pack,
.lp-why {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 22px;
}

    .lp-step h3,
    .lp-pack h3 {
        font-size: 18px;
        margin: 12px 0 6px;
    }

    .lp-step p,
    .lp-pack p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
    }

.lp-two-col {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: start;
}

.lp-packs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.lp-pack-soon {
    opacity: 0.7;
}

.lp-badge {
    display: inline-block;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
}

.lp-badge-now {
    border-color: var(--sage);
    color: var(--sage);
}

.lp-why .lp-section-title {
    font-size: 22px;
    margin-bottom: 14px;
}

.lp-checks {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .lp-checks li {
        position: relative;
        padding: 7px 0 7px 28px;
        line-height: 1.45;
    }

        .lp-checks li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--sage);
            font-weight: 700;
        }

/* ---------- Closing call to action ---------- */
.lp-closing {
    margin-top: 72px;
    padding: 40px 24px;
    text-align: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

    .lp-closing h2 {
        font-size: 28px;
        margin: 0;
    }

/* ---------- Wide screens: plenty of room between the buttons and the photo,
   so the card moves further left and uncovers more of the picture ---------- */
@media (min-width: 1650px) {
    .lp-example {
        left: -124px;
        width: 380px;
    }
}

/* ---------- Laptop-size screens: less room at the side, so the card hangs
   out a little less and never touches the buttons ---------- */
@media (max-width: 1500px) {
    .lp-example {
        left: -36px;
        width: 330px;
    }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 900px) {
    .lp-hero,
    .lp-two-col {
        grid-template-columns: 1fr;
    }

    .lp-headline {
        font-size: 34px;
    }

    .lp-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stacked layout: no space at the side, so the card hangs below the
       photo instead (the bottom margin leaves room for it). */
    .lp-hero-visual {
        min-height: 0;
        aspect-ratio: 3 / 2;
        margin-bottom: 230px;
    }

    .lp-example {
        left: 16px;
        right: 16px;
        top: calc(100% - 36px);
        bottom: auto;
        width: auto;
        max-width: 420px;
    }

    .container:has(.landing) {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 560px) {
    .lp-steps,
    .lp-packs {
        grid-template-columns: 1fr;
    }
}

/* On the landing page the top bar and footer line up with the wider content */
body:has(.landing) .navbar .container,
body:has(.landing) .footer .container {
    max-width: 1640px;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* ====================================================================
   PHONE AND SMALL-SCREEN LAYOUT
   (added after the first live test on a real phone)
   ==================================================================== */

/* ---------- Landing page: the two big buttons are always the same size ---------- */
/* Side by side when there is room for both, one above the other when
   there isn't - and in both cases exactly the same width and height. */
.lp-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
    max-width: 500px;
}

    .lp-cta .home-big-btn {
        min-width: 0;
        width: 100%;
        padding: 16px 12px;
        text-align: center;
    }

    .lp-cta .home-big-btn-title {
        font-size: 21px;
        white-space: nowrap;
    }

@media (max-width: 560px) {
    .lp-cta {
        max-width: none;
    }
}

@media (max-width: 900px) {
    /* The top bar lines up with the page content */
    body:has(.landing) .navbar .container,
    body:has(.landing) .footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* The photo, then the example card straight after it. The card is part
       of the page flow here (not floating), so however tall it gets it can
       never cover the "How it works" title below it. */
    .lp-hero-visual {
        aspect-ratio: auto;
        min-height: 0;
        max-height: none;
        margin-bottom: 0;
        border: none;
        background: none;
    }

    .lp-hero-photo {
        position: relative;
        inset: auto;
        display: block;
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: 14px;
    }

    .lp-example {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        max-width: 420px;
        margin: 0 16px;
    }

    /* with a photo, the card overlaps its bottom edge a little */
    .lp-hero-photo + .lp-example {
        margin-top: -36px;
    }

    /* Each section title sits close to what it introduces */
    .lp-section,
    .lp-closing {
        margin-top: 48px;
    }

    .lp-section-title {
        margin-bottom: 14px;
    }
}

/* ---------- Wizard: the command bar now sits above the list of questions ---------- */
.wizard-shell > .details-toolbar {
    margin: 0 0 0 280px; /* starts where the sidebar ends */
}

    .wizard-shell > .details-toolbar ~ .wizard-main {
        padding-top: 24px;
    }

/* On a computer the menu button isn't needed and the wrapper does nothing:
   all the buttons sit in the bar as before. */
.cmd-menu-toggle {
    display: none;
}

.cmd-menu {
    display: contents;
}

/* "You are here" bar: which hint to show */
.record-title-hint-phone {
    display: none;
}

@media (max-width: 760px) {
    /* Row 1: menu button on the left, navigator on the right.
       Row 2: the other buttons, hidden until the menu button is tapped. */
    .wizard-shell > .details-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0 10px;
        margin: 0;
        padding: 10px 16px;
    }

    .cmd-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        grid-column: 1;
        grid-row: 1;
        padding: 9px 12px;
    }

        .cmd-menu-toggle[aria-expanded="true"] {
            border-color: var(--accent);
            color: var(--accent);
        }

    /* the three bars */
    .cmd-menu-icon {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        width: 20px;
        height: 15px;
    }

        .cmd-menu-icon span {
            display: block;
            height: 3px;
            border-radius: 2px;
            background: currentColor;
        }

    .wizard-shell > .details-toolbar > .cmd-nav {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        max-width: 100%;
        min-width: 0;
    }

    .cmd-nav-btn {
        min-width: 36px;
        padding: 6px 8px;
    }

    .cmd-nav-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    /* The drop-down part */
    .cmd-menu {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height .28s ease, padding-top .28s ease, visibility 0s linear .28s;
    }

        .cmd-menu.open {
            max-height: 520px;
            padding-top: 12px;
            visibility: visible;
            transition: max-height .28s ease, padding-top .28s ease, visibility 0s;
        }

        .cmd-menu .cmd-group {
            flex-wrap: wrap;
        }

        /* a little narrower, so New / Edit / Duplicate / Delete fit on one row */
        .cmd-menu .cmd-btn {
            padding-left: 12px;
            padding-right: 12px;
        }

    #findCombo {
        min-width: 0;
        width: 100%;
    }

    /* "You are here" bar: the hint goes on its own line, in phone wording */
    .record-title-bar {
        padding: 10px 16px;
    }

    .record-title-hint-wide {
        display: none;
    }

    .record-title-hint-phone {
        display: block;
        margin: 4px 0 0;
    }
}

/* Very narrow phones: the menu button shows the three bars only, and the
   navigator says "3 of 45" instead of "Brief 3 of 45" */
@media (max-width: 400px) {
    .cmd-menu-text,
    .cmd-nav-word {
        display: none;
    }
}

/* ---------- Wizard on a computer: the top bar and the footer start where
   the sidebar ends, so the sidebar never covers the name or the footer ---------- */
@media (min-width: 761px) {
    body:has(.wizard-shell) .navbar .container,
    body:has(.wizard-shell) .footer .container {
        max-width: none;
        margin-left: 280px;
        margin-right: 0;
        width: calc(100% - 280px);
    }

    /* same for the "you are here" bar: its words are centred over the page,
       not hidden behind the sidebar on a small laptop or tablet */
    body:has(.wizard-shell) .record-title-bar {
        margin-left: 280px;
    }
}

/* ---------- Landing page on small laptops and tablets: the photo may get
   shorter instead of pushing the page wider than the screen ---------- */
@media (min-width: 901px) and (max-width: 1250px) {
    .lp-hero-visual {
        aspect-ratio: auto;
        min-height: 0;
        height: 440px;
    }
}

/* ====================================================================
   WIZARD ON A PHONE: the list of questions folds away
   One slim bar ("Question 5 of 12" + the "Your answers" button) takes
   the place of the list, so the question being answered comes first.
   On a computer the bar is hidden and the sidebar is as it always was.
   ==================================================================== */
.stepper-bar {
    display: none;
}

@media (max-width: 760px) {
    .stepper {
        padding: 0;
    }

    .stepper-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
    }

    .stepper-progress {
        display: flex;
        flex-direction: column;
        gap: 7px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .stepper-progress-text {
        color: var(--muted);
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* the thin progress line under the text */
    .stepper-progress-line {
        display: block;
        height: 5px;
        max-width: 170px;
        background: var(--panel-2);
        border-radius: 3px;
        overflow: hidden;
    }

        .stepper-progress-line span {
            display: block;
            height: 100%;
            background: var(--accent);
            border-radius: 3px;
        }

    .stepper-toggle {
        flex: 0 0 auto;
        padding: 9px 12px;
    }

        .stepper-toggle[aria-expanded="true"] {
            border-color: var(--accent);
            color: var(--accent);
        }

            .stepper-toggle[aria-expanded="true"] .stepper-toggle-arrow {
                display: inline-block;
                transform: rotate(180deg);
            }

    /* The list itself: closed until "Your answers" is tapped */
    .stepper-list {
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        padding: 0 16px;
        transition: max-height .32s ease, padding-bottom .32s ease, visibility 0s linear .32s;
    }

        .stepper-list.open {
            max-height: 1600px;
            padding-bottom: 14px;
            visibility: visible;
            transition: max-height .32s ease, padding-bottom .32s ease, visibility 0s;
        }

        /* The title and description of the list take room and say nothing new here */
        .stepper-list > h1,
        .stepper-list > .tag {
            display: none;
        }
}

/* ====================================================================
   PHONE: answer cards, the menu that stays in view, and the hint
   ==================================================================== */
@media (max-width: 760px) {
    /* Answer cards: always two per row, both the same width, whatever the
       question. (On a computer some questions ask for a fixed number of
       columns - on a phone that made the page wider than the screen.) */
    .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .option-card-wrap,
    .option-card {
        min-width: 0;
    }

    .option-card {
        padding: 8px;
        overflow-wrap: anywhere;
    }

    .option-thumb {
        height: 110px;
    }

    /* no empty line between a card's name and its description */
    .option-card br {
        display: none;
    }

    /* The "you are here" bar, and under it the menu button and navigator,
       stay at the top of the screen while the page is scrolled - so where
       you are and the way out are always in sight.
       --title-bar-height is measured by a small script in Wizard.cshtml. */
    .record-title-bar {
        position: sticky;
        top: 0;
        z-index: 21;
    }

    .wizard-shell > .details-toolbar {
        position: sticky;
        top: var(--title-bar-height, 0px);
        z-index: 20;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    }

    /* The little three-bar picture inside the hint, matching the button */
    .record-title-hint-icon {
        vertical-align: middle;
        position: relative;
        top: -1px;
        width: 16px;
        height: 12px;
        margin: 0 3px;
    }

        .record-title-hint-icon span {
            height: 2px;
        }
}

/* ====================================================================
   PHONE: the two bars that stay at the top are kept as slim as possible,
   because they take screen space the whole time the page is scrolled.
   (Buttons stay big enough to tap comfortably.)
   ==================================================================== */
@media (max-width: 760px) {
    .record-title-bar {
        padding: 6px 14px 5px;
        font-size: 16px;
        line-height: 1.25;
    }

    .record-title-hint-phone {
        margin-top: 1px;
        font-size: 13px;
        line-height: 1.3;
    }

    .wizard-shell > .details-toolbar {
        padding: 6px 12px;
    }

    .cmd-menu-toggle {
        min-height: 38px;
        padding: 7px 11px;
    }

    .wizard-shell > .details-toolbar > .cmd-nav {
        padding: 2px 4px;
    }

    .cmd-nav-btn {
        min-height: 34px;
    }

    .cmd-menu.open {
        padding-top: 8px;
        padding-bottom: 2px;
    }
}