/* A quiet camera in the hand: photo, camera shelf, shutter, then the tools. */
:root { --app-paper: #f8f5ee; --app-sage: #536747; --app-line: #e3e4d8; }
.camera-app { display:flex; flex-direction:column; height:min(920px,calc(100dvh - 48px)); min-height:610px; padding:0 16px; background:var(--app-paper); border:1px solid #e5e5db; border-radius:30px; box-shadow:0 18px 60px #37422b0c; overflow:hidden; }
.app-shell { padding-block:24px; gap:80px; }
.app-header { flex:0 0 67px; height:67px; padding:0 2px; gap:8px; }
.mobile-wordmark { font-size:22px; gap:6px; color:#46523d; }
.mobile-wordmark svg { width:19px; height:19px; }
.mobile-wordmark small { margin-top:5px; font-size:8px; letter-spacing:.1px; color:#879077; }
.header-actions { gap:0; flex-shrink:0; }
.header-actions .icon-button { width:40px; height:44px; }
.pwa-status-button { min-height:44px; padding:4px; font-size:8px; gap:4px; }
.camera-workspace { display:flex; flex-direction:column; flex:1 1 0; min-height:180px; margin:0; padding:0 7px; border:1px solid #555e4b; border-radius:23px; background:#394031; box-shadow:inset 0 1px 0 #ffffff0e; }
.camera-toolbar { flex:0 0 38px; height:38px; padding:0 4px; border:0; color:#d1d5c4; }
.mode-name { max-width:calc(100% - 82px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#d1d5c4; }
.toolbar-actions { gap:0; }
.camera-toolbar .icon-button { width:38px; height:38px; color:#d3d8c6; }
.camera-toolbar .icon-button[aria-pressed=true] { background:#ffffff15; color:#fffdf3; }
.viewfinder-stage { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-height:0; padding:0 5px; }
.viewfinder { flex:none; border-radius:12px; box-shadow:0 4px 16px #10170c24; background:#252f24; }
.viewfinder-shade { display:none; }
.sample-label { top:12px; left:12px; font-size:9px; color:#fffdf5; background:#27302399; padding:6px 9px; border-radius:20px; }
.camera-start { inset:0; padding:18px 10px 43px; justify-content:flex-end; gap:12px; background:none; }
.start-caption { align-self:center; padding:5px 10px; border-radius:20px; background:#26302099; font-family:var(--serif); font-size:15px; color:#fffdf5; text-shadow:none; line-height:1.6; word-break:keep-all; text-wrap:balance; }
.start-camera-button { min-height:44px; padding:11px 18px; border:1px solid #fffdf28a; border-radius:24px; background:#fffdf4eb; color:#425239; font-size:12px; box-shadow:0 3px 16px #16200b16; }
.sample-import-button { display:none; }
.viewfinder-caption { bottom:13px; left:13px; right:13px; font-size:8px; color:#fffdf3; text-shadow:0 1px 6px #1018099c; }
.frame-corner { display:none; }
.camera-status { flex:0 0 34px; min-height:34px; gap:8px; margin:0; padding:0 4px; color:#d0d6c3; }
.camera-status>span { font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camera-status .text-button { min-width:48px; min-height:32px; font-size:10px; color:#e1e6d5; }
.film-section { flex:0 0 auto; position:relative; display:flex; flex-direction:column; min-height:0; margin:9px 0 0; padding:0; }
.film-section .section-heading,.film-section .film-description,.film-section .shelf-caption,.film-section .collection-invite { display:none; }
.camera-current { order:-1; flex:0 0 auto; min-height:39px; margin:0 0 4px; padding:0 2px; gap:8px; }
.camera-current>div:first-child { min-width:0; }
.camera-current #active-camera-model { display:none; }
.camera-current strong { font-family:var(--serif); font-size:18px; font-weight:400; line-height:1.5; }
.camera-current #active-camera-lens { margin-top:1px; font-size:10px; color:#8a927d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camera-current-actions { flex-shrink:0; }
.camera-current #camera-about { width:44px; height:44px; border-radius:50%; color:#7b8b69; }
.camera-current #adjust-button { display:none; }
.film-strip.camera-strip { flex:0 0 auto; min-height:60px; gap:8px; margin:0; padding:2px 2px 3px; }
.camera-strip .camera-choice { flex:0 0 calc((100% - 16px)/3); min-width:0; padding:0; min-height:60px; }
.camera-choice-art { height:43px; border:1px solid transparent; border-radius:12px; opacity:.72; }
.camera-choice[aria-pressed=true] .camera-choice-art { border-color:#9daa8c; box-shadow:0 0 0 2px #e5eadb; opacity:1; transform:none; }
.camera-choice-name { margin-top:4px; font-size:10px; line-height:1.5; color:#859174; }
.camera-choice[aria-pressed=true] .camera-choice-name { color:#4b623d; }
.memory-current-note { max-width:100%; margin:5px 2px 1px; font-family:var(--serif); font-size:11px; color:#7a8769; }
.adjust-panel { flex:none; }
.capture-controls { flex:0 0 96px; min-height:96px; margin:0; padding:6px 8px; border:0; }
.capture-row { align-items:center; }
.shutter-group { gap:0; }
.shutter { width:66px; height:66px; padding:5px; border:1px solid #b5bba6; background:#edeedf; box-shadow:none; }
.shutter-inner { background:var(--camera-body); border:3px solid var(--app-paper); box-shadow:inset 0 0 0 1px #ffffff24; transition:background .2s,transform .15s; }
.shutter:active .shutter-inner { transform:scale(.93); }
.shutter-action { margin-top:3px; font-size:9px; color:#697b56; }
.secondary-capture-button { min-width:64px; min-height:54px; gap:4px; color:#7e8b6d; font-size:9px; }
.secondary-icon { width:42px; height:34px; border:0; border-radius:12px; background:#eeeee3; }
.secondary-icon svg { width:19px; height:19px; }
.shutter-caption { display:none; }
.app-navigation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:0 0 auto; min-height:65px; margin:0 -16px; padding:7px 12px max(9px,env(safe-area-inset-bottom)); border-top:1px solid var(--app-line); background:#fbf9f3; }
.app-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:48px; padding:4px; border-radius:14px; color:#839174; font-size:10px; line-height:1.4; transition:color .16s,background .16s; }
.app-nav-item svg { width:21px; height:21px; }
.app-nav-item:hover,.app-nav-item[aria-expanded=true] { background:#e9edde; color:#506841; }
.app-nav-item:disabled { opacity:.4; }
.app-nav-item:focus-visible { outline-offset:-2px; }

/* Sheets share a handle, a stable heading and native scroll in the content. */
dialog.app-sheet { width:min(620px,100%); max-width:100%; height:min(92dvh,900px); max-height:calc(100dvh - max(16px,env(safe-area-inset-top))); margin:auto auto 0; padding:0; overflow:hidden; border-radius:28px 28px 0 0; background:var(--app-paper); box-shadow:0 -8px 60px #17220e20; transition:transform .18s ease; }
dialog.app-sheet[open] { display:flex; flex-direction:column; animation:app-sheet-in .23s cubic-bezier(.2,.7,.3,1); }
dialog.app-sheet.is-dragging { transform:translateY(var(--sheet-drag,0)); transition:none; animation:none; }
.sheet-handle { display:grid; place-items:center; flex:0 0 25px; width:100%; margin:0; cursor:grab; touch-action:none; }
.sheet-handle:active { cursor:grabbing; }
.sheet-handle::before { content:""; width:34px; height:4px; border-radius:4px; background:#cdd3bf; }
.app-sheet>header,.app-sheet>.collection-header { flex:0 0 auto; }
.app-sheet .sheet-scroll { flex:1 1 0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; scroll-padding:16px; -webkit-overflow-scrolling:touch; }
.app-sheet .sheet-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.app-sheet .sheet-scroll:focus-visible { outline:2px solid #8e9e7c; outline-offset:-3px; }
.camera-detail-dialog.app-sheet { width:min(460px,100%); }
dialog::backdrop { background:#2831206b; backdrop-filter:blur(5px); }
@keyframes app-sheet-in { from { opacity:.5; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:759px) {
  .app-shell { display:block; min-height:100dvh; padding:0; }
  .camera-app { width:100%; height:100dvh; min-height:0; max-height:none; padding:env(safe-area-inset-top) 14px 0; border:0; border-radius:0; box-shadow:none; }
  .app-header { flex-basis:61px; height:61px; }
  .app-navigation { margin-inline:-14px; }
}
@media(max-width:359px) {
  .camera-app { padding-inline:11px; }
  .app-header { flex-basis:56px; height:56px; }
  .mobile-wordmark { font-size:20px; gap:4px; }
  .mobile-wordmark small { font-size:7px; max-width:125px; }
  .header-actions .icon-button { width:36px; }
  .pwa-status-button { font-size:7px; padding-inline:2px; }
  .camera-current strong { font-size:16px; }
  .camera-current #active-camera-lens { font-size:9px; }
  .camera-toolbar { flex-basis:34px; height:34px; }
  .camera-status { flex-basis:29px; min-height:29px; }
  .camera-status>span { font-size:8px; }
  .camera-choice-art { height:36px; }
  .film-strip.camera-strip,.camera-strip .camera-choice { min-height:53px; }
  .film-section { margin-top:6px; }
  .capture-controls { flex-basis:84px; min-height:84px; padding-block:3px; }
  .shutter { width:60px; height:60px; }
  .app-navigation { min-height:60px; margin-inline:-11px; padding-inline:8px; padding-top:4px; }
  .app-nav-item { font-size:9px; }
  .start-caption { font-size:12px; }
  .start-camera-button { font-size:11px; padding-inline:13px; }
}
@media(min-width:760px) {
  dialog.app-sheet { margin:auto; border-radius:28px; height:min(88dvh,850px); }
}
@media(max-height:560px) and (orientation:landscape) {
  .desktop-story { display:none; }
  .app-shell { display:block; max-width:100%; padding:0; }
  .camera-app { display:grid; grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:46px minmax(0,1fr) 82px 62px; column-gap:14px; width:100%; max-width:none; height:100dvh; min-height:0; max-height:none; padding:0 12px; border:0; border-radius:0; }
  .app-header { grid-column:1/-1; height:46px; }
  .mobile-wordmark small { display:none; }
  .camera-workspace { grid-column:1; grid-row:2/5; margin-bottom:10px; min-height:0; }
  .film-section { grid-column:2; grid-row:2; margin-top:0; justify-content:center; }
  .capture-controls { grid-column:2; grid-row:3; min-height:0; padding-block:0; }
  .shutter { width:58px; height:58px; }
  .app-navigation { grid-column:2; grid-row:4; min-height:0; margin:0; border-radius:16px 16px 0 0; padding:5px; }
  .app-nav-item { font-size:8px; }
  .app-nav-item svg { width:18px; height:18px; }
}
@media(prefers-reduced-motion:reduce) {
  dialog.app-sheet[open] { animation:none; }
  dialog.app-sheet,.app-nav-item,.shutter-inner,.camera-choice-art { transition:none; }
}
@media(forced-colors:active) {
  .app-sheet .sheet-scroll { scrollbar-width:auto; }
  .app-sheet .sheet-scroll::-webkit-scrollbar { display:revert; width:revert; height:revert; }
  .app-nav-item[aria-expanded=true] { outline:2px solid Highlight; }
}