/* 2026-10-23 (owner): Project Photos grid, the page at #view=grid (viewGrid in app.js).
   Every rule here starts with .rg (or is a token), so nothing reaches the old list at #view=list. */
:root{
  --amber:#D4A23A; --amber-tint:#FBEFD3; --amber-text:#8A5A00;
  --green:#0E6A5B; --green-tint:#E1F1EC; --green-text:#0E6A5B;
}
:root[data-theme="dark"]{
  --amber:#D4A23A; --amber-tint:#3A2F17; --amber-text:#E6BC62;
  --green:#1D8A72; --green-tint:#173A32; --green-text:#5FC9AE;
}

.rg{max-width:1400px;margin:0 auto;padding:24px 32px 40px;display:flex;flex-direction:column;gap:20px;
  font-family:Inter,system-ui,sans-serif;color:var(--text);font-size:14px;line-height:1.4;}
.rg-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--text-muted);}

/* 1. top bar: the only home of search, Slideshow and Collapse all; it stays at the top while the page scrolls */
.rg-top{position:sticky;top:var(--rg-stick,0);z-index:20;background:var(--paper);display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;
  margin:-8px 0;padding:8px 0;}
.rg-title{display:flex;align-items:baseline;gap:10px;margin-right:auto;}
.rg-title h1{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:var(--text);}
.rg-count{font-size:14px;color:var(--text-muted);}
.rg-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.rg-search{position:relative;display:block;width:300px;max-width:100%;}
.rg-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.rg-search input{box-sizing:border-box;width:100%;height:36px;padding:0 12px 0 36px;font:inherit;font-size:14px;color:var(--text);
  background:var(--input-bg);border:1px solid var(--line-strong);border-radius:8px;}
.rg-search input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.rg-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;font:inherit;font-size:14px;font-weight:600;color:var(--text);
  background:transparent;border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;}
.rg-btn:hover{border-color:var(--accent);}
.rg-btn:focus-visible,.rg-chip:focus-visible,.rg-place-btn:focus-visible,.rg-photo:focus-visible,.rg-continue:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* 2. progress card */
.rg-card-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;}
.rg-progress{display:flex;flex-direction:column;gap:12px;}
.rg-prog-row{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;}
.rg-prog-main{font-size:14px;font-weight:600;}
.rg-prog-side{font-size:13px;color:var(--text-muted);}
.rg-bar-track{display:flex;height:8px;border-radius:4px;background:var(--raised);overflow:hidden;}
.rg-bar-good{background:var(--accent);}
.rg-bar-change{background:var(--amber);}
.rg-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.rg-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;color:var(--text);
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;}
.rg-chip:hover{border-color:var(--accent);}
.rg-chip[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent-on-tint);border-color:var(--accent-tint);}
.rg-chip-n{font-weight:600;color:inherit;opacity:.75;}
.rg-chip-sep{width:1px;height:20px;background:var(--line-strong);margin:0 4px;}
.rg-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.rg-dot-wait{background:var(--accent);}
.rg-dot-change{background:var(--amber);}
.rg-dot-good{background:var(--green);}

/* 3. continue strip */
.rg-continue{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  color:var(--text);text-decoration:none;}
.rg-continue:hover{border-color:var(--accent);}
.rg-cont-th{flex:none;width:56px;height:42px;border-radius:6px;overflow:hidden;background:var(--image-well);}
.rg-cont-th img{display:block;width:100%;height:100%;object-fit:cover;}
.rg-cont-text{display:flex;flex-direction:column;min-width:0;margin-right:auto;}
.rg-cont-k{font-size:12px;color:var(--text-muted);}
.rg-cont-v{display:flex;align-items:baseline;gap:8px;min-width:0;}
.rg-cont-place{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rg-cont-chev{flex:none;display:flex;color:var(--text-muted);}

/* status pills: on the photo and in the continue strip */
.rg-pill{display:inline-flex;align-items:center;flex:none;font-size:11px;font-weight:600;line-height:1.3;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.rg-st-wait{background:var(--accent-tint);color:var(--accent-on-tint);}
.rg-st-change{background:var(--amber-tint);color:var(--amber-text);}
.rg-st-good{background:var(--green-tint);color:var(--green-text);}

/* 4. groups: location (opens and closes); its photos in one grid, with a full-row divider where the scene or view changes */
.rg-body{display:flex;flex-direction:column;gap:28px;}
.rg-place-head{margin:0;font:inherit;}
.rg-place-btn{display:flex;align-items:center;gap:10px;width:100%;padding:0 0 10px;font:inherit;color:var(--text);text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;}
.rg-chev{display:flex;color:var(--text-muted);transition:transform .15s ease;}
.rg-place-btn[aria-expanded="true"] .rg-chev{transform:rotate(90deg);}
.rg-place-name{font-size:18px;font-weight:700;margin-right:auto;}
.rg-place-n{font-size:13px;color:var(--text-muted);}
.rg-place-mine{font-size:13px;font-weight:600;color:var(--accent-text);}
.rg-place-body{display:flex;flex-direction:column;gap:14px;padding-top:16px;}
.rg-place-body[hidden]{display:none;}
.rg-scene{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:8px 0 0;font-size:13px;}
.rg-grid > .rg-scene:first-child{margin-top:0;}
.rg-scene-name{font-weight:600;}
.rg-scene-sep,.rg-scene-view{color:var(--text-muted);}
.rg-scene-rule{flex:1;height:1px;background:var(--line);}
.rg-empty{margin:0;color:var(--text-muted);font-size:14px;}

/* 5. photo cards */
.rg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.rg-photo{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  color:var(--text);text-decoration:none;}
.rg-photo:hover{border-color:var(--accent);}
.rg-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--image-well);}
.rg-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;}
.rg-pill-over{position:absolute;left:8px;bottom:8px;}
.rg-photo-body{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;}
.rg-photo-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;}
.rg-tags{display:flex;flex-wrap:wrap;gap:6px;}
.rg-tags:empty{display:none;}
.rg-tag{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;font-size:11px;font-weight:600;border-radius:999px;}
.rg-tag-msg{background:var(--raised);color:var(--text-muted);}
.rg-tag-task{background:var(--amber-tint);color:var(--amber-text);}
.rg-tag-done{background:var(--green-tint);color:var(--green-text);}

/* 2026-10-23 (owner): 5 columns from 1600px, 4 from 1200, 3 from 900, 2 from 560, 1 below */
@media (max-width:1599px){ .rg-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:1199px){ .rg-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:899px){ .rg-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:759px){ .rg{padding:20px 16px 32px;} }
@media (max-width:559px){ .rg-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:479px){ .rg-search{width:100%;} .rg-tools{width:100%;} }