/* Snapjo (formerly Photos) "Pop Glass": the shared MyApps Hub design system (tokens, base, components)
 * followed by the Photos-specific layer. Orange-to-magenta hue; follows the OS
 * light/dark setting ([data-theme] is a hook for a future toggle). Every colour is a token. */
/* ---- Font faces (CSS) ---- */
/* Metric-adjusted fallback to minimise CLS while Plus Jakarta Sans loads (values approximate; tune by eye) */
@font-face{
  font-family:"PJS Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust:104%; ascent-override:97%; descent-override:25%; line-gap-override:0%;
}
/* ONLY if self-hosting (see note above): */
/* @font-face{font-family:"Plus Jakarta Sans";font-weight:500 800;font-display:swap;
     src:url("fonts/pjs-var.woff2") format("woff2");} */


/* ---- Tokens ---- */
:root{
  color-scheme: light dark;

  /* ---- per-app hue: OVERRIDE in the app's hue block (section 6) ---- */
  --a1:#6d28d9;            /* gradient start. white text on it >= 4.5:1 */
  --a2:#db2777;            /* gradient end.   white text on it >= 4.5:1 */
  --a1-vivid:#8b5cf6;      /* decorative only (glows, rings, blobs, icons over dark media) */
  --a2-vivid:#f472b6;
  --a-ink:#6d28d9;         /* accent used as TEXT/ICON colour on --surface / --bg (AA) */

  --grad:linear-gradient(135deg,var(--a1) 0%,var(--a2) 100%);
  --grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--a1) 13%,transparent),color-mix(in srgb,var(--a2) 13%,transparent));
  --on-grad:#fff;

  /* ---- neutrals (light) ---- */
  --bg:#f6f5fb;
  --surface:#ffffff;
  --surface-2:#efedf7;     /* inputs, wells, skeleton base, secondary buttons */
  --surface-3:#e5e2f1;     /* pressed wells */
  --text:#15131f;
  --muted:#5d5a72;         /* 6.3:1 on --bg */
  --border:rgba(30,20,70,.10);
  --border-strong:#8a86a0; /* checkbox/radio outline, >= 3:1 on --surface (WCAG 1.4.11) */
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --glass-border:rgba(30,20,70,.08);
  --scrim:rgba(14,10,30,.48);
  --toast-bg:rgba(21,19,31,.94); --toast-fg:#fff;
  --focus:var(--a1);

  /* ---- semantic ---- */
  --success:#047857;  --success-soft:color-mix(in srgb,#10b981 16%,transparent);
  --warn:#b45309;     --warn-soft:color-mix(in srgb,#f59e0b 20%,transparent);
  --danger:#dc2626;   --danger-soft:color-mix(in srgb,#ef4444 12%,transparent);

  /* ---- radii ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* ---- spacing (4px base) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:48px;

  /* ---- elevation ---- */
  --sh-1:0 1px 2px rgba(30,20,70,.05),0 4px 12px rgba(30,20,70,.06);
  --sh-2:0 2px 4px rgba(30,20,70,.06),0 12px 28px rgba(30,20,70,.12);
  --sh-3:0 4px 8px rgba(30,20,70,.08),0 20px 44px rgba(30,20,70,.18);
  --glow:0 6px 18px color-mix(in srgb,var(--a1) 38%,transparent);
  --glow-lg:0 10px 28px color-mix(in srgb,var(--a1) 45%,transparent),0 2px 6px color-mix(in srgb,var(--a2) 30%,transparent);

  /* ---- glass ---- */
  --blur:saturate(180%) blur(18px);

  /* ---- type ---- */
  --font:"Plus Jakarta Sans","PJS Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font);
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px;
  /* inputs stay >= 16px: iOS Safari zooms the page on focus below that */

  /* ---- motion ---- */
  --dur-1:120ms; --dur-2:220ms; --dur-3:360ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* ---- z-index (unified; values chosen to keep existing relationships:
         docs sheet above its busy spinner, toast above everything) ---- */
  --z-bar:20; --z-dock:30; --z-fab:40; --z-menu:45; --z-lightbox:70;
  --z-busy:80; --z-scrim:85; --z-sheet:86; --z-toast:90; --z-progress:99;

  /* ---- safe areas ---- */
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --appbar-h:60px;         /* content height of the app bar, excluding safe-area-top */
  --dock-clear:96px;       /* bottom padding reserved for dock/FAB */
  /* The hub's ✦ assistant widget (myapps-hub.com/agent.js, 48px circle) reads
     --hub-agent-bottom / --hub-agent-right: 12px above the FAB (which sits
     above the dock), centred over it. Views without that FAB override below. */
  --fab-size:62px; --fab-bottom:88px;
  --hub-agent-right:calc(max(16px,var(--safe-r)) + (var(--fab-size) - 48px) / 2);
  --hub-agent-bottom:calc(var(--fab-bottom) + var(--fab-size) + 12px);
}

/* dark: OS preference (unless explicitly forced light) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c0b12; --surface:#16151f; --surface-2:#211f2e; --surface-3:#2c2a3c;
    --text:#f3f2fa; --muted:#a4a1ba;
    --border:rgba(255,255,255,.09); --border-strong:#77748f;
    --glass:rgba(22,21,31,.66); --glass-strong:rgba(22,21,31,.88); --glass-border:rgba(255,255,255,.09);
    --scrim:rgba(0,0,0,.6);
    --toast-bg:rgba(243,242,250,.96); --toast-fg:#15131f;
    --success:#34d399; --warn:#fbbf24; --danger:#f87171;
    --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
    --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45);
    --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6);
    /* + the app's dark --a-ink from its hue block */
  }
}
/* dark: explicit override hook (future in-app toggle sets <html data-theme="dark">) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0b12; --surface:#16151f; --surface-2:#211f2e; --surface-3:#2c2a3c;
  --text:#f3f2fa; --muted:#a4a1ba;
  --border:rgba(255,255,255,.09); --border-strong:#77748f;
  --glass:rgba(22,21,31,.66); --glass-strong:rgba(22,21,31,.88); --glass-border:rgba(255,255,255,.09);
  --scrim:rgba(0,0,0,.6);
  --toast-bg:rgba(243,242,250,.96); --toast-fg:#15131f;
  --success:#34d399; --warn:#fbbf24; --danger:#f87171;
  --sh-1:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.45);
  --sh-3:0 4px 8px rgba(0,0,0,.5),0 20px 44px rgba(0,0,0,.6);
  /* + the app's dark --a-ink from its hue block */
}
:root[data-theme="light"]{ color-scheme:light; }

/* ---- Photos hue: orange to magenta ---- */
:root{--a1:#c2410c;--a2:#c026d3;--a1-vivid:#fb923c;--a2-vivid:#e879f9;--a-ink:#c2410c;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--a-ink:#fdba74;}}
:root[data-theme="dark"]{--a-ink:#fdba74;}

/* ---- legacy aliases ---- */
:root{--bg-elev:var(--surface);--bg-elev-2:var(--surface-2);--accent:var(--a-ink);--accent-2:var(--a2-vivid);--ok:var(--success);--shadow:var(--sh-2);--radius:var(--r-md);--radius-sm:var(--r-sm);}

/* ---- 3. Base layer ---- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-base);line-height:1.5;font-weight:500;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
a{color:var(--a-ink)}
.hidden,[hidden]{display:none !important}   /* semantics unchanged: JS relies on this */
.muted{color:var(--muted)} .small{font-size:var(--fs-sm)}

/* Aurora: faint two-colour glow at the top of every screen. Pure gradients, no filter/blur = cheap. */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:min(60vh,460px);z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 70% at 15% 0%,color-mix(in srgb,var(--a1-vivid) 20%,transparent),transparent 70%),
    radial-gradient(55% 65% at 90% 0%,color-mix(in srgb,var(--a2-vivid) 16%,transparent),transparent 70%);
}
/* Photos: use 55% of that strength; the grid is the hero (see section 6.3). */

/* Focus: visible for keyboard/switch users only */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
:root[data-theme="dark"] :focus-visible{outline-color:var(--a-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :focus-visible{outline-color:var(--a-ink)}}

/* Icons */
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ic.sm{width:18px;height:18px}.ic.lg{width:28px;height:28px}

/* Tap feedback: every tappable thing gets a fast spring press. Add selectors per app (section 6). */
.pressable{transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2),box-shadow var(--dur-2)}
.pressable:active{transform:scale(.96)}

/* Gradient text helper (brand / hero titles only; never body copy) */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .grad-text{background:linear-gradient(135deg,var(--a1-vivid),var(--a2-vivid));-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grad-text{background:linear-gradient(135deg,var(--a1-vivid),var(--a2-vivid));-webkit-background-clip:text;background-clip:text}}

/* No backdrop-filter? fall back to solid so text stays legible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass:var(--surface);--glass-strong:var(--surface)}
}



/* ---- 4.1 App bar ---- */
header.top{
  position:sticky;top:0;z-index:var(--z-bar);
  display:flex;align-items:center;gap:var(--s-2);
  min-height:calc(var(--appbar-h) + var(--safe-t));
  padding:var(--safe-t) max(var(--s-3),var(--safe-r)) 0 max(var(--s-3),var(--safe-l));
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-border);box-shadow:none;
}
.appbar h1{font-size:var(--fs-lg);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-mark{                   /* gradient logo tile replacing the emoji brand */
  width:34px;height:34px;border-radius:12px;background:var(--grad);color:#fff;flex:none;
  display:grid;place-items:center;box-shadow:var(--glow);
}
.brand-mark .ic{width:19px;height:19px}



/* ---- 4.2 Icon button ---- */
.iconbtn{
  position:relative;width:44px;height:44px;border:0;border-radius:14px;padding:0;
  display:grid;place-items:center;background:transparent;color:var(--text);
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2);
}
@media (hover:hover){.iconbtn:hover{background:var(--surface-2)}}
.iconbtn:active{transform:scale(.9);background:var(--surface-3)}
.iconbtn.primary,.iconbtn[aria-pressed="true"]{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.iconbtn.danger{color:var(--danger)}
.iconbtn:disabled{opacity:.4;cursor:default}
.iconbtn.filled{background:var(--surface-2)}



/* ---- 4.3 Bottom dock ---- */
.dock{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(12px + var(--safe-b));z-index:var(--z-dock);
  display:flex;align-items:center;gap:2px;padding:6px;
  max-width:calc(100vw - 24px);
  border-radius:var(--r-pill);
  background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);box-shadow:var(--sh-3);
}
.dock > button{
  position:relative;isolation:isolate;flex:1 1 auto;min-width:48px;min-height:48px;
  display:grid;place-items:center;align-content:center;gap:2px;
  padding:6px 12px;border:0;background:none;border-radius:var(--r-pill);
  color:var(--muted);font:700 11px/1 var(--font);letter-spacing:.01em;
  transition:color var(--dur-2),transform var(--dur-1) var(--ease-out);
}
.dock > button .ic{width:22px;height:22px;transition:transform var(--dur-3) var(--ease-spring)}
.dock > button::before{        /* the sliding-feel indicator: gradient pill that springs in */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad);
  opacity:0;transform:scale(.55);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring);
}
.dock > button:active{transform:scale(.92)}
.dock > button.active,.dock > button[aria-pressed="true"],.dock > button[aria-selected="true"]{color:#fff}
.dock > button.active::before,.dock > button[aria-pressed="true"]::before,.dock > button[aria-selected="true"]::before{opacity:1;transform:scale(1);box-shadow:var(--glow)}
.dock > button.active .ic,.dock > button[aria-pressed="true"] .ic{transform:translateY(-1px) scale(1.08)}
.dock > button.danger{color:var(--danger)}
.dock.icons-only > button{min-width:44px;padding:6px 10px}   /* notepad editor action bar: no labels */
.dock.icons-only > button span{display:none}



/* ---- 4.4 FAB ---- */
.fab{
  position:fixed;right:max(16px,var(--safe-r));bottom:calc(20px + var(--safe-b));z-index:var(--z-fab);
  width:62px;height:62px;border:0;border-radius:22px;padding:0;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:0;line-height:0;   /* font-size:0 hides any leftover "+" glyph text */
  box-shadow:var(--glow-lg);
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2);
}
.fab .ic{width:28px;height:28px;stroke-width:2.6;transition:transform var(--dur-3) var(--ease-spring)}
@media (hover:hover){.fab:hover{transform:translateY(-2px) scale(1.04)}.fab:hover .ic{transform:rotate(90deg)}}
.fab:active{transform:scale(.9)}
.fab.above-dock{bottom:calc(var(--fab-bottom) + var(--safe-b))}     /* photos: sits above the dock */



/* ---- 4.5 Cards ---- */
.card,.album-card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2);
}
@media (hover:hover){.card:hover,.album-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--a1-vivid) 40%,var(--border))}}
.card:active,.album-card:active{transform:scale(.982);box-shadow:var(--sh-1);transition-duration:var(--dur-1)}
/* Optional coloured type stripe (notepad note cards use it; see 6.1) */
.card.striped::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:var(--type,var(--a1-vivid))}
/* "swipe feel" without JS: the spring press + lift above, plus overscroll-behavior on the list container.
   (A true swipe-to-reveal needs ~40 lines of pointer JS; out of scope for this pass.) */



/* ---- 4.7 Inputs ---- */
:where(input:not([type="checkbox"],[type="radio"],[type="file"],[type="range"],[type="hidden"],[type="submit"],[type="button"]),textarea,select).field-input,
.field-input{
  width:100%;min-height:48px;padding:12px 14px;
  font-size:16px;              /* never below 16px: iOS zoom */
  color:var(--text);background:var(--surface-2);
  border:1.5px solid transparent;border-radius:var(--r-md);outline:none;
  transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2);
}
.field-input::placeholder{color:var(--muted);opacity:.85}
.field-input:focus{background:var(--surface);border-color:var(--a1-vivid);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1-vivid) 24%,transparent)}
textarea.field-input{line-height:1.55;resize:vertical}
select.field-input,select.field-input.select{
  -webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a86a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:20px;
}
input[type="date"].field-input,input[type="datetime-local"].field-input{min-height:48px;appearance:none;-webkit-appearance:none}
/* Search field with icon slot */
.searchbox{position:relative;display:flex;align-items:center}
.searchbox > .ic{position:absolute;left:14px;color:var(--muted)}
.searchbox input{padding-left:44px;border-radius:var(--r-pill)}



/* ---- 4.8 Buttons ---- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 20px;border:0;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text);font-weight:700;font-size:15.5px;letter-spacing:-.005em;
  text-decoration:none;
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),background-color var(--dur-2),filter var(--dur-2);
}
@media (hover:hover){.btn:hover{background:var(--surface-3)}}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad);color:#fff;box-shadow:var(--glow)}
@media (hover:hover){.btn.primary:hover{filter:brightness(1.08) saturate(1.05);background:var(--grad)}}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border)}
.btn.link{background:none;color:var(--a-ink);min-height:44px;padding:8px 12px;box-shadow:none}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.danger.solid{background:var(--danger);color:#fff}
.btn.small{min-height:40px;padding:8px 16px;font-size:14px;border-radius:var(--r-sm)}
.btn.small::after{content:"";position:absolute;inset:-2px 0}      /* hit area -> 44px */
.btn:disabled{opacity:.5;pointer-events:none}
.btn .ic{width:19px;height:19px}



/* ---- 4.10 Dialogs ---- */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pop-in{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim);animation:fade-in var(--dur-2) var(--ease-out)}
/* option row (docs .opt / photos .sheet .item) */
.opt{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 10px;border:0;background:none;
  border-radius:var(--r-md);text-align:left;color:var(--text);
  transition:background-color var(--dur-2),transform var(--dur-1) var(--ease-out);
}
.opt:active{transform:scale(.98);background:var(--surface-2)}
@media (hover:hover){.opt:hover{background:var(--surface-2)}}
.opt .ic-tile{width:42px;height:42px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--grad-soft);color:var(--a-ink);font-size:19px}
.opt .t{font-size:15.5px;font-weight:700}.opt .d{font-size:var(--fs-sm);color:var(--muted);margin-top:1px}
.opt.danger .t{color:var(--danger)}.opt.danger .ic-tile{background:var(--danger-soft);color:var(--danger)}



/* ---- 4.13 Empty ---- */
.empty{text-align:center;color:var(--muted);padding:56px 24px;display:flex;flex-direction:column;align-items:center}
.empty .big{
  width:92px;height:92px;margin:0 auto 18px;border-radius:32px;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--a-ink);font-size:40px;   /* font-size keeps a leftover emoji tidy until swapped to SVG */
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a1-vivid) 25%,transparent);
  animation:float 4.5s ease-in-out infinite;
}
.empty .big .ic{width:42px;height:42px;stroke-width:1.75}
.empty h2,.empty strong{color:var(--text);font-family:var(--font-display);font-weight:800}
.empty p{margin:6px 0;max-width:34ch;font-size:15px}
.empty .btn{margin-top:14px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}



/* ---- 4.14 Skeleton ---- */
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.sk{
  border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--surface-2) 30%,color-mix(in srgb,var(--surface-2) 55%,var(--surface)) 50%,var(--surface-2) 70%);
  background-size:200% 100%;animation:shimmer 1.6s linear infinite;
}
.sk.line{height:14px;border-radius:7px}.sk.line.w60{width:60%}.sk.line.w40{width:40%}
.sk.card{height:78px;border-radius:var(--r-lg);margin-bottom:10px}        /* notepad list */
.sk.tile{aspect-ratio:1;border-radius:10px}                                /* photos grid */
.sk.doc{aspect-ratio:3/4;border-radius:var(--r-md)}                        /* docs grid */



/* ---- 4.15 Photo grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:3px}
@media (min-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px}}
.tile{
  position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--surface-2);
  border:0;border-radius:10px;
  transition:transform var(--dur-2) var(--ease-out),border-radius var(--dur-2) var(--ease-out),box-shadow var(--dur-2);
}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease-out)}
@media (hover:hover){.tile:hover img{transform:scale(1.06)}}
.tile:active{transform:scale(.95);border-radius:18px}
.tile .badge{                                  /* video duration */
  position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 8px;font-size:11.5px;
}
.tile .fav{position:absolute;left:6px;top:6px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));font-size:14px;line-height:1}
.tile.selected{border-radius:18px;transform:scale(.92);box-shadow:0 0 0 3px var(--a1-vivid)}
.tile.selected::after{                          /* replaces the old full-tile "✓" overlay */
  content:"";position:absolute;right:8px;top:8px;left:auto;bottom:auto;width:26px;height:26px;border-radius:50%;
  background:var(--grad) ;box-shadow:0 0 0 2px #fff;
  display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),var(--grad);
  background-size:16px,cover;background-repeat:no-repeat;background-position:center;
  animation:pop-in var(--dur-2) var(--ease-spring);
}



/* ---- 4.18 Section ---- */
.section-title,.section-heading{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 4px 10px;
}
.spin{width:28px;height:28px;border:3px solid var(--surface-3);border-top-color:var(--a1-vivid);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-track{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.progress-track > i{display:block;height:100%;background:var(--grad);border-radius:inherit}



/* ---- 5.1 List entrance ---- */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.stagger > *{animation:rise var(--dur-3) var(--ease-out) both}
.stagger > :nth-child(2){animation-delay:30ms}.stagger > :nth-child(3){animation-delay:60ms}
.stagger > :nth-child(4){animation-delay:90ms}.stagger > :nth-child(5){animation-delay:120ms}
.stagger > :nth-child(6){animation-delay:150ms}.stagger > :nth-child(7){animation-delay:180ms}
.stagger > :nth-child(8){animation-delay:210ms}.stagger > :nth-child(9){animation-delay:240ms}
.stagger > :nth-child(10){animation-delay:270ms}.stagger > :nth-child(n+11){animation-delay:300ms}

/* ==================================================================
   PHOTOS - app-specific layer on top of the shared Pop Glass system
   ================================================================== */

/* Photos follows the OS; dark stays the cinematic default look. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#08070c;--surface:#131219}}
:root[data-theme="dark"]{--bg:#08070c;--surface:#131219}
body::before{opacity:.55}   /* the grid is the hero: quieter aurora */
html,body{height:100%}
body{overscroll-behavior-y:contain}
#app{min-height:100%;display:flex;flex-direction:column}

/* ---- header ---- */
header.top{gap:12px}
header.top .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
header.top .spacer{flex:1}
header.top .brand-logo{width:36px;height:36px;border-radius:11px;flex:none;box-shadow:var(--sh-1)}
@media (max-width:767px){header.top .hide-mobile{display:none}}
header.top .who{color:var(--muted);font-size:13px;margin-right:4px;display:none}
@media (min-width:640px){header.top .who{display:inline}}
.iconbtn .ic{width:22px;height:22px}

/* ---- sign-in gate ---- */
.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px}
.gate .mark{
  width:72px;height:72px;border-radius:24px;margin-bottom:22px;color:#fff;background:var(--grad);
  display:grid;place-items:center;box-shadow:var(--glow-lg);animation:float 4.5s ease-in-out infinite;
}
.gate .mark .ic{width:34px;height:34px}
.gate h1{margin:0 0 10px;font-size:var(--fs-2xl)}
.gate p{color:var(--muted);margin:0 0 26px;max-width:320px;font-size:16px}
.gate a.btn{padding:14px 28px;border-radius:var(--r-pill)}

/* ---- dock (nav.tabs) ---- */
nav.tabs.dock > button{padding:6px 12px;min-width:52px}
@media (max-width:379px){nav.tabs.dock > button{padding:6px 8px;min-width:46px}nav.tabs.dock{gap:0;padding:5px}}
nav.tabs.dock > button > span{pointer-events:none}

/* ---- main ---- */
main{flex:1;padding:8px 12px calc(150px + var(--safe-b));max-width:1400px;width:100%;margin:0 auto}
.section-heading{margin:22px 6px 10px}
.tile{outline-offset:-3px}
.tile .placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--muted)}
.tile .fav{display:grid;place-items:center;font-size:0;line-height:0}
.tile .fav .ic{width:16px;height:16px;fill:currentColor;stroke-width:1.5}
.tile .badge{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.tile .badge .ic{width:11px;height:11px;fill:currentColor;stroke-width:2}
.tile.selected::after{font-size:0;color:transparent}
.tile.uploading::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tile .progress{position:absolute;left:8px;right:8px;bottom:8px;height:4px;background:rgba(255,255,255,.3);border-radius:4px;overflow:hidden;z-index:2}
.tile .progress > i{display:block;height:100%;background:var(--grad);width:0%;border-radius:inherit}
.grid.sk-grid{pointer-events:none}
.sk.tile{cursor:default}

/* ---- empty states ---- */
.empty{padding:72px 24px}
.empty h2{margin:0 0 6px;font-size:var(--fs-lg)}
.empty p{margin:6px auto 0}
.empty button{
  margin-top:18px;border:0;min-height:48px;padding:12px 26px;border-radius:var(--r-md);
  background:var(--grad);color:#fff;font-weight:700;font-size:15.5px;box-shadow:var(--glow);
  transition:transform var(--dur-1) var(--ease-out);
}
.empty button:active{transform:scale(.97)}
.trash-note{color:var(--muted);font-size:13.5px;margin:6px 6px 4px}

/* ---- albums ---- */
.albums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding-top:6px}
.album-card{overflow:hidden;cursor:pointer;border-radius:var(--r-lg)}
.album-card .cover{
  position:relative;aspect-ratio:1.2;overflow:hidden;background:var(--grad-soft);
  display:grid;place-items:center;color:var(--a-ink);
}
.album-card .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-3) var(--ease-out)}
@media (hover:hover){.album-card:hover .cover img{transform:scale(1.06)}}
.album-card .cover .ic{width:36px;height:36px;stroke-width:1.75;opacity:.85}
.album-card .meta{padding:12px 14px 14px}
.album-card .meta h3{margin:0 0 2px;font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-card .meta p{margin:0;color:var(--muted);font-size:13px}
.album-head{display:flex;align-items:center;gap:8px;margin:4px 2px 8px}
.album-head h2{margin:0;font-size:var(--fs-lg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fab.above-dock .ic{width:28px;height:28px}

/* ---- multi-select bar (replaces the dock while selecting) ---- */
.upload-tray.sel-bar{
  position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:calc(var(--z-dock) + 1);
  max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:4px;
  padding:6px 8px 6px 18px;border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh-3);animation:pop-in var(--dur-3) var(--ease-spring);
}
body.selecting nav.tabs.dock,body.selecting .fab{opacity:0;visibility:hidden;pointer-events:none}
.sel-bar .sel-count{font-weight:800;font-size:14.5px;margin-right:auto;white-space:nowrap}
.sel-bar .iconbtn{width:48px;height:48px;border-radius:var(--r-pill);flex:none}
.sel-bar .iconbtn.danger{color:var(--danger)}
.sel-bar .iconbtn:disabled{opacity:.4}

/* ---- zip tray ---- */
#zip-tray{position:fixed;left:12px;right:12px;bottom:calc(164px + var(--safe-b));z-index:25;max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.zip-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:14px 16px;font-size:13.5px;animation:pop-in var(--dur-3) var(--ease-out)}
.zip-card .head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.zip-card .head .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.zip-card .head .count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.zip-card .bar{height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.zip-card .bar > i{display:block;height:100%;background:var(--grad);width:0%;border-radius:inherit;transition:width .2s ease}

/* ---- host-move notice (legacy hostname -> new one) ---- */
.move-notice{
  position:fixed;inset:0;z-index:var(--z-toast);display:grid;place-items:center;padding:24px;
  background:var(--scrim);animation:pop-in var(--dur-2) var(--ease-out);
}
.move-card{
  width:min(92vw,380px);padding:22px 22px 20px;border-radius:var(--r-xl);text-align:center;
  background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);box-shadow:var(--sh-3);color:var(--text);
}
.move-card p{margin:0;font:700 16px/1.45 var(--font)}
.move-card .btn{margin-top:16px;width:100%}

/* ---- toast (always in the DOM; .show toggles it) ---- */
.toast{
  position:fixed;left:50%;bottom:calc(100px + var(--safe-b));z-index:var(--z-toast);width:max-content;max-width:min(92vw,460px);
  padding:12px 20px;border-radius:var(--r-lg);background:var(--toast-bg);color:var(--toast-fg);
  font-size:14.5px;font-weight:600;box-shadow:var(--sh-3);border:0;text-align:center;
  opacity:0;transform:translateX(-50%) translateY(16px) scale(.92);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast:empty{display:none}

/* ---- sheets (in-flow child of a flex backdrop; do NOT make .sheet fixed) ---- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim);
  display:flex;align-items:flex-end;justify-content:center;animation:fade-in var(--dur-2) var(--ease-out);
}
.sheet{
  width:100%;max-width:520px;max-height:min(88vh,88dvh);overflow:auto;overscroll-behavior:contain;
  padding:10px var(--s-3) calc(var(--s-4) + var(--safe-b));
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);
  border:1px solid var(--border);border-bottom:0;animation:sheet-up var(--dur-3) var(--ease-out);
}
@media (min-width:640px){
  .sheet-backdrop{align-items:center}
  .sheet{border-radius:var(--r-xl);margin-bottom:40px;border-bottom:1px solid var(--border);animation:pop-in var(--dur-3) var(--ease-out)}
}
.sheet .grabber{width:42px;height:5px;border-radius:99px;background:var(--border-strong);opacity:.5;margin:2px auto 14px}
.sheet .sheet-title{font:800 20px/1.2 var(--font);letter-spacing:-.02em;margin:2px 8px 10px}
.sheet .sheet-note{margin:2px 8px 12px;color:var(--muted);font-size:14.5px}
.sheet button.item,.sheet label.item,.sheet a.item{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px;text-align:left;
  border:0;background:none;color:var(--text);font-size:15.5px;font-weight:700;border-radius:var(--r-md);cursor:pointer;
  transition:background-color var(--dur-2),transform var(--dur-1) var(--ease-out);
}
.sheet a.item{text-decoration:none}
.sheet .item:active{transform:scale(.98);background:var(--surface-2)}
@media (hover:hover){.sheet .item:hover{background:var(--surface-2)}}
.sheet .item .ic-tile{width:42px;height:42px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--grad-soft);color:var(--a-ink)}
.sheet button.item.danger{color:var(--danger)}
.sheet button.item.danger .ic-tile{background:var(--danger-soft);color:var(--danger)}
.sheet button.item.solid-danger{background:var(--danger-soft);justify-content:center}
.sheet input[type=text]{
  width:100%;min-height:48px;padding:12px 14px;font-size:16px;color:var(--text);background:var(--surface-2);
  border:1.5px solid transparent;border-radius:var(--r-md);outline:none;margin:4px 0 10px;
  transition:border-color var(--dur-2),box-shadow var(--dur-2),background-color var(--dur-2);
}
.sheet input[type=text]::placeholder{color:var(--muted);opacity:.85}
.sheet input[type=text]:focus{background:var(--surface);border-color:var(--a1-vivid);box-shadow:0 0 0 4px color-mix(in srgb,var(--a1-vivid) 24%,transparent)}

/* ---- lightbox (always dark) ---- */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);background:#050409;color:#fff;
  display:flex;flex-direction:column;animation:fade-in var(--dur-2) var(--ease-out);
}
.lightbox .lb-top{display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) max(12px,var(--safe-r)) 10px max(12px,var(--safe-l))}
.lightbox .lb-top .spacer{flex:1}
.lightbox .lb-top .info{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}
.lightbox .iconbtn,.lightbox .nav-btn,.lightbox .lb-bar button{
  background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.lightbox .iconbtn{width:48px;height:48px;border-radius:50%}
@media (hover:hover){.lightbox .iconbtn:hover,.lightbox .lb-bar button:hover,.lightbox .nav-btn:hover{background:rgba(255,255,255,.24)}}
.lightbox .lb-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;touch-action:pan-y;min-height:0}
.lightbox .lb-stage img,.lightbox .lb-stage video{max-width:100%;max-height:100%;object-fit:contain;animation:pop-in var(--dur-3) var(--ease-out)}
.lightbox .lb-stage .spin{border-color:rgba(255,255,255,.2);border-top-color:var(--a1-vivid)}
.lightbox .nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);border:0;width:48px;height:48px;border-radius:50%;
  cursor:pointer;display:none;place-items:center;
}
@media (min-width:720px){.lightbox .nav-btn{display:grid}}
.lightbox .nav-btn.prev{left:16px}.lightbox .nav-btn.next{right:16px}
.lightbox .lb-bar{display:flex;justify-content:center;gap:16px;padding:14px 12px calc(22px + var(--safe-b))}
.lightbox .lb-bar button{
  width:56px;height:56px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2),color var(--dur-2);
}
.lightbox .lb-bar button:active{transform:scale(.9)}
.lightbox .lb-bar button.on{color:#ff6b81}
.lightbox .lb-bar button.on .ic{fill:currentColor}
.lightbox :focus-visible{outline-color:#fff}

/* ---- reduced motion + a11y extras ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .fab:hover,.card:hover,.doc:hover{transform:none}
  /* functional indicators must keep moving, slowly: */
  .spin{animation:spin 1.4s linear infinite !important}
  .sk{animation:none !important}
  .search-mic.recording,#dictate-btn.recording{animation:none !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 40%,transparent)}
}

/* ---- hub ✦ assistant: room for it (html.hub-agent-on; admins/Elite only) ----
   Custom properties inherit from body into the widget. Album list: its FAB sits at
   right:20px, so ✦ shifts to stay centred. Trash: only the dock (bottom 12px,
   62px tall). Selecting: the select bar (bottom 12px, 62px tall). Lightbox: its
   action bar (14 + 56 + 22px tall). */
body[data-fab="album"]{--hub-agent-right:calc(max(20px,var(--safe-r)) + (var(--fab-size) - 48px) / 2)}
body[data-fab="none"]{--hub-agent-bottom:calc(12px + 62px + 12px);--hub-agent-right:max(16px,var(--safe-r))}
body.selecting{--hub-agent-bottom:calc(12px + 62px + 12px);--hub-agent-right:max(16px,var(--safe-r))}
body.lightbox-open{--hub-agent-bottom:calc(14px + 56px + 22px + 12px);--hub-agent-right:max(16px,var(--safe-r))}
html.hub-agent-on main{padding-bottom:calc(226px + var(--safe-b))}
html.hub-agent-on #zip-tray{bottom:calc(222px + var(--safe-b))}