/* authored. archive: softer surfaces, loaded last so it sits over each view's own styles.
   Rounded controls with a light shadow that lifts a little on hover; cards, panels and tiles sit on a soft
   shadow. Controls with no fill of their own (tabs, ghost buttons, the top bar) stay flat. */
:where(button, .btn) {
  box-shadow: var(--shadow-sm);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
:where(button:not(:disabled), .btn):hover { box-shadow: var(--shadow); transform: translateY(-1px); }
:where(button:not(:disabled), .btn):active { box-shadow: var(--shadow-sm); transform: translateY(0); }
button.ghost, button.ghost:hover, .facet-item, .facet-more, .date-year, .topbar button, .topbar .btn, .chip button, .nav-menu button, .nav-sheet button,
.tabbar button, .rs-tab, .admin-tabs button, .ask-starter, .seg button, .rs-subtab, .ql-x, .lb-nav,
.help-contents button, .ql-row { box-shadow: none; transform: none; }
input, select, textarea { border-radius: var(--radius); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.arch-search-input, .ask-starter, .ql-row { border-radius: 0; box-shadow: none; } /* underlined fields stay underlined */
.chip { box-shadow: var(--shadow-sm); }

.card, .panel, .obj, .ql-card, .ql-hero, .ql-note, .pf-card, .rr-card, .ph-card, .set-card, .rs-card, .rs-req, .rs-mode, .rs-draft,
.pv-project, .pv-check, .ph-sheet, .kn-item, .ph-footage, .ph-caveats, .rr-brief, .vn-item, .sr-shows, .ask-card, .ask-form, .modal, .km,
.arch-card, .arch-row, .arch-tablewrap, .ph-frame, .sh-frame, .stg-rec {
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.card, .obj, .ql-card, .pf-card, .rr-card, .ph-card, .set-card, .rs-card, .rs-req, .rs-draft, .ask-card, .ask-form, .modal { background: var(--card); }
.card, .panel, .pf-card, .rr-card, .ph-card, .rs-card, .ql-card { border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.modal { box-shadow: var(--shadow-lift); }
.nav-menu { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.toast { border-radius: var(--radius); }

/* Image tiles and tables */
.arch-thumb, .arch-row-thumb, .t-thumb img, .pf-shot, .pv-shot, .ql-mini, .dup-img, .dup-noimg, .sim-item img, .fb-img, .cap-card-thumb, .th-img,
.admin-scroll, .help-table, .rs-table, .rv-ql, .pf-add-list { border-radius: var(--radius); overflow: hidden; }
.arch-thumb img { border-radius: 0; }
.arch-card:hover .arch-thumb img { transform: none; }

/* Cards that are links lift under the pointer. */
.pf-card, .rr-card, .ph-card, .set-card, .rs-card, .pv-project, .arch-card, .arch-row, .ph-frame, .sh-frame { transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.pf-card:hover, .rr-card:hover, .ph-card:hover, .set-card:hover, .rs-card:hover, .pv-project:hover, .arch-card:hover, .arch-row:hover, .ph-frame:hover, .sh-frame:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

/* Printed ephemera cards and QR sheets keep their square edges. */
.card-page, .cards-sheet, .cards-sheet * { border-radius: 0; box-shadow: none; transform: none; }

/* Motion (motion.js). Pressed: everything you tap gives a little under the finger, on the phone as with a mouse. */
a, button, label[role="button"] { -webkit-tap-highlight-color: transparent; }
button:not(:disabled):active, .btn:active, label[role="button"]:active, .tabbar a:active, .tabbar button:active, .page-back:active, .rv-back:active, .door-tab:active {
  transform: scale(0.97); transition-duration: 0.06s;
}
button.ghost:not(:disabled):active, .nav-sheet a:active, .nav-sheet button:active, .nav-menu a:active, .nav-menu button:active, .ql-row:active, .facet-item:active { background: var(--accent-soft); }
.arch-card:active, .arch-row:active, .ph-frame:active, .sh-frame:active, .set-card:active, .ph-card:active, .rr-card:active, .pf-card:active, .rs-card:active, .sr-row:active { transform: scale(0.985); transition-duration: 0.06s; }
.tabbar a[aria-current] .tab-icon, .tabbar button[aria-current] .tab-icon { animation: aa-pop 0.3s var(--ease); }
@keyframes aa-pop { 40% { transform: scale(1.12); } }

/* Working: a thin bar along the top while the system answers, and the button that asked shows it is busy. */
.aa-busybar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.aa-busybar.is-on { opacity: 1; }
.aa-busybar::before { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--orange, var(--accent)); border-radius: 2px; animation: aa-slide 1.1s var(--ease) infinite; }
@keyframes aa-slide { from { left: -35%; } to { left: 100%; } }
.is-busy:is(button, .btn, label) { pointer-events: none; opacity: 0.8; }
.is-busy:is(button, .btn, label)::after { content: ''; display: inline-block; flex: none; width: 0.85em; height: 0.85em; margin-left: 0.5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -0.12em; animation: spin 0.7s linear infinite; }
#view > .empty > .spinner { width: 22px; height: 22px; }
#view > .empty:has(> .spinner) { padding-top: 18vh; text-align: center; animation: aa-fade 0.3s 0.2s both; }

/* Saved: a quiet word after a record changes, when nothing else said so. */
.aa-saved { position: fixed; top: 12px; right: 16px; z-index: 1990; padding: 6px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-sm); opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity 0.2s, translate 0.2s var(--ease); }
.aa-saved.is-on { opacity: 1; translate: 0 0; }
body.has-tabbar .aa-saved { top: auto; bottom: calc(14px + var(--tabbar-h, 0px)); right: 50%; translate: 50% 6px; }
body.has-tabbar .aa-saved.is-on { translate: 50% 0; }

/* Arriving: each screen, pop-up, sheet, menu and message comes in rather than appearing. */
main#view > * { animation: aa-enter 0.32s var(--ease) both; }
.modal-back { animation: aa-fade 0.18s both; }
.modal { animation: aa-lift 0.24s var(--ease) both; }
.lb { animation: aa-lift 0.24s var(--ease) both; }
.lb-back, .nav-sheet-back { animation: aa-fade 0.18s both; }
.nav-sheet { animation: aa-sheet 0.28s var(--ease) both; }
.nav-menu { animation: aa-drop 0.16s var(--ease) both; }
.toast { animation: aa-toast 0.26s var(--ease) both; }
@keyframes aa-enter { from { opacity: 0; translate: 0 8px; } }
@keyframes aa-fade { from { opacity: 0; } }
@keyframes aa-lift { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes aa-sheet { from { transform: translateY(100%); } }
@keyframes aa-drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes aa-toast { from { opacity: 0; transform: translateY(10px); } }

/* Cards rise into place as they scroll in. `translate` is separate from the hover lift's `transform`. */
.aa-rise { opacity: 0; translate: 0 10px; transition: opacity 0.32s var(--ease), translate 0.32s var(--ease); }
.aa-rise.aa-in { opacity: 1; translate: 0 0; }

/* Pull to refresh in the home-screen app. */
.aa-ptr { position: fixed; top: -44px; left: 50%; z-index: 1980; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; box-shadow: var(--shadow); transform: translate(-50%, 0); transition: transform 0.25s var(--ease); pointer-events: none; }
.aa-ptr.is-pulling { transition: none; }
.aa-ptr.is-refreshing { transform: translate(-50%, 64px) !important; }
.aa-ptr-dot { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--orange, var(--accent)); border-radius: 50%; }
.aa-ptr.is-ready .aa-ptr-dot { border-color: var(--orange, var(--accent)); }
.aa-ptr.is-refreshing .aa-ptr-dot { animation: spin 0.7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  :where(button, .btn), .arch-card, .arch-row, .ph-frame, .sh-frame, .pf-card, .rr-card, .ph-card, .set-card, .rs-card, .pv-project { transition: none; }
  main#view > *, .modal, .modal-back, .lb, .lb-back, .nav-sheet, .nav-sheet-back, .nav-menu, .toast, .tabbar .tab-icon { animation: none !important; }
  .aa-rise { opacity: 1; translate: none; transition: none; }
  .aa-busybar::before { animation-duration: 2.4s; }
  button:active, .btn:active, .arch-card:active, .arch-row:active { transform: none !important; }
  :where(button, .btn):hover, .arch-card:hover, .arch-row:hover, .ph-frame:hover, .sh-frame:hover, .pf-card:hover, .rr-card:hover, .ph-card:hover, .set-card:hover, .rs-card:hover, .pv-project:hover { transform: none; }
}