/* --acc is the accent for rules, outlines and slider thumbs, where nothing is read
 * THROUGH it. --acc-on is the same blue darkened for the one place text sits on top
 * of it: white on #4a9eff is 2.75:1, under the 4.5:1 minimum, and that fill is the
 * app's "you are here" mark on every module tab, chip and toggle. White on #1a6fc4
 * is 5.10:1. Keep the two in step if the accent hue ever moves. */
:root{--bg:#1c1c1e;--panel:#252528;--line:#3a3a3e;--fg:#e8e8ea;--dim:#9a9aa0;--acc:#4a9eff;--acc-on:#1a6fc4}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
body{display:flex;flex-direction:column}
button{background:#333338;color:var(--fg);border:1px solid var(--line);border-radius:5px;
  padding:4px 10px;font:inherit;cursor:pointer}
button:hover{background:#3c3c42}
button.on{background:var(--acc-on);border-color:var(--acc-on);color:#fff}
button.quiet{background:transparent;color:var(--dim)}
select{background:#333338;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:2px 4px;font:inherit}

/* A control the app has switched off must LOOK switched off. Setting our own
 * background and colour on every button threw away the browser's grey-out, so the
 * six controls that disable themselves while they work (lens blur Faces, Auto tone,
 * Track across the clip, the skin white-balance picker, the Follow arrows, the two
 * cull buttons) sat there fully lit and swallowed the clicks. The hover rule has to
 * be undone separately or a dead button still lights up under the pointer. */
button:disabled,select:disabled{background:#2a2a2e;color:var(--dim);border-color:#2f2f33;
  opacity:.55;cursor:not-allowed}
button:disabled:hover{background:#2a2a2e}

/* Keyboard users need to see where they are. Nothing in the app drew a focus ring,
 * and the dark panels give the browser's default almost nothing to sit against.
 * :focus-visible, not :focus, so a mouse click does not leave a ring behind.
 * The offset keeps the ring off the accent fill of an active tab, where a ring
 * drawn on the border would disappear into it. */
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,a:focus-visible{outline:2px solid #8fc4ff;outline-offset:2px}
.spacer{flex:1}

#bar{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
/* the header must not change height when a long filename passes through the
 * title or the status: labels never wrap, text truncates instead */
#bar button{white-space:nowrap}
#bar .modes{flex:none}
.brand{font-weight:600;letter-spacing:.2px;white-space:nowrap;flex:none}
.brand sup{font-size:10px;font-weight:400;color:#777}
.modes{display:flex;gap:4px}
#title{color:var(--dim);max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
/* a FIXED width, whatever it says (Fredo, 2026-10-11: "the progress bar keeps jerking around
 * because text such as decoding appears and re-appears"): sized by its text, the line took
 * room from the progress pill each time a message came and gave it back when it went */
#status{color:var(--dim);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:0 1 min(62ch,38vw);width:min(62ch,38vw);min-width:0}

main{flex:1;min-height:0;display:flex;flex-direction:column}
/* min-width:0 is load-bearing, the horizontal twin of the viewer's min-height fix:
 * as flex items of <main>, the sections' default min-width is auto, so any wide
 * content — the filmstrip's row of thumbnails, an unfitted canvas — inflates the
 * section past the window instead of scrolling inside it, and everything downstream
 * (including fitCanvas, which trusts clientWidth) inherits the inflated number. */
section{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}

/* library */
#filters{display:flex;gap:14px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--dim)}
/* --cell is the card's width, set by app.js from the Thumbnails slider and = / - (2026-10-03).
   220 px is the default step and what this rule says before the script runs. The thumbnail
   box inside is 2 px narrower (the card's border), and as tall as it is wide. */
#grid{flex:1;overflow:auto;display:grid;gap:12px;padding:12px;--cell:220px;
  grid-template-columns:repeat(auto-fill,var(--cell));justify-content:start;
  align-content:start;align-items:start;grid-auto-rows:max-content}
.card{background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden;cursor:pointer}
.card.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
/* Square cells with object-fit:contain, which is Lightroom's grid geometry and it
 * earns both of its properties at once. Contain (not cover): the card shows the
 * WHOLE photo. Square (not 3:2): a horizontal and a vertical of the same aspect
 * land at exactly the same on-screen area.
 *
 * The square is built with the padding-bottom trick, NOT aspect-ratio on the <img>:
 * with aspect-ratio + object-fit on a bare image, Safari sizes the box differently
 * from Chrome — horizontals rendered shifted down, verticals under-letterboxed and
 * cropped top and bottom — while an absolutely-filled, explicitly-sized wrapper
 * means the same thing in every engine. */
.card .thbox{position:relative;width:100%;height:calc(var(--cell,220px) - 2px);background:#111}
.card .th{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.card .ph{position:relative;width:100%;height:calc(var(--cell,220px) - 2px);background:#111}
/* the camera's own preview, until the app renders the photograph (2026-10-03): small and
   faint, so a grid of new imports reads as photographs and not as a wall of labels */
.card .campv{position:absolute;left:5px;bottom:4px;font-size:10px;line-height:1;padding:2px 4px;
  border-radius:3px;background:#0008;color:#fffa;opacity:.7;letter-spacing:.02em}
.filmstrip .card .campv, #grid.strip .card .campv{display:none}
.card .ph span{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:11px}
.card .meta{display:flex;align-items:center;gap:6px;padding:5px 7px;font-size:11px;color:var(--dim)}
.card .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stars{letter-spacing:1px;color:#f3c34a;cursor:pointer;user-select:none}
.flag.pick{color:#5ad07a}.flag.reject{color:#e2585d}
#empty{color:var(--dim);padding:0 14px;max-width:60ch}

/* develop */
#develop{flex-direction:row}
/* min-height:0 is load-bearing: as a column flex item the viewer's default
 * min-height is auto, so a tall canvas INFLATES it instead of being fitted to it —
 * and fitCanvas then reads the inflated height back and keeps the canvas huge, a
 * feedback loop that shoved the filmstrip and the info bar off the bottom. */
#viewer{flex:1;min-width:0;min-height:0;display:grid;place-items:center;position:relative;background:#141416;padding:14px;overflow:hidden}
#stack{position:relative;line-height:0;box-shadow:0 2px 18px #0008}
#cv{display:block;image-rendering:auto}
#ov{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
#ov.idle{pointer-events:none}
#vinfo{position:absolute;left:12px;bottom:10px;color:var(--dim);font-size:11px;
  background:#0009;padding:3px 7px;border-radius:4px;font-variant-numeric:tabular-nums}
#panel{width:310px;flex:none;border-left:1px solid var(--line);background:var(--panel);
  overflow:auto;padding:10px}
#tools{display:flex;gap:4px;margin-bottom:8px}
#tools button{flex:1;font-size:11px;padding:4px 2px}
#toolopts{margin-bottom:10px}
#toolopts:empty{margin:0}
.toolhead{margin-bottom:4px}
.toolhead .why{flex:1;color:var(--dim);font-size:11px}
.row.chk label{width:auto;display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px;cursor:pointer}
.row.chk input{accent-color:var(--acc)}
#toolopts .hint{color:var(--dim);font-size:11px;margin:6px 0 0;line-height:1.4}
#histo{background:#141416;border:1px solid var(--line);border-radius:5px;margin-bottom:10px;position:relative}
#histo .ask{position:absolute;top:3px;right:3px}
#hBook .also{color:var(--dim)}
#mapBar .ask{margin-right:6px}
#hcv{display:block;width:100%;height:80px}
.panel{border-bottom:1px solid var(--line)}
.panel>summary{padding:7px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--fg);list-style:none;display:flex;align-items:center;gap:7px}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary::before{content:'\25B8';color:var(--dim);transition:transform .12s;font-size:11px;width:9px}
.panel[open]>summary::before{transform:rotate(90deg)}
.panel.empty>summary{color:var(--dim)}
.panel>summary .soon{margin-left:auto;font-size:10px;color:#6c6c72;text-transform:none;letter-spacing:0}
.soonnote{color:var(--dim);font-size:11px;margin:0 0 10px 14px;max-width:34ch}
h4.sec{margin:10px 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#7c7c84;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:4px}  /* Lens blur's five buttons */
h4.sec .ask{text-transform:none;letter-spacing:0}
.panel .btns{margin:8px 0 10px}
.row{display:flex;align-items:center;gap:7px;margin:3px 0}
/* The label column has to hold the longest slider name the panel can show, which is
 * "Foliage uniformity" at 102px. At 70px it wrapped to two lines, so those rows were
 * taller than their neighbours and the stack of sliders went ragged. 104px fits every
 * name in lib/stages.js today; the ellipsis is the guard for the next one that does
 * not, since a clipped name costs less than a row of a different height. */
.row label{width:104px;flex:none;color:var(--dim);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A label that WRAPS its control is not a label column: the checkbox rows and the
 * export sheet's Quality slider live inside their own <label>, and a fixed 104px box
 * with the text clipped off is wrong for both. Let them size to what they hold. */
.row label:has(input){width:auto;white-space:normal;overflow:visible}
.row input[type=range]{flex:1;min-width:0;accent-color:var(--acc)}
.row select{flex:1;min-width:0}
/* min-width rather than width: 38px was two characters too narrow for the readouts
 * that are not a bare number, so white balance clipped "50,000 K" and the export
 * sheet clipped its destination. The floor still lines the column up. */
.row .val{min-width:56px;flex:none;white-space:nowrap;
  text-align:right;font-variant-numeric:tabular-nums;font-size:11px;color:var(--dim)}
.row .val.set{color:var(--fg)}
/* the value is editable: click it and type (app.js sliderRow) */
.row .val[tabindex]{cursor:text;border-radius:3px}
.row .val[tabindex]:hover,.row .val[tabindex]:focus-visible{outline:1px solid var(--line, #666);outline-offset:1px}
.row .val-edit{width:56px;flex:none;font:inherit;text-align:right;padding:0 2px;
  background:var(--bg);color:var(--fg);border:1px solid var(--line, #666);border-radius:3px}
/* A SLIDER ROW, LAID OUT AS LIGHTROOM'S (Fredo, 2026-10-11: "Lightroom manages to have wider
 * sliders, which provides more precision. Less space for text, less space between text and
 * sliders."). Four columns: the ?, small and faint until the row is under the pointer; the
 * label, right-aligned against the track; the track, which takes everything left; the value.
 * The label and value columns are sized per panel by app.js fitSliderColumns, to the widest
 * label (capped, the rest ellipsised with the full name in the tooltip) and the widest value
 * that panel's sliders can show, so the tracks of a panel start and end on one line. At
 * 310 px Exposure's track went from 88 px to 157, and at 720 px from 0 to 57. */
.row.sl{display:grid;grid-template-columns:14px var(--labw, 72px) minmax(0, 1fr) var(--valw, 40px);
  column-gap:4px;align-items:center;margin:1px 0;min-height:20px}
.row.sl>label{grid-column:2;grid-row:1;width:auto;min-width:0;text-align:right;font-size:11px}
.row.sl>input[type=range]{grid-column:3;grid-row:1;width:100%;margin:0}
.row.sl>select{grid-column:3 / 5;grid-row:1;min-width:0;width:100%}
.row.sl>.val{grid-column:4;grid-row:1;min-width:0}
.row.sl>.val-edit{grid-column:4;grid-row:1;width:100%;box-sizing:border-box}
/* Lightroom's white balance tracks (2026-10-13): Temp blue to yellow, Tint green to magenta,
 * so the direction of each slider reads off the track as it does in Lightroom */
.row.sl[data-param=temp]>input[type=range],.row.sl[data-param=tint]>input[type=range]{
  -webkit-appearance:none;appearance:none;height:14px;background:transparent}
.row.sl[data-param=temp]>input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#4a78d0,#b9b6ad 50%,#d9ad3c)}
.row.sl[data-param=tint]>input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#4fa84a,#b9b6ad 50%,#c056b9)}
.row.sl[data-param=temp]>input[type=range]::-moz-range-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#4a78d0,#b9b6ad 50%,#d9ad3c)}
.row.sl[data-param=tint]>input[type=range]::-moz-range-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,#4fa84a,#b9b6ad 50%,#c056b9)}
.row.sl[data-param=temp]>input[type=range]::-webkit-slider-thumb,
.row.sl[data-param=tint]>input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;
  margin-top:-3.5px;border-radius:50%;background:#e6e6e6;border:1px solid #555}
.row.sl[data-param=temp]>input[type=range]::-moz-range-thumb,
.row.sl[data-param=tint]>input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;
  background:#e6e6e6;border:1px solid #555}
.row.sl>.ask{grid-column:1;grid-row:1;width:14px;height:14px;font-size:10px;opacity:.4}
.row.sl:hover>.ask,.row.sl>.ask:focus-visible{opacity:1}
/* no hover on a touch screen, so nothing to reveal it: always shown there */
@media (hover: none){.row.sl>.ask{opacity:1}}
.ask{border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:50%;
  width:16px;height:16px;line-height:1;padding:0;font-size:11px;cursor:pointer;flex:none}
.ask:hover{color:var(--fg);border-color:var(--fg)}
.btns{margin-top:10px;gap:6px}
#recipeBox,#planBox{margin-top:12px;color:var(--dim)}
#recipe .rk{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;
  text-decoration-color:#555}
#recipe .rk:hover{color:var(--acc);text-decoration-color:var(--acc)}
summary{cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.6px}
pre{background:#141416;border:1px solid var(--line);border-radius:5px;padding:8px;
  overflow:auto;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cfd3d8}
#plan{font:11px/1.6 ui-monospace,Menlo,monospace;margin-top:6px}
#plan .st{display:flex;gap:8px;padding:2px 6px;border-left:2px solid var(--line)}
#plan .st.lut{border-left-color:#6f9}
#plan .st.pixel{border-left-color:#9cf}
#plan .st.spatial{border-left-color:#fb7}
#plan .ms{margin-left:auto;color:var(--dim)}

/* help sheet */
#help{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:20px;z-index:9}
#help .sheet{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  max-width:660px;width:100%;max-height:86vh;overflow:auto;padding:20px 22px;position:relative}
#help h2{margin:0 0 4px;font-size:17px}
#help h3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin:16px 0 5px}
#help .close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:20px;color:var(--dim)}
#help dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:10px 0;font-size:12px}
#help dt{color:var(--dim)}
#help .note{color:#e0b96a;font-size:12px;border-left:2px solid #e0b96a;padding-left:9px;margin-top:14px}
#help a{color:var(--acc)}

/* panel widgets */
.widget{margin:4px 0 8px}
canvas.curve{width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:5px;
  display:block;cursor:crosshair;background:#141416}

.chips{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 6px}
.chip{flex:1 1 auto;min-width:46px;font-size:10px;padding:3px 4px;border-bottom:2px solid transparent}
.chip.on{background:var(--acc-on);border-color:var(--acc-on);color:#fff}

#zoombar{position:absolute;right:12px;bottom:10px;display:flex;gap:3px;
  background:#0009;padding:3px;border-radius:5px}
#zoombar button{font-size:10px;padding:2px 7px}
#ov.pannable{cursor:grab}
#ov.panning{cursor:grabbing}

/* under-the-hood */
#hoodsheet{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:20px;z-index:10}
#hoodsheet .sheet{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  max-width:1120px;width:100%;max-height:90vh;overflow:auto;padding:20px 24px;position:relative}
#hoodsheet h2{margin:0 0 4px;font-size:17px}
#hoodsheet .lede{color:var(--dim);font-size:12px;margin:0 0 16px;max-width:78ch}
#hoodsheet .close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:20px;color:var(--dim)}
#hoodgraph{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
.hpass{border:1px solid var(--line);border-radius:8px;padding:9px;min-width:186px;background:#1b1b1e}
.hpass>h3{margin:0 0 7px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);
  display:flex;gap:6px;align-items:baseline}
.hpass>h3 .cost{margin-left:auto;color:#6c6c72;text-transform:none;letter-spacing:0}
.hpass.geom{border-color:#7a5c2e}
.hpass.point{border-color:#2e6a4a}
.hpass.spatial{border-color:#7a4a2e}
.hnode{border-left:3px solid var(--line);padding:5px 8px;margin-bottom:5px;background:#232327;border-radius:0 5px 5px 0}
.hnode.on{border-left-color:var(--acc);background:#26303a}
.hnode.off{opacity:.42}
.hnode b{font-size:12px;display:block}
.hnode .ctl{font-size:10px;color:var(--dim);margin-top:2px}
.hnode .sp{font-size:10px;color:#6c6c72;text-transform:uppercase;letter-spacing:.4px}
.harrow{align-self:center;color:var(--dim);font-size:18px;flex:none}
#hoodlegend{margin-top:14px;color:var(--dim);font-size:11px;line-height:1.6;max-width:80ch}
#hoodlegend code{background:#141416;padding:1px 4px;border-radius:3px}

/* the encoding regime, which is the point of the whole ordering */
.hnode.sp-camera{border-left-color:#4a8fd0}
.hnode.sp-linear{border-left-color:#4ac0d0}
.hnode.sp-srgb{border-left-color:#e0a04a}
.hnode.on.sp-camera{background:#22303c}
.hnode.on.sp-linear{background:#1f353a}
.hnode.on.sp-srgb{background:#3a3020}
.hregime{display:flex;gap:0;margin:0 0 8px;border-radius:4px;overflow:hidden;font-size:10px;
  text-transform:uppercase;letter-spacing:.5px}
.hregime span{padding:3px 6px;flex:1;text-align:center;color:#0c0c0e;font-weight:600}
.hregime .lin{background:#4ac0d0}
.hregime .enc{background:#8a8a90;flex:0 0 auto}
.hregime .dis{background:#e0a04a}
.hkey{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0;font-size:11px;color:var(--dim)}
.hkey i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

#viewaids{position:absolute;left:12px;top:10px;display:flex;gap:3px;
  background:#0009;padding:3px;border-radius:5px}
#viewaids button{font-size:10px;padding:2px 7px}
#historyList{max-height:170px;overflow:auto;margin-top:8px}
#historyList .h{display:flex;gap:6px;font-size:11px;padding:2px 5px;border-radius:3px;cursor:pointer;color:var(--dim)}
#historyList .h:hover{background:#2c2c31;color:var(--fg)}
#historyList .h.cur{background:#26303a;color:var(--fg)}
#historyList .h .n{margin-left:auto;font-variant-numeric:tabular-nums;color:#6c6c72}
.picking #ov{cursor:crosshair}
.pickrow button.on{background:var(--acc-on);border-color:var(--acc-on);color:#fff}
/* the six white-balance buttons are wider than the panel: they wrap rather than making the
 * whole panel scroll sideways (375 px of content in a 244 px panel at 980 px, 2026-10-11) */
.pickrow{flex-wrap:wrap}
.pickrow button{white-space:nowrap}

/* merge */
#mergesheet{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:20px;z-index:11}
#mergesheet .sheet{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  max-width:1180px;width:100%;max-height:92vh;overflow:auto;padding:20px 24px;position:relative}
#mergesheet h2{margin:0 0 10px;font-size:17px}
#mergesheet .close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:20px;color:var(--dim)}
#mergeKind{gap:6px;margin-bottom:6px}
#mergeKind button.on{background:var(--acc-on);border-color:var(--acc-on);color:#fff}
#mergeInfo{color:var(--dim);font-size:11px}
#mergeView{margin-top:12px}
.mrow{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow .lab{width:120px;flex:none;font-size:11px;color:var(--dim);line-height:1.5}
.mrow .lab b{display:block;color:var(--fg);font-size:12px}
.mrow canvas{border:1px solid var(--line);border-radius:4px;display:block;image-rendering:auto}
.mcaps{display:flex;gap:10px;font-size:10px;color:var(--dim);margin-top:3px}
.card.sel2{outline:2px solid var(--acc);outline-offset:-2px}
#mergeResult{margin-top:12px}
#mergeResult canvas{max-width:100%;border:1px solid var(--line);border-radius:5px}
.warn{color:#e0b96a;font-size:12px;border-left:2px solid #e0b96a;padding-left:9px;margin:8px 0}

/* library info panel */
#libbody{flex:1;min-height:0;display:flex}
#grid{flex:1}
#info{width:270px;flex:none;border-left:1px solid var(--line);background:var(--panel);
  overflow:auto;padding:12px}
#info .hint{color:var(--dim);font-size:11px;line-height:1.5}
#infoThumb{width:100%;height:auto;border-radius:5px;border:1px solid var(--line);display:block;background:#111}
#info h3{margin:9px 0 6px;font-size:13px;word-break:break-all}
#info h4.sec{margin:14px 0 5px}
#infoExif{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:11px;margin:0}
#infoExif dt{color:var(--dim)}
#infoExif dd{margin:0;font-variant-numeric:tabular-nums}
#infoRate .stars{font-size:15px}
#infoLabels{gap:5px}
.lab-dot{width:17px;height:17px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0}
.lab-dot.on{outline:2px solid #fff;outline-offset:1px}
#infoTags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.tag{background:#33333a;border:1px solid var(--line);border-radius:10px;padding:1px 7px;font-size:10px;
  display:flex;gap:4px;align-items:center}
.tag b{cursor:pointer;color:var(--dim)}
.tag b:hover{color:#e2585d}
#tagInput{flex:1;background:#333338;color:var(--fg);border:1px solid var(--line);border-radius:5px;
  padding:3px 6px;font:inherit;font-size:11px}
/* the keyword suggestions (lib/kwcomplete.js): under the Info box, at the caret in the Tags editor */
.kwsug{position:fixed;z-index:60;min-width:180px;max-width:min(420px,calc(100vw - 8px));overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.45);
  padding:3px 0;font-size:12px}
.kwsug[hidden]{display:none}
.kwsug .kwopt{display:flex;gap:8px;align-items:baseline;padding:3px 9px;cursor:pointer;white-space:nowrap}
.kwsug .kwopt.on,.kwsug .kwopt:hover{background:#26303a}
.kwsug .kwname{color:var(--fg)}
.kwsug .kwpath,.kwsug .kwvia{color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.card .lab-strip{height:3px;width:100%}

/* merge sheet: the options that change the method, and the report it gives back */
.row.sub{gap:14px;padding:2px 0 6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.row.sub label{width:auto;display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px}
.row.sub label.chk{cursor:pointer}
.row.sub select{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:4px;font-size:11px;padding:2px 4px}
.row.sub input[type=checkbox]{accent-color:var(--acc)}
#mergeReport table{border-collapse:collapse;font-size:11px;margin:8px 0}
#mergeReport td{padding:2px 14px 2px 0;color:var(--dim);vertical-align:top}
#mergeReport td b{color:var(--fg);font-weight:600}
#mergeReport .good{color:#6ad08a}
#mergeReport .bad{color:#e07070}

/* horizon marking on a merged panorama */
#levelWrap{margin-top:10px}
#levelWrap .lede{margin:6px 0}
#levelCanvas{border:1px solid var(--line);border-radius:4px;cursor:crosshair;max-width:100%;display:block}
#levelWrap .row{gap:8px;margin-top:8px;align-items:center}
#levelCount{color:var(--dim);font-size:11px}

/* assisted culling */
#cullsheet{position:fixed;inset:0;background:#000c;display:grid;place-items:center;padding:20px;z-index:11}
#cullsheet .sheet{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  max-width:1320px;width:100%;max-height:92vh;overflow:auto;padding:20px 24px;position:relative}
#cullsheet h2{margin:0 0 10px;font-size:17px}
#cullsheet .lede{color:var(--dim);font-size:12px;margin:0 0 14px;max-width:92ch;line-height:1.5}
#cullsheet .close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:20px;color:var(--dim)}
#cullInfo{color:var(--dim);font-size:11px}
#cullView .cgroup{border:1px solid var(--line);border-radius:6px;padding:8px;margin:10px 0;background:var(--panel)}
#cullView .ghead{display:flex;align-items:baseline;gap:10px;font-size:11px;color:var(--dim);margin-bottom:6px}
#cullView .ghead b{color:var(--fg);font-size:12px;white-space:nowrap}
#cullView .ghead{flex-wrap:wrap}
#cullView .cands{display:flex;gap:10px;flex-wrap:wrap}
#cullView .cand{width:330px;border:1px solid transparent;border-radius:5px;padding:6px;background:#111113}
#cullView .cand.pick{border-color:#4c8f5c;background:#101a12}
#cullView .cand.reject{border-color:#7a4040;background:#1a1010;opacity:.75}
#cullView .cand .pics{display:flex;gap:6px;align-items:flex-start}
#cullView .cand img,#cullView .cand canvas{border-radius:3px;display:block}
#cullView .cand img.thumb{width:118px;height:auto}
/* native size, no CSS scaling: downscaling the 1:1 crop destroys what it is for */
#cullView .cand img.patch{image-rendering:pixelated;max-width:none}
#cullView .cand .nm{font-size:11px;color:var(--fg);margin:4px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cullView .cand .why{font-size:10.5px;color:var(--dim);line-height:1.35;min-height:2.4em}
#cullView .cand .nums{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;margin-top:3px}
#cullView .cand .badge{display:inline-block;font-size:10px;padding:1px 5px;border-radius:8px;margin-right:5px}
#cullView .cand .badge.pick{background:#2a4a32;color:#9fe0b0}
#cullView .cand .badge.reject{background:#4a2a2a;color:#e0a0a0}
#cullView .cand .ovr{display:flex;gap:4px;margin-top:5px}
#cullView .cand .ovr button{font-size:10px;padding:2px 6px}
#cullView .cand .ovr button.on{background:var(--acc);color:#000}
#cullView .tie{color:#d8b45a}

/* ---- Lightroom-style Library loupe + filmstrips ---- */
#libmain{flex:1;display:flex;flex-direction:column;min-width:0}
#loupe{flex:1;min-height:0;position:relative;background:#141416}
/* The canvas fills the loupe and lets object-fit do the letterboxing. The obvious
 * version — max-width/max-height on a centred grid item — does not work: the grid
 * row sizes itself to the canvas's INTRINSIC height, so the percentage has nothing
 * to resolve against and a vertical photo rendered at full bitmap size, straight
 * under the filmstrip. */
#loupeCv{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
#loupeBar{position:absolute;left:12px;bottom:9px;font-size:11px;color:var(--dim);
  background:#000a;padding:3px 9px;border-radius:5px;pointer-events:none}
#devmain{flex:1;display:flex;flex-direction:column;min-width:0}
.filmstrip, #grid.strip{flex:0 0 138px;display:flex;gap:8px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;
  border-top:1px solid var(--line);background:var(--panel)}
#grid.strip{grid-template-columns:none}
.filmstrip .card, #grid.strip .card{width:98px;flex:none}
.filmstrip .card .thbox, #grid.strip .card .thbox,
.filmstrip .card .ph, #grid.strip .card .ph{height:98px}
/* the stars, flag and label stay in a strip; only the name goes (Fredo, 2026-10-06) */
.filmstrip .card .meta, #grid.strip .card .meta{font-size:10px;padding:1px 3px;gap:3px}
.filmstrip .card .meta .nm, #grid.strip .card .meta .nm{display:none}
.filmstrip:empty{display:none}

/* ---- Lightroom-style left panel: presets + history ---- */
#leftpanel{width:225px;flex:none;border-right:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px 12px;font-size:12px}
#leftpanel details{margin-bottom:12px}
#leftpanel summary{cursor:pointer;color:var(--dim);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;user-select:none;display:flex;align-items:center;gap:8px;padding:4px 0}
#leftpanel summary button{margin-left:auto;font-size:10px;padding:1px 7px;border-radius:4px;
  background:transparent;border:1px solid var(--line);color:var(--dim)}
#leftpanel summary button:hover{color:var(--fg);border-color:var(--fg)}
#presetList .p{display:flex;align-items:center;gap:6px;padding:3px 7px;border-radius:4px;
  cursor:pointer;color:var(--dim)}
#presetList .p:hover{background:#2c2c31;color:var(--fg)}
#presetList .p.cur{background:#26303a;color:var(--fg)}
/* a preset's name, and under it what it affects (2026-10-10) */
#presetList .p .pt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
#presetList .p .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#presetList .p .pa{font-size:10.5px;color:#6c6c72;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#presetList .p .x,#presetList .p .upd{visibility:hidden;color:#8a5c5c;padding:0 3px}
#presetList .p .upd{color:var(--dim)}
#presetList .p:hover .x,#presetList .p:hover .upd,#presetList .p .upd:focus-visible,#presetList .p .x:focus-visible{visibility:visible}
#presetList .p .x:hover{color:#e2585d}
#presetList .p .upd:hover{color:var(--fg)}
#presetList .hint,#historyList .hint{color:#6c6c72;font-size:11px;padding:2px 6px;line-height:1.45}
#historyList{max-height:none}

/* clipping legend, under the view-aid buttons */
#aidlegend{font-size:10.5px;color:var(--dim);background:#000a;border-radius:5px;padding:4px 8px;
  margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:340px}
#aidlegend .sw{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none;margin-left:6px}
#aidlegend .sw:first-child{margin-left:0}

/* selection: no native image drags or text selection fighting the marquee */
.card{user-select:none;-webkit-user-select:none}
.card img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.card .meta{pointer-events:auto}
.marquee{position:fixed;border:1px solid var(--acc);background:rgba(74,158,255,.14);
  z-index:50;pointer-events:none;border-radius:2px}

/* ---- Lightroom-style Library left panel: sources and folders ---- */
#libleft{width:210px;flex:none;border-right:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px 10px;font-size:12px}
#libleft details{margin-bottom:12px}
#libleft summary{cursor:pointer;color:var(--dim);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;user-select:none;padding:4px 0}
#libleft .src,#folderTree .fnode{display:flex;align-items:center;gap:6px;padding:3px 7px;
  border-radius:4px;cursor:pointer;color:var(--dim);white-space:nowrap;overflow:hidden}
#libleft .src:hover,#folderTree .fnode:hover{background:#2c2c31;color:var(--fg)}
#libleft .src.cur,#folderTree .fnode.cur{background:#26303a;color:var(--fg)}
#folderTree .fnode .tw{width:12px;flex:none;text-align:center;color:#6c6c72;font-size:10px}
#folderTree .fnode .nm2{flex:1;overflow:hidden;text-overflow:ellipsis}
#libleft .n{margin-left:auto;font-variant-numeric:tabular-nums;color:#6c6c72;font-size:11px}
#folderTree .kids{margin-left:13px;border-left:1px solid #2a2a2e;padding-left:2px}
#folderTree .kids.closed{display:none}
/* shift-click takes a range of folders, not a run of their names as text */
#folderTree .fnode{user-select:none}

/* Progress for imports, thumbnails, previews and scans: a pill in the bar's own row, in the
 * free space after the title (2026-10-10, Fredo: the strip hung below the bar covered the
 * Library's filters, and he wants to start sorting while an import runs). Before that it was
 * a row under the header that pushed everything down (2026-10-04) and, before that, a faint
 * 24 px strip that was easy to miss; it stays bold and filled, at a height that fits the bar. */
#bar{position:relative;z-index:30}
#progress{position:relative;flex:0 1 560px;min-width:0;height:28px;align-self:center;
  background:#0c1119;border:1px solid var(--acc);border-radius:6px;overflow:hidden;
  display:flex;align-items:center;gap:8px}
#progress[hidden]{display:none}
/* EDITS NOT ON DISK (2026-10-11): a warning-coloured bar under the header, in every module,
 * and its count in the header, which stays when the bar is put off till later. Dark text on
 * the amber, for contrast. */
#sideBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px;
  background:#e0a030;color:#1a1306;font-size:13px;font-weight:600;border-bottom:1px solid #b07a18}
#sideBar[hidden]{display:none}
#sideBar #sideBarText{flex:0 1 auto}
#sideBar button{font-size:12px;padding:3px 12px;background:#1a1306;color:#ffe2a8;border-color:#1a1306;font-weight:600}
#sideBar button#sideBarLater{background:transparent;color:#1a1306;border-color:#7a5410}
#sideBar button.ask{background:transparent;color:#1a1306;border-color:#7a5410;padding:1px 7px}
#sideWait{align-self:center;font-size:11.5px;padding:3px 9px;background:#3a2a0c;color:#f0c060;border-color:#e0a030}
#sideWait[hidden]{display:none}
/* squeezed by a narrow window, it keeps the fill and the percentage and drops the words */
#progress{container-type:inline-size}
@container (max-width: 220px){#progressText,#progressMore{display:none}#progressPct{margin-left:auto}}
#progressFill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,#22557f,#3f8ede);
  transition:width .2s ease}
/* a moving sheen, so a slow file still looks like work rather than a hang */
#progressFill::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,#ffffff28 50%,transparent 70%);
  background-size:220% 100%;animation:pgsheen 1.4s linear infinite}
@keyframes pgsheen{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){#progressFill::after{animation:none}}
#progressText{position:relative;font:600 12.5px/1.2 inherit;color:#fff;padding:0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
  text-shadow:0 1px 2px #0009}
#progressPct{position:relative;font:700 12.5px/1.2 inherit;color:#fff;padding:0 8px;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #0009}
#progressMore,#progressStop{position:relative;margin-right:4px;font-size:11.5px;padding:2px 8px;flex:none}

/* ---- map / slideshow / web modules ---- */
#mapBody{flex:1;min-height:0;display:flex;flex-direction:row}
#mapmain{flex:1;min-height:0;min-width:0;position:relative;background:#0d1420}
#navstrip[hidden]{display:none}
#mapCv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
#mapBar{position:absolute;left:10px;bottom:10px;font-size:11px;color:#9fb0c8;background:#000a;
  padding:4px 10px;border-radius:6px;max-width:70%}
#ssmain{flex:1;min-height:0;position:relative;background:#000;display:flex;flex-direction:column}
#ssCv{position:absolute;inset:0;width:100%;height:calc(100% - 0px);object-fit:contain}
#ssCaption{position:absolute;left:0;right:0;bottom:52px;text-align:center;color:#cfd3da;
  font-size:13px;text-shadow:0 1px 4px #000}
#ssControls{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;
  align-items:center;gap:10px;color:var(--dim);font-size:12px}
#ssControls button{min-width:44px}
#webmain{flex:1;min-height:0;display:flex;flex-direction:column}
#webBar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--dim);flex-wrap:wrap}
#webBar input{width:200px}
#webBar a{color:var(--acc)}
#webPreview{flex:1;border:0;background:#fff}

/* Lightroom's panels (app.js setPanelsOff: Tab, Shift-Tab, F7, F8): one setting per side for
 * every module, on body, and a thin bar with a triangle on each panel's inner edge */
body.left-off :is(#libleft,#leftpanel,#pplLeft,#mrgLeft,#nleLeft,#webOpts),
body.right-off :is(#info,#panel,#pplRight,#tagsRight,#ssOpts),
body.top-off #bar{display:none!important}
.ptab{flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:#4c4c52;background:var(--panel);user-select:none;font-size:10px}
.ptab:hover{color:var(--fg);background:#2c2c31}
.ptab-left{width:13px;border-right:1px solid var(--line)}
.ptab-right{width:13px;border-left:1px solid var(--line)}
.ptab-bottom{height:12px;border-top:1px solid var(--line)}
/* a pane that is itself hidden (People's right pane while one photograph shows) has no bar */
[hidden] + .ptab-left, .ptab-right:has(+ [hidden]){display:none}
/* the top bar's own bar only while it is hidden: there is no room to spare above every module */
.ptab-top{display:none;height:12px;border-bottom:1px solid var(--line)}
body.top-off .ptab-top{display:flex}
/* The filmstrip, one setting for every module (app.js setStripHidden, F6). Its bar sits just
 * before each strip and shows only where that strip would: under the loupe and not the grid,
 * under a module the navigator serves, and not over an empty strip. */
.ptab.stripbar{display:none}
.ptab.stripbar:has(+ #grid.strip),
.ptab.stripbar:has(+ .filmstrip:not(:empty):not([hidden])){display:flex}
body.strip-off .filmstrip, body.strip-off #grid.strip{display:none}

/* ---- under-the-hood module ---- */
#hoodtabs{flex:none;display:flex;gap:4px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
#hoodtabs button.on{background:var(--acc-on);border-color:var(--acc-on);color:#fff}
#hoodbody{flex:1;min-height:0;overflow-y:auto}
.htab{max-width:880px;margin:0 auto;padding:18px 20px 60px;font-size:14px;line-height:1.62;color:#c9cdd4}
.htab h2{font-size:19px;margin:14px 0 10px;color:#e8eaee}
.htab p{margin:.7em 0}
.htab b{color:#e8eaee;font-weight:600}
.htab code{background:#222226;border-radius:4px;padding:1px 5px;font-size:12.5px}
.htab ul{padding-left:1.3em}
.htab li{margin:.35em 0}
.htab table{border-collapse:collapse;margin:12px 0;font-size:13px}
.htab th,.htab td{border:1px solid var(--line);padding:4px 12px;text-align:right}
.htab th{color:var(--dim);font-weight:600}
#benchInfo{color:var(--dim);font-size:12px;margin-left:10px}
#hoodgraph{margin-top:14px;overflow-x:auto;padding-bottom:8px}
#htab-pipeline{max-width:1150px}

#guide{flex:1;overflow:auto}
#guide .hoodwrap{max-width:880px;margin:0 auto;padding:22px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13px;margin:12px 0}
.keys dt{font-family:ui-monospace,monospace;color:var(--acc);white-space:nowrap}
.keys dd{margin:0;color:var(--dim)}

.pgroup{border:1px solid var(--line);border-radius:8px;padding:10px;margin:10px 0}
.pfaces{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pfaces canvas{border-radius:6px;cursor:pointer;border:1px solid var(--line)}
.pgroup input{flex:1;min-width:140px}

#loupezoom{position:absolute;right:12px;bottom:9px;display:flex;gap:3px}
#loupezoom button{font-size:10px;padding:2px 7px}

.metaf{display:inline-flex;gap:3px;align-items:center;margin-left:6px}
.metaf select{max-width:150px}
.metaf button{padding:1px 6px;font-size:11px}

#filters button{white-space:nowrap}
#filters label{white-space:nowrap}

#aidsToggle{position:absolute;left:10px;top:8px;z-index:3;font-size:12px;padding:2px 8px;
  background:#000a;border:1px solid var(--line);opacity:.55}
#aidsToggle:hover,#aidsToggle.on{opacity:1}

#guideLoupe{position:absolute;width:150px;height:150px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 2px 14px #000c, inset 0 0 0 1px #0008;
  pointer-events:none;z-index:5;background:#111}

#peoplesheet .row{display:flex;gap:10px;align-items:center;margin:10px 0}

/* ---- People module ---- */
#people{flex:1;display:flex;flex-direction:column;min-height:0}
#pplBody{flex:1;display:flex;flex-direction:row;min-height:0}
#pplLeft{width:230px;flex:none;border-right:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;font-size:12px}
#pplList,#pplClusters{margin-bottom:10px}
.pplrow{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;cursor:pointer}
.pplrow:hover{background:#ffffff12}
.pplrow.cur{background:var(--acc-on);color:#fff}
.pplrow img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#111}
.pplrow .nm3{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pplrow .n{color:var(--dim);font-size:11px}
.pplrow .badge{background:#e2585d;color:#fff;border-radius:8px;font-size:10px;padding:0 5px}
#pplFooter{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}
#pplPhotoPane:not([hidden]) + #pplFooter{margin-top:14px}
#pplFooter .pplopt{display:block;margin:8px 0}
#pplFooter select{max-width:100%;width:100%}
#pplMain{flex:1;overflow-y:auto;padding:16px 20px;min-width:0}
.pplwall{display:flex;flex-wrap:wrap;gap:14px}
.pplbubble{width:96px;text-align:center;cursor:pointer;font-size:11px}
.pplbubble img{width:84px;height:84px;border-radius:50%;object-fit:cover;background:#111;
  border:2px solid transparent}
.pplbubble:hover img{border-color:var(--acc)}
.pplbubble .nm3{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pplbubble .n{color:var(--dim)}
.pplhead{display:flex;gap:14px;align-items:center;margin-bottom:14px}
/* the way back at the upper left, and the heading of the people in the selection */
.pplnav{margin:-6px 0 8px}
.pplselhead{display:flex;gap:12px;align-items:baseline;margin:-6px 0 12px}
.pplselhead h3{margin:0;font-size:14px}
.pplhead img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#111}
.pplhead input{font-size:16px;font-weight:600;background:transparent;border:0;border-bottom:1px dashed var(--line);color:var(--fg);min-width:120px}
.facegrid{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.facechip{position:relative;width:72px}
.facechip img{width:72px;height:72px;border-radius:8px;object-fit:cover;background:#111;cursor:pointer;display:block}
.facechip.sug img{outline:2px dashed var(--acc);outline-offset:-2px}
.facechip .fx{position:absolute;top:2px;right:2px;display:none;background:#000c;border:0;color:#fff;
  border-radius:50%;width:20px;height:20px;font-size:11px;line-height:1;cursor:pointer}
.facechip:hover .fx{display:block}
.facechip .yn{display:flex;gap:4px;justify-content:center;margin-top:3px}
.facechip .yn button{padding:1px 9px;font-size:11px}
/* Ignore and Not a face, in words under a chip (2026-10-12) */
.facechip .acts{display:flex;flex-direction:column;gap:2px;margin-top:3px}
.facechip .acts button{padding:1px 2px;font-size:10px;line-height:1.2;width:100%;white-space:normal}
/* a person's page split by the selection: in the selection, then in other photos (2026-10-13) */
.pplgroup{margin:2px 0 0 10px}
.pplgroup h5{margin:4px 0;font-size:12px;font-weight:600;color:var(--fg)}
.pplgroup .hint{margin:4px 0 12px}
.pplreview .grp{color:var(--dim);font-size:12px;margin:0 0 8px}
.pplrevnext h4{font-size:16px;margin:0 0 6px}
.pplsetaside{color:var(--dim);font-size:12px;margin:10px 0 0}
.pplsetaside button{font-size:12px;padding:1px 6px}
.pplclusterhead{display:flex;gap:8px;align-items:center;margin:14px 0 4px}
.pplclusterhead input{flex:1;max-width:260px}
#pplRight{width:300px;flex:none;border-left:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px;font-size:12px;display:flex;flex-direction:column}
#pplRight[hidden]{display:none}
#pplPhotoPane[hidden]{display:none}
#pplPhotoBox{position:relative;background:#111;border-radius:6px;overflow:hidden}
#pplPhotoCv{display:block;width:100%}
#pplPhotoBar{color:var(--dim);margin:6px 2px;font-size:11px}
#pplPhotoFaces{display:flex;flex-wrap:wrap;gap:6px}
#pplPhotoFaces .facechip{width:56px}
#pplPhotoFaces .facechip img{width:56px;height:56px}
.pplreview{max-width:520px;margin:30px auto;text-align:center}
.pplreview img{width:180px;height:180px;border-radius:12px;object-fit:cover;background:#111}
.pplreview .q{font-size:16px;margin:12px 0}
.pplreview .yn button{font-size:14px;padding:6px 18px;margin:0 6px}
.facebox{position:absolute;border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 1px #0008}
.facebox.sug{border-style:dashed;border-color:var(--acc)}
.facebox.known{border-color:#8aff9a}
.facebox .fname{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:2px;
  background:#000c;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;white-space:nowrap}
.facebox input{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:2px;
  font-size:10px;width:90px}

.facechip.picked img{outline:3px solid var(--acc);outline-offset:-3px}

.facebox.sel{border-width:3px;border-color:var(--acc);box-shadow:0 0 0 2px #0009, 0 0 14px var(--acc);
  animation:facepulse .9s ease-out 1;z-index:2}
@keyframes facepulse{0%{box-shadow:0 0 0 8px #4a9eff88, 0 0 20px var(--acc)}100%{box-shadow:0 0 0 2px #0009, 0 0 14px var(--acc)}}
.facebox.sel .fname{background:var(--acc)}

#pplPhotoFaces .facechip{width:68px}
#pplPhotoFaces .facechip img{width:68px;height:68px}
#pplPhotoFaces input.hypo{border:1px dashed var(--acc);color:var(--acc);font-style:italic}

.pplphotos{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.pplphoto{width:120px;font-size:10px;color:var(--dim)}
.pplphoto img{width:120px;height:120px;object-fit:contain;background:#111;border-radius:8px;cursor:pointer;display:block}
.pplphoto img:hover{outline:2px solid var(--acc);outline-offset:-2px}
.pplphoto .nm4{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

/* People's photo view: one photograph, large, its faces boxed and named on it (app.js renderPplPhoto) */
#pplMain.photo{display:flex;flex-direction:column;overflow:hidden;padding:10px 14px}
#pplPhotoView{flex:1;display:flex;flex-direction:column;min-height:0}
.pplphotohead{display:flex;gap:12px;align-items:baseline;margin-bottom:8px;flex:none}
.pplphotohead .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pplphotohead .hint{color:var(--dim);font-size:11px;margin-left:auto}
#pplPicWrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#pplPic{position:relative;background:#111;cursor:crosshair;touch-action:none;user-select:none}
#pplBigCv{display:block;width:100%;height:100%}
.pplbox{position:absolute;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 1px #0008;cursor:pointer}
.pplbox:hover,.pplbox:focus-visible{border-color:var(--acc);outline:none}
.pplbox.known{border-color:#8aff9a}
.pplbox.sug{border-style:dashed;border-color:var(--acc)}
.pplbox.ign{border-color:#888;border-style:dotted;opacity:.7}
.pplbox.sel{border-width:3px;border-color:var(--acc);box-shadow:0 0 0 2px #0009, 0 0 14px var(--acc);z-index:3}
.pplbox.drawing{border-style:dashed;border-color:var(--acc);pointer-events:none;cursor:crosshair}
.pplboxname{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:3px;
  background:#000c;color:#fff;font-size:11px;padding:1px 7px;border-radius:4px;white-space:nowrap;pointer-events:none}
.pplbox.sug .pplboxname{font-style:italic}
.pplbox.sel .pplboxname{display:none}
.pplfaceedit{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:4px;z-index:4;
  display:flex;flex-wrap:wrap;gap:4px;justify-content:center;width:max-content;max-width:280px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px;cursor:default;
  box-shadow:0 4px 14px #0009}
.pplfaceedit.above{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}
.pplfaceedit input{width:150px}
.pplfaceedit input.hypo{border:1px dashed var(--acc);color:var(--acc);font-style:italic}
.pplfaceedit button{font-size:11px;padding:2px 8px}

.facebox{cursor:pointer;pointer-events:auto}
.facebox:hover{border-color:var(--acc)}

/* the filter bar stays ONE line: scroll sideways when crowded, never wrap or grow */
#filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#filters button,#filters select{flex:none}
#filters button{padding:3px 8px;font-size:11px}

#metaFilters{display:inline-flex;flex:none;gap:6px}
.metaf{flex:none}
#filters label{flex:none}

#count{white-space:nowrap;flex:none}
/* the Thumbnails slider, Lightroom's: a plain range in the bar's own line, so the bar's
   sideways scroll cannot clip it (its tooltip is the native title, drawn by the browser) */
#thumbSizeWrap{display:inline-flex;align-items:center;gap:6px}
#thumbSize{width:84px;margin:0;accent-color:var(--acc);vertical-align:middle}

#fPerson,#fTag{max-width:140px}

/* ---- Merge module ---- */
#merge{flex:1;display:flex;flex-direction:row;min-height:0}
#mrgLeft{width:250px;flex:none;border-right:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px 12px;font-size:12px}
#mrgLeft #mergeKind{display:flex;flex-direction:column;gap:5px;margin:10px 0}
#mrgLeft #panoOpts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
#mrgLeft #panoOpts select{width:100%}
#mrgLeft #mergeGo{width:100%;font-weight:600}
#mrgLeft #mergeInfo{display:block;margin-top:8px;color:var(--dim)}
#mrgMain{flex:1;overflow-y:auto;padding:16px 20px;min-width:0}
#mrgSel{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.mrgthumb{position:relative;width:64px}
.mrgthumb img{width:64px;height:64px;object-fit:contain;background:#111;border-radius:6px;display:block}
.mrgthumb .fx{position:absolute;top:1px;right:1px;display:none;background:#000c;border:0;color:#fff;
  border-radius:50%;width:18px;height:18px;font-size:11px;cursor:pointer}
.mrgthumb:hover .fx{display:block}

/* ---- Slideshow options ---- */
#slideshow{flex-direction:row}
#ssmain{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
#ssStage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  background:#000;min-height:0;overflow:hidden}
#ssStage:fullscreen{background:#000}
#ssCv{max-width:100%;max-height:100%}
#ssCaption{position:absolute;left:14px;bottom:12px;background:#000a;color:#fff;
  padding:3px 10px;border-radius:5px;font-size:12px}
#ssOpts{width:230px;flex:none;border-left:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px 12px;font-size:12px}
.ssrow{display:block;margin:8px 0}
.ssrow select{width:100%;margin-top:2px}
.ssrow .hint2{display:block;color:var(--dim);font-size:10px}
#ssMusic{width:100%}

#webOpts{width:230px;flex:none;border-right:1px solid var(--line);background:var(--panel);
  overflow-y:auto;padding:10px 12px;font-size:12px}
#webOpts input{width:100%}
#webPreviewWrap{flex:1;display:flex;min-height:0}
#webPreview{flex:1;border:0;background:#101012}
#ssmain > #webPreviewWrap:not([hidden]) ~ #ssStage{display:none}

/* the controls are a BAR below the stage, not a float over the photo — the
 * caption owns the bottom-left of the image, the controls own their own row */
#ssControls{position:static;display:flex;gap:8px;justify-content:center;align-items:center;
  padding:8px;border-top:1px solid var(--line);background:var(--panel);flex:none}

.sspair{display:flex;gap:6px;margin-top:2px}
.sspair input[type=number]{flex:1;min-width:0}
.sspair input[type=color]{width:34px;height:26px;padding:1px;border:1px solid var(--line);border-radius:4px;background:#26262b}

.pvtoggle{display:flex;margin-bottom:10px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.pvtoggle button{flex:1;border:0;border-radius:0;background:transparent;padding:5px 0;font-size:12px}
.pvtoggle button.on{background:var(--acc-on);color:#fff}
.ssrow.dim{opacity:.4;pointer-events:none}
.settingsrow{display:flex;gap:6px;padding:4px 0}.settingsrow button{flex:1;font-size:11px;padding:4px 0}

#followNav{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:10px 0}
.fstep{border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:11.5px;background:transparent;opacity:.75}
.fstep.done{opacity:.45}
.fstep.on{opacity:1;outline:2px solid var(--acc)}
.fstep.sp-camera{border-bottom:3px solid #4a8fd0}
.fstep.sp-linear{border-bottom:3px solid #4ac0d0}
.fstep.sp-srgb{border-bottom:3px solid #e0a04a}
.farr{color:var(--dim);font-size:11px}
#followMain{display:flex;gap:18px;align-items:flex-start}
#followSide{width:290px;flex:none}
#followSide .row{display:flex;gap:8px;margin-bottom:10px}
#followSide h3{margin:.2em 0 .5em;font-size:14px}
#followCv{max-width:calc(100% - 320px);height:auto;border-radius:5px;background:#000}
#followCv.pix{image-rendering:pixelated}

/* the Follow tab's copy of the pipeline graph: compact, with the step in view lit */
#followGraph{display:flex;align-items:stretch;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:4px}
#followGraph .hnode{font-size:10.5px;padding:4px 7px}
#followGraph .hnode .ctl{display:none}
#followGraph .hnode{cursor:default}
#followGraph h3{font-size:11px}
.hnode.now{outline:2px solid var(--acc);opacity:1 !important;box-shadow:0 0 10px color-mix(in srgb, var(--acc) 55%, transparent)}

#aiColl .aisearch input{width:100%;box-sizing:border-box;margin-bottom:6px;font-size:12px;padding:4px 7px}
#aiColl h4.sec{margin:8px 0 2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
#aiColl .src .x{margin-left:6px;cursor:pointer;color:var(--dim)}
#aiColl button.quiet{width:100%;margin:2px 0 6px}
.aichip{width:20px;height:20px;border-radius:50%;object-fit:cover;margin-right:6px;vertical-align:-5px}
#aiColl .src{display:flex;align-items:center}
#aiColl .src span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiColl .aimodel select{width:100%;font-size:11px;margin-bottom:6px}

#aboutBox{border:1px solid var(--line);border-radius:10px;background:var(--bg,#1a1a1e);color:inherit;
  max-width:380px;padding:18px 20px;box-shadow:0 12px 40px #000a}
#aboutBox::backdrop{background:#0008}
#aboutBox h3{margin:0 0 8px}
#aboutBox p{font-size:12.5px;line-height:1.5;margin:.5em 0}
#aboutBox .ver{color:var(--dim);font-size:11px}
#aboutBox .row{display:flex;gap:8px;margin-top:10px}
/* Copy Settings / Synchronize Settings (2026-10-06): two columns where they fit, one on a
   phone, and the list scrolls inside the dialog rather than pushing its buttons away */
#copySettings{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:16px 18px;box-shadow:0 12px 40px #000a;
  box-sizing:border-box;flex-direction:column}
#copySettings[open]{display:flex}
#copySettings::backdrop{background:#0008}
#copySettings h3{margin:0}
#copySettings #csFrom{margin:2px 0 8px;font-size:11.5px;color:var(--dim);overflow-wrap:anywhere}
#csGroups{overflow-y:auto;min-height:0;flex:1 1 auto;columns:2 210px;column-gap:20px;padding:2px}
#csGroups fieldset{break-inside:avoid;border:0;margin:0 0 8px;padding:0;min-width:0}
#csGroups label{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.75;cursor:pointer}
#csGroups label.cshead{font-weight:600}
#csGroups label.csitem{padding-left:20px}
#copySettings .csfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
#copySettings .csfoot .spacer{flex:1}
#copySettings #csOk{min-width:96px}
#copySettings .csname{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;margin:0 0 10px}
#copySettings .csname[hidden]{display:none}
#copySettings .csname input{flex:1 1 200px;min-width:0}
#libPreset{flex:1 1 auto;min-width:0}
#cardMenu .msep{height:1px;background:var(--line);margin:4px 6px}
#cardMenu .mhead{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;padding:4px 12px 2px}
#cardMenu #cardPresets .hint{display:block}
/* Synchronize Folder (2026-10-10): the card's badge, the folder's count, its menu and dialog */
.card .missing{position:absolute;left:4px;bottom:22px;font-size:10px;padding:0 4px;border-radius:3px;
  background:#a33;color:#fff;pointer-events:none}
.fnode .fnew{margin-left:6px;font-size:10px;padding:0 4px;border-radius:3px;background:var(--accent,#4a9eff);color:#fff;cursor:pointer}
#folderMenu{position:fixed;z-index:8;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 8px 24px #0008;padding:4px;min-width:180px}
#folderMenu button{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:6px 10px;border-radius:4px}
#folderMenu button:hover{background:var(--line)}
#syncDialog{position:fixed;top:56px;left:50%;transform:translateX(-50%);margin:0;z-index:8;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;
  width:min(480px,calc(100vw - 32px));padding:16px 18px;box-shadow:0 12px 40px #000a;box-sizing:border-box}
#syncDialog h3{margin:0;display:flex;align-items:center;gap:8px}
#syncDialog #syncWhat{margin:2px 0 8px;font-size:11.5px;color:var(--dim);overflow-wrap:anywhere}
#syncDialog .syncopt{display:flex;gap:6px;align-items:center;margin-top:10px;font-size:12.5px}
#syncDialog .csfoot{display:flex;gap:8px;align-items:center;margin-top:12px}
#syncDialog .csfoot .spacer{flex:1}
/* People > Measure recognition (2026-10-12): not modal, so its ? sheet opens above it */
#pplMeasureBox{position:fixed;top:56px;left:50%;transform:translateX(-50%);margin:0;z-index:8;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;
  width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 80px);overflow:auto;padding:16px 18px;
  box-shadow:0 12px 40px #000a;box-sizing:border-box}
#pplMeasureBox h3{margin:0 0 6px;display:flex;align-items:center;gap:8px}
#pplMeasureBox p{margin:6px 0;font-size:12.5px;line-height:1.45}
#pplMeasureBox .pmtable{border-collapse:collapse;font-size:12px;margin:8px 0;font-variant-numeric:tabular-nums}
#pplMeasureBox .pmtable th,#pplMeasureBox .pmtable td{padding:2px 10px 2px 0;text-align:right}
#pplMeasureBox .pmtable th:first-child,#pplMeasureBox .pmtable td:first-child{text-align:left}
#pplMeasureBox .csfoot{display:flex;gap:8px;align-items:center;margin-top:12px}
#pplMeasureBox .csfoot .spacer{flex:1}
/* Read a Lightroom catalog (2026-10-10): not modal, above the page and below the ? sheet */
#lrcatDialog{position:fixed;top:56px;left:50%;transform:translateX(-50%);margin:0;z-index:8;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;
  width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 80px);padding:16px 18px;box-shadow:0 12px 40px #000a;
  box-sizing:border-box;flex-direction:column;overflow:hidden}
#lrcatDialog[open]{display:flex}
#lrcatDialog h3{margin:0;display:flex;align-items:center;gap:8px}
#lrcatDialog #lcWhat{margin:2px 0 8px;font-size:11.5px;color:var(--dim);overflow-wrap:anywhere}
#lcBody{overflow-y:auto;min-height:0;flex:1 1 auto;font-size:12.5px;line-height:1.5}
#lcBody ul{margin:0 0 8px;padding-left:18px}
#lcBody li.warn{color:var(--warn,#e0a040)}
#lcBody h4{margin:10px 0 4px;font-size:12.5px}
#lcBody .lcpath{overflow-wrap:anywhere;font-family:ui-monospace,monospace;font-size:11.5px}
#lcBody .lcimport{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
#lcBody .lcimport label{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 260px}
#lcBody .lcimport input{flex:1 1 200px;min-width:0}
#lcBody .lcpick{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#lrcatDialog .csfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
#lrcatDialog .csfoot .spacer{flex:1}
#infoLr .lrtake{margin-left:6px;font-size:11px}

#manageWrap{position:relative;display:inline-block}
/* FIXED, placed from the button when it opens: #filters scrolls sideways and so clips anything
   that hangs below it, and an absolute menu inside it was never visible (2026-10-03) */
#manageMenu,#cardMenu,#presetMenu{position:fixed;z-index:40;background:var(--bg,#1a1a1e);overflow-y:auto;
  border:1px solid var(--line);border-radius:8px;padding:4px;min-width:250px;box-shadow:0 8px 26px #000a}
#manageMenu button,#cardMenu button,#presetMenu button{display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 10px;border-radius:5px;font-size:12px}
#manageMenu button:hover,#manageMenu button:focus-visible,#cardMenu button:hover,#cardMenu button:focus-visible,
#presetMenu button:hover,#presetMenu button:focus-visible{background:#ffffff14}
#manageMenu .hint,#cardMenu .hint{display:block;font-size:10.5px;color:var(--dim);white-space:normal}
#manageMenu .mhead{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 2px}
#manageMenu .msep{height:1px;background:var(--line);margin:4px 6px}
#manageMenu .mfoot{font-size:10.5px;color:var(--dim);padding:6px 10px 4px;border-top:1px solid var(--line);margin-top:4px;line-height:1.4}
#manageMenu .mfoot:empty{display:none}
#manageMenu label.mrow{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:12px}
#manageMenu label.mrow select{flex:1;min-width:0}
#manageMenu label.mrow button.ask{display:inline-block;width:auto;margin-left:auto;padding:0 6px;border:1px solid var(--line)}
/* the library's notices, above the grid: a sentence and what can be done about it */
#libNotices{display:flex;flex-direction:column;gap:6px;padding:0 10px}
#libNotices:empty{display:none}
#libNotices .notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;padding:8px 12px;
  border:1px solid var(--line);border-left:3px solid var(--acc,#4a9eff);border-radius:6px;font-size:12px;line-height:1.45}
#libNotices .notice.warn{border-left-color:#e0a030}
#libNotices .notice p{margin:0;flex:1 1 40ch;white-space:pre-line}
#libNotices .notice .acts{display:flex;gap:6px;flex-wrap:wrap}
#libNotices .notice button{font-size:11.5px;padding:3px 10px}
/* what of a photograph's Lightroom edit did not come across: quiet, under its metadata */
#infoLr{font-size:10.5px;color:var(--dim);margin:2px 0 6px;line-height:1.35}
#aboutBox a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
#aboutBox a:hover{filter:brightness(1.2)}
.modes-aux{margin-right:6px}
.modes-aux button{opacity:.85}
#ssCaption{white-space:pre-line}
h4.sec button.autotone{float:right;font-size:10.5px;padding:1px 9px;margin-top:-2px}
.aisearch{display:flex;gap:4px;align-items:center}
.aisearch input{flex:1}
/* a photo whose original could not be read: the card says so rather than letting
   the previous photo stand in for it */
.openerr{position:absolute;top:6px;left:6px;background:#a8261c;color:#fff;font:700 10px/1.5 system-ui;
         width:16px;height:16px;text-align:center;border-radius:50%;z-index:4;cursor:help}
.openerr ~ .vcopy{left:28px}          /* the two badges share a corner */
.vcopy{position:absolute;top:6px;left:6px;background:#000a;color:#cfd3da;font-size:10px;padding:1px 6px;border-radius:4px;z-index:3}
.card{position:relative}

.timehead{grid-column:1 / -1;font-size:12px;color:var(--dim);text-transform:none;
  border-bottom:1px solid var(--line);padding:10px 2px 4px;margin-top:6px}
.scorebadge{position:absolute;top:6px;right:6px;background:#000a;color:#ffd479;
  font-size:10.5px;padding:1px 7px;border-radius:4px;z-index:3}
.lutlist .p{display:flex;align-items:center;padding:3px 6px;border-radius:5px;cursor:pointer}
.lutlist .p.cur{background:#ffffff14}
.lutlist .p span:first-child{flex:1}
.looks button{width:100%;margin-top:6px}

/* burst merges: the score bar is the argument in the lucky case, so it is drawn */
#burstOpts{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px;
  font-size:12px;color:var(--dim)}
#burstOpts label{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#burstOpts input[type=range]{flex:1 1 90px;min-width:70px}
/* the value goes on its own line rather than being clipped by a narrow sidebar */
#burstOpts .val{flex:1 1 100%;color:var(--ink);font-variant-numeric:tabular-nums}
.mrow .sbar{flex:1 1 90px;height:6px;background:#26262c;border-radius:3px;overflow:hidden;
  align-self:center;margin-left:10px}
.mrow .sfill{height:100%;background:linear-gradient(90deg,#2c6fbb,#4a9eff)}
.mrow .keep{color:#4fb45f}
.mrow .drop{color:#a8825a}

/* The depth overlay's view menu. One button opens it; the view that is showing is
   lit, and clicking it again puts the overlay away. */
.depthmenu {
  position: fixed; z-index: 60; min-width: 15rem;
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px; border-radius: 7px;
  background: var(--panel, #23262b);
  border: 1px solid var(--line, #3a3f46);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}
.depthmenu .depthitem {
  text-align: left; padding: 6px 9px; border: 0; border-radius: 4px;
  background: transparent; color: var(--fg, #dfe3e8);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.depthmenu .depthitem:hover { background: var(--hover, #31363d); }
.depthmenu .depthitem.on { background: var(--accent, #3b6ea5); color: #fff; }

/* The caret that opens the depth view menu, beside the toggle that shows it. */
.lbpick.depthcaret { padding-left: 3px; padding-right: 3px; margin-left: -3px; opacity: .75; }
.lbpick.depthcaret:hover { opacity: 1; }
.depthmenu .depthitem.depthoff { border-top: 1px solid var(--line, #3a3f46); margin-top: 3px; padding-top: 7px; }


/* ---- the small NLE ------------------------------------------------------- */
#edit { display: flex; gap: 14px; height: 100%; }
#nleLeft { width: 260px; flex: 0 0 260px; overflow: auto; }
#nleMain { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 8px; }
#nleView { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#nleCv { max-width: 100%; max-height: 100%; background: #111; }
#nleClips .nleclip { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px;
  border: 1px solid var(--line, #333); border-radius: 4px; margin-bottom: 4px; cursor: pointer; }
#nleClips .nleclip:hover { background: rgba(255,255,255,.06); }
#nleClips .nleclip span.n { opacity: .6; }
/* the ruler is its own strip so a click that moves the playhead cannot be mistaken
   for a click that selects or drags a segment */
#nleRuler { height: 18px; position: relative; background: rgba(255,255,255,.04);
  border-radius: 3px; cursor: ew-resize; }
#nleHead { position: absolute; top: 0; bottom: -76px; width: 2px; background: #ff5c5c;
  pointer-events: none; z-index: 3; }
#nleStrip { height: 72px; position: relative; background: rgba(255,255,255,.03);
  border-radius: 4px; overflow: hidden; }
#nleStrip .seg { position: absolute; top: 4px; bottom: 4px; box-sizing: border-box;
  border: 1px solid #4a6fa5; background: linear-gradient(#2c3e56, #223146);
  border-radius: 3px; overflow: hidden; cursor: grab; font-size: 11px; padding: 4px 6px; }
#nleStrip .seg.sel { border-color: #ffd36a; box-shadow: inset 0 0 0 1px #ffd36a; }
#nleStrip .seg .lbl { pointer-events: none; opacity: .9; }
#nleStrip .seg .sub { pointer-events: none; opacity: .55; font-size: 10px; }
/* the trim handles are their own hit targets, which is what makes a drag on the body
   mean "reorder" and a drag on the edge mean "trim" without a modifier key */
#nleStrip .seg .grip { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize;
  background: rgba(255,255,255,.10); }
#nleStrip .seg .grip.l { left: 0; }
#nleStrip .seg .grip.r { right: 0; }
#nleStrip .drop { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd36a; z-index: 2; }


/* ------------------------------------------------------- narrow windows
 *
 * There were no media queries at all, and Develop holds 535px of fixed chrome (a 225px
 * left panel, a 310px right one) on top of the viewer's padding, with the Library at
 * 480px. Below about 1100px the photograph became a sliver, and below 900px there was
 * barely a picture left: the app was usable only on a wide screen, in a book whose
 * readers arrive on whatever they have.
 *
 * Nothing here touches the wide layout, so the measurements the grid gate makes at the
 * default size are unchanged. Each step gives the picture back the space that costs the
 * least: first the panels narrow, then the left-hand column goes (its presets, snapshots
 * and history are reachable from the panels and the keyboard), then the grid's cards
 * shrink rather than falling to one per row.
 */
@media (max-width: 1180px) {
  #leftpanel { width: 180px; }
  #panel { width: 268px; }
  #viewer { padding: 8px; }
  #libleft { width: 170px; }
  #info { width: 220px; }
}

@media (max-width: 980px) {
  /* the left column first: everything in it has another route */
  #leftpanel, #libleft { display: none; }
  #panel { width: 244px; }
  /* the header wraps rather than clipping the status line, which is the app's only
   * channel for saying anything */
  #bar { flex-wrap: wrap; row-gap: 6px; }
  /* the progress pill takes leftover room only, so it never makes the bar wrap when it appears */
  #progress { flex: 1 1 0; }
  #status { flex: 1 1 0; width: auto; }
}

@media (max-width: 720px) {
  #info { display: none; }
  #panel { width: 210px; }
  #grid { gap: 8px; padding: 8px; }
}

/* For a name that a screen reader needs and the page does not show: the page's own
   heading, which a document without one leaves a reader guessing about (plan F2). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* NOTHING SMALLER THAN 10 px (plan F4). Seven rules were at 9 or 9.5: the version
 * superscript, a panel's "soon" tag, the pipeline node's space label, the regime strip,
 * the cull badges, the folder tree's twisty and the virtual-copy tag. The book's own
 * figure rule is a 10 pt floor and bumps anything under it; type in the app that its
 * author cannot read is not a style, it is a defect.
 *
 * A DRAG ON A TOUCHSCREEN IS A SCROLL UNLESS YOU SAY OTHERWISE (plan F4).
 * Every surface here is dragged: the picture (pan, crop, masks, the remove brush), the
 * overlay it is drawn on, the histogram, the timeline strip and the stack. With the
 * default touch-action the browser takes the gesture for panning or pinch-zoom and the
 * tool gets a pointerdown and then nothing, which reads as a broken tool rather than as
 * a page that scrolled. `none` on the surfaces that interpret drags themselves; the
 * panels around them scroll as usual. */
#cv, #ov, #viewer, #loupeCv, #stack, #nleStrip, #nleCv,
#sliders canvas, #panel canvas {          /* the histogram, the curve and the wheels */
  touch-action: none;
}

/* tag rules, in the Library's left pane (app.js drawTagRules) */
#tagRules .tagrule{gap:4px}
#tagRules .tagrule button{padding:0 5px;font-size:11px}
#tagRules .tagunsure{color:#e0c04a}
#tagRules .tagerr{color:#e2585d;margin-left:auto;font-size:11px}
#tagRules .tagform input{width:100%;box-sizing:border-box;margin:3px 0}
#tagRules .tagform .hint:empty{display:none}

/* the Tags module: an editor on the left, the saved rules and their counts on the right */
#tagsBody{flex:1;min-height:0;display:flex;flex-direction:row}
#tagsEdit{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px 12px;gap:8px}
.tagsbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tagsbar h4{margin:0 8px 0 0}
#tagsState.dirty{color:#e0c04a}
#tagsEditor{flex:1;min-height:0;display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#141416}
#tagsGutter,#tagsText{font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;padding:8px 6px}
#tagsGutter{flex:none;width:8ch;box-sizing:content-box;overflow:hidden;color:#6c6c72;text-align:left;border-right:1px solid var(--line);user-select:none;white-space:pre}
#tagsText{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;color:var(--fg);white-space:pre;overflow:auto;tab-size:2}
#tagsErrors{max-height:22%;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
#tagsErrors .tagserr{text-align:left;color:#e2585d;background:transparent;border:0;padding:2px 4px;font-size:12px;cursor:pointer}
#tagsErrors .tagswarn{color:#d9a43a}
#tagsRight{width:360px;flex:none;border-left:1px solid var(--line);background:var(--panel);padding:10px 12px;overflow-y:auto}
#tagsResults .tagsrow{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;padding:3px 4px;border-radius:4px}
/* the rules that hold for the photographs selected in the navigator: all, some, or only unsure */
#tagsResults .tagsrow.sel-all{background:#1e3527;box-shadow:inset 3px 0 #5cc27e}
#tagsResults .tagsrow.sel-some{background:#1a2a20;box-shadow:inset 3px 0 #3f8f5a}
#tagsResults .tagsrow.sel-unsure{box-shadow:inset 3px 0 #e0c04a}
#tagsResults .tagsrow.cur{background:#26303a}
#tagsResults .tagsrow .tagsel{flex-basis:100%;font-size:11px;color:#8fd3a2;padding-left:2px}
#tagsResults .tagsrow.sel-unsure .tagsel{color:#e0c04a}
#tagsGutter .gl.sel-all{background:#1e3527;color:#a8e2b9}
#tagsGutter .gl.sel-some{background:#1a2a20;color:#8fd3a2}
#tagsGutter .gl.sel-unsure{color:#e0c04a}
#tagsResults .tagsrow .nm2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tagsResults .tagsrow button{padding:1px 6px;font-size:11px}
#tagsResults .tagunsure:not(:disabled){color:#e0c04a}

/* ---- the assistant (lib/assistant-panel.js): built only on this machine ---- */
/* shrinks before the bar would scroll sideways (check_responsive at 1000 px) */
#askBox{flex:0 1 240px;min-width:30px;margin:0}
#askInput{width:100%;min-width:0;box-sizing:border-box;background:#1f1f22;color:var(--fg);border:1px solid var(--line);
  border-radius:5px;padding:4px 8px;font:inherit}
#assistant{position:fixed;right:0;top:46px;bottom:0;width:min(400px,100vw);z-index:40;display:flex;
  flex-direction:column;background:var(--panel);border-left:1px solid var(--line);box-shadow:-6px 0 18px #0006}
#assistant[hidden]{display:none}
/* the workspace makes room rather than hiding under the panel, so the sliders the assistant moves stay in view */
body.asking main{margin-right:min(400px,100vw)}
#assistant .ahead{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line)}
#assistant .ahead .spacer{flex:1}
#assistant .aconsent{display:flex;gap:8px;align-items:flex-start;padding:8px 10px 2px;cursor:pointer}
#assistant .aconsent input{margin-top:3px}
#assistant .asends{color:var(--dim);font-size:12px;padding:2px 10px 8px 32px;border-bottom:1px solid var(--line)}
#assistant .alog{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
#assistant .auser{align-self:flex-end;background:#2f3a4a;border-radius:8px;padding:6px 9px;max-width:85%;white-space:pre-wrap}
#assistant .abot p{margin:0 0 6px}
#assistant .abot ul{margin:0 0 6px;padding-left:18px}
#assistant .abot a{color:var(--acc)}
#assistant .atool{color:var(--dim);font-size:12px;padding-left:10px;border-left:2px solid var(--line)}
#assistant .atool.err{border-left-color:#c86}
#assistant .aprog{color:var(--dim);font-size:12px;padding-left:12px;font-variant-numeric:tabular-nums}
#assistant .anote{color:#d9b36a;font-size:12px}
#assistant .anote.err{color:#e58080}
#assistant .alinks{font-size:12px;color:var(--dim);padding-left:12px}
#assistant .alinks a{color:var(--acc)}
#assistant .ausage{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;border-top:1px dashed var(--line);padding-top:3px}
#assistant .abtns{display:flex;gap:6px}
#assistant .afoot{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);margin:0}
#assistant .afoot textarea{flex:1;resize:none;background:#1f1f22;color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:5px;font:inherit}
#assistant .afoot button.stop{background:#6a2a2a;border-color:#8a3a3a}

/* what a rating, flag or label key just set, over the picture, as Lightroom shows it
 * (metaFlash, 2026-10-12): in at once, out over a third of a second */
#metaFlash{position:fixed;transform:translate(-50%,-50%);z-index:70;pointer-events:none;
  background:rgba(18,18,20,.82);color:#f2f2f2;border:1px solid #ffffff22;border-radius:8px;
  padding:9px 18px;font:600 15px/1.3 inherit;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 4px 18px #0008;opacity:0;visibility:hidden}
#metaFlash.on{opacity:1;visibility:visible}
#metaFlash.off{opacity:0;visibility:visible;transition:opacity .35s ease,visibility 0s .35s}
@media (prefers-reduced-motion:reduce){#metaFlash.off{transition:none}}