/*
 * Assisted Writing — the author's wizard, the staff page that answers it, and the
 * account block on the public Ghostwriting page.
 *
 * Loaded by admin/book-intake.php, admin/book-intakes.php and ghostwriting.php, which
 * all draw the same form from includes/book-intake-form.php. main.css stays untouched so
 * these pages can change without moving a single reader-facing rule; the colours are
 * main.css's own custom properties, so a White_Label_Instance override reaches here the
 * same way it reaches the rest of the admin panel. ghostwriting.css carries only what is
 * specific to that page's own design, never a second copy of these rules.
 *
 * Layout is written with logical properties (margin-inline, border-inline-start)
 * because an author writing in Arabic may have his interface right-to-left — and on the
 * public page he has no account whose language setting could be relied on.
 */

.bi-form,
.bi-mine {
    max-width: 74ch;
    margin-inline: 0;
}

/* Books workspace */
.bi-workspace-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 28px;
}

.bi-workspace-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
}

.bi-workspace-tabs a:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.bi-workspace-tabs a[aria-current="page"] {
    border-bottom-color: var(--color-primary);
    color: var(--text-primary);
    background: rgba(var(--color-primary-rgb), .08);
}

.bi-workspace a:focus-visible,
.bi-workspace button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.bi-workspace-section {
    max-width: 1120px;
    min-width: 0;
}

.bi-workspace-section h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.bi-section-hint {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.bi-book-count {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 13px;
    vertical-align: middle;
}

.bi-book-grid,
.bi-request-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bi-book-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.bi-book-card,
.bi-request-card,
.bi-shelf-empty {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    overflow-wrap: anywhere;
}

.bi-book-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bi-book-card h3,
.bi-request-card h3,
.bi-shelf-empty h3 {
    margin: 12px 0 20px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.5;
}

.bi-request-card h3,
.bi-shelf-empty h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.bi-shelf-empty p {
    margin: 0 0 20px;
    color: var(--text-secondary);
}

.bi-book-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.bi-book-card .bi-book-meta {
    width: 100%;
    justify-content: space-between;
}

.bi-workspace .bi-status {
    color: var(--text-primary);
}

.bi-workspace .bi-status-draft {
    background: var(--bg-tertiary);
}

.bi-book-action {
    margin-top: auto;
}

.bi-workspace .btn {
    min-height: 44px;
    white-space: normal;
}

.bi-request-card .btn,
.bi-request-card .bi-section-hint {
    margin-top: 14px;
    margin-bottom: 0;
}

.bi-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

.bi-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .bi-workspace-tabs a {
        flex: 1;
        justify-content: center;
        padding-inline: 10px;
    }

    .bi-workspace .bi-choices,
    .bi-workspace .bi-choices-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bi-workspace .bi-step {
        min-inline-size: 0;
    }

    .bi-workspace .bi-portrait-actions {
        min-width: 0;
    }
}

/* ── the rail of five ────────────────────────────────────────────────────────── */

.bi-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.bi-rail-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.bi-rail-step span {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    font-size: 11px;
    font-weight: 700;
}

.bi-rail-step.is-current {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    background: rgba(var(--color-primary-rgb), .08);
}

.bi-rail-step.is-current span {
    background: var(--color-primary);
    color: #fff;
}

.bi-rail-step.is-done span {
    background: rgba(var(--color-primary-rgb), .3);
}

/* ── one step ───────────────────────────────────────────────────────────────── */

.bi-step {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px 24px 26px;
    margin: 0 0 18px;
    background: var(--bg-primary, #fff);
}

.bi-step > legend {
    font-size: 17px;
    font-weight: 700;
    padding-inline: 6px;
}

/* What the platform's assistant says at the head of a step. Set apart from a
   form-hint on purpose: a hint describes one field, this describes the step. */
.bi-libra {
    margin: 4px 0 20px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--color-accent, #06b6d4);
    color: var(--text-secondary, #4b5563);
    font-size: 14.5px;
    line-height: 1.6;
}

.bi-field {
    margin: 0 0 20px;
}

/* main.css gives a bare input no surface of its own, which is invisible on the white
   admin page and a white box on a dark one — and this form is now drawn on a public
   page whose visitor may be reading in any of the four themes. So the wizard owns its
   fields' colours, from the same tokens the rest of the site themes itself with. */
.bi-form .form-control {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.55;
}

.bi-form textarea.form-control {
    resize: vertical;
}

.bi-form .form-control::placeholder {
    color: var(--text-muted, #9ca3af);
}

.bi-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), .18);
}

.bi-field > label,
.bi-field-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.bi-required {
    margin-inline-start: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), .12);
    color: var(--color-primary-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bi-field .form-hint {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #4b5563);
}

.bi-field .form-hint code {
    font-size: 12px;
    background: var(--bg-tertiary);
    padding: 1px 5px;
    border-radius: 4px;
}

/* A field the server refused. The message itself is listed at the top of the page,
   so this only has to say which box to look in. */
.bi-field.is-problem > label,
.bi-field.is-problem > .bi-field-label {
    color: #b91c1c;
}

.bi-field.is-problem > .form-control,
.bi-field.is-problem .bi-choices {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.bi-count {
    margin: 5px 0 0;
    font-size: 12px;
    text-align: end;
    color: var(--text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.bi-count.is-over {
    color: #b91c1c;
    font-weight: 700;
}

/* ── the photograph ─────────────────────────────────────────────────────────── */

.bi-portrait {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.bi-portrait img {
    width: 116px;
    height: 116px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.bi-portrait-actions {
    flex: 1 1 260px;
}

.bi-portrait-state {
    margin: 6px 0;
    font-size: 13px;
    min-height: 1.2em;
    color: var(--text-secondary, #4b5563);
}

/* ── the choice cards ───────────────────────────────────────────────────────── */

.bi-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

.bi-choices-3 {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.bi-choice {
    display: block;
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    background: var(--bg-primary, #fff);
    transition: border-color .15s, background-color .15s;
}

.bi-choice:hover {
    border-color: var(--color-primary-light);
}

/* The radio itself stays in the DOM for keyboard and screen-reader users; it is the
   card that carries the click. */
.bi-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.bi-choice:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bi-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), .07);
}

.bi-choice-name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.bi-choice-line {
    display: block;
    font-size: 13px;
    line-height: 1.5;
}

.bi-choice-fit {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

/* ── the review step and the biography preview ──────────────────────────────── */

.bi-review {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 18px;
}

.bi-review-row {
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr;
    gap: 12px;
    padding: 9px 14px;
    font-size: 13.5px;
    border-top: 1px solid var(--border-color);
}

.bi-review-row:first-child {
    border-top: 0;
}

.bi-review-label {
    color: var(--text-muted, #6b7280);
}

.bi-review-value {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.bi-bio-preview {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 18px;
    background: var(--bg-secondary);
}

.bi-bio-preview h3 {
    margin: 0 0 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6b7280);
}

/* The classes formatAuthorBiography() emits, so the preview is the authors page, not
   an imitation of it. */
.bi-bio-preview p {
    margin: 0 0 10px;
    line-height: 1.65;
}

.bi-bio-preview .bd-bio-section-heading {
    margin: 16px 0 8px;
    font-size: 15px;
}

.bi-bio-preview .bd-bio-reading-list {
    margin: 0 0 4px;
    padding-inline-start: 20px;
}

.bi-bio-preview .bd-bio-reading-list li {
    margin-bottom: 5px;
    line-height: 1.55;
}

/* ── the account, which only the public page asks for ────────────────────────── */

/* Set apart from the steps above it on purpose: everything before this is the book,
   and this is the one part that is about the account rather than the writing. */
.bi-account {
    margin: 26px 0 20px;
    padding: 18px 20px 4px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: rgba(var(--color-primary-rgb), .04);
}

.bi-account-head {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 700;
}

.bi-account-why {
    margin-bottom: 18px;
}

.bi-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.55;
}

.bi-terms input {
    margin-top: 2px;
    flex: none;
}

/* The honeypot: out of the layout and out of the tab order, but still in the DOM so a
   script that fills every input by name fills this one too. */
.bi-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bi-cancel-hint {
    margin: 12px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--text-muted, #6b7280);
}

.bi-submit {
    display: block;
    width: 100%;
    padding: 13px;
    font-size: 15.5px;
    font-weight: 700;
}

.bi-submit:disabled {
    opacity: .7;
    cursor: progress;
}

.bi-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 34px;
}

/* .btn sets display:inline-flex, which outranks the browser's own [hidden]
   rule, so the tabs the wizard hides would stay on screen anyway. */
.bi-form [hidden] {
    display: none !important;
}

.bi-progress {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
}

/* ── messages, statuses, his own list ───────────────────────────────────────── */

.bi-flash,
.bi-problems {
    max-width: 74ch;
    border-radius: 10px;
    padding: 13px 16px;
    margin: 0 0 18px;
    font-size: 14px;
}

.bi-flash-success {
    background: rgba(16, 185, 129, .1);
    border: 1px solid rgba(5, 150, 105, .35);
}

.bi-flash-error {
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .3);
}

.bi-flash-info {
    background: rgba(var(--color-primary-rgb), .08);
    border: 1px solid rgba(var(--color-primary-rgb), .25);
}

.bi-flash-note {
    font-size: 13px;
    margin: 7px 0 10px;
}

.bi-problems {
    background: rgba(220, 38, 38, .06);
    border: 1px solid rgba(220, 38, 38, .3);
}

.bi-problems h2 {
    margin: 0 0 8px;
    font-size: 15px;
}

.bi-problems ul {
    margin: 0;
    padding-inline-start: 20px;
}

.bi-problems li {
    margin-bottom: 4px;
}

.bi-mine {
    margin-top: 40px;
}

.bi-mine h2 {
    font-size: 18px;
    margin-bottom: 12px;
}

.bi-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0, 0, 0, .06);
}

.bi-status-pending {
    background: rgba(234, 179, 8, .16);
}

.bi-status-in_review {
    background: rgba(var(--color-primary-rgb), .14);
}

.bi-status-returned {
    background: rgba(220, 38, 38, .12);
}

.bi-status-published {
    background: rgba(16, 185, 129, .16);
}

.bi-return-note {
    margin: 6px 0 0;
    padding-inline-start: 10px;
    border-inline-start: 3px solid rgba(220, 38, 38, .4);
    font-size: 13px;
    color: var(--text-secondary, #4b5563);
}

@media (max-width: 640px) {
    .bi-step {
        padding: 18px 16px 22px;
    }

    .bi-review-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .bi-rail {
        gap: 4px;
    }

    .bi-rail-step {
        font-size: 12px;
        padding: 6px 9px;
    }
}

/* ── the staff review page ───────────────────────────────────────────────────── */

.biq-detail {
    max-width: 88ch;
}

.biq-back {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--text-secondary, #4b5563);
}

.biq-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.biq-detail-head h2 {
    margin: 0 0 4px;
    font-size: 22px;
}

/* Where the request came from, stacked over where it has got to: the two answers a
   reviewer needs before reading a word of the brief. */
.biq-origin-stack {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.biq-origin {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(var(--color-secondary-rgb, 124, 58, 237), .12);
    color: var(--color-secondary-dark, #5b21b6);
}

.biq-block {
    margin-top: 26px;
}

.biq-block h3 {
    margin: 0 0 12px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #4b5563);
}

.biq-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.biq-facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.biq-facts > li > span {
    min-width: 12ch;
    color: var(--text-secondary, #4b5563);
    font-size: 13px;
}

.biq-fields {
    display: grid;
    grid-template-columns: 22ch 1fr;
    gap: 10px 18px;
    margin: 0;
}

.biq-fields dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    padding-top: 2px;
}

.biq-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.biq-fields .form-hint {
    display: block;
}

.biq-prose {
    line-height: 1.7;
}

/* What the author typed keeps its own line breaks and shows as unstyled text: staff
   compare it against the assembled biography above it. */
.biq-verbatim {
    font-family: inherit;
    white-space: normal;
    background: rgba(0, 0, 0, .03);
    border-radius: 8px;
    padding: 10px 12px;
}

.biq-thumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.biq-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(220, 38, 38, .12);
    color: #991b1b;
}

.biq-radios {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.biq-radio {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
}

.biq-radio input {
    grid-row: span 2;
    align-self: center;
    margin: 0;
}

.biq-radio span {
    font-weight: 600;
}

.biq-radio small {
    color: var(--text-secondary, #4b5563);
    font-size: 12px;
}

.biq-radio:has(input:checked) {
    border-color: rgba(var(--color-primary-rgb), .5);
    background: rgba(var(--color-primary-rgb), .06);
}

.biq-review textarea {
    width: 100%;
    box-sizing: border-box;
}

.biq-review-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.biq-saved {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
}

@media (max-width: 700px) {
    .biq-fields {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .biq-fields dt {
        margin-top: 12px;
    }
}

/* ── searchable genre dropdown ─────────────────────────────────────────────── */

.bi-genre-search {
    position: relative;
}

.bi-genre-search-input {
    width: 100%;
}

.bi-genre-search-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
}

.bi-genre-search-list.is-open {
    display: block;
}

.bi-genre-search-list li {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #1f2937);
}

.bi-genre-search-list li:hover,
.bi-genre-search-list li.is-highlighted {
    background: var(--bg-tertiary, #f3f4f6);
}

.bi-genre-search-list li.is-selected {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
    font-weight: 600;
}

.bi-genre-search-list .bi-genre-group-header {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
    cursor: default;
}

.bi-genre-search-list .bi-genre-group-header:hover {
    background: transparent;
}

.bi-genre-search-list .bi-no-results {
    padding: 14px;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    cursor: default;
}

.bi-genre-search-list .bi-no-results:hover {
    background: transparent;
}