/* action-sheet.css — shared long-press action sheet (2026-07-31, per Owen:
   "apply Home's tap-and-hold logic across all the other pages"). Originally
   built directly in index.html (2026-07-31, task "Reorder long-press action
   sheet to match Select's order") — pulled out here, alongside the matching
   JS in js/components/actionSheetComponent.js, so Chapters/Core/Refine can
   get the exact same sheet Home already has instead of each growing their
   own copy. Same shared-file pattern as bottom-bar.css/name-modal.css: one
   file, linked wherever the sheet is needed, rather than duplicated per
   page's inline <style> block (that duplication convention is fine for
   layout choices unique to one page — it's not appropriate here, since this
   needs to look and behave identically everywhere). */

/* Dedicated backdrop (2026-07-31, per Owen: tapping the background should
   dismiss the sheet the same way everywhere) — the sheet used to reuse each
   page's own #overlay for this, but #overlay sits at z-index 4 while nested
   full-screen views (like Chapters' page-detail, z-index 8) sit above it, so
   background taps never reached #overlay there. This backdrop is injected
   together with the sheet itself (see actionSheetComponent.js), so it's
   always a sibling of whatever nested view is open and always above it —
   works identically on every page regardless of what's underneath. */
/* z-index 31+ (2026-08-01, per Owen: a "..." button inside the enlarged
   photo viewer should open this same sheet) — the photo viewer
   (js/photo-detail.css, z-index 30) is the one place the sheet now needs to
   render on TOP of instead of underneath, so the whole stack (backdrop/
   sheet/lifted-photo preview) was bumped above it. Doesn't affect the
   normal case of opening the sheet from a grid — photo-detail is closed
   (display:none) then anyway. */
.as-backdrop{position:absolute;inset:0;z-index:31;background:rgba(0,0,0,0.42);opacity:0;pointer-events:none;transition:opacity .2s;}
.as-backdrop.show{opacity:1;pointer-events:all;}
.action-sheet{position:absolute;left:14px;right:14px;bottom:82px;background:var(--bg-elevated);border:0.5px solid var(--border-default);border-radius:18px;padding:7px;z-index:32;display:none;box-shadow:0 20px 42px rgba(0,0,0,.38);}
.action-sheet.open{display:block;}
.as-item{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:13px;color:var(--text-primary);font-size:15px;cursor:pointer;}
/* hover: hover (2026-08-01, per Owen: touching-but-not-tapping an item
   shouldn't grey it out) — plain :hover fires on touchstart on iOS/Android
   and can stay "stuck" on until you tap elsewhere, which looked like a
   selection that wasn't actually chosen. Gating on (hover: hover) restricts
   this to real pointer devices (mouse/trackpad) that can genuinely hover
   without touching, so touch never triggers it. Same fix applied to every
   other :hover rule in the app — see the other files touched alongside
   this one. */
@media (hover: hover){ .as-item:hover{background:rgba(255,255,255,.08);} }
.as-item.muted{color:var(--text-tertiary);}
.as-item.danger{color:#ff453a;}
.as-icon{flex-shrink:0;color:var(--text-muted);}
.as-icon.filled{color:#ff375f;}

/* Add to Chapter picker — standardized with Select Moments' Refine picker
   sheet (2026-08-01, per Owen). The long-press/detail action used to open
   an older "type a new chapter name" modal; it now browses Favorites,
   existing chapters, pages, and New chapter/New page in the same shape the
   Select flow uses. Kept in the shared action-sheet stylesheet so every
   page that imports the action sheet gets the same Add to Chapter UI. */
.as-chapter-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:34;display:none;}
.as-chapter-overlay.open{display:block;}
.as-chapter-menu{position:absolute;left:18px;right:18px;bottom:24px;max-height:60%;overflow-y:auto;scrollbar-width:none;background:var(--bg-elevated);border:0.5px solid var(--border-default);border-radius:20px;padding:8px;display:none;z-index:35;box-shadow:0 18px 42px rgba(0,0,0,0.42);}
.as-chapter-menu::-webkit-scrollbar{display:none;}
.as-chapter-menu.open{display:block;}
.as-chapter-section-title{padding:8px 12px 6px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);font-weight:700;}
.as-chapter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;color:var(--text-tertiary);font-size:15px;cursor:pointer;}
.as-chapter-row.on{background:var(--border-soft);color:var(--text-primary);}
@media (hover: hover){ .as-chapter-row:hover{background:var(--border-soft);color:var(--text-primary);} }
.as-chapter-left{display:flex;align-items:center;gap:10px;min-width:0;}
.as-chapter-dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex-shrink:0;}
.as-chapter-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.as-chapter-count{font-size:12px;color:var(--text-muted);white-space:nowrap;}
.as-chapter-create{border:0.5px solid var(--border-soft);margin:4px 0 3px;}
.as-chapter-create .as-chapter-name{font-weight:500;}
.as-chapter-plus{font-size:19px;line-height:1;color:var(--text-muted);}
.as-chapter-divider{height:0.5px;background:var(--border-soft);margin:5px 8px;}
.as-chapter-empty{padding:12px 14px;font-size:13px;color:var(--text-muted);}

/* Back-navigation row for the Refine/More sub-views. Already duplicated as
   its own small utility across index.html/refine.html/refine-session.html
   (pre-existing, not introduced here) — included again here rather than
   relying on cross-file reuse, so this stylesheet is self-contained and
   doesn't silently break if it's ever linked on a page that doesn't happen
   to carry its own copy. */
.add-back-row{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;color:var(--text-tertiary);font-size:14px;cursor:pointer;border-bottom:0.5px solid var(--border-soft);margin-bottom:4px;}
@media (hover: hover){ .add-back-row:hover{color:var(--text-primary);} }
.add-back-chevron{font-size:18px;line-height:1;}

/* Lifted-photo FLIP preview — floats the long-pressed cell's thumbnail
   above the sheet while it's open. See openActionSheet() in
   actionSheetComponent.js for the animation itself; this is just the
   static box it animates. */
.lp-preview{position:fixed;z-index:33;overflow:hidden;background:var(--bg-card);box-shadow:0 24px 48px rgba(0,0,0,.5);opacity:0;pointer-events:none;border-radius:16px;transform-origin:top left;will-change:transform;transition:transform .38s cubic-bezier(.22,.61,.36,1),border-radius .38s cubic-bezier(.22,.61,.36,1),opacity .2s ease;}
.lp-preview.show{opacity:1;}
.lp-preview img{width:100%;height:100%;object-fit:cover;display:block;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}

/* Shared Details editor -- same panel shape Select Moments uses, but
   self-injected by detailsEditorComponent.js so the long-press/photo-viewer
   action sheet can open it from any page. */
.shared-details-overlay{z-index:36;}
.details-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.78);border-radius:26px;display:none;padding:86px 18px 24px;}
.details-overlay.open{display:block;}
.details-panel{height:100%;border-radius:22px;background:var(--bg-elevated);border:0.5px solid var(--border-default);padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 52px rgba(0,0,0,0.44);overflow-y:auto;scrollbar-width:none;}
.details-panel::-webkit-scrollbar{display:none;}
.details-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.details-title{font-size:15px;font-weight:600;color:var(--text-primary);}
.details-close{width:32px;height:32px;border-radius:50%;border:0.5px solid var(--border-default);background:var(--bg-control);color:var(--text-secondary);font-size:19px;line-height:1;cursor:pointer;}
.details-section{display:flex;flex-direction:column;gap:7px;}
.details-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);font-weight:700;}
.details-info-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.details-info-row .details-label{margin:0;}
.details-info-value{font-size:13px;color:var(--text-secondary);text-align:right;}
.details-sub{font-size:10px;color:var(--text-muted);margin-top:-2px;}
.details-input,.details-textarea{width:100%;border:0.5px solid var(--border-default);background:var(--bg-shell);color:var(--text-primary);border-radius:12px;font:inherit;font-size:13px;outline:none;}
.details-input{height:38px;padding:0 11px;}
.details-textarea{min-height:92px;resize:none;padding:10px 11px;line-height:1.4;}
.tag-entry{display:flex;gap:8px;}
.tag-entry .details-input{min-width:0;}
.tag-add{width:38px;height:38px;border-radius:12px;border:0.5px solid var(--border-default);background:var(--bg-control);color:var(--text-primary);font-size:17px;cursor:pointer;flex-shrink:0;}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;min-height:25px;}
.tag-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;border-radius:999px;background:var(--bg-control);border:0.5px solid var(--border-default);color:var(--text-secondary);padding:6px 8px;font-size:11px;}
.tag-remove{border:0;background:transparent;color:var(--text-tertiary);font:inherit;font-size:13px;line-height:1;cursor:pointer;padding:0;}
/* Comments (2026-08-07) — multi-entry, each with its own "date added",
   per Owen: "each comment should get its own block". Deliberately styled
   like a small quote card rather than reusing .tag-chip, since these can
   run to a full sentence rather than a short word. */
.comment-list{display:flex;flex-direction:column;gap:8px;}
.comment-block{position:relative;border-radius:12px;background:var(--bg-shell);border:0.5px solid var(--border-default);padding:9px 30px 9px 11px;}
.comment-year{font-size:10px;letter-spacing:.06em;color:var(--text-muted);font-weight:700;margin-bottom:2px;}
.comment-text{font-size:13px;color:var(--text-primary);line-height:1.4;}
.comment-remove{position:absolute;top:8px;right:9px;border:0;background:transparent;color:var(--text-tertiary);font:inherit;font-size:14px;line-height:1;cursor:pointer;padding:2px;}
.comment-entry{display:flex;gap:8px;}
.comment-entry .details-input{min-width:0;}
.details-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.toggle{width:44px;height:26px;border-radius:99px;background:var(--muted-control);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;}
.toggle.on{background:#30d158;}
.toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text-primary);transition:transform .2s;}
.toggle.on .toggle-knob{transform:translateX(18px);}