/* Reading controls and fluid layouts. Type uses rem; photos are never filtered. */
html[data-reading-size=standard] { font-size:100%; }
html[data-reading-size=larger] { font-size:115%; }
html[data-reading-size=large] { font-size:130%; }
body { line-height:1.65; }
button, input, select, textarea { line-height:1.5; }
button, .secondary-button, .primary-button, .text-button { max-width:100%; }
.heading-actions, .button-row, .letter-actions, .garden-management, .modal-actions { flex-wrap:wrap; }
.heading-actions > *, .garden-management > *, .letter-actions > *, .modal-actions > * { flex-shrink:0; }
.garden-management .text-button { white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
.garden-toolbar { align-items:center; gap:12px; flex-wrap:wrap; }
.garden-management { margin-left:auto; }
.modal-actions { align-items:stretch; }
.form-row > *, .heading-actions, .page-heading > div, .photo-caption > div { min-width:0; }
.modal-header h2 { overflow-wrap:anywhere; }
.modal-header .icon-button { flex-shrink:0; }
.modal-card { max-width:100%; }
.paper-form label { line-height:1.65; }
.paper-form input, .paper-form select, .paper-form textarea { min-height:44px; }
select { padding-right:2em; }
.filter-bar select { min-width:7em; }
.photo-caption strong { overflow-wrap:anywhere; }
.photo-caption small:empty { display:none; }
.pswp__caption { font-size:.875rem; line-height:1.65; overflow:auto; }
.paper-workspace.is-empty { display:block; }
.paper-workspace.is-empty .paper-reader { border:0; padding:0; box-shadow:none; background:transparent; }

.display-settings-trigger { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; white-space:nowrap; padding:8px 12px; min-height:42px; color:#365569; background:transparent; border:1px solid #afc7d3; border-radius:24px; font-size:.8125rem; }
.display-settings-trigger:hover { background:#e1edf2; }
.public-mode .display-settings-trigger { order:3; }
.reading-settings { display:grid; gap:22px; }
.reading-settings fieldset { border:0; min-width:0; padding:0; margin:0; }
.reading-settings legend { font-size:1rem; font-weight:600; margin-bottom:10px; }
.reading-options { display:flex; flex-wrap:wrap; gap:10px; }
.reading-choice { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:10px 16px; cursor:pointer; font-size:.9375rem; }
.reading-choice:has(:checked) { border-color:#426954; background:#edf3ed; color:#294732; }
.reading-choice input { width:18px; height:18px; flex-shrink:0; accent-color:#426954; }
.reading-sample { padding:18px; background:#f1f6f7; border-radius:8px; line-height:1.8; }
.reading-sample strong { font:500 1.25rem/1.6 'Noto Serif SC','SimSun',serif; }
.reading-sample p { margin:8px 0 0; font-size:1rem; }
.reading-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Header height follows wrapping instead of covering the first page content. */
#app.app-shell { grid-template-rows:auto minmax(calc(100vh - var(--topbar-height,68px)), auto); }
.topbar { min-height:68px; height:auto; padding-top:10px; padding-bottom:10px; gap:12px; }
.public-mode .topbar { height:auto; min-height:80px; gap:20px; }
.sidebar { top:var(--topbar-height,68px); height:calc(100dvh - var(--topbar-height,68px)); }
.brand-button { min-width:0; flex-shrink:0; }
.brand-button strong { white-space:nowrap; }
.public-mode .public-nav { gap:22px; }
.public-nav > * { white-space:nowrap; flex-shrink:0; }
.global-search { min-width:140px; }
.top-actions { flex-shrink:0; }

/* Natural grid rows keep enlarged cards and their hanging cords separated. */
.garden-bed { height:auto; min-height:660px; }
.garden-notes { position:relative; inset:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18.5rem),18.5rem)); justify-content:center; align-items:start; gap:76px clamp(26px,4vw,70px); max-width:1240px; padding:64px 32px 160px; margin:auto; }
.garden-bed .garden-note-anchor { position:relative; top:auto; left:auto; margin:0; width:100%; min-width:0; }
.garden-note { min-height:214px; }
.garden-note-anchor::before { pointer-events:none; }
.note-signature { gap:8px 12px; }
html[data-garden-motion=static] .garden-note { animation:none; }
html[data-garden-motion=static] :is(.garden-note-anchor,.garden-write) { transition:none; }
.note-message { min-height:0; }
.garden-bed::before { height:110px; background:linear-gradient(transparent,#a9b5b07a); }
.garden-bed::after { background:#52765b18; }
.guestbook-garden { background:radial-gradient(ellipse at 90% 68%,#f8e3d84d,transparent 40%),linear-gradient(180deg,#edf4f7 0,#eaf0f5 300px,#e0e2ed 560px,#d0cce2 820px,#a9b5b0 100%); }
.garden-empty { min-height:510px; }

/* A warm, low-glare palette; keep photos and WebGL flowers untouched. */
html[data-reading-theme=comfort] body { --paper:#f2f1e8; --paper-deep:#e7eadc; --ink:#303b31; --muted:#596454; --navy:#3f6250; --navy-soft:#4a6d56; --line:#ced3c2; --brand-primary:#486651; --brand-primary-hover:#36513e; --surface:#f8f7ef; --surface-soft:#ecede3; background:var(--paper); color:var(--ink); }
html[data-reading-theme=comfort] .topbar,
html[data-reading-theme=comfort] .modal-card,
html[data-reading-theme=comfort] .paper-reader,
html[data-reading-theme=comfort] .current-person-card,
html[data-reading-theme=comfort] .project-group-card,
html[data-reading-theme=comfort] .profile-menu,
html[data-reading-theme=comfort] .profile-switcher { background:#f8f7ef; color:#303b31; border-color:#ced3c2; }
html[data-reading-theme=comfort] #app .sidebar { background:#e7eadc !important; }
html[data-reading-theme=comfort] :is(input:not([type=radio]):not([type=checkbox]),select,textarea,.secondary-button) { background:#faf9f1; color:#344638; border-color:#bfc8b5; }
html[data-reading-theme=comfort] .primary-button { background:#486651; border-color:#486651; color:#fff; }
html[data-reading-theme=comfort] :is(.global-search,.quiet-empty,.reading-sample,.reading-choice:has(:checked),.nav-item.active,.paper-entry.active) { background:#e6eadc; color:#344a37; border-color:#c5ceb9; }
html[data-reading-theme=comfort] :is(.display-settings-trigger,.public-nav a,.mentor-entry,.text-button,.nav-item,.brand-button,.nav-item.active span,.nav-item.active .lucide) { color:#3f6250; }
html[data-reading-theme=comfort] :is(.memory-hero,.filmstrip) { background:#e5eadc; }
html[data-reading-theme=comfort] .memory-home::before { display:none; }
html[data-reading-theme=comfort] :is(.film-year-chip,.home-search,.home-year select,.film-arrow,.mentor-options button) { background:#f3f3e9; color:#39563e; border-color:#bec9b4; }
html[data-reading-theme=comfort] .film-year-chip[aria-pressed=true],
html[data-reading-theme=comfort] .garden-year[aria-pressed=true],
html[data-reading-theme=comfort] .memory-cta { background:#4c6652; color:#fff; border-color:#4c6652; }
html[data-reading-theme=comfort] :is(.memory-intro h1,.memory-intro h1 span,.archive-heading h2,.album-guestbook-entry h2,.compact-heading h1,.garden-heading h1,.section-title h2) { color:#344d38; }
html[data-reading-theme=comfort] :is(.memory-intro p,.memory-kicker,.garden-kicker,.garden-heading p,.garden-toolbar,.garden-footer,.photo-caption small,.compact-heading p) { color:#596454; }
html[data-reading-theme=comfort] .guestbook-garden { background:radial-gradient(ellipse at 90% 65%,#ede3ce66,transparent 45%),linear-gradient(#f2f1e8 0,#e8eadf 500px,#dcdfd3 820px,#adb9aa 100%); color:#303b31; }
html[data-reading-theme=comfort] .garden-note { background:linear-gradient(125deg,#faf8ec 58%,#eeeedd 92%,#e2e4d2); border-color:#f8f5e6; color:#303b31; }
html[data-reading-theme=comfort] :is(.reply-original,.garden-letter blockquote) { background:#e9ecde; }
html[data-reading-theme=comfort] .garden-footer { color:#344b38; }
html[data-reading-theme=comfort] .danger-text { color:#963c48; }

/* The wrapper owns the search field's border and focus ring. */
.home-search { min-height:48px; }
.home-search input[type=search],
.home-search input[type=search]:focus,
.home-search input[type=search]:focus-visible,
html[data-reading-theme=comfort] .home-search input[type=search] {
  flex:1 1 0; width:0; min-width:0; height:auto; min-height:44px;
  padding:10px 0; border:0; border-radius:0; outline:0; box-shadow:none;
  background:transparent; color:inherit; font-size:.875rem;
}
.home-search > .lucide { flex:0 0 18px; }

@media(max-width:1150px) {
  .topbar { flex-wrap:wrap; }
  .public-mode .topbar { gap:10px 18px; }
  .public-mode .brand-button { flex:1; }
  .public-mode .display-settings-trigger { order:1; margin-left:auto; }
  .public-mode .public-nav { order:2; flex:0 0 100%; width:100%; justify-content:flex-end; margin:0; }
  .page-heading { flex-wrap:wrap; }
  .workspace-columns { grid-template-columns:1fr; }
}
@media(max-width:900px) {
  #app .sidebar, #app.sidebar-collapsed .sidebar { top:var(--topbar-height,68px); height:calc(100dvh - var(--topbar-height,68px)); }
  #sidebarBackdrop { inset:var(--topbar-height,68px) 0 0; }
  .topbar .brand-button { flex:1; }
  .topbar .global-search { display:none; }
  .top-actions { margin-left:auto; }
  .paper-detail-actions { flex-wrap:wrap; }
}
@media(max-width:760px) {
  .public-mode .topbar { min-height:0; padding:10px 18px 8px; }
  .public-mode .brand-button small { display:none; }
  .public-mode .public-nav { justify-content:space-between; gap:6px 12px; flex-wrap:wrap; }
  .public-mode .public-nav a:first-child { display:block; }
  .public-mode .public-nav a { font-size:.75rem; }
  .public-mode .mentor-entry { min-height:38px; padding:6px 10px; font-size:.75rem; }
  .public-mode .display-settings-trigger { font-size:.75rem; padding:6px 9px; min-height:38px; }
  .garden-heading { padding:18px 24px 10px; }
  .garden-heading h1 { margin:8px 0; font-size:1.75rem; }
  .garden-invitation { padding-top:10px; }
  .garden-write { padding:10px 20px; min-width:0; }
  .garden-toolbar { padding:8px 0; }
  .garden-bed { min-height:440px; }
  .garden-notes { grid-template-columns:minmax(0,min(100%,20rem)); padding:48px 36px 130px; gap:70px; }
  .garden-note { padding:20px 20px 14px; min-height:204px; }
  .garden-empty { min-height:440px; }
  .garden-status { padding-top:55px; }
  .memory-hero { padding-top:20px; }
  .memory-intro h1 { font-size:1.75rem; margin-top:10px; }
  .filmstrip { height:350px; }
  .film-years { padding-top:14px; }
  .memory-intro p { line-height:1.75; }
  .memory-cta { margin-top:12px; }
  .home-albums { padding-top:28px; }
  .form-row { grid-template-columns:1fr; }
  .modal-backdrop { padding:12px; }
  .modal-card { padding:20px; }
  .gallery-breadcrumb { flex-wrap:wrap; }
  .heading-actions { gap:8px; }
}
@media(max-width:520px) {
  body:not(.public-mode) .top-actions { flex-basis:100%; justify-content:flex-end; }
  .brand-button strong { font-size:1rem; }
  .public-mode .brand-mark.graduate-logo { width:36px; height:34px; }
  .public-mode .topbar { padding-left:14px; padding-right:14px; }
  .display-settings-trigger .lucide { display:none; }
  .public-mode .mentor-entry .lucide { display:none; }
  .public-mode .public-nav { column-gap:8px; }
  .home-album-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); }
  .garden-heading { padding-left:20px; padding-right:20px; }
  .garden-kicker { flex-wrap:wrap; gap:6px; }
  .garden-years { margin-left:20px; margin-right:20px; }
  .garden-toolbar { margin-left:20px; margin-right:20px; }
  .garden-notes { padding-left:30px; padding-right:30px; }
  .garden-note { padding-left:17px; padding-right:17px; }
  .garden-management { gap:4px 8px; }
  .garden-management .text-button { font-size:.75rem; padding:5px 3px; }
  .reading-choice { padding:9px 12px; }
  .reading-options { gap:8px; }
  .home-year { flex-wrap:wrap; }
  .film-controls > div { flex-wrap:wrap; justify-content:center; }
  .film-caption { height:auto; min-height:25%; }
  .film-caption strong { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}