/*
 * Platform host only (seller area and account pages): never loaded by storefront hosts, whose visitors download
 * app.css and the components' scoped styles only (App.razor). Same tokens as app.css.
 */

/* Day/night chosen on the platform (docs/lots/LOT-THEME-BASCULE.md): the server sets data-theme on <html> from the
   tf-theme cookie, never on storefront pages. Night: the prefers-color-scheme: dark block of app.css, same values (a test
   keeps them equal), whatever the system setting. Day: app.css's dark block stands aside; native controls follow. */
[data-theme="day"] {
    color-scheme: light;
}

[data-theme="night"] {
    color-scheme: dark;
    --color-bg: var(--midnight-990);
    --color-surface: #0e1530;
    --color-surface-hover: #142045;
    --color-text: var(--pearl-50);
    --color-text-muted: #a9b4d6;
    --color-border: #23305a; /* separators only (decorative) */
    --color-control-border: #6b7499; /* 3.5:1 on the hover surface: the validated #3a4a80 is 2.1:1 */
    --color-brand: var(--glacier-400); /* links: 10.2:1 at worst; sapphire would be 3.2:1 */
    --color-brand-strong: #7aeef3;
    --color-brand-soft: rgb(36 83 230 / 0.16);
    --color-accent-text: var(--glacier-400);
    --color-focus: var(--glacier-400);
    --color-primary-action-bg: var(--sapphire-500);
    --color-primary-action-hover-bg: #3a66f5;
    --color-primary-action-text: #ffffff;
    --color-success: #4fd69c;
    --color-success-soft: #0f2f2a;
    --color-warning: #f5b54a;
    --color-warning-soft: #33270f;
    --color-danger: #ff8a8f;
    --color-danger-soft: #3a1420;
    --color-on-danger: var(--midnight-990);
    --color-logo-plate: var(--pearl-50);
    --shadow-card: 0 0 0 1px #23305a;
    background: var(--color-bg);
    color: var(--color-text);
}

/* Second half of a marketing title: ink by day, pearl at night (--color-text), with a decorative cyan/pink shift. On a
   cover, use the cover's text color. */
.tf-shift {
    color: var(--color-text);
    text-shadow: var(--text-shift);
}

/* Button variants, forms and alerts, before every platform rule: moved from app.css, whose storefront pages never use
   them (their error pages use .btn, .btn-primary and .form-hint only), to keep storefronts within their byte budget. */

.btn-danger,
.btn-danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-danger);
}

.btn-link,
.btn-link:hover {
    background: none;
    border-color: transparent;
    color: var(--color-brand);
    text-decoration: underline;
}

.btn-lg {
    min-height: 3rem;
    font-size: var(--font-size-lg);
}

/* Forms (also styles the Identity template markup) */

.form-floating,
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Template markup is input, label, message: show the label first without changing DOM order. */
.form-floating > label {
    order: 1;
}

.form-floating > .form-control {
    order: 2;
}

.form-floating > .validation-message {
    order: 3;
}

.form-label,
.form-floating > label,
.form-field > label {
    font-weight: 600;
}

.form-control {
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--duration-micro) var(--ease-standard);
}

.form-control::placeholder {
    color: transparent;
}

.form-control:focus-visible {
    border-color: var(--color-brand);
}

.form-control[aria-invalid="true"],
.form-control.invalid {
    border-color: var(--color-danger);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 var(--space-2) 0 0;
    vertical-align: middle;
    accent-color: var(--color-brand);
}

.checkbox label {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
}

.validation-message,
.validation-errors,
.text-danger {
    color: var(--color-danger);
}

.validation-errors {
    padding-left: var(--space-5);
}

.field-error {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.text-success {
    color: var(--color-success);
}

.text-secondary,
.text-info {
    color: var(--color-text-muted);
}

/* Alerts */

.alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    margin-bottom: var(--space-4);
}

.alert-success {
    background: var(--color-success-soft);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.alert-warning {
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-info {
    background: var(--color-brand-soft);
    border-color: var(--color-brand);
    color: var(--color-text);
}

/* Seller forms (S02 storefront, S05 offer): card sections, affixed controls, saved values, actions */

.form-section {
    min-width: 0;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

/* Legend as a section title inside the card (floated legends leave the border). */
.form-section legend {
    float: left;
    width: 100%;
    margin-bottom: var(--space-4);
    padding: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.form-section legend + * {
    clear: both;
}

.form-section .form-field + .form-field {
    margin-top: var(--space-4);
}

.form-section textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.affix-control {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
}

.affix-control:focus-within {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.affix-control:has(.invalid) {
    border-color: var(--color-danger);
}

.affix-control .form-control {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
}

.affix-control .form-control:focus-visible {
    outline: none;
}

.affix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.saved-value {
    margin: 0;
    color: var(--color-warning);
    font-weight: 600;
}

.locked-address {
    margin: 0 0 var(--space-1);
    font-weight: 600;
}

.locked-address-value {
    margin: 0 0 var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-control);
    background: var(--color-surface-hover);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
    word-break: break-all;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.error-summary ul {
    margin: 0;
    padding-left: var(--space-5);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.status-badge-new {
    color: var(--color-text-muted);
}

.status-badge-draft {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-badge-live {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.share-label {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.share-url {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-control);
    background: var(--color-brand-soft);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
    word-break: break-all;
}

.share-url a {
    color: var(--color-text);
}

@media (max-width: 29.99rem) {
    /* Keeps room for the address on 320 px screens. */
    .affix-scheme {
        display: none;
    }

    .form-actions .btn {
        flex: 1 1 100%;
    }
}

/* Authentication pages */

.auth-layout {
    max-width: 28rem;
    margin: 0 auto;
}

.auth-switch {
    margin-top: var(--space-5);
    text-align: center;
}

.login-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.login-options > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
}

/* Minimal layout helpers used by the Identity template pages */

.row {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 64rem) {
    .row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .row > [class*="col-"] {
        grid-column: span 12;
    }

    .row > .col-lg-3 {
        grid-column: span 3;
    }

    .row > .col-lg-4,
    .row > .col-md-4 {
        grid-column: span 4;
    }

    .row > .col-lg-6,
    .row > .col-md-6,
    .row > .col-xl-6 {
        grid-column: span 6;
    }

    .row > .col-lg-9 {
        grid-column: span 9;
    }
}

.mb-3 {
    margin-bottom: var(--space-4);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.w-100 {
    width: 100%;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    text-decoration: none;
}

.nav-link.active {
    background: var(--color-primary-action-bg);
    color: var(--color-primary-action-text);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.input-group {
    display: flex;
    gap: var(--space-2);
}

/* Storefront form (S02) */

/* Form sections, affixes, status badges and actions: seller-form primitives above. */

.profile-layout {
    display: grid;
    gap: var(--space-5);
}

/* Status card */

.profile-status {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.profile-status-title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-lg);
}

.profile-status-text {
    color: var(--color-text-muted);
}

/* Form (the <form> element is rendered by EditForm) */

.profile-layout .profile-form {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

@media (min-width: 64rem) {
    .profile-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
    }

    .profile-layout .profile-form {
        grid-column: 1;
        grid-row: 1;
    }

    .profile-status {
        position: sticky;
        top: var(--space-5);
        grid-column: 2;
        grid-row: 1;
    }
}

/* Seller home (UI-02): css/seller-home.css, loaded by that page only; the draft to resume stays here. */

.home-draft {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-block: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-warning-soft);
}

.home-draft > p {
    margin: 0;
}

.home-draft-label {
    margin: 0;
    color: var(--color-warning);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.home-draft-title {
    font-weight: 700;
}

.home-draft-title a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    color: var(--color-text);
}

.home-draft-code {
    margin-left: var(--space-2);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
}

/* Offer list (S04): css/seller-offers.css, loaded by that page only. */

/* Offer editor (S05) */

.editor-layout {
    display: grid;
    gap: var(--space-5);
}

.editor-main {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.editor-main .offer-form {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

/* Status card */

.editor-status {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.editor-status-title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-lg);
}

.editor-status-states {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.editor-status-states .status-badge {
    margin: 0;
}

.editor-status-text {
    color: var(--color-text-muted);
}

.editor-code-label {
    margin: 0 0 var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.editor-code {
    display: inline-block;
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-brand-soft);
    color: var(--color-text);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.editor-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    margin-top: var(--space-3);
    font-weight: 600;
}

/* Photos */

.photos-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-lg);
}

.photos-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

/* Tiles of a row keep their own height: the cover has one button, the others two. */
.photo-tile {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
}

.photo-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-control);
    background: var(--color-surface-hover);
}

.photo-frame .photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-cover-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--color-overlay);
    color: var(--color-cover-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.photo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
}

.photo-actions .btn {
    flex: 1 1 auto;
    padding-inline: var(--space-3);
    font-size: var(--font-size-sm);
}

/* New photos travel with the details form (one sending on a phone). */
.photos-add {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
}

.photos-add .photos-title {
    margin-bottom: 0;
}

.photos-add .form-field {
    width: 100%;
}

.photo-input {
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-2);
    border: 1px dashed var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.photo-input::file-selector-button {
    min-height: 2.5rem;
    margin-right: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-hover);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Generated code: read-only, set in monospace so every character is unmistakable */

.code-assignment {
    margin: 0;
}

.code-assignment > dd {
    margin-inline-start: 0;
}

.form-section > .code-assignment {
    margin-block-end: var(--space-4);
}

.offer-code-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Availability choice */

.choice-list {
    display: grid;
    gap: var(--space-2);
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    cursor: pointer;
}

.choice:has(:checked) {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
}

.choice .choice-input,
.choice-input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem 0 0;
    accent-color: var(--color-brand);
}

.choice-text {
    display: grid;
    gap: 0.1rem;
}

/* Buttons revealed by the editor script only (retry, copy, native share): hidden means hidden, whatever .btn says. */
.btn[hidden] {
    display: none;
}

/* Optional details, folded to keep the form short on phones */

.more-fields > .more-fields-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--tap-target);
    font-size: var(--font-size-lg);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.more-fields > .more-fields-summary::-webkit-details-marker {
    display: none;
}

/* Chevron: points down when folded, up when open. */
.more-fields > .more-fields-summary::after {
    content: "";
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    margin-inline-end: var(--space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--duration-micro) var(--ease-standard);
}

.more-fields[open] > .more-fields-summary::after {
    transform: translateY(25%) rotate(-135deg);
}

.more-fields > .more-fields-summary:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-control);
}

.more-fields[open] > .more-fields-summary {
    margin-bottom: var(--space-4);
}

/* Save state: what the server holds, told in words (the dot only repeats it) */

.save-panel {
    display: grid;
    gap: var(--space-3);
}

.save-panel > .form-hint {
    margin: 0;
}

.save-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-weight: 600;
}

.save-state[data-kind="saved"] {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.save-state[data-kind="saving"] {
    background: var(--color-brand-soft);
    color: var(--color-text);
}

.save-state[data-kind="failed"] {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.save-state-dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: currentColor;
}

.save-state[data-kind="saving"] .save-state-dot {
    animation: save-state-pulse 900ms var(--ease-standard) infinite alternate;
}

@keyframes save-state-pulse {
    to {
        opacity: 0.25;
    }
}

.save-state-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.save-state time {
    font-variant-numeric: tabular-nums;
}

.save-state-retry {
    flex: none;
}

.offer-form.is-sending {
    cursor: progress;
}

/* Frozen until the server answers (read-only or disabled by the editor script): set apart, text still readable. */
.offer-form.is-sending :is(.form-control, .photo-input) {
    background: var(--color-surface-hover);
    cursor: progress;
}

/* Buttons frozen while sending (aria-disabled, so they keep the keyboard focus): no accent colour that would invite a
   tap, muted text that stays AA on its background. */
.offer-form.is-sending .btn:is(:disabled, [aria-disabled="true"]),
.offer-form.is-sending .btn:is(:disabled, [aria-disabled="true"]):hover {
    background: var(--color-surface-hover);
    border-color: var(--color-control-border);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: progress;
    transition: none; /* frozen at once: no half-way colours, whose text would not be readable */
}

/* Buttons waiting for Retry-After after too many changes (429): same muted look, the fields stay editable. */
.offer-form.is-waiting .btn[aria-disabled="true"],
.offer-form.is-waiting .btn[aria-disabled="true"]:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-control-border);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* What the server holds, kept in view while the seller types, sends or retries. */
.save-state-last {
    flex-basis: 100%;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.save-state[data-kind="saved"] .save-state-last {
    display: none;
}

/* The form's default button (Enter in a field saves): rendered but out of sight and of the tab order. */
.default-submit {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
}

/* Share panel: shown once the offer and the storefront are online */

.share-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.share-panel-title {
    margin: 0;
    font-size: var(--font-size-lg);
}

.share-panel > .form-hint {
    margin: 0;
}

.share-field {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.share-field > label,
.share-field-label {
    margin: 0;
    font-weight: 600;
}

.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.share-row .share-value,
.share-row .share-code {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Hidden buttons only (no script, or no clipboard): no empty row. */
.share-row:not(:has(> :not([hidden]))) {
    display: none;
}

.share-row .btn {
    flex: none;
}

/* A long label: it wraps on a narrow phone instead of pushing the page sideways. */
.share-row .btn.share-copy-long {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
}

.share-row-end {
    margin-top: var(--space-2);
}

.share-value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
}

/* The code is text, never a field: TikFlow generates it, nobody types it. */
.share-code {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-brand-soft);
    color: var(--color-text);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* Read-only text to copy: set apart from the fields the seller types in. */
.share-value[readonly] {
    border-style: dashed;
    background: var(--color-surface-hover);
}

.share-link {
    min-height: 0;
    resize: none;
    word-break: break-all;
}

.btn.is-done {
    border-color: var(--color-success);
    color: var(--color-success);
}

.share-caption {
    min-height: 9rem;
    resize: vertical;
}

/* The caption with the product link: read-only, but as long as the caption, so it wraps and grows like it. */
.share-with-link {
    min-height: 9rem;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.share-length[data-kind="error"] {
    color: var(--color-danger);
    font-weight: 600;
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Without the native share button (no JavaScript, or a browser without it), no empty row. */
.share-actions:not(:has(> :not([hidden]))) {
    display: none;
}

.share-feedback {
    margin: 0;
    font-weight: 600;
}

/* Empty: no blank line, but still in the accessibility tree so the next message is announced. */
.share-feedback:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.share-feedback[data-kind="success"] {
    color: var(--color-success);
}

.share-feedback[data-kind="error"] {
    color: var(--color-danger);
}

.share-unavailable {
    margin: 0 0 var(--space-3);
}

/* Duplicating from the status card */

.editor-duplicate {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.editor-duplicate .form-hint {
    margin: 0;
}

/* Deleting a draft */

.danger-zone {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    margin-top: var(--space-6);
    border-color: var(--color-danger);
}

.danger-zone-title {
    margin: 0;
    font-size: var(--font-size-lg);
}

@media (min-width: 48rem) {
    .photo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .editor-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
    }

    .editor-status {
        position: sticky;
        top: var(--space-5);
    }
}

/* Day/night switch of the platform header (ThemeSwitch.razor): three 44 px toggle buttons in one pill, the pressed one in the primary action
   colors (white on sapphire, 6.1:1); icons in the muted text color (6.1:1 at worst, 3:1 needed). */

.theme-switch {
    margin: 0;
}

.theme-switch-options {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.theme-switch-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--duration-micro) var(--ease-standard);
}

.theme-switch-option:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.theme-switch-option[aria-pressed="true"],
.theme-switch-option[aria-pressed="true"]:hover {
    background: var(--color-primary-action-bg);
    color: var(--color-primary-action-text);
}

/* Seller area tokens (docs/lots/LOT-ESPACE-VENDEUR-MAQUETTE.md, tranche A), here rather than in app.css: storefronts never
   use them, and their pages stay as light as before. PlatformPaletteTests checks every pair on them, day and night.
   --color-surface-raised: a tile raised on a card (#142045 at night, as in the mock-up; the hover surface's value by day).
   --color-nav-bar: the phones' bottom bar (#0B1533 at night, as in the mock-up). Night repeats app.css's two ways: the
   system's night unless the visitor chose day, and the chosen night (data-theme). */
:root {
    --color-surface-raised: #eef2fb;
    --color-nav-bar: #ffffff;
    --seller-nav-height: 4.875rem; /* the bar on phones, safe area excluded */
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="day"])) {
        --color-surface-raised: #142045;
        --color-nav-bar: var(--sapphire-950);
    }
}

:root[data-theme="night"] {
    --color-surface-raised: #142045;
    --color-nav-bar: var(--sapphire-950);
}

/* In the seller area the page covers the whole screen (viewport-fit=cover, App.razor): header, content and footer keep the
   side safe areas free. :has() outweighs the layout's scoped padding, which storefronts download and stays unchanged. */
html:has(.seller-nav) .site-header-inner,
html:has(.seller-nav) .site-main,
html:has(.seller-nav) .site-footer-inner {
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-left: max(var(--space-4), env(safe-area-inset-left));
}

/* Seller area navigation (Layout/MainLayout.razor; docs/lots/LOT-ESPACE-VENDEUR-MAQUETTE.md, tranche A, after the owner's
   mock-up): a bar fixed at the bottom of phones, a row of the header from 768 px on. Here rather than in the layout's
   scoped styles, which storefront visitors download too. Theme tokens only: muted entries, the current one in the
   accent text color (cyan at night, sapphire by day), « + » in the primary action colors. */

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

.seller-nav-link {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
}

.seller-nav-link:hover {
    color: var(--color-text);
}

.seller-nav-link[aria-current="page"] {
    color: var(--color-accent-text);
    font-weight: 700;
}

.seller-nav-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.seller-nav-new {
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-action-bg);
    color: var(--color-primary-action-text);
}

.seller-nav-new:hover {
    background: var(--color-primary-action-hover-bg);
    color: var(--color-primary-action-text);
}

/* « + » is never muted: on the new offer form, a ring in the accent color says it is the current page. */
.seller-nav-new[aria-current="page"] {
    color: var(--color-primary-action-text);
    box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent-text);
}

.seller-nav-new .seller-nav-icon {
    stroke-width: 2.5;
}

@media (max-width: 47.99rem) {
    .seller-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        min-height: calc(var(--seller-nav-height) + env(safe-area-inset-bottom));
        padding: var(--space-2) max(var(--space-2), env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left));
        background: var(--color-nav-bar);
        box-shadow: inset 0 1px 0 var(--color-border);
    }

    .seller-nav-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
        max-width: 32rem;
        margin: 0 auto;
    }

    .seller-nav-link {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        min-height: 52px;
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }

    /* The round « + » rises above the bar, as in the mock-up; its name stays for screen readers. */
    .seller-nav-item-new {
        display: flex;
        justify-content: center;
    }

    .seller-nav-new {
        width: 56px;
        height: 56px;
        min-height: 56px;
        transform: translateY(-14px);
        box-shadow: 0 8px 20px -6px var(--color-cover-glow);
    }

    .seller-nav-new .seller-nav-icon {
        width: 26px;
        height: 26px;
    }

    .seller-nav-new .seller-nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    /* Focus moved by Tab, focus() or an anchor scrolls clear of the bar and of the rise of « + » (WCAG 2.2, 2.4.11). */
    html:has(.seller-nav) {
        scroll-padding-bottom: calc(var(--seller-nav-height) + env(safe-area-inset-bottom) + var(--space-4));
    }

    /* The footer is the last block of the page: it keeps the bar's height (and the rise of « + ») free. */
    .site-footer-above-nav {
        padding-bottom: calc(var(--seller-nav-height) + env(safe-area-inset-bottom) + var(--space-4));
    }
}

@media (min-width: 48rem) {
    .seller-nav {
        flex: 1 1 auto;
    }

    .seller-nav-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1) var(--space-2);
    }

    .seller-nav-link {
        position: relative;
        gap: var(--space-2);
        min-height: var(--tap-target);
        padding: 0 var(--space-2);
        font-size: 0.9375rem;
    }

    .seller-nav-icon {
        width: 20px;
        height: 20px;
    }

    .seller-nav-item-new {
        order: 9;
        margin-left: auto;
    }

    .seller-nav-new {
        padding: 0 var(--space-4) 0 var(--space-3);
    }
}

/* Account menu: the initials open the account entries, the sign-out button last. */

.site-header-inner .theme-switch {
    margin-left: auto;
}

.account-menu {
    position: relative;
}

.account-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border-radius: 50%;
    background: var(--color-primary-action-bg);
    color: var(--color-primary-action-text);
    font-size: 0.9375rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.account-initials::before {
    content: attr(data-initials);
}

.account-menu-button::-webkit-details-marker {
    display: none;
}

.account-menu-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.account-menu[open] .account-menu-button {
    box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent-text);
}

.account-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 30;
    width: min(16rem, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-2);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    box-shadow: 0 16px 40px -16px var(--color-overlay);
}

.account-menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-menu-list form {
    margin: 0;
}

.account-menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    border-radius: calc(var(--radius-control) - 4px);
    color: var(--color-text);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

button.account-menu-link {
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.account-menu-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

/* Frequent seller tools stay one click away; native disclosure also works without JavaScript. */
.seller-tools {
    width: min(100% - 2rem, 72rem);
    margin: .75rem auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    font-size: .9375rem;
}
.seller-tools-link, .seller-tools-more > summary, .seller-tools-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .5rem .75rem;
    border: 1px solid var(--color-control-border);
    border-radius: .625rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
.seller-tools-presence { font-weight: 700; border-width: 2px; }
.seller-tools-more > summary { display: list-item; cursor: pointer; list-style-position: inside; }
.seller-tools-more[open] { grid-column: 1 / -1; }
.seller-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; }
.seller-tools a:hover { text-decoration: underline; }
.seller-tools a:focus-visible, .seller-tools summary:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }

.seller-tools:has(.seller-tools-more[open]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) {
    .seller-tools-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* One section menu replaces the repeated all-functions menu. */
.seller-task-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.seller-task-tools .seller-tools-link { flex: 1 1 10rem; text-align: center; justify-content: center; }
.seller-task-tools [aria-current="page"] { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-soft); font-weight: 800; }

/* Keep selling section shortcuts compact above the order-entry workspace on a phone. */
@media (max-width: 47.99rem) {
    html:has(.seller-pos) .seller-task-tools .seller-tools-link {
        flex: 1 1 0;
        min-width: 0;
        padding: .5rem .35rem;
        font-size: .875rem;
        line-height: 1.3;
    }
}