/* Left app sidebar — persistent nav shell for the logged-in "app" pages
   (Create/Library/Characters/Voices/Membership/Help + account), replacing the
   marketing header on those pages.

   Layout rule: every row is [40px icon slot][label]. The sidebar's horizontal
   padding equals (rail - 40) / 2, so collapsing to the rail only clips the
   labels — icons, the logo and the avatar keep the exact same x-position and
   nothing slides sideways. Collapse is an explicit toggle (persisted in
   localStorage); hovering the rail shows a tooltip, it never re-opens the
   sidebar over the page. */

/* ---------- Border / form normalisation (app pages only) ----------
   This block is load-bearing. The project's stylesheets write borders as
   `border-width` + `border-color` and never set `border-style`, so a border
   only paints where a `border-style` floor exists — which is here, and only
   for the app shell. Marketing pages deliberately have no such floor, so the
   same declarations stay inert there; that asymmetry is inherited from when
   these rules were Tailwind `border-*` utilities with preflight disabled, and
   it is preserved on purpose. The second half restores the form parts of a
   reset: bare <button> and <input> elements otherwise keep the browser's own
   border and background, which is where the boxed-in look around icon buttons
   came from. */
/* Everything here is wrapped in :where() so the whole block carries zero
   specificity — it is a floor, not an override. Utility classes (bg-zinc-900,
   border, border-2, …) and every hand-written rule still win as authored. */
:where(body.has-app-sidebar, body.studio-body) :where(*, ::before, ::after) {
    border-width: 0; border-style: solid; border-color: #e4e4e7;
}
:where(body.has-app-sidebar, body.studio-body)
:where(button, [type='button'], [type='submit'], [type='reset']) {
    -webkit-appearance: button; background-color: transparent; background-image: none;
    cursor: pointer; font: inherit; color: inherit;
}
:where(body.has-app-sidebar, body.studio-body) :where(input, textarea, select) {
    font: inherit; color: inherit;
}
:where(body.has-app-sidebar, body.studio-body) :where(button:disabled) { cursor: not-allowed; }

:root {
    --app-sidebar-w: 240px;
    --app-sidebar-rail: 72px;
    --app-sidebar-pad: 16px;   /* (rail - row) / 2 — keeps icons pinned */
    --app-sidebar-row: 40px;
    --app-sidebar-line: #ededef;
}

html.app-sidebar-collapsed { --app-sidebar-w: var(--app-sidebar-rail); }

.app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--app-sidebar-w);
    background: #fff; border-right: 1px solid var(--app-sidebar-line); z-index: 50;
    display: flex; flex-direction: column;
    padding: 14px var(--app-sidebar-pad);
    box-sizing: border-box;
    transition: width .18s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Tooltips (rail only, plus the always-on toggle) ---------- */
.app-tip { position: relative; }
.app-tip::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    padding: 5px 9px; border-radius: 7px;
    background: #18181b; color: #fff;
    font-size: 11.5px; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
    white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16); z-index: 70;
}
.app-tip:hover::after, .app-tip:focus-visible::after { opacity: 1; visibility: visible; }
/* Labels are already on screen when the sidebar is open — only the toggle
   (whose meaning flips) keeps its tooltip there. */
html:not(.app-sidebar-collapsed) .app-nav-link.app-tip::after { content: none; }

/* ---------- Header: logo doubles as the collapse toggle ---------- */
.app-sidebar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.app-sidebar-mark {
    width: var(--app-sidebar-row); height: var(--app-sidebar-row); flex-shrink: 0;
    display: grid; place-items: center; border-radius: 10px;
    transition: background .12s;
}
.app-sidebar-mark:hover { background: #f4f4f5; }
.app-sidebar-mark img, .app-sidebar-mark svg { grid-area: 1 / 1; transition: opacity .12s; }
.app-sidebar-mark img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.app-sidebar-mark svg { color: #52525b; opacity: 0; }
.app-sidebar-mark:hover img { opacity: 0; }
.app-sidebar-mark:hover svg { opacity: 1; }
html.app-sidebar-collapsed .app-sidebar-mark svg { transform: scaleX(-1); }

.app-sidebar-wordmark {
    font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; color: #18181b;
    white-space: nowrap; overflow: hidden;
}

/* ---------- Nav ---------- */
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-link {
    display: flex; align-items: center;
    height: var(--app-sidebar-row); border-radius: 10px;
    color: #52525b; font-size: 13.5px; font-weight: 500; white-space: nowrap;
    transition: background .12s, color .12s;
}
.app-nav-icon {
    width: var(--app-sidebar-row); height: var(--app-sidebar-row); flex-shrink: 0;
    display: grid; place-items: center;
}
.app-nav-icon svg { display: block; }
.app-nav-label { padding-right: 12px; overflow: hidden; text-overflow: ellipsis; }
.app-nav-link:hover { background: #f4f4f5; color: #18181b; }
.app-nav-link.is-active { background: #18181b; color: #fff; }

.app-sidebar-spacer { flex: 1; min-height: 14px; }

/* Full-bleed divider — negative margins keep the rule spanning the whole
   sidebar instead of shrinking to a 40px stub on the rail. */
.app-sidebar-footer {
    display: flex; flex-direction: column; gap: 2px;
    margin: 8px calc(var(--app-sidebar-pad) * -1) 0;
    padding: 8px var(--app-sidebar-pad) 0;
    border-top: 1px solid var(--app-sidebar-line);
}

/* ---------- Account ---------- */
.app-account { position: relative; margin-top: 2px; }
.app-account-btn {
    display: flex; align-items: center; width: 100%;
    height: 48px; border-radius: 10px; text-align: left;
    transition: background .12s;
}
.app-account-btn:hover { background: #f4f4f5; }
.app-account-avatar {
    width: 30px; height: 30px; border-radius: 999px; background: #18181b; color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.app-account-copy { min-width: 0; flex: 1; padding-right: 10px; overflow: hidden; }
.app-account-name { font-size: 13px; font-weight: 600; color: #18181b; line-height: 1.25; }
.app-account-email { font-size: 11px; color: #a1a1aa; line-height: 1.3; }

.app-account-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; width: 232px;
    background: #fff; border: 1px solid var(--app-sidebar-line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    padding: 6px; z-index: 60;
}
.app-account-menu a {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px;
    border-radius: 9px; font-size: 13px; color: #3f3f46; white-space: nowrap;
}
.app-account-menu a:hover { background: #f4f4f5; }
.app-account-menu .app-account-menu-divider { height: 1px; background: var(--app-sidebar-line); margin: 5px 2px; }
.app-account-menu .app-account-menu-meta { display: flex; align-items: center; gap: 8px; padding: 4px 10px 8px; }

/* ---------- Collapsed rail ---------- */
html.app-sidebar-collapsed .app-sidebar-wordmark,
html.app-sidebar-collapsed .app-nav-label,
html.app-sidebar-collapsed .app-account-copy { display: none; }
html.app-sidebar-collapsed .app-nav-link,
html.app-sidebar-collapsed .app-account-btn { width: var(--app-sidebar-row); }

/* Content offset for normal-flow app pages (the sidebar is fixed) */
body.has-app-sidebar {
    margin-left: var(--app-sidebar-w);
    transition: margin-left .18s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Shared page shell ----------
   One header/card/empty-state system for every page that hangs off the
   sidebar (Library, Voices, Billing, Account, Help) so they read as one app
   instead of five separately-styled screens. */
.page-wrap { max-width: 1120px; margin: 0 auto; padding: 40px 28px 72px; }
.page-wrap.is-narrow { max-width: 760px; }

.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -.022em; color: #18181b; line-height: 1.2; }
.page-sub { font-size: 13.5px; color: #71717a; margin-top: 4px; }
.page-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.page-card {
    background: #fff; border: 1px solid var(--app-sidebar-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .04);
}
.page-card-pad { padding: 26px; }

/* Centred empty / placeholder states */
.page-state { text-align: center; padding: 80px 24px; }
.page-state-icon {
    width: 56px; height: 56px; border-radius: 16px; background: #f4f4f5; color: #a1a1aa;
    display: grid; place-items: center; margin: 0 auto 16px;
}
.page-state-title { font-size: 17px; font-weight: 600; color: #18181b; letter-spacing: -.01em; }
.page-state-copy { font-size: 13.5px; color: #71717a; margin: 6px auto 0; max-width: 380px; line-height: 1.55; }

/* Primary / secondary pill buttons shared by these pages */
.page-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 500; white-space: nowrap;
    background: #18181b; color: #fff; transition: background .12s;
}
.page-btn:hover { background: #000; }
.page-btn-ghost { background: #fff; color: #3f3f46; border: 1px solid var(--app-sidebar-line); }
.page-btn-ghost:hover { background: #fafafa; border-color: #d4d4d8; }

/* ---------- Library cards ----------
   A book in the library has no cover worth showing and its status is only
   meaningful inside the studio, so the card is a plain wide plate: title
   bottom-left, date bottom-right, menu top-right. */
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.book-card {
    position: relative;
    display: block;
    min-height: 168px;
    border-radius: 18px;
    padding: 18px 20px;
    background: rgba(24, 24, 27, .045);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.book-card:hover {
    background: rgba(24, 24, 27, .075);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(24, 24, 27, .35);
}
/* The whole plate is the link; the menu button sits above it. */
.book-card-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.book-card-foot {
    position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
    pointer-events: none;
}
.book-card-title {
    font-size: 15px; font-weight: 600; color: #18181b; line-height: 1.35;
    letter-spacing: -.011em;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-width: 0;
}
.book-card-date { font-size: 12px; color: #71717a; white-space: nowrap; flex-shrink: 0; }

.book-card-menu { position: absolute; top: 12px; right: 12px; z-index: 3; }
.book-menu-btn {
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; color: #52525b;
    background: transparent; transition: background .12s, color .12s;
}
.book-menu-btn:hover, .book-menu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .85); color: #18181b; }
.book-menu {
    position: absolute; top: 34px; right: 0; width: 180px; z-index: 20;
    background: #fff; border: 1px solid var(--app-sidebar-line); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(24, 24, 27, .16); padding: 5px;
}
.book-menu button {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 9px; font-size: 13px; color: #3f3f46; text-align: left;
    transition: background .12s;
}
.book-menu button:hover { background: #f4f4f5; }
.book-menu button.is-danger { color: #dc2626; }
.book-menu button.is-danger:hover { background: #fef2f2; }
.book-menu-sep { height: 1px; background: var(--app-sidebar-line); margin: 4px 6px; }

@media (min-width: 900px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .book-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Shared forms (Survey, rename dialog) ----------
   Fields are filled rather than boxed: a soft fill that lifts to white on
   focus keeps the page calm and still shows exactly where the caret is. */
.page-form { display: grid; gap: 24px; }

/* Questions are fieldsets, and main.css does not reset those — without this
   they render with the browser's default groove border. */
.page-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.page-form legend { display: block; padding: 0; }

.field-label { display: block; font-size: 13.5px; font-weight: 600; color: #27272a; letter-spacing: -.005em; }
.field-hint { font-size: 12.5px; color: #a1a1aa; margin-top: 3px; line-height: 1.5; }
.field-optional { font-weight: 400; color: #a1a1aa; }

.field-input,
.field-textarea {
    width: 100%; margin-top: 10px;
    background: #f6f6f7; border: 1px solid transparent; border-radius: 12px;
    padding: 11px 14px; font: inherit; font-size: 14px; color: #18181b;
    outline: none; transition: background .12s, border-color .12s, box-shadow .12s;
}
.field-input::placeholder,
.field-textarea::placeholder { color: #a1a1aa; }
.field-input:hover,
.field-textarea:hover { background: #f1f1f3; }
.field-input:focus,
.field-textarea:focus {
    background: #fff; border-color: #18181b; box-shadow: 0 0 0 3px rgba(24, 24, 27, .07);
}
.field-textarea { min-height: 148px; resize: vertical; line-height: 1.6; }

/* Choice pills — one control style for single- and multi-select answers. */
.choice-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice input + span {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 15px; border-radius: 999px;
    background: #f6f6f7; color: #3f3f46; font-size: 13.5px; white-space: nowrap;
    transition: background .12s, color .12s, box-shadow .12s;
}
.choice input:hover + span { background: #ececee; }
.choice input:checked + span { background: #18181b; color: #fff; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(24, 24, 27, .18); }

/* 1-5 rating row */
.scale-row { display: flex; gap: 8px; margin-top: 10px; }
.scale-row .choice { flex: 1; }
.scale-row .choice input + span { width: 100%; }
.scale-ends {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 11.5px; color: #a1a1aa; margin-top: 8px;
}

/* Survey — numbered questions separated by hairlines, so a column of six
   prompts reads as a sequence you're working through rather than one wall. */
.survey-questions { counter-reset: survey-q; }
.survey-questions > * {
    counter-increment: survey-q;
    padding-top: 24px;
    border-top: 1px solid var(--app-sidebar-line);
}
.survey-questions > *:first-child { padding-top: 0; border-top: 0; }
.survey-questions .field-label::before {
    content: counter(survey-q);
    display: inline-grid; place-items: center;
    width: 21px; height: 21px; margin-right: 9px;
    border-radius: 999px; background: #18181b; color: #fff;
    font-size: 11px; font-weight: 700; vertical-align: 1px;
}

/* Actions row + the quiet line that sits beside the submit button. */
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-meta { font-size: 12.5px; color: #a1a1aa; }
.form-meta > span { color: #52525b; }

/* Inline result banners */
.form-note { border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; }
.form-note-ok { background: #ecfdf5; color: #065f46; }
.form-note-err { background: #fef2f2; color: #b91c1c; }

@media (max-width: 640px) {
    .page-wrap { padding: 28px 18px 60px; }
    .page-card-pad { padding: 20px; }
    .scale-row { gap: 6px; }
    .scale-row .choice input + span { padding: 0 8px; }
}


/* ---------- account block (partials/app_sidebar.html) ----------
   The state classes here are the same ones base.html's shared session script
   toggles
   (`wz-is-shown` on #nav-profile, `wz-is-open` on #nav-profile-menu), because
   that one script drives both the marketing nav and this sidebar. */

.app-account-plan {
    border-radius: 9999px;
    background-color: rgb(244 244 245);
    padding: .125rem .5rem;
    font-size: 11px;
    text-transform: capitalize;
    color: rgb(82 82 91);
}

.app-account-credits {
    font-size: 11px;
    color: rgb(113 113 122);
}

.app-account { display: none; }
.app-account.wz-is-shown { display: block; }

.app-account-menu { display: none; }
.app-account-menu.wz-is-open { display: block; }

.app-account-name,
.app-account-email {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}