.boot-screen { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; color:var(--muted); font-size:14px; }
.pending-list { margin-top:28px; }
.pending-item { display:flex; align-items:center; gap:12px; width:100%; padding:16px; background:var(--surface); border-radius:12px; margin-bottom:10px; text-align:left; }
.pending-item > span { flex:1; min-width:0; }
.pending-item strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.pending-item small { display:block; font-size:12px; margin-top:5px; color:var(--muted); }
.pending-item .icon { color:var(--accent); }
.upload-progress { width:100%; height:7px; margin:20px 0 10px; accent-color:var(--accent); }
.consent { display:flex; gap:12px; align-items:flex-start; margin-top:22px; font-weight:400; font-size:12px; line-height:1.6; color:var(--muted); }
.consent input { width:22px; height:22px; min-height:22px; margin-top:3px; flex:0 0 auto; accent-color:var(--accent); }
.consent span { padding-block:3px; }
.cost-preview { padding:20px; background:var(--raised); border-radius:12px; margin:20px 0; }
.cost-preview > div { display:flex; align-items:baseline; justify-content:space-between; gap:15px; margin:10px 0; font-size:14px; }
.cost-preview strong { color:var(--accent); }
.cost-preview p { margin:14px 0 0; font-size:12px; color:var(--muted); }
.server-error { padding:14px 16px; color:var(--danger); background:#302125; border-radius:12px; font-size:13px; line-height:1.6; margin:16px 0; }
.error-reference { display:block; font-size:11px; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.inline-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.upload-state { padding:18px 0 8px; }
.upload-state h3 { margin-bottom:8px; }
.no-notes { color:var(--muted); padding:30px 0; }
.no-notes h2 { color:var(--text); margin-bottom:10px; }
.no-notes p { font-size:14px; max-width:360px; }
.archive-label { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:12px; margin-top:26px; }
.archive-label .icon { width:16px; height:16px; }
.transcript-full { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; }
.note-prose { overflow-wrap:anywhere; }
.note-prose h3 { font-size:1rem; margin:24px 0 12px; }
.note-prose .key-takeaway p { font-size:14px; }
.side-label { text-transform:none; letter-spacing:0; }
.auth-form .resend { width:100%; margin-top:12px; }
.user-error { margin-top:18px; }
.sheet-error:empty { display:none; }
.login-note { font-size:12px; color:var(--muted); line-height:1.65; margin-top:20px; }
.capture-foot { font-size:12px; }
.button.waiting { opacity:.6; }
.profile-id > div { min-width:0; }
.note-row h3 { overflow-wrap:anywhere; }
.nav-item { text-decoration:none; }
.bottom-nav a { min-height:52px; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:.6875rem; font-weight:550; text-decoration:none; }
.bottom-nav a[aria-current="page"] { color:var(--accent); }
.field input[type=checkbox]:focus-visible { outline-offset:3px; }
.consent:focus-within { outline:2px solid var(--focus); outline-offset:5px; border-radius:4px; }
.reader-meta time { font-variant-numeric:tabular-nums; }
.sheet-head { z-index:5; }
.sheet-body { overflow-wrap:anywhere; }
.auth-form .legal-links { font-size:12px; color:var(--muted); line-height:1.7; margin-top:22px; }
.auth-form .legal-links a { color:var(--muted); }
@media(max-width:700px){ .capture-panel h2 { font-size:1.375rem; } .capture-actions { grid-template-columns:1.15fr 1fr; } .capture-actions .button { font-size:12px; padding-inline:9px; } .consent { font-size:12px; } .archive-label { font-size:11px; } .reader-title { font-size:1.625rem; } }

.nav-item { border-radius:12px; }
.auth-form h1 { white-space:pre-line; }

/* Keep the layout responsive to available CSS pixels, including iPad windows. */
:root {
  --layout-gutter: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  -webkit-text-size-adjust: 100%;
}
.auth-form-area {
  padding-left: max(28px, var(--safe-left));
  padding-right: max(28px, var(--safe-right));
}
.auth-form { min-width: 0; }
.auth-form .legal-links a { display: inline-flex; min-height: 44px; align-items: center; }
.auth-form input, #upload-form input:not([type="file"]):not([type="checkbox"]) { font-size: max(1rem, 16px); }
.auth-form input.code-input { font-size: 1.5rem; }
.sheet-head { padding-left: max(25px, var(--safe-left)); padding-right: max(25px, var(--safe-right)); }
.sheet-body { padding-left: max(25px, var(--safe-left)); padding-right: max(25px, var(--safe-right)); }
dialog { scroll-padding-block: 90px 24px; }
html.keyboard-open dialog[open] {
  position: fixed;
  top: calc(var(--visual-top) + 12px);
  bottom: auto;
  margin: 0 auto;
  max-height: calc(var(--visual-height) - 24px);
}
@media(max-width:700px) {
  .topbar {
    height: auto;
    min-height: calc(76px + var(--safe-top));
    padding: calc(14px + var(--safe-top)) max(22px, var(--safe-right)) 12px max(22px, var(--safe-left));
  }
  .content { padding-left: max(22px, var(--safe-left)); padding-right: max(22px, var(--safe-right)); }
  .bottom-nav { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
  dialog { max-height: min(94svh, calc(100svh - var(--safe-top) - 12px)); }
  .sheet-head { padding-left: max(23px, var(--safe-left)); padding-right: max(23px, var(--safe-right)); }
  .sheet-body { padding-left: max(23px, var(--safe-left)); padding-right: max(23px, var(--safe-right)); }
}
@media(min-width:701px) {
  .sidebar { padding-left: calc(20px + var(--safe-left)); width: calc(244px + var(--safe-left)); }
  .workspace { margin-left: calc(244px + var(--safe-left)); }
  .topbar, .content { padding-right: max(var(--layout-gutter), var(--safe-right)); }
}
@media(min-width:701px) and (max-width:1200px) {
  :root { --layout-gutter: 30px; }
  .sidebar { width: calc(214px + var(--safe-left)); padding-left: calc(14px + var(--safe-left)); }
  .workspace { margin-left: calc(214px + var(--safe-left)); }
}
@media(min-width:701px) and (max-width:1000px) {
  :root { --layout-gutter: 24px; }
  .sidebar { width: calc(182px + var(--safe-left)); padding-left: calc(10px + var(--safe-left)); }
  .workspace { margin-left: calc(182px + var(--safe-left)); }
}
@media(max-width:1000px) and (max-height:600px) {
  .auth { display:block; }
  .auth-intro { display:none; }
  .auth-form-area { min-height:100svh; padding-block:24px; }
  .auth-form .brand { display:flex; margin-bottom:28px; }
}
@media(max-width:700px) and (max-height:700px) {
  .auth-form .brand { margin-bottom:36px; }
  .auth-form-area { padding-top:max(24px, var(--safe-top)); }
}
@media(prefers-reduced-motion:no-preference) {
  .button:active { transform:translateY(1px); }
}

@media(max-width:360px) { .content, .topbar { padding-left:max(16px, var(--safe-left)); padding-right:max(16px, var(--safe-right)); } }

.reader-tab { min-width:44px; }
.profile-section .login-note a { display:inline-flex; min-height:44px; align-items:center; }
.profile-id .avatar { flex-shrink:0; }
.profile-id strong { overflow-wrap:anywhere; }