/* Concept 1, revision 2 — "One photo at a time".
   Local prototype styles. System fonts only. No external requests. */

:root{
  --paper:#FAF6F0;          /* warm cream, a touch cooler than v1 */
  --paper-2:#F1ECE4;
  --card:#FFFFFF;
  --ink:#20201D;
  --ink-2:#55544E;
  --ink-3:#7A776F;
  --line:#DFD9CF;
  --line-2:#CCC4B7;
  --accent:#0C6157;         /* green primary, unchanged */
  --accent-ink:#FFFFFF;
  --accent-soft:#DFEEEA;
  --accent-line:#AFD2CA;
  --wait:#93440A;           /* waiting / attention */
  --wait-soft:#FBE8D6;
  --wait-line:#E8C69C;
  --good:#166437;
  --good-soft:#DFEFE4;
  --good-line:#B5D8C0;
  --change:#8A4B06;
  --change-soft:#FAE9D3;
  --stop:#8C2323;
  --stop-soft:#F6E2E0;
  --stop-line:#E0BCB8;
  --sand:#8A6A16;           /* caution / special note */
  --sand-soft:#FBF0D6;
  --sand-line:#E6D19A;

  --shadow:0 1px 2px rgba(32,32,29,.05), 0 6px 18px -12px rgba(32,32,29,.45);
  --shadow-lift:0 2px 4px rgba(32,32,29,.07), 0 22px 44px -20px rgba(32,32,29,.55);

  --r-card:6px;
  --r-btn:6px;
  --r-input:4px;
  --r-chip:4px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;cursor:pointer;}
input,textarea{font:inherit;color:inherit;}
a{color:var(--accent);}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.grow{flex:1 1 auto;}
.spacer{flex:1 1 auto;}

.wrap{max-width:1240px;margin:0 auto;padding:0 22px;}

/* ---------- top bar ---------- */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;}
.topbar-in{display:flex;align-items:center;gap:14px;min-height:70px;}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;text-decoration:none;color:inherit;}
.brand img{width:42px;height:42px;object-fit:contain;flex:none;}
.brand-text{min-width:0;display:block;}
.brand-title{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}

/* ---------- message strip (replaces the old preview pill) ---------- */
.msgstrip{background:var(--paper-2);border-bottom:1px solid var(--line);}
.msg{
  display:flex;align-items:center;gap:12px;
  max-width:1240px;margin:0 auto;padding:8px 22px;
  font-size:15.5px;color:var(--ink-2);
}
.msg-text{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;}
.msg-news .msg-text:hover b{text-decoration:underline;text-underline-offset:2px;}
.msg-thin{padding:5px 22px;font-size:13px;color:var(--ink-3);}
.msg-thin b{font-weight:650;color:var(--ink-2);}

.msg + .msg{border-top:1px solid var(--line);}
.msg svg{flex:none;color:var(--ink-3);}

.msg b{color:var(--ink);font-weight:650;}
.msg .msg-link{flex:none;white-space:nowrap;color:var(--accent);font-weight:650;text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer;}
.msg-news{background:var(--accent-soft);color:#0A4A43;}
.msg-news svg{color:var(--accent);}
.msg-news b{color:#08352F;}
.msg-x{flex:none;background:none;border:1px solid transparent;border-radius:var(--r-btn);
  padding:4px 6px;line-height:0;color:var(--ink-2);}
.msg-x:hover{border-color:var(--line-2);background:#fff;}

@media (max-width:1180px){ .msg-long{display:none;} }


/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 17px;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:var(--card);color:var(--ink);
  font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgba(32,32,29,.04);
}
.btn:hover{border-color:#B5AA98;}
.btn[disabled]{opacity:.45;cursor:default;}
.btn-sm{min-height:42px;padding:0 13px;font-size:15.5px;gap:7px;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:#0A544B;border-color:#0A544B;}
.btn-huge{min-height:60px;padding:0 26px;font-size:20px;}
.btn-quiet{background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:3px;}
.btn-quiet:hover{background:var(--card);border-color:var(--line);text-decoration:none;}
.navarrow{width:50px;padding:0;}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--r-chip);padding:4px 9px;
  font-size:14px;font-weight:650;line-height:1.25;
  border:1px solid transparent;white-space:nowrap;
}
.chip svg{flex:none;}
.chip-lg{font-size:16px;padding:7px 12px;border-radius:5px;}
.chip-wait{background:var(--wait-soft);color:var(--wait);border-color:var(--wait-line);}
.chip-good{background:var(--good-soft);color:var(--good);border-color:var(--good-line);}
.chip-change{background:var(--change-soft);color:var(--change);border-color:var(--wait-line);}
.chip-stop{background:var(--stop-soft);color:var(--stop);border-color:var(--stop-line);}
.chip-note{background:var(--accent-soft);color:#0A4A43;border-color:var(--accent-line);}
.chip-plain{background:var(--paper-2);color:var(--ink-2);border-color:var(--line);}

/* gentle attention cue on the waiting chip: a light sweep every 8s, under 700ms */
.chip-wait.chip-live{position:relative;overflow:hidden;}
.chip-wait.chip-live::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.92) 50%,rgba(255,255,255,0) 70%);
  transform:translateX(-130%);
  animation:sweep 8s ease-in-out 2s infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%{transform:translateX(-130%);}
  8%{transform:translateX(130%);}
  100%{transform:translateX(130%);}
}
.dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;}
.dot-wait{background:var(--wait);}
.dot-good{background:var(--good);}
.dot-change{background:var(--change);}
.dot-stop{background:var(--stop);}

/* ---------- dashboard ---------- */
.home{padding:26px 0 60px;}
.hello{margin:0 0 4px;color:var(--ink-2);font-size:17px;}
.welcome{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:28px;display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start;
}
.welcome h1{margin:0 0 12px;font-size:38px;line-height:1.12;letter-spacing:-.02em;}
.welcome h1 .count{color:var(--wait);}
.lede{margin:0 0 20px;font-size:18px;color:var(--ink-2);max-width:52ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
.progress-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;}
.progress-card h2{margin:0 0 12px;font-size:17px;}
.bar{height:10px;border-radius:2px;background:#E2DACC;overflow:hidden;margin-bottom:12px;}
.bar span{display:block;height:100%;background:var(--accent);}
.progress-legend{display:flex;flex-direction:column;gap:9px;font-size:16px;color:var(--ink-2);}

.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:40px 0 14px;}
.section-head h2{margin:0;font-size:24px;letter-spacing:-.01em;}
.section-head p{margin:0;color:var(--ink-2);font-size:16px;}

/* bento stat tiles */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px;text-align:left;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:6px;min-height:118px;
  box-shadow:0 1px 0 rgba(32,32,29,.03);
}
.tile:hover{border-color:var(--line-2);background:#fff;}
.tile .tnum{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.05;}
.tile .tlab{font-size:15.5px;color:var(--ink-2);line-height:1.3;}
.tile .tsub{margin-top:auto;font-size:13.5px;color:var(--ink-3);}
.tile-wait .tnum{color:var(--wait);}
.tile-good .tnum{color:var(--good);}
.tile-stop .tnum{color:var(--stop);}
.tile-action{align-items:flex-start;justify-content:center;gap:10px;background:var(--accent-soft);border-color:var(--accent-line);}
.tile-action .tlab{color:#0A4A43;font-weight:650;font-size:17px;}
.tile-action svg{color:var(--accent);}

/* place cards, bento style */
.places{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.place-tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:0 1px 0 rgba(32,32,29,.03);
}
.place-tile:hover{border-color:var(--line-2);}
.place-photo{display:block;aspect-ratio:3/2;background:var(--paper-2);}
.place-photo img{width:100%;height:100%;object-fit:cover;}
.place-body{display:block;padding:16px 18px 18px;}
.place-body h3{margin:0 0 3px;font-size:21px;letter-spacing:-.01em;}
.addr{margin:0 0 12px;color:var(--ink-2);font-size:15.5px;}
.place-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.place-cta{margin-left:auto;color:var(--accent);font-weight:650;display:inline-flex;align-items:center;gap:5px;font-size:16px;}

/* project questions */
.qpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;}
.qpanel .qhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.qpanel h2{margin:0;font-size:21px;}
.qpanel .prop{font-size:13px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-chip);padding:2px 7px;}
.qpanel .qnote{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;}
.qgroup h3{margin:16px 0 8px;font-size:15px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.qlist li{border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;background:var(--paper);}
.qlist .qtext{font-size:16.5px;}
.qlist .qmeta{font-size:14px;color:var(--ink-3);margin-top:4px;}
.qlist .qans{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2);font-size:15.5px;color:var(--ink-2);}
.qadd{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.qadd input{flex:1 1 260px;min-height:48px;border:1px solid var(--line-2);border-radius:var(--r-input);padding:0 12px;background:#fff;}

.quiet-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.footnote{margin:34px 0 0;color:var(--ink-3);font-size:14.5px;max-width:80ch;}

/* ---------- shell with list panel ---------- */
.shell{display:flex;align-items:flex-start;gap:0;}
.panel{
  width:352px;flex:none;align-self:stretch;
  background:var(--card);border-right:1px solid var(--line);
  position:sticky;top:70px;height:calc(100vh - 70px);display:flex;flex-direction:column;
}
.panel-head{padding:16px 16px 12px;border-bottom:1px solid var(--line);}
.panel-head h2{margin:0 0 2px;font-size:19px;}
.panel-head .psub{font-size:14.5px;color:var(--ink-2);margin:0 0 12px;}
.search{position:relative;margin-bottom:10px;}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);}
.search input{width:100%;min-height:46px;border:1px solid var(--line-2);border-radius:var(--r-input);padding:0 12px 0 38px;background:var(--paper);}
.switch{display:flex;align-items:center;gap:10px;font-size:15.5px;padding:6px 0;cursor:pointer;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.track{width:46px;height:27px;border-radius:14px;background:#D9D2C6;border:1px solid var(--line-2);position:relative;flex:none;transition:background .15s;}
.track::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s;}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent);}
.switch input:checked + .track::after{transform:translateX(19px);}
.switch input:focus-visible + .track{outline:3px solid var(--accent);outline-offset:3px;}
.panel-scroll{overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch;}
.plgroup{padding:14px 16px 4px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;}
.pagroup{padding:8px 16px 6px;font-size:15px;font-weight:700;color:var(--ink);border-top:1px solid var(--line);background:var(--paper);}
.pagroup .n{font-weight:500;color:var(--ink-3);font-size:13.5px;margin-left:6px;}
.prow{
  display:flex;gap:11px;align-items:center;width:100%;text-align:left;
  padding:10px 12px;background:none;border:0;border-bottom:1px solid var(--line);
}
.prow:hover{background:var(--paper);}
.prow[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);}
.prow .pth{width:64px;height:48px;flex:none;border-radius:var(--r-input);overflow:hidden;background:var(--paper-2);border:1px solid var(--line);}
.prow .pth img{width:100%;height:100%;object-fit:cover;}
.prow .pbody{min-width:0;flex:1 1 auto;}
.prow .ptitle{font-size:15.5px;font-weight:650;line-height:1.25;display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.prow .pstat{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);margin-top:3px;}
.prow .parrow{flex:none;color:var(--ink-3);}
.panel-empty{padding:24px 16px;color:var(--ink-2);font-size:16px;}

.panel-toggle-row{display:flex;align-items:center;gap:10px;padding:12px 0 0;}
.main-col{flex:1 1 auto;min-width:0;}

/* mobile drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(32,28,20,.45);z-index:60;}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(92vw,380px);background:var(--card);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow-lift);animation:slidein .22s ease-out;}
.drawer .panel{flex:1 1 auto;min-height:0;}
@keyframes slidein{from{transform:translateX(-14px);opacity:.6;}to{transform:none;opacity:1;}}

/* ---------- review ---------- */
.review{padding:18px 0 60px;}
.review-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.step-count{
  border:1px solid var(--line-2);background:var(--paper-2);border-radius:var(--r-btn);
  padding:9px 14px;font-size:15.5px;font-weight:650;white-space:nowrap;
}
.stage{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px;}

.version-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:12px;}
.version-text{font-size:16.5px;color:var(--ink-2);min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.version-text b{color:var(--ink);}
.version-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:nowrap;flex:none;}
.version-actions .btn{white-space:nowrap;}
.vr-short{display:none;}
.vr-tight .vr-long{display:none;}
.vr-tight .vr-short{display:inline;}
@media (max-width:1080px){
  .vr-long{display:none;}
  .vr-short{display:inline;}
}
/* Original (toggle) and Compare (mode) buttons */
.version-actions .btn:hover{background:var(--paper-2);}
.version-actions .btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
/* Original in the version row: click to show the original, click again for the revised photo.
   Its "on" look is the same amber as the flag that appears over the photo. */
.orig-btn{
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
}
.orig-btn:active{transform:scale(.97);}
.version-actions .orig-btn.is-on,.version-actions .orig-btn.is-on:hover{background:var(--sand-soft);border-color:var(--sand);color:#5F4708;}
/* tooltip: shows on hover and keyboard focus */
.tip{position:relative;}
.tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;background:var(--ink);color:#fff;font-size:13px;font-weight:500;line-height:1.2;padding:6px 10px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:6;}
.tip:hover::after,.tip:focus-visible::after{opacity:1;}
.tip:hover::after{z-index:7;}
@media (prefers-reduced-motion:reduce){.tip::after{transition:none;}}

.photo-frame{position:relative;border-radius:var(--r-card);overflow:hidden;background:#12110F;width:100%;max-width:100%;margin:0 auto;}
.photo-frame img{display:block;width:100%;height:auto;}
/* The photo that was on screen before a move to another photo: covers the new frame's box until the new photo has
   decoded, then fades out with the Original/Revised curve, so the frame is never bare. */
.photo-frame .img-prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .32s cubic-bezier(.25,.1,.25,1);}
.photo-frame .img-prev.is-out{opacity:0;}
/* Original photo: loaded up front, sits on top of the revised photo, fades in and out on its own compositor layer.
   It covers the revised photo's box exactly, so a pixel or two of size difference never shows as a bar or a jump. */
.photo-frame .img-orig{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .32s cubic-bezier(.25,.1,.25,1);}
.photo-frame.aspect-differs .img-orig{object-fit:contain;}
.photo-frame[data-showing="original"] .img-orig{opacity:1;}
.photo-frame[data-showing="original"] .pin{opacity:0;visibility:hidden;pointer-events:none;}
.photo-hit{position:absolute;inset:0;background:transparent;border:0;padding:0;cursor:zoom-in;}
.photo-frame.pinning .photo-hit{cursor:crosshair;}
.photo-frame.pinning{outline:3px solid var(--accent);outline-offset:-3px;}
/* Floating Original control: a glass pill over the photo (lower left). Same toggle as the version-row button.
   Label always visible, nothing grows or collapses; only colour and a slight press change. */
.orig-float{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;
  background:rgba(28,26,22,.58);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  font:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.orig-float svg{flex:none;}
.orig-float .ob-label{position:relative;top:-1px;} /* the text has a descender and no ascender room, so its ink sits low; lift it to centre the letters */
.orig-float:hover{background:rgba(28,26,22,.74);border-color:rgba(255,255,255,.36);}
.orig-float:active{transform:scale(.96);}
.orig-float.is-on,.orig-float.is-on:hover{background:var(--sand-soft);color:#5F4708;border-color:var(--sand);box-shadow:0 2px 8px rgba(0,0,0,.28);}
.orig-float:focus-visible{outline:3px solid #fff;outline-offset:2px;}
/* "Original — before the edits" flag over the photo; fades in with the original */
.orig-flag{
  position:absolute;left:10px;top:10px;background:var(--sand-soft);color:#5F4708;border:1px solid var(--sand-line);
  border-radius:var(--r-chip);padding:7px 11px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .25s ease,visibility .25s,transform .25s ease;
}
.photo-frame[data-showing="original"] .orig-flag{opacity:1;visibility:visible;transform:none;}
@media (prefers-reduced-motion:reduce){.orig-float,.orig-btn,.photo-frame .img-orig,.photo-frame .img-prev,.orig-flag,.pin{transition:none;}}
.pin{
  position:absolute;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;
  background:var(--change);color:#fff;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.45);z-index:3;
  transition:opacity .2s ease,visibility .2s;
}
.pin[aria-current="true"]{background:var(--accent);}

/* the reusable note slot under the photo (kuij) */
.noteslot{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--sand-soft);border:1px solid var(--sand-line);border-left:5px solid var(--sand);
  border-radius:var(--r-card);padding:14px 16px;margin-top:14px;
}
.noteslot svg{flex:none;color:var(--sand);margin-top:2px;}
.noteslot b{display:block;font-size:17px;margin-bottom:2px;color:#4E3B06;}
.noteslot p{margin:0;font-size:16px;color:#5F4708;}
.noteslot .ns-act{margin-top:11px;}
.noteslot-info{background:var(--accent-soft);border-color:var(--accent-line);border-left-color:var(--accent);}
.noteslot-info svg{color:var(--accent);}
.noteslot-info b,.noteslot-info p{color:#0A4A43;}

.photo-caption{padding:16px 2px 0;}
.caption-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.photo-caption h1{margin:0 0 5px;font-size:28px;line-height:1.2;letter-spacing:-.015em;}
.where{margin:0;color:var(--ink-2);font-size:16.5px;}
.refid{color:var(--ink-3);font-size:14.5px;margin-left:8px;}
.caption-chips{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;}

.answer{border-top:1px dashed var(--line-2);margin-top:18px;padding-top:18px;}
.answer h2{margin:0 0 12px;font-size:21px;}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.choice{
  background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-card);
  min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  font-size:19px;font-weight:700;padding:14px 10px;
}
.choice .ico{width:38px;height:38px;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;}
.choice:hover{border-color:#B5AA98;}
.choice[aria-pressed="true"].c-good{border-color:var(--good);background:var(--good-soft);color:var(--good);}
.choice[aria-pressed="true"].c-good .ico{background:var(--good);color:#fff;}
.choice[aria-pressed="true"].c-change{border-color:var(--change);background:var(--change-soft);color:var(--change);}
.choice[aria-pressed="true"].c-change .ico{background:var(--change);color:#fff;}
.choice[aria-pressed="true"].c-stop{border-color:var(--stop);background:var(--stop-soft);color:var(--stop);}
.choice[aria-pressed="true"].c-stop .ico{background:var(--stop);color:#fff;}

.changes-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;margin-top:12px;}
.changes-panel label{display:block;font-size:18px;font-weight:700;margin-bottom:3px;}
.changes-panel .hint{margin:0 0 11px;font-size:15.5px;color:var(--ink-2);}
.changes-panel textarea{
  width:100%;min-height:112px;resize:vertical;border:1px solid var(--line-2);border-radius:var(--r-input);
  padding:12px 13px;background:#fff;font-size:17px;line-height:1.45;
}
.pin-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center;}
.pin-tools .pt-hint{font-size:14.5px;color:var(--ink-2);}
.pin-summary{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.pin-summary li{display:flex;gap:9px;align-items:center;font-size:15.5px;color:var(--ink-2);}
.pin-summary .num{width:24px;height:24px;border-radius:50%;background:var(--change);color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.pin-summary button{background:none;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-size:15px;padding:8px 8px;min-height:40px;cursor:pointer;}

.save-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  border:1px solid var(--line);border-radius:var(--r-card);padding:13px 15px;background:var(--card);
}
.save-row.is-draft{border-color:var(--wait-line);background:#FEF8EF;}
.save-status{font-size:16px;color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.save-status.draft{color:var(--wait);font-weight:650;}
.save-status.saved{color:var(--good);font-weight:700;}
.save-error{
  display:flex;gap:13px;align-items:flex-start;margin-top:12px;
  border:1px solid var(--stop-line);border-left:5px solid var(--stop);background:var(--stop-soft);
  border-radius:var(--r-card);padding:14px 16px;flex-wrap:wrap;
}
.save-error svg{color:var(--stop);flex:none;}
.save-error strong{font-size:17px;}
.save-error p{margin:3px 0 0;font-size:15.5px;color:#6C2020;}
.saved-banner{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:12px;
  border:1px solid var(--good-line);background:var(--good-soft);border-radius:var(--r-card);padding:13px 15px;
  animation:pop .22s ease-out;
}
.saved-banner .tick{width:34px;height:34px;border-radius:50%;background:var(--good);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.saved-banner .sub{font-size:15px;color:#1B4E30;}

/* ledger accordion */
.ledger-acc{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden;}
.ledger-acc > button{
  width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;background:none;border:0;text-align:left;
  font-size:17px;font-weight:650;
}
.ledger-acc > button:hover{background:var(--paper);}
.ledger-acc > button .caret{margin-left:auto;color:var(--ink-3);transition:transform .15s;}
.ledger-acc[data-open="true"] > button .caret{transform:rotate(90deg);}
.ledger-body{border-top:1px solid var(--line);padding:6px 16px 16px;}

/* the ledger itself */
.ledger{list-style:none;margin:0;padding:0;}
.ledger li{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line);}
.ledger li:last-child{border-bottom:0;}
.lg-ico{width:36px;height:36px;border-radius:var(--r-input);flex:none;display:flex;align-items:center;justify-content:center;background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);}
.lg-ico.k-good{background:var(--good-soft);color:var(--good);border-color:var(--good-line);}
.lg-ico.k-change{background:var(--change-soft);color:var(--change);border-color:var(--wait-line);}
.lg-ico.k-stop{background:var(--stop-soft);color:var(--stop);border-color:var(--stop-line);}
.lg-ico.k-matthew{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);}
.lg-body{min-width:0;flex:1 1 auto;}
.lg-top{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;}
.lg-what{font-size:16.5px;font-weight:650;}
.lg-when{font-size:14.5px;color:var(--ink-3);}
.lg-who{display:block;font-size:14.5px;color:var(--ink-2);margin-top:2px;}
.lg-stored{display:block;margin-top:4px;}
.lg-note{margin:7px 0 0;font-size:16px;color:var(--ink-2);white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-input);padding:10px 12px;}
.lg-pins{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
.lg-pins li{border:0;padding:0;display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--ink-2);}
.lg-pins .num{width:22px;height:22px;border-radius:50%;background:var(--change);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
.lg-group{margin-top:18px;}
.lg-group h3{margin:0 0 3px;font-size:16px;}
.lg-group .gsub{margin:0 0 6px;font-size:14.5px;color:var(--ink-3);max-width:70ch;}
.lg-group.legacy{background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r-card);padding:14px 16px;}

/* area strip */
.filmstrip{margin-top:26px;}
.filmstrip h2{margin:0 0 2px;font-size:19px;}
.filmstrip .fs-hint{margin:0 0 12px;font-size:15.5px;color:var(--ink-2);}
.strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;}
.strip-item{
  flex:none;width:168px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:0;overflow:hidden;text-align:left;
}
.strip-item[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.strip-item .sh{display:block;aspect-ratio:4/3;background:var(--paper-2);}
.strip-item .sh img{width:100%;height:100%;object-fit:cover;}
.strip-item .sl{display:flex;gap:7px;align-items:flex-start;padding:9px 10px 11px;font-size:14.5px;line-height:1.3;}
.strip-item .sl .dot{margin-top:5px;}

/* ---------- list page ---------- */
.listpage{padding:18px 0 60px;}
.listpage .lp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.listwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start;}
.listwrap .panel{position:static;height:auto;width:auto;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.listwrap .panel-scroll{max-height:none;overflow:visible;}

/* bigger uniform rows on the full list page (desktop only) */
@media (min-width:901px){
  .listpage .prow{padding:12px 16px;gap:16px;}
  .listpage .prow .pth{width:120px;height:80px;}
  .listpage .prow .ptitle{font-size:18px;-webkit-line-clamp:2;}
  .listpage .prow .pstat{font-size:15.5px;margin-top:5px;}
  .listpage .pagroup{padding:10px 16px 8px;font-size:16px;}
  .listpage .plgroup{padding:16px 16px 6px;}
}

/* live preview of the highlighted row */
.preview{
  position:sticky;top:92px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
}
.pv-photo{aspect-ratio:3/2;background:var(--paper-2);}
.pv-photo img{width:100%;height:100%;object-fit:cover;}
.pv-body{padding:16px 18px 18px;}
.pv-body h3{margin:0 0 4px;font-size:20px;line-height:1.2;}
.pv-where{margin:0 0 10px;color:var(--ink-2);font-size:15.5px;}
.pv-stat{margin:0 0 10px;}
.pv-note{margin:0 0 10px;font-size:15px;color:var(--ink-2);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-input);padding:8px 10px;}
.pv-ref{margin:0 0 14px;font-size:14px;color:var(--ink-3);}
.pv-body .btn{width:100%;}
.pv-empty{padding:20px;}
.pv-empty h3{margin:0 0 8px;font-size:19px;}
.pv-empty p{margin:0 0 10px;color:var(--ink-2);font-size:16px;}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.filterbar button{
  border:1px solid var(--line-2);background:var(--card);border-radius:var(--r-btn);
  padding:9px 13px;font-size:15.5px;font-weight:600;min-height:44px;
}
.filterbar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.sidenote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;}
.sidenote h3{margin:0 0 8px;font-size:19px;}
.sidenote p{margin:0 0 10px;color:var(--ink-2);font-size:16px;max-width:60ch;}

/* ---------- sheets / overlays ---------- */
.scrim{position:fixed;inset:0;background:rgba(28,25,19,.5);z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:5vh 18px 18px;overflow-y:auto;}
.scrim.center{align-items:center;padding:18px;}
.sheet{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-lift);width:min(680px,100%);animation:pop .26s cubic-bezier(.2,1.35,.5,1);
}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .sheet,.saved-banner,.drawer{animation:none !important;}
  .chip-wait.chip-live::after{display:none;}
}
.sheet-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);}
.sheet-head h2{margin:0;font-size:22px;}
.sheet-body{padding:18px 20px 22px;}
.sheet-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.sheet-menu button{
  width:100%;display:flex;gap:13px;align-items:flex-start;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 15px;
  font-size:17.5px;font-weight:650;min-height:60px;
}
.sheet-menu button:hover{border-color:var(--line-2);}
.sheet-menu button[disabled]{opacity:.5;}
.sheet-menu .mi{width:38px;height:38px;border-radius:var(--r-input);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;border:1px solid var(--accent-line);}
.sheet-menu .msub{display:block;font-weight:400;font-size:15px;color:var(--ink-2);margin-top:2px;}
.sheet-menu .mtag{font-weight:400;font-size:13px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-chip);padding:1px 6px;margin-left:7px;}
.empty{border:1px dashed var(--line-2);border-radius:var(--r-card);padding:18px;text-align:center;color:var(--ink-2);font-size:16px;background:var(--card);}

/* how this works, with internal nav */
.how-nav{display:flex;flex-wrap:wrap;gap:7px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper-2);}
.how-nav button{border:1px solid var(--line-2);background:var(--card);border-radius:var(--r-btn);padding:8px 12px;font-size:15px;font-weight:600;min-height:42px;}
.how-nav button:hover{border-color:#B5AA98;}
.how-body{max-height:62vh;overflow-y:auto;padding:4px 20px 22px;}
.how-body section{padding-top:18px;}
.how-body h3{margin:0 0 6px;font-size:19px;}
.how-body p{margin:0 0 10px;font-size:16.5px;color:var(--ink-2);}
.how-body ul{margin:0 0 10px;padding-left:22px;font-size:16.5px;color:var(--ink-2);}
.how-body kbd{background:var(--card);border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;font-size:14.5px;font-family:inherit;}

/* details list */
.deflist{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:16.5px;}
.deflist dt{color:var(--ink-3);}
.deflist dd{margin:0;}

/* ---------- full-screen viewer (side by side / single) ---------- */
body.viewer-open{overflow:hidden;}
.viewer{position:fixed;inset:0;background:#161512;z-index:80;display:flex;flex-direction:column;outline:none;}
.viewer-top{display:flex;align-items:center;gap:14px;padding:12px 16px;color:#F2EEE7;flex:none;}
.viewer-top h2{margin:0;font-size:19px;font-weight:650;}
.viewer-top .vhint{font-size:14.5px;color:#B9B2A6;}
.viewer-top .btn{background:#282520;border-color:#494437;color:#F2EEE7;}
.viewer-top .btn:hover{background:#343029;}
.viewer-top .orig-btn.is-on,.viewer-top .orig-btn.is-on:hover{background:var(--sand-soft);border-color:var(--sand);color:#5F4708;}
/* zoom control: out · level · in. The level button also switches between fit and actual size. */
.zoomctl{display:inline-flex;align-items:stretch;}
.zoomctl .btn{border-radius:0;padding:0 11px;}
.zoomctl .zc-btn:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn);}
.zoomctl .zc-btn:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0;}
.zoomctl .zc-level{min-width:64px;border-left:0;border-right:0;font-variant-numeric:tabular-nums;font-size:14.5px;}
.viewer-panes{flex:1 1 auto;display:flex;gap:14px;padding:0 16px 16px;min-height:0;}
.vpane{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.vcap{color:#E7E2D9;font-size:16px;flex:none;}
.vcap .vcap-sub{color:#B9B2A6;}
.vbox{
  flex:1 1 auto;min-height:0;background:#0D0C0A;border:1px solid #3A362E;border-radius:var(--r-card);
  overflow:hidden;position:relative;cursor:zoom-in;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.vbox.zoomed{cursor:grab;touch-action:none;}
.vbox.zoomed.dragging{cursor:grabbing;}
/* The stage is laid out once at "fit" size; zoom and pan are a transform on it, animated on the compositor. */
.vstage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;transition:transform .42s cubic-bezier(.22,.61,.36,1);}
.vbox.no-anim .vstage{transition:none;}
.vver{position:absolute;inset:0;}
.vver[data-role="before"]{opacity:0;transition:opacity .32s cubic-bezier(.25,.1,.25,1);}
.vver[data-role="before"].is-shown{opacity:1;}
.vl{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;pointer-events:none;object-fit:cover;}
.vl-full{object-fit:contain;}
/* the full-size photo fades in over the preview once it is decoded; same box, same transform, so only the sharpness changes */
.vl-full{opacity:0;transition:opacity .4s ease;}
.vl-full.is-ready{opacity:1;}
.viewer-foot{flex:none;display:flex;flex-wrap:wrap;gap:6px 20px;padding:0 16px 14px;color:#B9B2A6;font-size:14px;}
.viewer-foot kbd{font:inherit;font-size:12.5px;line-height:1;background:#2C2924;border:1px solid #494437;border-radius:4px;padding:3px 6px;color:#F2EEE7;margin-right:2px;}
@media (prefers-reduced-motion:reduce){.vstage,.vver,.vl-full{transition:none;}}

/* ---------- point popover ---------- */
.pop{
  position:absolute;z-index:90;width:min(310px,86vw);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-card);
  box-shadow:var(--shadow-lift);padding:12px;animation:pop .18s ease-out;
}
.pop h4{margin:0 0 7px;font-size:15.5px;display:flex;align-items:center;gap:8px;}
.pop h4 .num{width:24px;height:24px;border-radius:50%;background:var(--change);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
.pop input{width:100%;min-height:46px;border:1px solid var(--line-2);border-radius:var(--r-input);padding:0 11px;background:var(--paper);font-size:16.5px;}
.pop-actions{display:flex;gap:8px;margin-top:10px;}
.pop-actions .btn{flex:1 1 auto;min-height:44px;font-size:15.5px;}
.pop::after{content:"";position:absolute;width:12px;height:12px;background:var(--card);border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);transform:rotate(45deg);}
.pop[data-side="below"]::after{top:-7px;left:var(--arrow-x,calc(50% - 6px));}
.pop[data-side="above"]::after{bottom:-7px;left:var(--arrow-x,calc(50% - 6px));transform:rotate(225deg);}

/* ---------- floating photo tray (Sidebar, Bottom bar, Focus) ---------- */
/* A fixed layer over the page. The root takes no space in the page and paints nothing of its own; the backdrop is
   only there to catch a click outside. The panel is moved with a transform by app.js. */
.tray-root{position:fixed;inset:0;z-index:66;display:flex;align-items:flex-end;justify-content:center;
  padding:0 16px calc(24px + env(safe-area-inset-bottom,0px));overflow:clip;pointer-events:none;}  /* clip, not hidden: nothing may scroll this layer */
.tray-back{position:absolute;inset:0;pointer-events:auto;background:transparent;touch-action:none;}  /* a touch on it closes the tray, it does not scroll the page */
.tray{
  position:relative;pointer-events:auto;box-sizing:border-box;max-width:100%;
  background:#2C2B29;color:#F4F1EC;border:1px solid rgba(255,255,255,.09);border-radius:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px -8px rgba(0,0,0,.45),0 30px 70px -20px rgba(0,0,0,.6);
  padding:18px 22px 22px;will-change:transform;
}
.tray:focus{outline:none;}
.tray-root.is-leaving .tray-back,.tray-root.is-leaving .tray{pointer-events:none;}
.tray-head{display:flex;align-items:center;gap:16px;margin:0 0 14px;}
.tray-head h2{margin:0;flex:1;font-size:19px;font-weight:600;line-height:1.2;color:#F4F1EC;white-space:nowrap;}
.tray-x{flex:none;width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid transparent;color:#F4F1EC;
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;}
.tray-x:hover{background:rgba(255,255,255,.1);}
.tray-x:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.tray-row{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px;margin:-4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;}
.tray-item{flex:none;width:264px;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.tray-item .sh{display:block;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:#3B3A37;
  border:2px solid rgba(255,255,255,.06);transition:border-color .15s ease;}
.tray-item .sh img{display:block;width:100%;height:100%;object-fit:cover;}
.tray-item:hover .sh{border-color:rgba(255,255,255,.4);}
.tray-item[aria-current="true"] .sh{border-color:#7FD1C3;}        /* the open photo */
.tray-item:focus{outline:none;}
.tray-item:focus-visible .sh{outline:2px solid #fff;outline-offset:2px;}
.tray-item .sl{display:flex;gap:9px;align-items:flex-start;padding:10px 2px 0;font-size:15px;font-weight:600;line-height:1.3;color:#F4F1EC;}
.tray-item .sl .dot{margin-top:4px;box-shadow:0 0 0 1px rgba(255,255,255,.3);}  /* the same status colours, lifted off the dark surface */
@media (prefers-reduced-motion:reduce){.tray{transition:opacity .15s ease;}}
@media (max-width:680px){
  .tray-root{padding:0 12px calc(16px + env(safe-area-inset-bottom,0px));}
  .tray{border-radius:18px;padding:14px 16px 16px;}
  .tray-head{margin-bottom:10px;}
  .tray-head h2{font-size:17px;}
  .tray-row{gap:12px;}
  .tray-item{width:196px;}
  .tray-item .sl{font-size:14px;padding-top:8px;}
}

/* ---------- toast + toolbar ---------- */
.toast-wrap{position:fixed;left:0;right:0;bottom:20px;display:flex;justify-content:center;pointer-events:none;z-index:95;padding:0 16px;}
.toast{background:#242018;color:#FBF5EC;border-radius:var(--r-card);padding:13px 18px;font-size:16px;max-width:560px;box-shadow:var(--shadow-lift);}
.toolbar{position:fixed;right:14px;bottom:14px;z-index:96;background:#242018;color:#FBF5EC;border-radius:var(--r-card);box-shadow:var(--shadow-lift);font-size:14px;max-width:330px;}
.toolbar-head{display:flex;align-items:center;gap:12px;padding:9px 12px;}
.toolbar-head button{background:#3A342A;border:1px solid #514936;color:#FBF5EC;border-radius:var(--r-btn);padding:5px 10px;font-size:13.5px;min-height:34px;}
.toolbar-body{display:none;padding:0 12px 12px;flex-direction:column;gap:8px;}
.toolbar[data-open="true"] .toolbar-body{display:flex;}
.toolbar-body button{background:#3A342A;border:1px solid #514936;color:#FBF5EC;border-radius:var(--r-btn);padding:9px 11px;text-align:left;min-height:42px;}
.toolbar-body p{margin:0;color:#C9C0B0;font-size:12.5px;line-height:1.45;}
.toolbar-body code{font-size:12px;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .listwrap{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .preview{display:none;}
}
@media (max-width:900px){
  .shell > .panel{display:none;}
  .welcome{grid-template-columns:1fr;}
  .welcome h1{font-size:31px;}
  .places{grid-template-columns:1fr;}
  .viewer-panes{flex-direction:column;overflow-y:auto;}
  .vpane{min-height:38vh;}
}
@media (max-width:680px){
  body{font-size:17px;}
  .wrap{padding:0 14px;}

  .topbar-in{min-height:62px;}
  .brand img{width:36px;height:36px;}
  .tb-label{display:none;}
  .topbar-right .btn{padding:0 11px;}
  .welcome{padding:18px;}
  .welcome h1{font-size:27px;}
  .lede{font-size:17px;}
  .btn-huge{width:100%;}
  .bento{grid-template-columns:1fr 1fr;gap:10px;}
  .tile{min-height:96px;padding:13px;}
  .tile .tnum{font-size:27px;}
  .stage{padding:12px;}
  .photo-caption h1{font-size:23px;}
  .caption-chips{margin-left:0;align-items:flex-start;}
  .choices{grid-template-columns:1fr;gap:10px;}
  .choice{flex-direction:row;justify-content:flex-start;gap:14px;min-height:66px;padding:12px 16px;font-size:18px;}
  .version-row{gap:8px;margin-bottom:10px;}
  .version-text{font-size:15.5px;}
  .version-actions .btn{min-height:40px;padding:0 11px;font-size:14.5px;}
  .msg{padding:7px 14px;gap:9px;font-size:14.5px;}
  .msg-news svg{display:none;}
  .msg-thin{padding:5px 14px;font-size:12.5px;}
  .version-text{white-space:normal;overflow:visible;line-height:1.25;}
  .save-row .btn-primary{width:100%;}
  .sheet{width:100%;}
  .scrim{padding:8vh 10px 10px;}
  .strip-item{width:146px;}
  .viewer-top{flex-wrap:wrap;gap:8px;}
  .viewer-top .vhint,.viewer-foot{display:none;}
  .listwrap .panel{border-radius:var(--r-card);}
  .filterbar{gap:6px;}
  .filterbar button{font-size:14.5px;padding:8px 10px;min-height:42px;}
}

/* ==========================================================================
   Review layouts: Sidebar, Bottom bar, Focus.
   Classic keeps every rule above. The three below only add a shell around the
   same pieces (photo frame, answer block, save row, ledger, strip, sheets).
   ========================================================================== */

/* ---------- the Layout control (all four layouts) ---------- */
.layout-pick{
  position:relative;display:inline-flex;align-items:stretch;min-height:42px;
  border:1px solid var(--line-2);border-radius:var(--r-btn);background:var(--card);
  font-size:15px;font-weight:600;color:var(--ink);box-shadow:0 1px 0 rgba(32,32,29,.04);white-space:nowrap;
}
.layout-pick .lp-label{display:inline-flex;align-items:center;gap:6px;padding:0 9px 0 11px;color:var(--ink-2);border-right:1px solid var(--line);}
.layout-pick .lp-wrap{position:relative;display:inline-flex;align-items:stretch;}
.layout-pick .lp-wrap > svg{position:absolute;right:8px;top:50%;transform:translateY(-50%) rotate(90deg);pointer-events:none;color:var(--ink-3);}
.lp-select{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;
  font:inherit;font-weight:650;padding:0 26px 0 10px;min-width:118px;cursor:pointer;border-radius:0 var(--r-btn) var(--r-btn) 0;
}
.lp-select:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.review-nav .layout-pick{min-height:42px;}

/* ---------- compact header for Sidebar and Bottom bar ---------- */
.tb-badge{display:none;font-size:13px;font-weight:650;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-chip);padding:5px 9px;white-space:nowrap;}
body[data-layout="sidebar"] .tb-badge,body[data-layout="bottom"] .tb-badge{display:inline-block;}
body[data-layout="sidebar"] .msg-thin,body[data-layout="bottom"] .msg-thin{display:none;}
body[data-layout="sidebar"] .topbar-in,body[data-layout="bottom"] .topbar-in{min-height:56px;}
body[data-layout="sidebar"] .brand img,body[data-layout="bottom"] .brand img{width:34px;height:34px;}
body[data-layout="sidebar"] .topbar,body[data-layout="bottom"] .topbar{position:static;}
body[data-layout="sidebar"] .wrap.topbar-in,body[data-layout="bottom"] .wrap.topbar-in{max-width:none;padding:0 18px;}
body[data-layout="sidebar"] .msg,body[data-layout="bottom"] .msg{max-width:none;padding-left:18px;padding-right:18px;}

/* ---------- the fixed-height shell (page does not scroll; panes do) ---------- */
body[data-layout="sidebar"],body[data-layout="bottom"],body[data-layout="focus"]{
  height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
}
body[data-layout="sidebar"] > .topbar,body[data-layout="bottom"] > .topbar,body[data-layout="focus"] > .topbar,
body[data-layout="sidebar"] > .msgstrip,body[data-layout="bottom"] > .msgstrip,body[data-layout="focus"] > .msgstrip{flex:none;}
body[data-layout="sidebar"] > #app,body[data-layout="bottom"] > #app,body[data-layout="focus"] > #app{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.rv{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}

.rv-toolbar{
  flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 18px;min-height:52px;border-bottom:1px solid var(--line);background:var(--paper);
}
.rv-toolbar .btn-sm,.rv-toolbar .step-count{min-height:40px;}
.rv-toolbar .step-count{padding:7px 12px;font-size:15px;}
.rv-toolbar .version-actions{margin-left:0;}
.rv-center{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.rv-center .version-text{font-size:15px;max-width:26ch;}
.rv-center .vr-long{display:none;}
.rv-center .vr-short{display:inline;}
@media (max-width:1600px){ .rv-center .version-text{display:none;} }
@media (min-width:901px){ .rv-toolbar{flex-wrap:nowrap;} }
.nv .nv-label{white-space:nowrap;}
.rv-titlerow .rv-title{display:inline-flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 120px;overflow:hidden;white-space:nowrap;}
.rv-titlerow h1{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.rv-titlerow .rv-where{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rv-titlerow .refid{margin-left:0;white-space:nowrap;}

.rv-body{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;}
.rv-body > .panel{position:static;top:auto;height:auto;align-self:stretch;}
.rv-work{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;}
.rv-canvas{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px 18px;overflow:hidden;}
.rv-canvas .photo-frame{flex:none;margin:0;}
.rv-caption{flex:none;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding:0 18px 10px;min-height:0;}
.rv-caption h1{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.01em;}
.rv-where{font-size:15px;color:var(--ink-2);}
.rv-caption .rv-dist{margin:0;}
.rv-caption .refid{margin-left:6px;}
.strip-toggle{min-height:36px;font-size:14.5px;padding:0 9px;}
.strip-toggle[aria-expanded="true"]{background:var(--card);border-color:var(--line);text-decoration:none;}
.rv-work .filmstrip{flex:none;margin:0;padding:0 18px 10px;}
.rv-work .filmstrip h2{font-size:15px;margin:0 0 2px;}
.rv-work .filmstrip .fs-hint{display:none;}
.rv-work .strip{padding-bottom:4px;}
.rv-work .strip-item{width:124px;}
.rv-work .strip-item .sl{font-size:13px;padding:6px 8px 8px;}

/* ---------- Sidebar ---------- */
.rv-side{width:332px;flex:none;border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;min-height:0;}
.rv-side-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 22px;}
.rv-side-status{margin:0 0 12px;}
.rv-side .noteslot,.fb-drawer .noteslot{margin:0 0 12px;}
.rv-side .answer,.fb-drawer .answer{border-top:0;margin-top:0;padding-top:0;}
.rv-side .answer h2,.fb-drawer .answer h2{font-size:18px;margin:0 0 10px;}
.rv-side .choices,.fb-drawer .choices{grid-template-columns:1fr;gap:8px;}
.rv-side .choice,.fb-drawer .choice{flex-direction:row;justify-content:flex-start;gap:11px;min-height:52px;padding:8px 12px;font-size:16.5px;}
.rv-side .choice .ico,.fb-drawer .choice .ico{width:30px;height:30px;}
.rv-side .choice .ico svg,.fb-drawer .choice .ico svg{width:19px;height:19px;}
.rv-side .changes-panel,.fb-drawer .changes-panel{padding:12px;margin-top:10px;}
.rv-side .changes-panel label,.fb-drawer .changes-panel label{font-size:16px;}
.rv-side .changes-panel .hint,.fb-drawer .changes-panel .hint{font-size:14px;margin-bottom:8px;}
.rv-side .changes-panel textarea,.fb-drawer .changes-panel textarea{min-height:120px;font-size:16px;}
.rv-side .pin-tools,.fb-drawer .pin-tools{margin-top:10px;}
.rv-side .pin-tools .btn,.fb-drawer .pin-tools .btn{width:100%;}
.rv-side .pin-tools .pt-hint,.fb-drawer .pin-tools .pt-hint{font-size:13.5px;}
.rv-side .save-row,.fb-drawer .save-row{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px;padding:12px;}
.rv-side .save-row .grow,.fb-drawer .save-row .grow{display:none;}
.rv-side .save-status,.fb-drawer .save-status{font-size:14.5px;}
.rv-side .save-row .btn,.fb-drawer .save-row .btn{width:100%;}
.rv-side .save-error,.fb-drawer .save-error{padding:12px;}
.rv-side .saved-banner,.fb-drawer .saved-banner{flex-direction:column;align-items:stretch;gap:10px;}
.rv-side .saved-banner .grow,.fb-drawer .saved-banner .grow{display:none;}
.rv-side .saved-banner .btn,.fb-drawer .saved-banner .btn{width:100%;}
.rv-side .ledger-acc,.fb-drawer .ledger-acc{margin-top:12px;}
.rv-side .ledger-acc > button,.fb-drawer .ledger-acc > button{font-size:15.5px;padding:12px 14px;}
.rv-side .ledger-body,.fb-drawer .ledger-body{padding:4px 12px 12px;}
.rv-side .lg-what,.fb-drawer .lg-what{font-size:15px;}

/* ---------- Bottom bar ---------- */
.rv-dock{flex:none;border-top:1px solid var(--line);background:var(--card);padding:9px 18px 8px;display:flex;flex-direction:column;gap:6px;}
.dock-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dock-label{font-weight:700;font-size:16px;margin-right:2px;white-space:nowrap;}
.dock-choices{display:flex;gap:8px;grid-template-columns:none;}
.dock-choices .choice{flex-direction:row;justify-content:flex-start;min-height:44px;padding:0 14px 0 10px;font-size:15.5px;gap:8px;white-space:nowrap;}
.dock-choices .choice .ico{width:26px;height:26px;}
.dock-choices .choice .ico svg{width:17px;height:17px;}
.dock-sep{width:1px;height:30px;background:var(--line);flex:none;}
.dock-row .btn-sm{min-height:44px;}
.dock-row .btn-primary{min-height:46px;}
.dock-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2);min-height:24px;}
.dock-status .save-status{font-size:14.5px;}
.dock-status .chip{font-size:13.5px;}
.dock-bits{color:var(--ink-2);}
.dock-bits::before{content:"·";margin-right:8px;color:var(--ink-3);}
.dock-bits.first::before{content:none;}
.note-dot{width:9px;height:9px;border-radius:50%;background:var(--change);display:inline-block;margin-left:2px;}
.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--change);color:#fff;font-size:12.5px;font-weight:700;margin-left:2px;}
.rv-note{width:372px;flex:none;border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;min-height:0;}
.rv-note-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);}
.rv-note-head h2{margin:0;font-size:17px;}
.rv-note-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px 18px;}
.rv-note .changes-panel{margin-top:0;padding:0;background:none;border:0;}
.rv-note .changes-panel .hint{font-size:14px;}
.rv-note .changes-panel textarea{min-height:150px;font-size:16px;}
.rv-note .pin-tools .btn{width:100%;}
.rv-note .where{font-size:14px;margin:12px 0 0;}

/* ---------- Focus ---------- */
body[data-layout="focus"]{background:#161512;color:#F2EEE7;}
body[data-layout="focus"] .topbar,body[data-layout="focus"] .msgstrip{display:none;}
.rail{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 14px;background:#1D1B18;color:#F2EEE7;}
.rail-top{min-height:54px;border-bottom:1px solid #2E2B26;}
.rail-bottom{min-height:50px;border-top:1px solid #2E2B26;}
.rail .btn{background:#282520;border-color:#494437;color:#F2EEE7;min-height:38px;padding-left:11px;padding-right:11px;font-size:15px;}
.rail .btn:hover{background:#343029;border-color:#5A5446;}
.rail .btn-primary,.rail .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.rail .btn-quiet{background:transparent;border-color:transparent;color:#D9D3C8;}
.rail .btn-quiet:hover,.rail .strip-toggle[aria-expanded="true"]{background:#282520;border-color:#494437;}
.rail .orig-btn.is-on,.rail .orig-btn.is-on:hover{background:var(--sand-soft);border-color:var(--sand);color:#5F4708;}
.rail .btn[aria-pressed="true"]:not(.orig-btn){background:#3B372F;border-color:#6A6353;}
.rail .step-count{background:#282520;border-color:#494437;color:#F2EEE7;min-height:38px;padding:7px 12px;font-size:15px;}
.rail .layout-pick{background:#282520;border-color:#494437;color:#F2EEE7;min-height:38px;box-shadow:none;}
.rail .layout-pick .lp-label{color:#B9B2A6;border-right-color:#494437;font-size:0;padding:0 8px 0 9px;}
.rail .layout-pick .lp-label svg{width:17px;height:17px;}
.rail .lp-select{min-width:104px;}
.rail .layout-pick .lp-wrap > svg{color:#B9B2A6;}
.rail .lp-select{color:#F2EEE7;}
.rail .lp-select option{color:#20201D;background:#fff;}
.rail .tip::after{background:#F2EEE7;color:#161512;}
.rail-bottom .tip::after{top:auto;bottom:calc(100% + 8px);}
.rail .zoomctl .btn{min-height:36px;}
.rail .zc-level{min-width:58px;}
.rail .chip{font-size:13.5px;}
.rail .save-status{font-size:14px;color:#D9D3C8;}
.rail .save-status.draft{color:#F2C58C;}
.rail .save-status.saved{color:#9ED8B4;}
.rail .save-status svg{color:currentColor;}
.rail .dock-bits{color:#D9D3C8;}
.rail .dock-bits::before{color:#8E877B;}
.rail .msg-link{color:#9ED8B4;}
.rail-status{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;overflow:hidden;}
.rail .btn,.rail .step-count,.rail .dock-bits,.dock-row .btn{white-space:nowrap;}
@media (min-width:901px){
  .rail-status{flex-wrap:nowrap;}
  .rail-status .save-status{min-width:0;overflow:hidden;}
  .rail-status .ss-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
}
.rail-nav{display:inline-flex;align-items:center;gap:6px;}
.fbrand{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0;flex:0 1 236px;max-width:236px;padding-right:12px;border-right:1px solid #3A362E;margin-right:2px;overflow:hidden;}
.fbrand .fb-title{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.fbrand .fb-sub{font-size:12px;color:#B9B2A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (min-width:901px){ .rail{flex-wrap:nowrap;} .rail-status{flex:0 1 auto;min-width:0;} }
.rail-photo{display:inline-flex;align-items:baseline;gap:9px;min-width:0;flex:1 1 120px;overflow:hidden;white-space:nowrap;}
.rail-photo h1{margin:0;font-size:17px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.rail-photo .refid{color:#B9B2A6;margin-left:0;white-space:nowrap;}
.rv-focus .rv-canvas{padding:10px 14px;}
.rv-focus .photo-frame{border-radius:3px;}
.rv-focus .rv-work .filmstrip h2{color:#E7E2D9;}
.rv-focus .strip-item{background:#232019;border-color:#3A362E;color:#E7E2D9;}
.rv-focus .strip-item[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px #2B4A44;}
.quick-col{width:136px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding:0 12px 12px 0;}
.quick{display:flex;flex-direction:column;gap:2px;background:#232019;border:1px solid #3A362E;border-radius:8px;padding:6px;}
.quick .quick-choices{display:flex;flex-direction:column;gap:2px;grid-template-columns:none;}
.quick .choice{background:transparent;border-color:transparent;color:#E7E2D9;min-height:64px;padding:6px 4px;font-size:12.5px;font-weight:650;gap:5px;line-height:1.15;text-align:center;border-radius:6px;width:112px;}
.quick .choice:hover{background:#2E2A24;border-color:#3A362E;}
.quick .choice .ico{width:30px;height:30px;background:#33302A;color:#E7E2D9;}
.quick .choice .ico svg{width:18px;height:18px;}
.fb-drawer{width:384px;flex:none;background:var(--paper);color:var(--ink);border-left:1px solid #3A362E;display:flex;flex-direction:column;min-height:0;}
.fb-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);}
.fb-head h2{margin:0;font-size:18px;}
.fb-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 16px 20px;}
.fb-scroll > .rv-where{margin:0 0 8px;}
.fb-scroll > .where{margin:0 0 8px;font-size:14.5px;}
.fb-drawer .rv-side-status{margin:0 0 12px;}
body[data-layout="focus"] .toast{background:#F2EEE7;color:#161512;}
body[data-layout="focus"] .toast-wrap{bottom:64px;}
body[data-layout="bottom"] .toast-wrap{bottom:112px;}
.rail-top .chip{margin-left:4px;}

/* ---------- narrower screens ---------- */
@media (max-width:1500px){
  .rv-toolbar .nv .nv-label{display:none;}
  .rv-toolbar .nv{width:44px;padding:0;}
}
@media (max-width:1180px){
  .layout-pick .lp-label{padding:0 8px 0 9px;}
  .layout-pick .lp-label + .lp-wrap .lp-select{min-width:104px;}
}
@media (max-width:900px){
  /* Sidebar stacks: photo first, then the feedback column, and the page scrolls */
  body[data-layout="sidebar"]{height:auto;display:block;overflow:auto;overflow-x:hidden;}
  body[data-layout="sidebar"] > #app{display:block;}
  .rv-sidebar{display:block;}
  .rv-sidebar .rv-body{display:block;}
  .rv-sidebar .rv-canvas{height:min(56vh,480px);}
  .rv-sidebar .rv-side{width:auto;border-left:0;border-top:1px solid var(--line);display:block;}
  .rv-sidebar .rv-side-scroll{overflow:visible;}
  .rv-body > .panel{display:none;}

  /* Bottom bar: the note panel sits between the photo and the bar, never over the photo */
  .rv-bottom .rv-body{flex-direction:column;}
  .rv-note{width:auto;max-height:42vh;border-left:0;border-top:1px solid var(--line);}
  .rv-titlerow .rv-title{flex-basis:100%;order:5;}
  .rv-titlerow .rv-where{display:none;}
  .dock-row{gap:8px;}
  .dock-label{display:none;}
  .dock-choices{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
  .dock-choices .choice{white-space:normal;padding:0 8px 0 8px;font-size:14px;min-height:46px;justify-content:center;text-align:left;}
  .dock-sep{display:none;}
  .dock-row .btn-primary{flex:1 1 auto;}
  .rv-dock .strip-toggle{display:none;}
  .rv-dock{padding:8px 12px;}

  /* Focus: no gutter pill (the drawer has the same three choices); the drawer is a sheet over the bottom */
  .quick-col{display:none;}
  .fb-drawer{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:80vh;z-index:62;border-left:0;border-top:1px solid var(--line);box-shadow:var(--shadow-lift);}
  .fbrand{border-right:0;padding-right:0;}
  .fbrand .fb-sub{display:none;}
  .rail-photo{flex-basis:100%;order:5;}
  .rail .step-count{font-size:14px;padding:6px 9px;}
  .rail-bottom .zoomctl{display:none;}
  .rv-toolbar,.rail{padding-left:12px;padding-right:12px;}
  .rv-canvas{padding:10px 12px;}
  .rv-caption{padding:0 12px 8px;}
  .rv-work .filmstrip{padding:0 12px 8px;}
}
@media (max-width:680px){
  .rv-toolbar .tb-text,.rail .tb-text{display:none;}
  .rv-toolbar .tb-back,.rail [data-act="exitFocus"]{width:42px;padding:0;}
  .rv-toolbar .sc-suffix,.rail .sc-suffix{display:none;}
  .rv-toolbar .btn-sm,.rv-toolbar .step-count,.rv-toolbar .layout-pick{min-height:38px;}
  .rv-toolbar .btn-sm{padding:0 10px;font-size:14.5px;gap:6px;}
  .rv-toolbar .step-count{padding:6px 10px;font-size:14px;}
  .rv-toolbar,.rail{gap:6px;padding-top:5px;padding-bottom:5px;}
  /* Original / Latest stays on the photo (the floating pill) and Compare is in More, as on the classic phone page */
  .rv-toolbar .version-actions,.rail-top .version-actions{display:none;}
  .rv-titlerow .rv-title,.rail-photo{order:5;flex-basis:100%;}
  .rv-toolbar .spacer{order:5;}
  .fbrand{flex:1 1 120px;max-width:none;}
  .rv-toolbar [data-sheet="more"]{order:6;}
  .rv-toolbar .layout-pick{order:7;}
  .rail-top [data-sheet="more"],.rail-top [data-sheet="how"]{order:8;}
  .rail-top .layout-pick{order:1;} .rail-top [data-act="exitFocus"]{order:2;} .rail-top .spacer{order:1;}
  .rail-top .rail-photo{order:5;} .rail-top .chip{order:6;flex:none;}
  .rail-bottom .strip-toggle{display:none;}
  .rail .btn{min-height:38px;}
  .rv-titlerow h1,.rv-caption h1{font-size:17px;}
  .rail-photo h1{font-size:15px;}
  .layout-pick .lp-label span,.layout-pick .lp-label{gap:0;}
  .layout-pick .lp-label{font-size:0;padding:0 6px 0 9px;}
  .layout-pick .lp-label svg{width:17px;height:17px;}
  .rv-side-scroll{padding:12px 14px 20px;}
  .rv-sidebar .rv-canvas{height:min(48vh,420px);}
  .dock-choices .choice{font-size:13px;gap:6px;}
  .dock-choices .choice .ico{width:22px;height:22px;}
}
@media (prefers-reduced-motion:reduce){.rv-note,.fb-drawer{animation:none;}}

/* ==========================================================================
   Copy pass + point-editor designs (2026-09-17)
   ========================================================================== */

/* label row with the small help control */
.np-labelrow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.np-labelrow label{margin-bottom:0;}
.changes-panel .np-labelrow label{font-size:18px;font-weight:700;}
.help-btn{
  width:30px;height:30px;border-radius:50%;flex:none;padding:0;
  border:1.5px solid var(--line-2);background:var(--card);color:var(--ink-2);
  font-size:14px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.help-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.help-btn.tip::after{right:auto;left:0;}
.rv-note-head .help-btn{margin-left:2px;}
.pin-tools{margin-top:10px;}
/* the box on a point — Option A: compact anchored popover */
.pop.pop-a{padding:10px 12px 10px;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px rgba(32,32,29,.08),0 18px 36px -18px rgba(32,32,29,.5);}
.pop-a .pa-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;}
.pop-a .num{width:22px;height:22px;border-radius:50%;background:var(--change);color:#fff;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.pin-ta{width:100%;resize:none;font:inherit;color:var(--ink);}
.pop-a .pin-ta{min-height:60px;max-height:170px;overflow:auto;border:1px solid var(--line-2);border-radius:6px;padding:9px 10px;font-size:16px;line-height:1.4;background:var(--paper);}
.pop-a .pa-foot{display:flex;align-items:center;gap:8px;margin-top:8px;}
.pop-a .pa-remove{background:none;border:0;color:var(--ink-2);font-size:14.5px;padding:0 6px;min-height:40px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:4px;}
.pop-a .pa-remove:hover{color:var(--stop);}
.pop-a .pa-done{min-height:40px;padding:0 18px;font-size:15px;}

/* Option B: floating note card beside the point */
.pop.pop-b{padding:14px 14px 8px;border:0;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(32,32,29,.08),0 20px 44px -16px rgba(32,32,29,.6);overflow:visible;}
.pop-b .pb-num{position:absolute;left:-11px;top:-11px;width:26px;height:26px;border-radius:50%;background:var(--change);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.pop-b .pin-ta{min-height:84px;max-height:220px;overflow:auto;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:2px 0 8px;font-size:16.5px;line-height:1.45;background:transparent;}
.pop-b .pin-ta:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent);}
.pop-b .pb-foot{display:flex;align-items:center;gap:4px;margin-top:6px;}
.pop-b .pb-cap{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;}
.pop-b .pb-remove{background:none;border:0;color:var(--ink-3);font-size:14px;padding:0 10px;min-height:40px;cursor:pointer;border-radius:4px;}
.pop-b .pb-remove:hover{color:var(--stop);}
.pop-b .pb-done{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:0 16px;min-height:40px;font-size:14.5px;font-weight:650;cursor:pointer;}
.pop-b .pb-done:hover{background:#0A544B;}
.pop.pop-b::after{border-color:transparent;background:#fff;}
/* arrows on the side (B) */
.pop[data-side="left"]::after{left:-7px;top:var(--arrow-y,20px);transform:rotate(-45deg);}
.pop[data-side="right"]::after{right:-7px;left:auto;top:var(--arrow-y,20px);transform:rotate(135deg);}
.pop-b[data-side="right"] .pb-num{left:auto;right:-11px;}
.pop{max-height:calc(100vh - 16px);overflow:auto;}

/* Option C: edit in the feedback panel; the marker and the row light up */
.pin-summary li[aria-current="true"]{color:var(--ink);}
.pin-summary li.pin-edit{align-items:flex-start;background:var(--card);border:1px solid var(--accent-line);border-left:4px solid var(--accent);border-radius:6px;padding:10px 12px;gap:10px;}
.pin-edit .num{background:var(--accent);margin-top:2px;}
.pin-edit .pe-body{flex:1 1 auto;min-width:0;}
.pin-edit .pin-ta{min-height:64px;max-height:200px;overflow:auto;border:1px solid var(--line-2);border-radius:6px;padding:9px 10px;font-size:16px;line-height:1.4;background:var(--paper);}
.pin-edit .pe-foot{display:flex;align-items:center;gap:8px;margin-top:8px;}
.pin-edit .pe-remove{background:none;border:0;color:var(--ink-2);font-size:14.5px;padding:0 6px;min-height:40px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:4px;}
.pin-edit .pe-remove:hover{color:var(--stop);}
.pin-edit .pe-done{min-height:40px;padding:0 18px;font-size:15px;}
body[data-pin-editor="c"] .pin[aria-current="true"],.pd-stage .pin[aria-current="true"]{box-shadow:0 0 0 4px rgba(12,97,87,.38),0 2px 8px rgba(0,0,0,.45);}

/* comparison page */
.pindesigns{padding:18px 0 60px;}
.pd-title{margin:16px 0 6px;font-size:28px;letter-spacing:-.015em;}
.pd-lede{margin:0 0 16px;color:var(--ink-2);font-size:16.5px;max-width:80ch;}
.pd-choose{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.pd-choose-label{font-weight:650;margin-right:4px;}
.pd-choose .btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pd-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px 18px;box-shadow:var(--shadow);min-width:0;}
.pd-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.pd-head h2{margin:0;font-size:20px;flex:1 1 auto;min-width:0;}
.pd-head .pd-sub{display:block;font-size:14.5px;font-weight:500;color:var(--ink-2);margin-top:2px;}
.pd-desc{margin:0 0 12px;color:var(--ink-2);font-size:15.5px;}
.pd-demo{position:relative;}
.pd-stage{position:relative;aspect-ratio:3/2;background:#12110F;border-radius:6px;overflow:visible;}
.pd-stage img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block;}
.pd-stage .pin{cursor:default;}
.pd-pop{position:absolute;width:min(320px,86%);z-index:4;}
.pd-pop[data-side="below"]{left:calc(36% - 150px);top:calc(52% + 22px);}
.pd-pop.pop-b[data-side="left"]{left:calc(36% + 22px);top:calc(52% - 70px);width:min(330px,60%);}
.pd-panel{margin-top:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;}
.pd-panel .np-labelrow label{font-size:16px;font-weight:700;}
.pd-panel textarea{width:100%;min-height:64px;resize:none;border:1px solid var(--line-2);border-radius:var(--r-input);padding:10px 12px;background:#fff;font-size:15.5px;line-height:1.45;}
.pd-panel .pin-summary{margin-top:10px;}
.pd-closed{margin:10px 0 0;font-size:14.5px;color:var(--ink-2);}
.pd-reco{margin-top:22px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-card);padding:16px 18px;}
.pd-reco h2{margin:0 0 6px;font-size:19px;}
.pd-reco p{margin:0 0 8px;font-size:16px;color:#0A4A43;max-width:90ch;}
.pd-reco .pd-note{font-size:14.5px;color:var(--ink-2);margin:0;}
@media (max-width:1100px){ .pd-grid{grid-template-columns:1fr;} }
@media (max-width:680px){
  .pd-title{font-size:22px;}
  .pd-pop[data-side="below"]{left:8px;width:calc(100% - 16px);}
  .pd-pop.pop-b[data-side="left"]{left:8px;top:calc(52% + 22px);width:calc(100% - 16px);}
}

/* ---- signed-in controls in the top bar ---- */
.tb-who { display: inline-flex; align-items: center; gap: 8px; }
.tb-user { color: var(--ink-2); font-size: 14.5px; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .tb-who { display: none; } }