/* Profile picker — options-header chip + modals.
 *
 * Chip lives inside the .dw-screen-header grid alongside the "Options"
 * title; visible only on the options screen (matches how #dwHomeButton /
 * #dwSubmitUserOptions are gated by body.dw-screen-options). Uses em units
 * — the wrapping .doorway_aspect_div sets font-size so 1em = 1/50th of
 * activity width.
 *
 * The modal picker mirrors the options-screen visual language: fieldset with
 * legend, chartreuse-highlighted radio pills (user_options_radio pattern),
 * and the same spacing tokens as the options form.
 */

/* ----------------- Chip -----------------
 * Chip sits in the options-screen header grid, right-hand column, aligned
 * vertically with the "Options" title. Scaled to sit at the same visual
 * weight as the title next to it. The border uses the same dark neutral as
 * the options fieldsets so it reads as part of the options chrome rather
 * than an afterthought.
 */

#dwProfileChip.dw-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--dw-space-default);
    width: auto;
    min-width: 6.5em;
    max-width: 15em;
    padding: 0.35em 0.9em;
    background: #ffffff;
    color: var(--dw-color-text-primary);
    border: 0.12em solid grey;
    border-radius: 0.7em;
    font-size: 1em;
    font-family: inherit;
}

/* Options-screen header grid slot.
 *
 * The shared header is a 3-col grid: [11em nav-slot] | [title 1fr] | [7em
 * logo] (doorway.css § dw-screen-header). On options the logo is hidden,
 * so the chip takes that right-hand column and lines up horizontally with
 * the "Options" title.
 */
body.dw-screen-options .dw-screen-header #dwProfileChip.dw-profile-chip {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

/* High-zoom / narrow-viewport reflow: drop the chip to a second header row
   so it never collides with the "Options" title. At normal widths the
   title has plenty of room in the 1fr middle column; below ~40em the
   title expands enough (font-size 1.95em on the title, tied to root)
   that the chip's 6.5em min-width no longer fits in the 7em column
   without squeezing the title. Spanning all three columns and
   right-aligning within that row keeps the chip visually anchored to the
   right while pushing it beneath the title. */
@media (max-width: 40em) {
    body.dw-screen-options .dw-screen-header #dwProfileChip.dw-profile-chip {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: end;
    }
}

@media (hover: hover) {
    #dwProfileChip.dw-profile-chip:hover {
        background: #dce6f1;
    }
}

#dwProfileChip.dw-profile-chip:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

.dw-profile-silhouette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    flex-shrink: 0;
    /* color propagates into the inline SVG's fill via currentColor. */
    color: var(--dw-color-text-disabled);
}

.dw-profile-silhouette-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dw-profile-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1em;
    line-height: 1.3;
    max-width: 8em;
    font-weight: bold;
}

.dw-profile-chip-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.8em;
    height: 0.6em;
    line-height: 1;
    color: var(--dw-color-text-secondary);
    flex-shrink: 0;
}

.dw-profile-chip-caret-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Chip is hidden on every screen except options. Match the pattern used by
   #dwHomeButton / #dwSubmitUserOptions in doorway.css:1214–1222. */
#dwProfileChip.dw-profile-chip { display: none; }
body.dw-screen-options #dwProfileChip.dw-profile-chip { display: inline-flex; }

/* ----------------- Modals (shared shell) -----------------
 * Sizes bumped ~40% from the original picker so the modal reads at the same
 * visual weight as the options screen underneath. Widths in rem so the modal
 * scales with the viewport, not the 1em-per-1/50th-activity-width setting.
 */

.dw-profile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dw-profile-modal.hidden_panel { display: none; }

.dw-profile-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dw-color-shadow-strong);
}

.dw-profile-modal-panel {
    position: relative;
    background: #ffffff;
    color: var(--dw-color-text-primary);
    border: 0.2em solid var(--dw-color-border-medium);
    border-radius: 0.8em;
    width: 40rem;
    max-width: 94%;
    max-height: 92%;
    padding: 1.6rem 1.8rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    box-shadow: 0 0.5em 1.6em var(--dw-color-shadow-modal);
    overflow-y: auto;
    font-family: "Jotter Primary", sans-serif;
}

.dw-profile-modal-heading {
    margin: 0 0 0.4rem;
    padding-right: 2.5rem;   /* leave room for the close button */
    font-size: 1.7rem;
    line-height: 1.3;
    outline: none;
}

.dw-profile-modal-heading:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

.dw-profile-modal-body {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.4;
}

/* ----- Close [x] button (top-right of every modal) ----- */

.dw-profile-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    background: transparent;
    border: 0.1em solid transparent;
    border-radius: 0.4em;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--dw-color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .dw-profile-modal-close:hover {
        background: #eee;
        border-color: var(--dw-color-border-light);
        color: var(--dw-color-text-primary);
    }
}

.dw-profile-modal-close:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

/* ----------------- Picker modal body -----------------
 * Rows are styled to look like the options-screen radio pills:
 * chartreuse-highlighted when active, bordered rounded rectangles that fill
 * the modal width so they read as full-width tap targets.
 */

.dw-profile-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem 0;
    /* Plain <ul> reset — no default disc markers, no list indent. */
    list-style: none;
    margin: 0;
}

.dw-profile-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.15rem;
}

/* Select-this-profile button. Native <button> defaults (background, border,
   padding, font, alignment) are reset so the row keeps the pre-existing
   card-style look — the pill outline and hover/focus state are drawn by the
   rules below, not by the browser's default button chrome. */
.dw-profile-row-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1 1 auto;
    cursor: pointer;
    min-width: 0;
    padding: 0.55rem 0.9rem;
    border: 0.12em solid grey;
    border-radius: 0.5em;
    background: #ffffff;
    color: inherit;
    font: inherit;
    font-size: 1.35rem;
    line-height: 1.2;
    text-align: left;
    margin: 0;
}

@media (hover: hover) {
    .dw-profile-row-label:hover {
        background: #f2f6fb;
    }
}

/* Chartreuse highlight for the active profile — mirrors user_options_radio.
   Uses the ARIA state directly so the visual and screen-reader stories can't
   drift apart. */
.dw-profile-row-label[aria-current="true"] {
    background-color: chartreuse;
}

/* Keyboard focus outline. Buttons focus natively; this ring replaces the
   default browser focus style to match the picker's existing conventions. */
.dw-profile-row-label:focus-visible {
    outline: 0.3em dotted black;
    outline-offset: 0.1em;
}

.dw-profile-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    font-weight: bold;
}

.dw-profile-row .dw-profile-silhouette {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.dw-profile-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.dw-profile-icon-btn {
    background: transparent;
    border: 0.1em solid transparent;
    border-radius: 0.35em;
    padding: 0.35rem 0.55rem;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: var(--dw-color-text-strong);
}

@media (hover: hover) {
    .dw-profile-icon-btn:hover {
        background: #eee;
        border-color: var(--dw-color-border-light);
    }
}

.dw-profile-icon-btn:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

.dw-profile-delete-btn { color: #a11; }

/* Ghost placeholder used on the Guest row so its label width matches named
   rows (which have three action buttons instead of one). Rendered as a
   disabled button so the box dimensions are identical to a real icon btn. */
.dw-profile-row-action-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.dw-profile-add-btn {
    align-self: stretch;
    padding: 0.7rem 0.8rem;
    background: transparent;
    border: 0.15em dashed var(--dw-color-border-muted);
    border-radius: 0.5em;
    font-size: 1.4rem;
    text-align: center;
    cursor: pointer;
    color: #005a9c;
    margin-top: 0.4rem;
    font-family: inherit;
}

@media (hover: hover) {
    .dw-profile-add-btn:hover {
        background: #f2f6fb;
        border-color: #005a9c;
    }
}

.dw-profile-add-btn:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

/* Whispered footnote under the Add button — light ePrivacy notice so
   users know profile data lives in localStorage on this device only. */
.dw-profile-privacy-note {
    margin: 0.8rem 0 0;
    text-align: center;
    font-size: 1.1rem;
    color: var(--dw-color-text-muted);
}

/* ----------------- Add / Rename modal body ----------------- */

.dw-profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dw-profile-field label {
    font-weight: bold;
    font-size: 1.35rem;
}

.dw-profile-name-input {
    font-size: 1.35rem;
    padding: 0.5rem 0.7rem;
    border: 0.1em solid var(--dw-color-border-medium);
    border-radius: 0.35em;
    background: #fff;
    color: var(--dw-color-text-primary);
    font-family: inherit;
}

.dw-profile-name-input:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

.dw-profile-name-error {
    margin: 0;
    min-height: 1.4em;
    font-size: 1.1rem;
    color: #a11;
}

/* "Start from" pill picker — visually parallel with user_options_radio.
 * The bare radios are visually hidden (opacity 0 rule); the pill labels
 * are the visible controls and get chartreuse on :checked. */
.dw-profile-start-from {
    border: 0.15em solid var(--dw-color-border-light);
    border-radius: 0.5em;
    padding: 0.6rem 0.9rem 0.7rem;
    margin: 0;
}

.dw-profile-start-from legend {
    font-weight: bold;
    padding: 0 0.3rem;
    font-size: 1.35rem;
}

.dw-profile-start-from-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.dw-profile-start-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.45rem 0.9rem;
    border: 0.12em solid grey;
    border-radius: 0.5em;
    background: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
}

@media (hover: hover) {
    .dw-profile-start-pill:hover { background: #f2f6fb; }
}

/* Source-profile <select>, visible only when "Copy from existing" is
 * selected. Sits inline with the two pills; native select chrome is fine
 * here — the pill radios carry the visual weight of the choice. */
.dw-profile-start-copy-select {
    font-size: 1.2rem;
    padding: 0.35rem 0.5rem;
    border: 0.12em solid grey;
    border-radius: 0.5em;
    background: #ffffff;
    font-family: inherit;
    cursor: pointer;
    max-width: 12em;
}

.dw-profile-start-from input[type="radio"]:checked + .dw-profile-start-pill {
    background-color: chartreuse;
}

/* Keyboard focus ring on the visible pill, since the underlying radio is
   position:absolute; opacity:0 and the label is where the eye lands. */
.dw-profile-start-from input[type="radio"]:focus + .dw-profile-start-pill,
.dw-profile-start-from input[type="radio"]:focus-visible + .dw-profile-start-pill {
    outline: 0.3em dotted black;
    outline-offset: 0.1em;
}
.dw-profile-start-from input[type="radio"]:focus:not(:focus-visible) + .dw-profile-start-pill {
    outline: none;
}

/* ----------------- Modal action buttons ----------------- */

.dw-profile-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.dw-profile-btn {
    padding: 0.55rem 1.2rem;
    font-size: 1.35rem;
    border-radius: 0.35em;
    border: 0.12em solid var(--dw-color-border-medium);
    background: #f4f4f4;
    color: var(--dw-color-text-primary);
    cursor: pointer;
    font-family: inherit;
}

@media (hover: hover) {
    .dw-profile-btn:hover {
        background: #e5e5e5;
    }
}

.dw-profile-btn:focus-visible {
    outline: 0.15em solid #005a9c;
    outline-offset: 0.1em;
}

.dw-profile-btn-primary {
    background: #005a9c;
    border-color: #003e6b;
    color: #fff;
}

@media (hover: hover) {
    .dw-profile-btn-primary:hover {
        background: #004a80;
    }
}

/* Destructive action (Delete-confirm). Red so a fast click doesn't blend
   with Reset. */
.dw-profile-btn-danger {
    background: #b3261e;
    border-color: #7a1a15;
    color: #fff;
}

@media (hover: hover) {
    .dw-profile-btn-danger:hover {
        background: #941911;
    }
}

/* ----------------- Reset-scope radio group (confirm modal) -----------------
 * Shown for reset actions only; hidden for delete. The radio inputs are
 * native so keyboard and AT interaction work without custom ARIA scaffolding.
 */

.dw-profile-reset-radios {
    border: none;
    padding: 0;
    margin: 0.5em 0 0.25em;
}

.dw-profile-reset-radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5em;
    margin: 0.5em 0;
}

.dw-profile-reset-radio-row input[type="radio"] {
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--dw-colour-primary, #4a90d9);
}

.dw-profile-reset-radio-row label {
    flex: 1;
    cursor: pointer;
}

.dw-profile-reset-radio-hint {
    flex-basis: 100%;
    padding-left: 1.4em;
    font-size: 0.85em;
    color: #555;
}

@media (hover: hover) {
    .dw-profile-reset-radio-row:hover label {
        text-decoration: underline;
    }
}

.dw-profile-reset-radio-row:focus-within label {
    text-decoration: underline;
}

/* ----------------- Profile-switch loading overlay -----------------
 * Brief overlay shown after selecting a profile so the user gets visible
 * feedback that a switch happened. Absolute to the app container; z-index
 * above the modal layer (z:200) so it also covers any residual dialogs.
 */

.dw-profile-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    font-family: "Jotter Primary", sans-serif;
}

.dw-profile-loading.hidden_panel { display: none; }

.dw-profile-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.6rem 2.4rem;
    background: #ffffff;
    border: 0.15em solid var(--dw-color-border-medium);
    border-radius: 0.8em;
    box-shadow: 0 0.4em 1.2em var(--dw-color-shadow-modal);
    color: var(--dw-color-text-primary);
    font-size: 1.6rem;
    font-weight: bold;
}

.dw-profile-loading-spinner {
    width: 2.2rem;
    height: 2.2rem;
    border: 0.3em solid var(--dw-color-border-light);
    border-top-color: #005a9c;
    border-radius: 50%;
    animation: dw-profile-spin 0.9s linear infinite;
}

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