:root { --bg:#fbfbfa; --fg:#161616; --muted:#707070; --card:#ececea; --accent:#1f5ee0; --chip:#f0f0ee; --paper:#fff; --acc-bg:#e8eefc; --bar:#dcdcd8; --fav:#6fd69a; }
@media (prefers-color-scheme: dark) { :root { --bg:#121211; --fg:#f2f2ef; --muted:#9a9a95; --card:#2a2a27; --accent:#9dbbff; --chip:#1f1f1d; --paper:#1a1a19; --acc-bg:#1d2840; --bar:#3a3a37; --fav:#7fe0a8; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif; }
a { color:inherit; }
/* App shell: the app and a wide search on top, a few sections and an account menu to the right. */
.top { display:flex; align-items:center; gap:16px; padding:14px 24px 6px; }
.top .brand { flex:1 1 0; display:flex; align-items:center; gap:9px; font-weight:700; font-size:20px; letter-spacing:-0.02em; text-decoration:none; white-space:nowrap; }
.top .brand img { width:28px; height:28px; border-radius:7px; box-shadow:0 0 0 0.5px rgba(0,0,0,.12); }
.top form.search { flex:0 1 560px; margin:0; }
.top input[type=search] { width:100%; height:42px; border:0; border-radius:999px; background:var(--chip); padding:0 20px; font-size:14px; outline:none; }
.top .links { flex:1 1 0; display:flex; justify-content:flex-end; gap:14px; align-items:center; font-size:13px; color:var(--muted); }
.top .links > a { text-decoration:none; }
.top .links > a:hover, .top .links > a.on { color:var(--fg); }
.menu { position:relative; }
.menu summary { list-style:none; cursor:pointer; width:30px; height:30px; border-radius:50%; background:var(--fg); color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; }
.menu summary::-webkit-details-marker { display:none; }
.menu .pop { position:absolute; right:0; top:38px; z-index:30; background:var(--paper); border:1px solid var(--card); border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.14); padding:8px; min-width:210px; display:flex; flex-direction:column; gap:1px; }
.menu .pop a { padding:6px 10px; border-radius:8px; text-decoration:none; color:var(--fg); font-size:14px; }
.menu .pop a:hover, .menu .pop a.on { background:var(--chip); }
.menu .pop .sep { height:1px; background:var(--card); margin:6px 4px; }
.menu .pop .who { padding:6px 10px; font-size:12px; color:var(--muted); }
.menu .pop form { margin:0; padding:4px 10px; }
main { padding:8px 24px 40px; }
body[data-page=library] main { padding-bottom:110px; }
@media (max-width: 760px) {
  .top { flex-wrap:wrap; padding:12px 16px 4px; gap:10px; }
  .top form.search { order:3; flex:1 1 100%; }
  .top .links .wide { display:none; }
  main { padding:8px 16px 32px; }
}
h2 { font-size:20px; margin:8px 0 4px; }
h3 { font-size:15px; margin:24px 0 8px; color:var(--muted); font-weight:600; }
.sub { color:var(--muted); font-size:14px; margin:0 0 12px; }
button, .button { font:inherit; background:none; border:1px solid var(--card); color:var(--fg); border-radius:8px; padding:6px 12px; cursor:pointer; text-decoration:none; display:inline-block; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
input[type=text], input[type=search], select, textarea { font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--card); border-radius:8px; padding:6px 10px; }
textarea { width:100%; min-height:72px; }
.bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:4px 0 12px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.chip { padding:3px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--card); text-decoration:none; font-size:13px; white-space:nowrap; }
.chip.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:3px; }
main { container-type:inline-size; }
.grid.mosaic { --cols:3; grid-template-columns:repeat(var(--cols), 1fr); grid-auto-rows:calc((100cqw - (var(--cols) - 1) * 3px) / var(--cols)); grid-auto-flow:dense; }
.grid.mosaic.hero { --cols:2; gap:6px; grid-auto-rows:calc((100cqw - (var(--cols) - 1) * 6px) / var(--cols)); margin-bottom:24px; }
@container (min-width: 560px) { .grid.mosaic { --cols:4; } .grid.mosaic.hero { --cols:3; } }
@container (min-width: 820px) { .grid.mosaic { --cols:6; } .grid.mosaic.hero { --cols:4; } }
@container (min-width: 1150px) { .grid.mosaic { --cols:8; } .grid.mosaic.hero { --cols:6; } }
@container (min-width: 1600px) { .grid.mosaic { --cols:10; } .grid.mosaic.hero { --cols:8; } }
.grid.mosaic .tile { aspect-ratio:auto; }
.runs { display:flex; flex-wrap:wrap; column-gap:12px; }
.runs > section { flex:1 1 100%; min-width:0; }
.runs > section.inline .runhead h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid.mosaic .tile.big { grid-column:span 2; grid-row:span 2; }
.grid.mosaic .tile.wide, .grid.mosaic .tile.grow { grid-column:span 2; }
.grid.mosaic .tile.tall { grid-row:span 2; }
.grid.hero .tile { border-radius:6px; }
.grid.small { grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
.tile { position:relative; aspect-ratio:1; background:var(--card); overflow:hidden; }
.tile[hidden] { display:none; }
.tile.member { outline:2px solid var(--accent); outline-offset:-2px; }
.tile a { display:block; width:100%; height:100%; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
/* Stacks: the best photo on top, the next one fanned out behind it so only a corner shows. */
.tile.stacked { background:transparent; overflow:visible; }
.tile.stacked > a { position:absolute; inset:0 8% 8% 0; width:auto; height:auto; z-index:1; border-radius:4px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.35); }
.tile.stacked .under { position:absolute; inset:8% 0 0 8%; border-radius:4px; overflow:hidden; transform:rotate(2.5deg); transform-origin:100% 100%; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.tile.stacked .under img { filter:brightness(.8); }
.tile.stacked .badge, .tile.stacked .heart { z-index:2; }
.tile.stacked .badge { right:calc(8% + 6px); }
.tile.stacked .heart { bottom:calc(8% + 6px); }
.tile .noimg { display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-size:12px; padding:8px; text-align:center; word-break:break-all; }
.badge { position:absolute; top:6px; right:6px; min-width:26px; height:26px; padding:0 7px; border-radius:13px; border:none;
  background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:600; cursor:pointer; backdrop-filter:blur(4px); }
.badge::before { content:"⧉ "; font-weight:400; }
.badge.open { background:var(--accent); }
.badge.open::before { content:""; }
.more .fold { opacity:.6; transition:opacity .2s; }
.more:hover .fold, .more.expanded .fold { opacity:1; }
.more:not(.expanded) .fold { max-height:320px; overflow:hidden; mask-image:linear-gradient(#000 60%, transparent); -webkit-mask-image:linear-gradient(#000 60%, transparent); }
.more.expanded .more-toggle { display:none; }
.more-toggle { display:block; margin:8px auto 0; }
.runhead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.runhead h3 { margin-right:auto; }
.runhead details { font-size:13px; }
.runhead summary { cursor:pointer; color:var(--muted); list-style:none; }
.runhead form { display:inline-flex; gap:6px; margin:0; }
.runhead button, .runhead input { font-size:13px; padding:3px 8px; }
.card .days { display:inline-block; background:var(--accent); color:#fff; border-radius:6px; padding:0 6px; font-size:11px; margin-left:4px; vertical-align:middle; }
.card p { margin:2px 0 0; color:var(--muted); font-size:13px; }
.heart { position:absolute; left:6px; bottom:6px; width:30px; height:30px; border-radius:15px; border:none; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; font-size:15px; line-height:30px; padding:0; opacity:0; transition:opacity .15s; }
.tile:hover .heart { opacity:1; }
.heart.on { color:#f43f5e; background:rgba(255,255,255,.9); }
/* Liked photos: a thin light green outline instead of a heart badge (the heart still shows on hover). */
.tile.fav::after, .tile.stacked.fav > a::after { content:""; position:absolute; inset:0; border:2px solid var(--fav); border-radius:inherit; pointer-events:none; }
.tile.stacked.fav::after { content:none; }
@media (hover:none) { .heart { opacity:.8; } }
.photo .heart { position:static; opacity:1; width:auto; height:auto; padding:6px 14px; border-radius:8px; font-size:15px; background:var(--chip); color:var(--fg); border:1px solid var(--card); line-height:1.4; }
.photo .heart.on { color:#f43f5e; border-color:#f43f5e; background:var(--chip); }
.stars { display:inline-flex; gap:2px; }
.stars button { border:none; background:none; font-size:22px; padding:0 2px; color:var(--card); cursor:pointer; }
.stars button.on { color:#f59e0b; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
.navs { display:flex; justify-content:space-between; margin:8px 0 0; }
.kbd { font-size:12px; color:var(--muted); }
.rate { max-width:900px; margin:0 auto; text-align:center; }
.rate img { max-width:100%; max-height:70vh; border-radius:10px; }
.rate form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0; }
.rate button { font-size:17px; padding:10px 18px; }
.progress { height:12px; background:var(--card); border-radius:6px; overflow:hidden; margin:8px 0; }
.progress > div { height:100%; background:var(--accent); width:0; transition:width .6s ease; }
.runs-table { width:100%; border-collapse:collapse; font-size:14px; }
.runs-table td, .runs-table th { text-align:left; padding:6px 8px; border-bottom:1px solid var(--card); }
.runs-table th { color:var(--muted); font-weight:500; }
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin:12px 0 24px; }
.stat { border:1px solid var(--card); border-radius:12px; padding:12px; }
.stat b { display:block; font-size:22px; }
.stat span { color:var(--muted); font-size:13px; }
.bars { display:flex; align-items:flex-end; gap:4px; height:90px; margin:8px 0 24px; }
.bars div { flex:1; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; position:relative; }
.bars div span { position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:10px; color:var(--muted); }
.learned { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 16px; }
.learned .chip.neg { text-decoration:line-through; color:var(--muted); }
.results { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; margin:0 0 16px; max-width:960px; }
.result { display:block; border:1px solid var(--card); border-radius:10px; padding:10px 12px; text-decoration:none; }
.result:hover { border-color:var(--fg); }
.result b { display:block; }
.result span { color:var(--muted); font-size:13px; }
.save-story { margin:8px 0 4px; }
.tile-act { position:absolute; top:6px; left:6px; z-index:1; width:28px; height:28px; border-radius:14px; border:none; cursor:pointer;
  font-size:18px; line-height:28px; padding:0; color:#fff; }
.tile-act.remove { background:rgba(220,38,38,.85); display:none; }
body.editing .tile-act.remove { display:block; }
.tile-act.add { background:var(--accent); }
.tile.done { opacity:.35; }
.suggest { margin-top:32px; padding-top:8px; border-top:1px solid var(--card); }
.private-on { display:flex; gap:6px; align-items:center; background:#7c3aed; color:#fff; border-radius:8px; padding:2px 4px 2px 10px; margin:0; }
.private-on a { color:#fff; font-size:13px; }
.private-on button { padding:2px 8px; font-size:12px; color:#fff; border-color:rgba(255,255,255,.5); }
body.pm .top { box-shadow:inset 0 -3px 0 #7c3aed; }
.swipe { max-width:720px; margin:0 auto; text-align:center; }
.swipe .stage { position:relative; height:min(62vh, 640px); display:flex; align-items:center; justify-content:center; }
.card-photo { position:relative; max-width:100%; max-height:100%; touch-action:none; user-select:none; cursor:grab; }
.card-photo img { max-width:100%; max-height:min(62vh, 640px); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.25); display:block; pointer-events:none; }
.card-photo .hint { position:absolute; top:16px; left:50%; transform:translateX(-50%); font-weight:700; font-size:22px; padding:4px 14px; border-radius:8px; color:#fff; }
.card-photo .hint:empty { display:none; }
.hint.hide { background:#dc2626; } .hint.favorite { background:#f43f5e; } .hint.ok { background:#16a34a; }
.swipe .controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.swipe .controls button { font-size:16px; padding:10px 16px; }
.who-badge { position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:11px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; line-height:22px; text-align:center; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px; }
.filters label { display:flex; align-items:center; gap:4px; font-size:13px; color:var(--muted); border:1px solid var(--card); border-radius:8px; padding:2px 2px 2px 10px; }
.filters label.on { border-color:var(--fg); color:var(--fg); }
.filters select { border:none; padding:4px 6px; font-size:13px; max-width:180px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.card { text-decoration:none; display:block; }
.card .cover { aspect-ratio:1; border-radius:12px; background:var(--card); overflow:hidden; background-size:cover; background-position:center; }
.card .cover.round, .card .crop { border-radius:50%; }
.card .crop { width:100%; height:auto; aspect-ratio:1; }
.card b { display:block; margin-top:6px; font-weight:600; }
.card span { color:var(--muted); font-size:13px; }
.card.subj { position:relative; }
/* People and Pets: one grid for every face. Each circle spans as many columns as it has members (a
   big circle spans the full width and wraps onto more rows) and packs densely; CIRCLES_SCRIPT picks the
   column count --c that leaves the fewest empty cells, leaning to bigger faces when there are few. */
.circles { --c:6; --g:16px; --t:calc((100cqw - (var(--c) - 1) * var(--g)) / var(--c)); display:grid; grid-template-columns:repeat(var(--c), minmax(0,1fr)); grid-auto-flow:row dense; gap:4px var(--g); margin-top:8px; }
.circle { grid-column:span var(--s, 1); grid-row:span var(--h, 1); display:grid; grid-template-columns:subgrid; align-content:start; min-width:0; }
.circle h3 { grid-column:1 / -1; margin:16px 0 10px; padding-top:8px; border-top:1px solid var(--card); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.circle .cards.faces { grid-column:1 / -1; display:grid; grid-template-columns:subgrid; gap:18px var(--g); margin-bottom:8px; }
.cards.faces .card { min-width:0; }
.cards.faces .crop, .cards.faces .cover { border-radius:clamp(14px, calc(var(--t) * .07), 24px); }
.cards.faces b { font-size:clamp(14px, calc(var(--t) * .065), 19px); margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cards.faces span:not(.crop) { font-size:clamp(12px, calc(var(--t) * .05), 14px); }
.card.subj > a { text-decoration:none; display:block; }
.cover-pick { position:absolute; top:6px; right:6px; width:32px; height:32px; border-radius:50%; border:0; padding:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:#161616; box-shadow:0 1px 4px rgba(0,0,0,.25); opacity:0; transition:opacity .15s; }
.card.subj:hover .cover-pick, .cover-pick:focus-visible { opacity:1; }
@media (hover:none) { .cover-pick { opacity:.9; } }
dialog.covers { border:0; border-radius:20px; padding:20px; width:min(560px, calc(100vw - 32px)); background:var(--paper); color:var(--fg); box-shadow:0 20px 50px rgba(0,0,0,.3); }
dialog.covers::backdrop { background:rgba(0,0,0,.35); }
dialog.covers h3 { margin:0 0 14px; color:var(--fg); font-size:16px; }
dialog.covers .choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:10px; max-height:50vh; overflow-y:auto; padding:4px; }
dialog.covers .choice { aspect-ratio:1; border-radius:50%; border:0; padding:0; background-color:var(--card); background-repeat:no-repeat; cursor:pointer; }
dialog.covers .choice:hover { outline:3px solid var(--accent); outline-offset:2px; }
dialog.covers .choice.current { outline:3px solid var(--fg); outline-offset:2px; }
dialog.covers .note { color:var(--muted); font-size:13px; grid-column:1 / -1; }
dialog.covers .row { display:flex; gap:8px; margin-top:16px; align-items:center; }
.crop { width:88px; height:88px; border-radius:10px; background-color:var(--card); background-repeat:no-repeat; flex:none; display:block; }
.crops { display:flex; gap:6px; flex-wrap:wrap; }
.cluster .crops .crop { width:72px; height:72px; }
.crops.maybe label { opacity:.5; transition:opacity .15s; }
.crops.maybe label:has(input:checked), .crops.maybe label:hover { opacity:1; }
button.guess { display:inline-flex; align-items:center; gap:7px; padding:3px 12px 3px 3px; border-radius:999px; }
button.guess .crop { width:26px; height:26px; border-radius:50%; }
.crops label { position:relative; }
.crops input[type=checkbox] { position:absolute; top:4px; left:4px; }
.cluster { border:1px solid var(--card); border-radius:12px; padding:12px; margin:0 0 16px; }
/* "Is this …?" cards: the unknown face, the person it might be, Yes / No. */
.suggest { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:12px; margin:0 0 24px; }
.sg { border:1px solid var(--card); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; margin:0; }
.sg > .crop, .sg > a > .crop { width:100%; height:auto; aspect-ratio:1; border-radius:10px; }
.sg .who { display:flex; align-items:center; gap:8px; font-weight:600; }
.sg .who .crop { width:30px; height:30px; border-radius:8px; }
.sg .who small { display:block; font-weight:400; color:var(--muted); font-size:12px; }
.sg .bar { margin:0; }
.sg .bar button { flex:1; }
.sg-all { display:flex; justify-content:center; margin:-8px 0 24px; }
.sg-all button { padding:9px 28px; }
.cluster form.name { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.review { display:flex; gap:10px; flex-wrap:wrap; }
.review form { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--muted); }
.review button { font-size:12px; padding:2px 8px; }
.empty { padding:48px 16px; text-align:center; color:var(--muted); }
.pager { padding:24px; text-align:center; }
.answer { font-size:18px; margin:16px 0; max-width:720px; }
.breakdown { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.note { color:var(--muted); font-size:13px; }
.error { color:#dc2626; }
.photo { display:flex; flex-wrap:wrap; gap:24px; padding:16px 0; }
.photo .view { flex:3 1 480px; display:flex; justify-content:center; }
.photo .view img { max-width:100%; max-height:calc(100vh - 100px); object-fit:contain; }
.photo dl { flex:1 1 240px; margin:0; font-size:14px; }
.photo dt { color:var(--muted); font-size:12px; margin-top:12px; }
.photo dd { margin:0; word-break:break-word; }
.photo dd .chips { margin:4px 0 0; }
.login { max-width:360px; margin:20vh auto; text-align:center; padding:0 16px; }
.login h1 { font-size:28px; margin-bottom:8px; }
.login p { color:var(--muted); }
.login .button { margin-top:16px; padding:10px 20px; }
fieldset { border:1px solid var(--card); border-radius:12px; padding:12px; margin:16px 0; }
fieldset label { margin-right:12px; }
/* Single photo: a dark stage for the photo and its similar shots; date, place and actions beside it. */
.pv { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; padding-top:8px; }
.pv-stage { background:#1b1b1a; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; position:sticky; top:12px; }
.pv-frame { position:relative; height:calc(100vh - 170px); min-height:380px; display:flex; align-items:center; justify-content:center; padding:20px; }
.pv-stage:has(.pv-group) .pv-frame { height:calc(100vh - 300px); }
.pv-frame img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,.45); }
.pv-noimg { color:rgba(255,255,255,.6); }
.pv-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1; text-decoration:none; opacity:0; transition:opacity .15s, background .15s; }
.pv-nav.left { left:14px; } .pv-nav.right { right:14px; }
.pv-frame:hover .pv-nav, .pv-nav:focus-visible { opacity:1; }
.pv-nav:hover { background:rgba(255,255,255,.22); }
@media (hover:none) { .pv-nav { opacity:.85; } }
.pv-group { border-top:1px solid rgba(255,255,255,.08); padding:12px 16px 14px; color:rgba(255,255,255,.72); }
.pv-group-head { display:flex; align-items:center; gap:12px; font-size:13px; margin-bottom:10px; min-height:28px; }
.pv-cover { margin-left:auto; background:#fff; color:#161616; border:0; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; }
.pv-strip { display:flex; gap:10px; overflow-x:auto; padding:3px 3px 4px; }
.pv-shot { flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; }
.pv-shot a { position:relative; display:block; width:84px; height:84px; border-radius:8px; overflow:hidden; outline:2px solid transparent; outline-offset:2px; opacity:.62; transition:opacity .15s; }
.pv-shot a:hover, .pv-shot a:focus-visible { opacity:1; }
.pv-shot.current a { outline-color:#fff; opacity:1; }
.pv-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.pv-cover-mark { position:absolute; left:4px; bottom:4px; background:#1f5ee0; color:#fff; font-size:10px; font-weight:600; border-radius:4px; padding:1px 5px; }
.gstars { display:flex; }
.gstars button { border:0; background:none; padding:0 1px; font-size:13px; line-height:1; color:rgba(255,255,255,.22); cursor:pointer; }
.gstars button.on { color:#e8a33d; }
.gstars button:hover { color:#f3c37a; }
.pv-side { display:flex; flex-direction:column; gap:18px; min-width:0; }
.pv-when h1 { font-size:26px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin:0; }
.pv-when p { margin:4px 0 0; color:var(--muted); font-size:15px; }
.pv-when .pv-where { color:var(--fg); }
.pv-where a { text-decoration:none; } .pv-where a:hover { text-decoration:underline; }
.pv-when h1 a { color:inherit; text-decoration:none; } .pv-when h1 a:hover { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.pv-map { margin:0; }
.pv-map > a { display:block; position:relative; height:170px; max-width:480px; border-radius:14px; overflow:hidden; background:var(--chip); }
.pv-tiles { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.osm { display:block; position:relative; }
.osm .maplibregl-canvas { outline:none; }
@media (prefers-color-scheme: dark) { .osm { filter:brightness(.82) contrast(1.05); } }
.pv-pin { position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#1f5ee0; border:3px solid #fff;
  box-shadow:0 0 0 7px rgba(31,94,224,.2), 0 1px 4px rgba(0,0,0,.3); }
.pv-map figcaption { font-size:10px; color:var(--muted); margin-top:4px; text-align:right; }
.pv-map figcaption a { color:inherit; }
/* Near and Day pages: a header with the range controls (and the Near map on the side). */
.scopehead { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:start; margin:6px 0 18px; }
.scopehead h2 { margin:0; font-size:26px; letter-spacing:-.01em; }
.scopehead .note { display:block; margin-top:2px; }
.scopehead .range { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:14px 0 0; }
.scopehead .range .lbl { font-size:13px; color:var(--muted); margin-right:4px; }
.scopehead .save { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.scopehead .save input { min-width:220px; }
.save input { background:var(--bg); }
.scopehead .evs { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
@media (max-width: 760px) { .scopehead { grid-template-columns:1fr; } }
.near-map { margin:0; }
.pv-map-box { position:relative; border-radius:14px; overflow:hidden; background:var(--chip); max-width:100%; }
.pv-map-box svg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.near-map .ring { fill:rgba(31,94,224,.10); stroke:#1f5ee0; stroke-width:2; }
.near-map .dot { fill:#6b6b68; fill-opacity:.55; stroke:#fff; stroke-width:1; }
.near-map .dot.in { fill:#1f5ee0; fill-opacity:.85; }
.near-map a:hover .dot { fill:#e8a33d; fill-opacity:1; }
.near-map .centre { fill:#1f5ee0; stroke:#fff; stroke-width:3; }
.near-map figcaption { font-size:10px; color:var(--muted); margin-top:4px; text-align:right; }
/* Day treemaps: the Day view's week bento and the justified days of albums and day ranges. */
.tt .tt-n { position:absolute; top:6px; right:6px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:600; line-height:22px; text-align:center; }
.tt .tt-n::before { content:"⧉ "; font-weight:400; }
.tt-box { position:relative; }
.tt { position:absolute; display:block; background:var(--card) center/cover no-repeat; overflow:hidden; }
.tt:hover { filter:brightness(1.07); }
.tt .more-n { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.42); color:#fff; font-weight:700; font-size:18px; }
.dh { display:flex; align-items:center; gap:8px; min-width:0; height:26px; }
.dh .wd { display:flex; align-items:baseline; gap:6px; text-decoration:none; color:var(--fg); white-space:nowrap; flex:none; }
.dh .wd b { font-size:15px; font-weight:650; }
.dh .wd .note, .dh .short { font-size:13px; white-space:nowrap; }
.dh .wd:hover b { text-decoration:underline; }
.evpill { font-size:12px; font-weight:600; color:#fff; background:#1f5ee0; border-radius:999px; padding:2px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-decoration:none; }
.bento { position:relative; margin:6px 0 8px; }
.bday { position:absolute; background:var(--chip); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.bday .dh { padding:0 2px; }
.bday.narrow .short { display:none; }
.jdays { display:flex; flex-direction:column; gap:20px; margin:6px 0 8px; }
.jrow { display:flex; gap:12px; align-items:flex-start; }
.jday { flex:0 0 auto; display:flex; flex-direction:column; gap:7px; min-width:0; }
.jday .evpill { color:#1f5ee0; background:#e8eefc; }
.jday .wd .short, .jday.narrow .wd .full { display:none; }
.jday.narrow .wd .short { display:inline; }
.jday.narrow.ev .jfaces { display:none; }
.jfaces { display:flex; flex:none; }
.jfaces .dot { width:22px; height:22px; margin-left:-4px; border:2px solid var(--bg); font-size:9px; }
.jsub { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Pages with a right-hand sidebar (Near): photos fill the left; the sidebar stays in view. */
.with-aside { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
.main-col { min-width:0; }
.side-col { position:sticky; top:12px; display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.side-col { min-width:0; }
.side-col .range { margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.datepick { display:flex; flex-direction:column; gap:8px; }
.datepick label { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; }
.datepick input { flex:1; max-width:200px; min-width:0; }
.pv-hide { margin-top:14px; }
.pv-hide > .bar { margin:0; }
.groupacts { margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.groupacts .grate button { color:#e0a100; padding:4px 8px; font-size:12px; }
.dayslider { display:flex; flex-direction:column; gap:6px; }
.dayslider .lbl { font-size:13px; color:var(--muted); }
.dayslider .lbl b { color:var(--fg); font-weight:600; }
.dayslider .track { position:relative; height:56px; }
.dayslider .hist { position:absolute; inset:0 0 14px; display:flex; align-items:flex-end; gap:2px; }
.dayslider .hist span { flex:1; background:var(--bar); border-radius:2px 2px 0 0; min-height:2px; }
.dayslider .sel { position:absolute; bottom:4px; height:6px; border-radius:3px; background:var(--accent); left:0; right:0; }
.dayslider .track::before { content:""; position:absolute; left:0; right:0; bottom:4px; height:6px; border-radius:3px; background:var(--card); }
.dayslider input[type=range] { position:absolute; left:0; right:0; bottom:0; width:100%; height:14px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.dayslider input[type=range]::-webkit-slider-runnable-track { background:none; }
.dayslider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto; width:16px; height:16px; border-radius:50%; background:var(--paper); border:2px solid var(--accent); cursor:grab; }
.dayslider input[type=range]::-moz-range-thumb { pointer-events:auto; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--accent); cursor:grab; }
.dayslider input[type=range]:focus-visible::-webkit-slider-thumb { outline:2px solid var(--accent); outline-offset:2px; }
.dayslider .ticks { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.side-col .range .lbl { display:block; width:100%; font-size:13px; color:var(--muted); margin:0 0 2px; }
.range .chip small { color:var(--muted); font-size:11px; margin-left:3px; }
.range .chip.on small { color:inherit; opacity:.7; }
.side-col .save { margin:0; display:flex; flex-direction:column; gap:8px; }
.side-col .save input { width:100%; min-width:0; }
.side-col .save button { align-self:flex-start; }
.side-col .pv-map-box { width:100% !important; }
.with-aside.left { grid-template-columns:320px minmax(0,1fr); }
.with-aside.left .side-col { order:-1; }
/* Sidebar pages (a date, a place) show their grid a bit larger. */
.with-aside .vgrid.tiny { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:4px; }
.with-aside .vgrid.tiny .tile { border-radius:6px; }
@media (max-width: 900px) { .with-aside, .with-aside.left { grid-template-columns:1fr; } .side-col { position:static; order:-1; } }
/* The dock's hidden-things panel: screenshots, uninteresting photos, exes. */
.hpanel { position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:21; background:var(--paper); border:1px solid var(--card); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.16); padding:6px; display:flex; flex-direction:column; min-width:280px; }
.hpanel[hidden] { display:none; }
.bpanel { position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:21; background:var(--paper); border:1px solid var(--card); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.16); padding:8px; display:flex; flex-direction:column; gap:4px; min-width:300px; }
.bpanel[hidden] { display:none; }
.bpanel .bhd { font-size:13px; color:var(--muted); padding:4px 8px; }
.bpanel > button { text-align:left; border:0; background:transparent; padding:9px 10px; border-radius:10px; font:inherit; color:var(--fg); cursor:pointer; }
.bpanel > button:hover { background:var(--chip); }
.bpanel .brate { display:flex; align-items:center; gap:4px; padding:4px 10px; }
.bpanel .brate span { margin-right:6px; }
.bpanel .brate button { border:1px solid var(--card); background:transparent; border-radius:8px; padding:4px 6px; font-size:12px; color:#e0a100; cursor:pointer; }
.bpanel .bstory { display:flex; gap:6px; padding:6px 4px 2px; margin:0; }
.bpanel .bstory input { flex:1; min-width:0; }
.bpanel .bmsg { font-size:13px; color:var(--muted); padding:0 8px; }
.hrow { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 12px; border-radius:10px; color:var(--fg); text-decoration:none; }
a.hrow:hover { background:var(--chip); }
.hrow.on { background:var(--acc-bg); }
.hrow small { color:var(--muted); font-size:12px; }
/* Below a single photo: similar photos and events from around the same time. */
.simgroup { margin:0 0 18px; }
.simgroup h3 { font-size:15px; margin:0 0 8px; }
.simtile { display:flex; flex-direction:column; gap:4px; min-width:0; }
.simtile .why { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-below { margin-top:36px; display:flex; flex-direction:column; gap:28px; }
.pv-below .lsec-h { margin-bottom:12px; }
.pv-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pv .heart { position:static; opacity:1; width:auto; height:auto; padding:7px 14px; border-radius:999px; background:var(--chip); color:var(--fg); font-size:14px; line-height:1.2; }
.pv .heart.on { color:#e11d48; background:#fde7ec; }
.pv .stars button { font-size:22px; color:var(--card); padding:0 1px; }
.pv .stars button.on { color:#e8a33d; }
.pv-actions .share, .pv-actions .download { border:0; border-radius:999px; background:var(--chip); padding:7px 14px; font-size:14px; }
.pv-caption { margin:0; font-size:15px; line-height:1.5; max-width:60ch; }
.pv-event { display:inline-block; color:var(--accent); background:var(--acc-bg); border-radius:8px; padding:4px 10px; font-weight:500; text-decoration:none; margin-bottom:10px; }
.pv-people { display:flex; flex-wrap:wrap; gap:6px; }
.pv-person { display:inline-flex; align-items:center; gap:7px; padding:3px 12px 3px 3px; border-radius:999px; background:var(--chip); text-decoration:none; font-size:13px; }
.pv-person .crop { width:26px; height:26px; border-radius:50%; }
.pv-person.muted { color:var(--muted); padding:6px 12px; }
.pv-tags { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; }
.pv-tags a { color:var(--muted); text-decoration:none; } .pv-tags a:hover { color:var(--fg); }
.pv-notes { display:flex; flex-direction:column; gap:10px; }
.pv-notes form { margin:0; }
.pv-notes textarea { width:100%; min-height:64px; field-sizing:content; resize:vertical; border:1px solid var(--card); border-radius:12px; background:var(--paper); padding:10px 12px; font:inherit; font-size:14px; line-height:1.45; }
.pv-notes textarea + button { margin-top:6px; }
.pv-tags { align-items:center; }
.pv-tags .mine { display:inline-flex; align-items:center; gap:2px; background:var(--acc-bg); border-radius:999px; padding:1px 2px 1px 9px; }
.pv-tags .mine a { color:var(--accent); }
.pv-tags .mine form { margin:0; display:inline; }
.pv-tags .mine button { border:0; background:none; color:var(--accent); padding:0 6px; font-size:14px; line-height:1; cursor:pointer; }
.pv-addtag { margin:0; }
.ev-notes { margin-top:12px; width:620px; max-width:calc(100vw - 48px); }
.ev-notes .pv-addtag input { width:150px; }
.pv-addtag input { border:0; background:var(--chip); border-radius:999px; padding:3px 10px; font-size:13px; width:110px; }
.pv-addtag input:focus { width:180px; }
/* Places: filters on the left, the map or the list of cities beside them. */
.places { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px; align-items:start; padding-top:8px; }
.psb { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding-right:4px; }
.psb h4 { margin:0 0 4px; font-size:13px; font-weight:600; color:var(--muted); }
.pviews { display:flex; gap:2px; padding:3px; background:var(--chip); border-radius:10px; }
.pviews a { flex:1; text-align:center; padding:6px 0; border-radius:8px; font-size:14px; font-weight:500; text-decoration:none; }
.pviews a.on { background:var(--paper); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.pwhen { display:flex; flex-direction:column; gap:6px; margin:0; }
.pwhen label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:var(--muted); }
.pwhen input { font-size:13px; padding:4px 6px; border-radius:8px; }
.facets { display:flex; flex-direction:column; gap:1px; }
.facets details summary { cursor:pointer; font-size:13px; color:var(--accent); padding:4px 8px; list-style:none; }
.facets details summary::-webkit-details-marker { display:none; }
.facets details[open] summary { display:none; }
.facet { display:flex; justify-content:space-between; gap:8px; padding:5px 8px; border-radius:8px; font-size:14px; text-decoration:none; }
.facet:hover { background:var(--chip); }
.facet small { color:var(--muted); font-size:12px; }
.facet.on { background:var(--acc-bg); color:var(--accent); font-weight:500; }
.facet.on small { color:var(--accent); }
.pmain { min-width:0; }
.pmaplist { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.pmaplist span { color:var(--muted); font-size:14px; }
.pmain h3:first-child { margin-top:0; }
#placemap { height:calc(100vh - 120px); min-height:420px; border-radius:16px; overflow:hidden; background:var(--chip); }
.photo-pin span { display:block; width:100%; height:100%; border-radius:10px; border:2px solid #fff; background:var(--card) center/cover; box-shadow:0 2px 8px rgba(0,0,0,.35); position:relative; }
.photo-pin b { position:absolute; right:-8px; top:-8px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#161616; color:#fff; font-size:11px; line-height:22px; text-align:center; }
@media (max-width: 860px) {
  .places { grid-template-columns:1fr; }
  .psb { position:static; max-height:none; }
  #placemap { height:65vh; }
}
.pv-more { border-top:1px solid var(--card); padding-top:12px; }
.pv-more summary { cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; }
.pv-more summary::-webkit-details-marker { display:none; }
.pv-more summary::after { content:"+"; color:var(--muted); font-weight:400; }
.pv-more[open] summary::after { content:"–"; }
.pv-more > :not(summary) { margin:10px 0 0; }
.pv-more form { margin:0; }
.pv-more p { font-size:14px; }
.pv-facts { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.pv-facts dt { color:var(--muted); }
.pv-facts dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.pv-facts code { font-size:11px; }
.pv-keys { color:var(--muted); font-size:12px; margin:0; }
@media (max-width: 900px) {
  .pv { grid-template-columns:1fr; gap:20px; }
  .pv-stage { position:static; border-radius:14px; }
  .pv-frame, .pv-stage:has(.pv-group) .pv-frame { height:62vh; min-height:300px; padding:12px; }
  .pv-shot a { width:68px; height:68px; }
}
/* Library views */
.button.small, button.small { padding:3px 9px; font-size:12px; border-radius:7px; background:var(--paper); }
.button.dim { opacity:.4; }
.libhead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-top:18px; }
.libhead h2 { margin:0; }
/* A person's or pet's page: their face, name and controls above their library. */
.subjhead { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:6px 0 18px; }
.subjhead .crop, .subjhead .cover { width:64px; height:64px; border-radius:50%; }
.subjhead h2 { margin:0; font-size:26px; letter-spacing:-.01em; }
.subjhead .note { display:block; margin-top:2px; }
.subjhead .acts { margin-left:auto; display:flex; gap:8px; align-items:center; }
.subjhead details[open] { flex-basis:100%; order:3; }
/* The dock: filters, the five views and screenshots, floating over the bottom of the page. */
.dock { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:4px; padding:5px; background:rgba(22,22,22,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.18); white-space:nowrap; max-width:calc(100vw - 16px); overflow-x:auto; scrollbar-width:none; }
.dock a, .dock button { border:0; padding:8px 16px; border-radius:999px; font:500 14px/1.2 inherit; font-family:inherit; color:rgba(255,255,255,.75); background:transparent; text-decoration:none; cursor:pointer; flex:none; }
.dock a:hover { color:#fff; }
.dock a.on { background:#fff; color:#161616; }
.dock .filt { padding:8px 14px; color:rgba(255,255,255,.85); }
.dock .filt.active { background:rgba(157,187,255,.22); color:#c9d8ff; }
.dock .hid { font-size:13px; font-weight:400; padding:8px 14px; }
.dock span.hid { color:rgba(255,255,255,.5); }
.dock .sep { width:1px; height:20px; background:rgba(255,255,255,.18); margin:0 4px; flex:none; }
@media (max-width: 760px) { .dock a, .dock button { padding:8px 11px; font-size:13px; } .dock { bottom:10px; } }
.fpanel { position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:21; width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 120px); overflow-y:auto; display:flex; flex-direction:column; gap:18px; padding:18px 20px 20px; background:rgba(22,22,22,.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-radius:22px; box-shadow:0 16px 40px rgba(0,0,0,.25); color:#fff; }
.fpanel .hd { display:flex; align-items:center; gap:12px; }
.fpanel .hd b { font-size:16px; font-weight:600; }
.fpanel .hd span { font-size:12px; color:rgba(255,255,255,.6); }
.fpanel .clear { color:rgba(255,255,255,.7); font-size:13px; text-decoration:none; padding:6px 8px; }
.fpanel .done { background:#fff; color:#161616; border:0; border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.fpanel .grp { display:flex; flex-direction:column; gap:8px; }
.fpanel .kick { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.fpanel .pills { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.fpanel .pills > span { font-size:12px; color:rgba(255,255,255,.55); }
.fpanel .two { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.pill { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; font-size:13px; text-decoration:none; background:rgba(255,255,255,.08); color:rgba(255,255,255,.88); }
.pill:hover { background:rgba(255,255,255,.16); }
.pill.on { background:#fff; color:#161616; }
.pill.face { padding:3px 12px 3px 3px; }
.pill small { opacity:.55; font-size:12px; }
.pill .dot { width:26px; height:26px; font-size:11px; }
.lib { display:flex; flex-direction:column; gap:40px; padding-top:22px; }
.lsec-h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.lsec-h h2 { font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.lsec-h.small { padding:20px 0 0; margin-bottom:8px; }
.lsec-h h3 { font-size:16px; font-weight:650; color:var(--fg); margin:0; }
.lsec-h .faces { align-self:center; }
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); grid-auto-flow:dense; gap:6px; }
.vgrid.mid { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }
.vgrid.six { grid-template-columns:repeat(6,minmax(0,1fr)); min-width:0; }
.vgrid.tiny { grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:2px; }
.vgrid .tile, .strip .tile { border-radius:12px; }
.vgrid.tiny .tile { border-radius:2px; }
.vgrid.tiny .badge { top:3px; min-width:20px; height:20px; padding:0 5px; font-size:11px; }
.vgrid.tiny .tile.stacked .badge { right:calc(8% + 3px); }
.vgrid.tiny .badge::before { content:""; }
.vgrid .tile.big { grid-column:span 2; grid-row:span 2; }
.tile:hover img { filter:brightness(1.06); }
.tlabel { position:absolute; left:7px; top:6px; font:10px ui-monospace,"SF Mono",Menlo,monospace; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); pointer-events:none; }
.faces { display:flex; gap:4px; flex-wrap:wrap; }
.dot { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:#1b1b1a; overflow:hidden; flex:none; vertical-align:middle; }
.dot .crop { width:100%; height:100%; border-radius:50%; }
.fchip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 3px; border-radius:999px; background:var(--chip); font-size:12px; text-decoration:none; }
.evchip { display:inline-block; align-self:flex-start; font-size:12px; font-weight:500; color:var(--accent); background:var(--acc-bg); border-radius:6px; padding:3px 8px; text-decoration:none; max-width:100%; }
.linkish { border:0; background:none; padding:0; color:var(--accent); font-size:12px; cursor:pointer; align-self:flex-start; text-decoration:none; }
.lastmonth { display:grid; grid-template-columns:minmax(220px,1fr) 2fr; gap:24px; align-items:start; }
.lastmonth .info { display:flex; flex-direction:column; gap:12px; max-width:340px; }
.lastmonth h2 { font-size:26px; font-weight:700; letter-spacing:-0.01em; margin:0; }
@media (max-width: 760px) { .lastmonth { grid-template-columns:1fr; } }
.evcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px 16px; }
.evcard { text-decoration:none; display:flex; flex-direction:column; gap:8px; }
.evcard:hover { opacity:.88; }
.evcard .collage { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:6px; height:190px; }
.evcard .collage > div { border-radius:12px; background:var(--card) center/cover; position:relative; overflow:hidden; }
.evcard .collage > div:first-child { grid-row:span 2; }
.evcard .kind { position:absolute; left:8px; top:8px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.92); color:#1b1b1a; }
.evcard .more-n { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); color:#fff; font-weight:600; font-size:13px; }
.evcard .t { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.evcard .t b { font-size:15px; }
.evcard .t .note { white-space:nowrap; font-size:12px; }
.daynav { display:flex; gap:8px; align-items:center; padding:16px 0 4px; }
.dayrow { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:10px 0; border-top:1px solid var(--card); }
.dayrow .dmeta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dayrow .dmeta .note { font-size:12px; }
.strip { --sh:104px; display:flex; flex-wrap:wrap; gap:6px; height:var(--sh); overflow:hidden; }
.strip.open { height:auto; }
.strip .tile { height:var(--sh); width:calc(var(--sh) * var(--a, 1)); aspect-ratio:auto; flex:0 0 auto; }
@media (max-width: 760px) { .dayrow { grid-template-columns:1fr; gap:8px; } }
/* Phones: smaller tiles, so more photos fit on screen in Feed, Day and Month. */
@media (max-width: 560px) {
  .vgrid { grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:4px; }
  .vgrid.mid { grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); }
  .vgrid.six { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .vgrid .tile, .strip .tile { border-radius:8px; }
  .strip { --sh:72px; gap:4px; }
  .vgrid .tile:not(.big) .heart, .strip .heart { display:none; }
}
.more-tile { aspect-ratio:1; border:1px solid var(--card); border-radius:12px; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; gap:2px; }
.more-tile b { font-size:15px; }
.more-tile span { font-size:11px; color:var(--muted); }
.yearcard { background:var(--paper); border:1px solid var(--card); border-radius:20px; padding:22px 24px; display:flex; flex-direction:column; gap:20px; }
.yearcard .yh { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.yearcard .yh b { font-size:44px; font-weight:650; letter-spacing:-0.03em; line-height:1; }
.ymonths { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end; }
.ymonths a { display:flex; flex-direction:column; gap:5px; text-decoration:none; transition:transform .15s; }
.ymonths a:hover { transform:translateY(-2px); }
.ymonths a.empty { opacity:.45; pointer-events:none; }
.ymonths .cov { aspect-ratio:1; border-radius:12px; background:var(--card) center/cover; }
.ymonths .barbox { height:28px; display:flex; align-items:flex-end; }
.ymonths .barbox div { width:100%; background:var(--bar); border-radius:2px; }
.ymonths .ml { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.ymonths .ml b { color:var(--fg); font-weight:500; }
@media (max-width: 760px) { .ymonths { grid-template-columns:repeat(6,minmax(0,1fr)); } .yearcard { padding:16px; } }
.kicker { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.yevents { display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; }
.yevents .yev { flex:0 0 210px; position:relative; }
.yevents a { display:flex; flex-direction:column; gap:6px; text-decoration:none; }
/* A heart on an event: shown when it's a favorite, or on hover to make it one. */
.evheart { border:0; cursor:pointer; border-radius:999px; font-size:14px; line-height:1; }
.yev .evheart { position:absolute; left:8px; top:8px; width:28px; height:28px; padding:0; background:rgba(0,0,0,.45); color:#fff; opacity:0; transition:opacity .15s; }
.yev:hover .evheart, .yev .evheart:focus-visible, .yev .evheart.on { opacity:1; }
.yev .evheart.on { background:rgba(255,255,255,.92); color:#e11d48; }
@media (hover:none) { .yev .evheart { opacity:.85; } }
.subjhead .evheart { padding:7px 14px; background:var(--chip); color:var(--fg); }
.subjhead .evheart.on { background:#fde7ec; color:#e11d48; }
.yevents a:hover { opacity:.85; }
.yevents .cov { height:118px; border-radius:12px; background:var(--card) center/cover; position:relative; }
.yevents .cnt { position:absolute; right:8px; top:8px; background:rgba(255,255,255,.9); color:#1b1b1a; border-radius:6px; padding:1px 6px; font-size:11px; font-weight:600; }
.ycols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.pchips { display:flex; gap:6px; flex-wrap:wrap; }
.pchips a { border:1px solid var(--card); background:var(--chip); border-radius:999px; padding:4px 11px; font-size:13px; text-decoration:none; display:flex; gap:6px; }
.pchips a span { color:var(--muted); }
.rare { display:flex; gap:16px; flex-wrap:wrap; }
.pages > section.cont { margin-top:3px; }
.rare a { display:flex; gap:8px; align-items:center; text-decoration:none; font-size:13px; font-weight:500; }
.rare .dot { width:38px; height:38px; font-size:14px; }
.rare small { display:block; color:var(--muted); font-size:12px; font-weight:400; }

/* Click-to-rename names: an input that looks like the heading until you use it. */
.inline-name { margin:0; }
.inline-name input[name=title] { font:inherit; color:inherit; background:transparent; border:0; border-radius:8px; padding:2px 6px; margin:0 -6px; width:calc(100% + 12px); min-width:0; text-overflow:ellipsis; }
.inline-name input[name=title]:hover { background:var(--chip); }
.inline-name input[name=title]:focus { background:var(--paper); outline:2px solid var(--accent); outline-offset:0; }
.inline-name input[name=title]::placeholder { color:var(--muted); opacity:1; font-weight:500; }
.ev-head input[name=title]::placeholder { color:var(--fg); font-weight:700; }
.inline-name input[name=title]:focus::placeholder { color:var(--muted); }
.inline-name.saving input { opacity:.5; }

/* An event: its name, then its moments as a timeline; facts and actions in the sidebar. */
.ev-head { font-size:30px; font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin:4px 0 18px; }
.ev-timeline { --rail:96px; position:relative; padding-bottom:24px; }
.ev-timeline::before { content:""; position:absolute; left:calc(var(--rail) - 13px); top:10px; bottom:24px; width:1px; background:var(--bar); }
.ev-day { margin:22px 0 10px calc(var(--rail) + 4px); font-size:13px; font-weight:600; color:var(--muted); }
.ev-day:first-child { margin-top:0; }
.ev-moment { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:4px; margin-bottom:22px; scroll-margin-top:16px; }
.ev-rail { position:relative; display:flex; flex-direction:column; align-items:flex-start; padding-top:6px; font-variant-numeric:tabular-nums; }
.ev-rail::after { content:""; position:absolute; left:calc(var(--rail) - 17px); top:11px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); box-sizing:border-box; }
.ev-rail time { font-size:13px; font-weight:600; }
.ev-rail span { font-size:12px; color:var(--muted); }
.ev-index .untitled { color:var(--muted); }
.ev-side .pv-addtag input { width:100%; }
.ev-mhead { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:16px; font-weight:600; }
.ev-mhead .inline-name { flex:1; min-width:0; }
.ev-mhead h4 { margin:0; font-size:16px; flex:1; }
.ev-split { margin:0; }
.ev-split button { font-size:12px; padding:3px 9px; border-radius:999px; background:transparent; border:1px solid var(--bar); color:var(--muted); opacity:0; transition:opacity .12s; }
.ev-moment:hover .ev-split button, .ev-split button:focus-visible { opacity:1; }
.ev-split button:hover { color:var(--fg); border-color:var(--muted); }
@media (hover:none) { .ev-split button { opacity:1; } }
.ev-moment .grid.small { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:4px; }
.ev-moment .grid.small .tile { border-radius:6px; }

.ev-side { display:flex; flex-direction:column; gap:22px; font-size:14px; }
.ev-side h3 { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 6px; }
.ev-facts p { margin:0 0 2px; }
.ev-facts .ev-summary { margin:10px 0 12px; color:var(--fg); line-height:1.5; }
.ev-facts .evheart { padding:7px 14px; background:var(--chip); color:var(--fg); }
.ev-facts .evheart.on { background:#fde7ec; color:#e11d48; }
.ev-index ol { list-style:none; margin:0; padding:0; }
.ev-index a { display:flex; gap:10px; justify-content:space-between; padding:5px 8px; margin:0 -8px; border-radius:6px; text-decoration:none; }
.ev-index a:hover { background:var(--chip); }
.ev-index a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-index time { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13px; }
.ev-side .pv-notes textarea { width:100%; }
.ev-acts { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--card); padding-top:16px; }
.ev-acts form { margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.ev-acts .note { font-size:12px; text-decoration:none; }
@media (max-width: 900px) {
  .with-aside:has(.ev-side) .side-col { order:1; }
  .ev-head { font-size:24px; }
}
/* Phones: no rail; the time and count sit on a line above each moment's name. */
@media (max-width: 600px) {
  .ev-timeline::before, .ev-rail::after { display:none; }
  .ev-moment { grid-template-columns:1fr; gap:0; }
  .ev-rail { flex-direction:row; gap:8px; padding-top:0; }
  .ev-day { margin-left:0; }
  .ev-moment .grid.small { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); }
}