/* Folio's shadcn/ui theme and layout. Keep shared primitives here, page behavior in styles.css. */
:root {
  --background: #f4f1e9; --foreground: #203b33;
  --card: #fffdf7; --card-foreground: #203b33;
  --popover: #fffdf7; --popover-foreground: #203b33;
  --primary: #234c3c; --primary-foreground: #fffdf7;
  --secondary: #e7ecdf; --secondary-foreground: #234c3c;
  --muted-foreground: #59675e; --accent-foreground: #234c3c;
  --border: #dcded2; --input: #dcded2; --ring: #37654f;
  --destructive: #b04432; --radius: .75rem;
  --control-height: 44px; --control-radius: 10px; --panel-radius: 16px;
}
body {background:var(--bg)}
button, a, summary {touch-action:manipulation}
.btn {height:auto;min-height:var(--control-height);border-radius:var(--control-radius);font-size:14px;line-height:1.4;white-space:normal;box-shadow:none;gap:8px}
.btn.primary {justify-content:center;padding:12px 18px;border:1px solid transparent;background:var(--primary);color:var(--primary-foreground);border-radius:var(--control-radius);box-shadow:none;min-height:48px}
.btn.primary:hover {background:var(--green)}
.btn.text-button {display:inline-flex;align-items:center;justify-content:center;padding:10px 8px;border:0;border-radius:var(--control-radius);background:transparent;color:var(--green-dark);font-weight:500;text-decoration:none}
.btn.text-button:hover {background:var(--secondary)}
.btn.is-danger,.btn.muted-button {color:var(--red)}
.input,.textarea,select {border-radius:var(--control-radius);font-size:16px;min-height:var(--control-height);background:var(--surface);box-shadow:none}
:where(button,a,input,select,textarea,summary):focus-visible {outline:2px solid var(--ring);outline-offset:3px}
.panel {border-radius:var(--panel-radius);box-shadow:none}
.topbar {gap:12px;padding-top:24px;padding-bottom:24px}
.topbar .beta {display:none}
.topbar .account-chip {margin-left:auto;background:transparent;border:0;border-radius:var(--control-radius);min-height:44px;padding:8px;color:var(--ink);font-size:13px}
.account-chip svg {width:18px;height:18px;stroke-width:1.5}
.topbar .header-library {border:0;background:transparent;border-radius:var(--control-radius);width:auto;padding:8px;min-height:44px;gap:6px}
.header-library-label {display:inline;font-size:13px}
.workspace-intro {padding:8px 0 28px}
.workspace-intro h1 {font-size:clamp(34px,5vw,48px);letter-spacing:-1.5px;margin:0;line-height:1.12}
.section-heading h2,.library-heading h2 {font-size:24px}
#upload-panel {padding:24px}
.dropzone {min-height:160px;background:var(--bg);border-radius:var(--control-radius);box-shadow:none}
.file-icon {transform:none;box-shadow:none;background:transparent;width:36px;height:40px;margin:0}
.voice-card {border-radius:var(--control-radius);box-shadow:none}
.voice-card.selected {box-shadow:0 0 0 1px var(--green)}
.library-section {margin-top:28px}
.shelf-card {border-radius:var(--control-radius);box-shadow:none}
.continue-card {border-radius:var(--panel-radius);background:var(--green-dark);box-shadow:none}
.continue-card::after {display:none}
.continue-card .book-cover {transform:none}
.book-cover {box-shadow:none}
.library-page {padding-top:8px}
.lib-header {margin-bottom:12px}
.lib-title {font-size:42px}
.library-shortcuts {display:flex;gap:16px;margin:0 0 20px;border-bottom:1px solid var(--line);padding-bottom:8px}
.library-shortcuts .btn {padding-inline:0}
.lib-toolbar input {border-radius:var(--control-radius);box-shadow:none}
.lib-filters {border-radius:var(--control-radius)}
.lib-filters button {border-radius:7px;min-height:44px}
.lib-list {gap:0;background:transparent}
.lib-row,.lib-row:first-child {border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.lib-open {padding:18px 0}
.lib-more {margin-right:0}
.lib-row:hover {background:#e7ecdf80}
.lib-back {border:0;border-radius:var(--control-radius)}
.lib-add.btn {width:auto;grid-column:auto;margin:0;min-height:44px;padding:10px 14px}
.settings-sheet {width:min(800px,calc(100vw - 48px));max-width:800px;height:min(680px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);border-radius:var(--panel-radius);box-shadow:0 16px 60px #203b3320}
.settings-header {padding:16px 20px}
.settings-header h2 {font:28px Georgia,serif}
.settings-main {display:grid;grid-template-columns:170px minmax(0,1fr);min-height:0;flex:1;overflow:hidden}
.settings-nav {display:flex;flex-direction:column;gap:4px;padding:12px;border-right:1px solid var(--line);border-bottom:0;overflow:auto}
.settings-nav-item {min-height:44px;border:0;border-radius:var(--control-radius);padding:10px 12px;font-size:14px;text-align:left;flex-shrink:0}
.settings-nav-item.is-active {background:var(--secondary);color:var(--green-dark);border:0}
.settings-body {padding:24px;min-height:0;overflow:auto;overscroll-behavior:contain}
.settings-section h2 {font:26px Georgia,serif}
.settings-section p {font-size:14px;line-height:1.65}
.settings-callout {background:var(--secondary);border-radius:var(--control-radius);padding:16px;font-size:14px}
.help-links {display:grid;margin-bottom:16px}
.help-links a {display:flex;justify-content:space-between;gap:12px;min-height:48px;align-items:center;border-bottom:1px solid var(--line);text-decoration:none;font-size:14px}
.player-panel[data-mode=sheet] .listening-art {height:96px;border-radius:var(--control-radius);background:var(--secondary);margin:16px 0;color:var(--green-dark)}
.listening-art:before,.listening-art:after {display:none}
.player-panel[data-mode=sheet] .art-book {display:none}
.player-panel[data-mode=sheet] #sound-wave {height:48px;bottom:24px}
.player-tools .tool-button:has(.tool-label),.player-tools #bookmark-add,.player-tools .sleep-chip {border-radius:var(--control-radius);background:var(--secondary);min-height:44px}
.reader-open {border-radius:var(--control-radius);min-height:44px}
.offline-controls {border-radius:0;background:transparent;padding:16px 0 0;border-top:1px solid var(--line)}
.offline-row .btn.primary {border-radius:var(--control-radius)}
.offline-actions {display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;padding-top:8px}
.offline-actions #offline-manage {display:flex;flex-wrap:wrap;gap:4px}
.offline-actions .btn {font-size:12px}
.folio-sheet {border-radius:var(--panel-radius)}
.sheet-actions,.reader-passage,.reader-answer {border-radius:var(--control-radius)}
.document-page {max-width:780px;padding-top:24px}
.document-page h1 {font-size:clamp(40px,6vw,60px);margin:28px 0 20px}
.document-page h2 {margin:32px 0 12px;font-size:26px}
.document-page h3 {margin:20px 0 8px;font-size:17px}
.document-page p {font-size:15px;line-height:1.8}
.document-page pre {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.document-page section {scroll-margin-top:24px}
.document-toc {display:flex;flex-wrap:wrap;gap:4px 20px;padding:12px 0;border-block:1px solid var(--line);margin:24px 0}
.document-toc a,.document-back {display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:none}
.plan-card {border-radius:var(--panel-radius);box-shadow:none}
.plan-featured {background:var(--surface);color:var(--ink);border:1px solid var(--green)}
.plan-featured p,.plan-featured h3 small {color:var(--muted)}
.plan-featured .eyebrow {color:var(--green)}
.plan-featured .btn.primary {background:var(--green-dark);color:var(--surface)}
.club-top nav {display:flex;align-items:center;gap:16px;font-size:13px}
.club-top nav a {min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.club-tile,.club-create,.club-now,.club-message,.meeting-card {border-radius:var(--panel-radius);box-shadow:none}
.club-tile {background:var(--surface)}
.club-tile p:empty,.club-heading>p:empty,.club-now p:empty {display:none}
.club-now {background:var(--secondary);padding:24px}
.club-now .club-ready {background:var(--surface);border-radius:var(--control-radius)}
.club-tabs {background:transparent;border-radius:0;border-bottom:1px solid var(--line);padding:0;gap:8px}
.club-tabs button {background:transparent;border-radius:0;min-height:48px;border-bottom:2px solid transparent}
.club-tabs button[aria-current=page] {box-shadow:none;background:transparent;border-bottom-color:var(--green);color:var(--green-dark)}
.club-message {border:0;border-bottom:1px solid var(--line);background:transparent;padding:20px 0;border-radius:0}
.club-message.is-mine {background:transparent}
.club-create {background:transparent;border:1px solid var(--line)}
.club-create summary,.composer-options summary {min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:14px}
.club-create summary::after,.composer-options summary::after {content:'＋';margin-left:auto;color:var(--green)}
.club-create[open]>summary::after,.composer-options details[open]>summary::after {content:'−'}
.club-create>p {font-size:13px;line-height:1.6}
.club-app textarea,.club-app select,.club-app input {border-radius:var(--control-radius)}
.club-player-title button {min-height:44px;min-width:44px}
@media(max-width:650px) {
  main {padding-inline:20px}
  .topbar {padding:calc(16px + env(safe-area-inset-top)) 20px 18px;gap:8px}
  .topbar .brand {font-size:28px;gap:6px}
  .brand img {width:26px;height:26px}
  .topbar .header-library svg {display:none}
  .workspace-intro h1 {font-size:36px}
  #upload-panel {padding:20px}
  .lib-header {display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center}
  .lib-title {font-size:36px}
  .lib-count {grid-column:2;grid-row:2}
  .lib-add.btn {grid-column:3;grid-row:1/3;font-size:13px}
  .lib-back {min-width:32px}
  .settings-sheet {width:100%;max-width:100%;height:calc(100dvh - 24px - env(safe-area-inset-top));min-height:0;max-height:calc(100dvh - 24px - env(safe-area-inset-top));border-radius:20px 20px 0 0}
  .settings-main {display:flex;flex-direction:column;overflow:hidden}
  .settings-nav {display:flex;flex-direction:row;flex-shrink:0;border-right:0;border-bottom:1px solid var(--line);overflow:auto;padding:8px 16px;gap:4px;scrollbar-width:thin}
  .settings-nav-item {width:auto;white-space:nowrap;padding:10px 12px;font-size:13px}
  .settings-body {padding:24px 20px max(24px,env(safe-area-inset-bottom));overflow:auto;flex:1}
  .player-panel[data-mode=sheet] .listening-art {height:80px}
  .player-panel[data-mode=sheet] #sound-wave {bottom:16px}
  .document-page h1 {font-size:42px;letter-spacing:-1.5px}
  .club-top {padding-inline:20px}
  .club-app {padding-inline:20px}
  .club-now {padding:20px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Share belongs to the current book's player, not global navigation. */
.topbar #library-link {display:none}
.header-library-label {position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
@media(max-width:650px) {.topbar .header-library {min-width:44px}.topbar {gap:4px}}
body:has(#folio-overlay:not([hidden])) {overflow:hidden}
.offline-controls {border:0;border-top:1px solid var(--line)}
@media(max-width:650px) {.hero-art {display:none}}
.document-page .plan-card h3 {font:44px/1.1 Georgia,serif;margin:8px 0}
.document-page .plan-card h3 small {font:14px/1.5 system-ui}
body.clubs-page {background:var(--bg)}
/* Native task disclosures and spoiler reveals should open immediately. */
details::details-content {transition:none}

/* Shadcn primitives inherit Folio layout while retaining their focus and disabled states. */
.player-expand {grid-template-columns:minmax(0,1fr) auto;justify-items:start;white-space:normal;flex-shrink:1}
.player-expand > span {min-width:0;max-width:100%}

/* Book Club chat: shadcn Message/Bubble rows inside a shared Card room. */
.chat-room {border:1px solid var(--line);border-radius:var(--panel-radius);background:var(--card);box-shadow:none;overflow:hidden}
.chat-room-header {padding:18px 20px;border-bottom:1px solid var(--line)}
.chat-room-header [data-slot],.chat-room-header #chat-room-title {display:flex;align-items:center;gap:10px;font:22px/1.3 Georgia,serif;font-weight:400;letter-spacing:0}
.chat-room-header svg {width:20px;height:20px;color:var(--green)}
.chat-room-content {padding:20px;min-width:0}
.chat-room .club-messages {display:flex;flex-direction:column;gap:24px;margin:0}
.chat-room #older-posts {margin-bottom:16px}
.chat-room .club-message {gap:10px;border:0;border-radius:0;background:transparent;padding:0;align-items:flex-start}
.chat-room .club-message.is-mine {border-left:0}
.chat-room [data-slot=message-avatar] {align-self:flex-start;background:transparent}
.chat-avatar {width:34px;height:34px;font-size:12px;color:var(--green-dark)}
.chat-avatar > span {background:var(--secondary)}
.chat-room [data-slot=message-content] {width:fit-content;max-width:calc(100% - 44px);flex:0 1 auto;gap:6px}
.chat-room .message-meta {gap:6px;flex-wrap:wrap;line-height:1.5}
.chat-room .message-meta time {font-size:11px;margin-left:auto;white-space:nowrap}
.chat-self-badge {font-size:10px;padding:1px 5px;line-height:1.4;background:var(--secondary);border:0;font-weight:500}
.chat-room [data-slot=bubble] {max-width:100%;border:1px solid var(--line);border-radius:14px;background:var(--background)}
.chat-room .is-mine [data-slot=bubble] {background:var(--secondary);border-color:#cdd8c1}
.chat-room [data-slot=bubble-content] {padding:12px 14px;width:100%;overflow-wrap:anywhere}
.chat-room .club-message p {margin:0;font-size:15px;line-height:1.65}
.chat-room .spoiler {padding:0;margin:0;background:transparent;border-radius:0}
.chat-room .spoiler summary {min-height:44px;line-height:1.6;display:list-item;padding:10px 0;font-size:13px;color:var(--green-dark)}
.chat-room .spoiler[open] summary {margin-bottom:4px}
.chat-room .moment-link {white-space:normal;height:auto;min-height:44px;justify-content:flex-start;text-align:left;font-size:12px;padding:8px 0 0;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.chat-room .message-remove {min-height:44px;padding:8px;font-size:12px;font-weight:400}
.chat-room-footer {display:block;padding:20px;border-top:1px solid var(--line)}
.chat-room .chat-composer {margin:0;padding:0;border:0;background:transparent;border-radius:0}
.chat-room .chat-composer > .primary {justify-self:end;min-width:120px}
.chat-room .club-empty {border:0;padding:24px 0}
@media(max-width:650px) {
 .chat-room-header {padding:16px}
 .chat-room-content,.chat-room-footer {padding:16px}
 .chat-room .club-message {gap:8px}
 .chat-avatar {width:30px;height:30px;font-size:11px}
 .chat-room [data-slot=message-content] {max-width:calc(100% - 38px)}
 .chat-room .message-meta time {width:100%;margin-left:0}
}

.legal-footer {display:flex;flex-wrap:wrap;gap:8px 24px;padding:24px 0;margin-bottom:90px;border-top:1px solid var(--line);font-size:14px}
.legal-footer a {display:inline-flex;align-items:center;min-height:44px;color:var(--green-dark)}

.inventory-table {overflow-x:auto}.inventory-table table {width:100%;border-collapse:collapse;font-size:14px}.inventory-table th,.inventory-table td {padding:12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.inventory-table caption {text-align:left;padding:12px 0}

.document-nav {display:flex;flex-wrap:wrap;gap:8px 20px}.document-nav a {min-height:44px;display:inline-flex;align-items:center}.document-page p,.document-page a {overflow-wrap:anywhere}

:root.native-workspace{min-height:100%;background:var(--bg,#f5f5ed)}.native-workspace body{min-height:100dvh;background:var(--bg,#f5f5ed)}

/* Compact legal links, inset consistently with the page content. */
.legal-footer {max-width:1100px;margin:28px auto 0;padding:14px 24px max(16px,env(safe-area-inset-bottom));gap:4px 20px;font-size:12px;line-height:1.4}
.legal-footer a {min-height:36px;text-decoration:none;border:0;white-space:normal}
body:has(#listen-panel:not([hidden])) > #root > .legal-footer {padding-bottom:100px}
@media(max-width:650px) {.legal-footer {margin:24px 20px 0;padding:12px 0 max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.legal-footer a {min-height:40px}.welcome .legal-footer {display:flex;justify-content:center;gap:0 18px;margin-bottom:0}}

@media(max-width:650px) {#root > main {padding-bottom:12px}.player-open #root > main {padding-bottom:320px}.native-workspace .club-top .brand {display:none}}
/* On short pages keep legal links near the bottom, with no empty tail beneath them. */
#root:has(> .legal-footer) {display:flex;flex-direction:column;min-height:100dvh}
#root:has(> .legal-footer) > main {flex:1;width:100%}
#root > .legal-footer {width:calc(100% - 48px)}
@media(max-width:650px) {#root > .legal-footer {width:calc(100% - 40px);margin-top:24px;margin-bottom:0}}
#root > .topbar {width:100%}