#membership-panel { width: min(34rem,calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow-y: auto; border:1px solid #a18a5f; border-radius:5px; padding:1rem; background:var(--paper); color:var(--ink); overflow-wrap:anywhere; }
#membership-panel::backdrop { background: #21150f99; }
#membership-panel h2 { font: normal 1.55rem/1.2 Georgia,serif; margin: 0; }
.access-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#access-close { min-width:48px; min-height:48px; border:1px solid #a18a5f; background:#fff7de55; color:var(--ink); font-size:1.5rem; }
#membership-panel button { min-height:48px; max-width:100%; margin:.4rem .25rem .4rem 0; }
#membership-panel .primary-button { width:100%; }
#membership-panel .primary-button, #membership-panel .back-button, #membership-open { background:#fff7de55; color:var(--ink); border:1px solid #a18a5f; border-radius:5px; min-height:48px; padding:.45rem .7rem; font-size:.9rem; font-weight:600; }
#membership-panel .primary-button:hover:not(:disabled), #membership-panel .back-button:hover:not(:disabled), #membership-open:hover { background:#e5d5aa; }
.handwriting-preview #membership-panel #access-heading { font-size:1.25rem; font-weight:400; line-height:1.4; }
.handwriting-preview #membership-panel h3 { font-size:1rem; font-weight:400; }
#membership-panel details { margin-top:1rem; border-top:1px solid #bda978; }
#membership-panel summary { padding:.7rem .2rem; min-height:48px; font-weight:650; cursor:pointer; }
.proof-note { font-size:.78rem; border-bottom:1px solid #bda978; padding-bottom:.6rem; }
#access-status { color:#714313; }
.membership-stats { margin:1rem 0; }
.membership-stats>div { display:flex; justify-content:space-between; gap:.75rem; border-bottom:1px solid #bda978; padding:.6rem 0; }
.membership-stats dd { margin:0; font-weight:750; }
.admin-members { list-style:none; padding:0; }
.admin-members li { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid #bda978; padding:.5rem 0; }
.admin-notice { border-left:3px solid #7b6846; padding:.5rem .75rem; }
.membership-entry { margin:1rem 0; }
#book-content, #book-content .right-page, #book-content .left-page, #main { touch-action:pan-y pinch-zoom; }
/* Avoid accidental double-tap zoom on controls, retaining intentional pinch zoom. */
button, a, input, textarea, select, label, summary, dialog { touch-action:manipulation; }
input, textarea, select { font-size:max(16px,1rem); }
#new-heading.request-confirmation-heading { font-size:1.25rem; line-height:1.4; }
#requests-heading, #new-heading, #profile-heading { font-size:1.25rem; line-height:1.4; font-weight:400; }
#profiel:not([hidden]) + .notebook-note { border:0; padding:0; margin:0; }
#requests-list > article { border:0; border-radius:0; background:transparent; padding:0; margin:1rem 0 1.5rem; }
#requests-list > article:not(:last-child)::after { content:""; display:block; width:3.5rem; height:1px; margin:1rem auto 0; background:#a18a5f; }
.request-manage { min-height:48px; padding:.25rem .1rem; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.85rem; text-decoration:underline; text-underline-offset:.2em; cursor:pointer; }
#request-close-panel { width:min(32rem,calc(100% - 1.5rem)); max-height:calc(100dvh - 1.5rem); overflow:auto; border:2px solid #a18a5f; border-radius:5px; padding:1rem; background:var(--paper); color:var(--ink); font-family:'Kalam',cursive; overflow-wrap:anywhere; }
#request-close-panel::backdrop { background:#21150f88; }
#request-close-heading { font:inherit; font-size:1.2rem; }
#book-content h1[tabindex="-1"]:focus, dialog h2[tabindex="-1"]:focus { outline:none; }
.request-close-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
#request-feedback { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
#request-feedback #request-result { align-self:stretch; }
#request-view, #request-another {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  width:10rem; max-width:100%; min-height:48px; margin:0; padding:.45rem .7rem;
  border:1px solid #a18a5f; border-radius:5px; background:#fff7de55; color:var(--ink);
  font-family:inherit; font-size:.9rem; font-weight:600; line-height:1.5;
  text-align:center; text-decoration:none;
}
#request-view:hover, #request-another:hover { background:#e5d5aa; }
@media (max-width:760px) {
  .navigation > a { flex:1 1 0; white-space:normal; }
}
#new-recovery-code { font-family:ui-monospace,monospace; font-size:1rem; }
#invitation-code,#join-code { font-family:ui-monospace,monospace; font-size:1.15rem; letter-spacing:.06em; }
@media(prefers-reduced-motion:reduce){#membership-panel{scroll-behavior:auto}}
#conversation-panel { box-sizing:border-box; width:min(34rem,calc(100% - 1rem)); max-height:calc(100dvh - 1rem); overflow:auto; border:1px solid #a18a5f; border-radius:5px; padding:1rem; background:var(--paper); color:var(--ink); font-family:'Kalam',cursive; overflow-wrap:anywhere; }
#conversation-panel::backdrop { background:#21150f88; }
#conversation-panel h2 { font:inherit; font-size:1.25rem; line-height:1.4; margin:0; }
#conversation-panel button, #my-conversations { min-height:48px; max-width:100%; font-family:inherit; color:var(--ink); background:#fff7de55; border:1px solid #a18a5f; border-radius:5px; padding:.45rem .7rem; font-size:.9rem; }
#conversation-panel button:disabled { opacity:.6; }
#conversation-close { min-width:48px; font-size:1.5rem!important; }
.conversation-tools { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.conversation-question { border-bottom:1px solid #bda978; padding-bottom:.5rem; white-space:pre-wrap; }
.conversation-list-item { display:flex; flex-direction:column; text-align:left; width:100%; margin:.6rem 0; }
#conversation-history { max-height:30dvh; min-height:2rem; overflow:auto; overscroll-behavior:contain; padding:.25rem; }
.conversation-message { margin:.7rem 0; border:0; padding:0 .3rem; }
.conversation-message.own { border-left:2px solid #a18a5f; padding-left:.6rem; }
.conversation-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:.15rem 0; }
#conversation-panel .content-note { color:#65513b; }
#conversation-text { box-sizing:border-box; width:100%; min-height:5rem; font:inherit; font-size:max(16px,1rem); }
.conversation-privacy { margin-top:.7rem; }
.conversation-privacy summary { cursor:pointer; min-height:48px; padding:.6rem 0; box-sizing:border-box; }
#requests-list .request-manage + .request-manage { margin-left:.8rem; }
#book-previous, #book-next { min-width:48px; min-height:48px; padding:.25rem; font-size:1.4rem; line-height:1; }
@media(max-height:520px) { #conversation-history { max-height:23dvh; } #conversation-panel { padding:.6rem; } }
@media(prefers-reduced-motion:reduce) { #conversation-panel { scroll-behavior:auto; } }

#book-previous svg, #book-next svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#book-previous[hidden], #book-next[hidden] { display:none!important; }
#private-question { min-height:48px; max-width:100%; margin-top:.6rem; padding:.45rem .7rem; font:inherit; border:1px solid #a18a5f; border-radius:5px; color:var(--ink); background:#fff7de55; }
#direct-search { box-sizing:border-box; width:100%; font:inherit; font-size:max(16px,1rem); }
#question-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; margin:.4rem 0 .8rem; border-bottom:1px solid #bda978; }
#question-choices button { min-width:0; min-height:48px; padding:.3rem .15rem; margin:0; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--ink); background:transparent; font:inherit; font-size:.9rem; line-height:1.3; overflow-wrap:normal; }
#question-choices button[aria-pressed="true"] { border-bottom-color:#765635; }
#conversation-panel.question-inline { position:static; width:100%; max-width:100%; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; overflow:visible; }
#conversation-panel.question-inline > .access-top, #conversation-panel.question-inline #direct-new { display:none; }
#conversation-panel.question-inline[data-view="choose"] > .conversation-tools { display:none; }
#conversation-panel.question-inline #conversation-status:empty { display:none; }
#conversation-panel.question-inline #conversation-history { max-height:22dvh; }

#new-heading { text-align:center; }