/* ═══════════════════════════════════════════════════════════════════
   Gusta Photo - theme tokens and layout.
   Two themes: dark (default) and light via [data-theme='light'] on
   <html>. Components read tokens only, never color literals.
   Shell: the family's hybrid look - rounded trays around a canvas well.
   Cyan (the mark's first stop) = your tools. Apricot = everything Gusta
   did or offers. Surfaces near the photo are exact grays (R = G = B) so
   the chrome never tints how the photo reads. Nothing saturated touches
   the photo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #111111;
  --surface: #191919;
  --surface2: #212121;
  --surface3: #2a2a2a;
  --border: #303030;
  --text: #ececec;
  --text-dim: #a8a8a8;
  --text-faint: #8a8a8a;      /* 4.6:1 on --surface2, 5.1:1 on --surface */
  --accent: #19e2dc;          /* the mark's cyan */
  --accent-dim: #12b5b0;
  --accent-bg: rgba(25, 226, 220, 0.12);
  --on-accent: #032826;
  --danger: #ff5d5d;
  --gusta: #ffb45e;
  --gusta-dim: #d98f3c;
  --gusta-bg: rgba(255, 180, 94, 0.13);
  --on-gusta: #2a1603;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --well: #0b0b0b;
  --well-gray: #76787e;     /* the mid-gray surround option */

  /* data colors */
  --hist-r: rgba(255, 92, 92, 0.75);
  --hist-g: rgba(92, 220, 120, 0.75);
  --hist-b: rgba(96, 140, 255, 0.75);
  --hist-blend: screen;
  --hist-zone: rgba(25, 226, 220, 0.16);
  --clip-lo: #3d7bff;
  --clip-hi: #ff4d4d;
  --wb-cool: #4f8dff;
  --wb-warm: #ffc94a;
  --wb-green: #4fd36b;
  --wb-magenta: #e05ad6;
  --curve-r: #ff6b6b;
  --curve-g: #5fd37a;
  --curve-b: #6b95ff;
  --overlay-line: rgba(255, 255, 255, 0.92);
  --overlay-shade: rgba(0, 0, 0, 0.55);
  --overlay-grid: rgba(255, 255, 255, 0.35);
  --mask-pin: #ff6060;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --tray-gap: 6px;
  --btn-h: 30px;
  --rail-w: 44px;
  --dock-w: 312px;
  --gusta-w: 320px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-theme='light'] {
  --bg: #ececec;
  --surface: #f7f7f7;
  --surface2: #ffffff;
  --surface3: #e5e5e5;
  --border: #d4d4d4;
  --text: #1f1f1f;
  --text-dim: #5c5c5c;
  --text-faint: #6e6e6e;      /* 5.1:1 on white */
  --accent: #06747a;          /* 5.5:1 on white */
  --accent-dim: #055c61;
  --accent-bg: rgba(6, 116, 122, 0.10);
  --on-accent: #ffffff;
  --gusta: #9a520c;           /* 5.9:1 on white */
  --gusta-dim: #7a410a;
  --gusta-bg: rgba(194, 106, 18, 0.10);
  --on-gusta: #ffffff;
  --shadow: 0 8px 28px rgba(30, 30, 40, 0.18);
  --well: #d9d9d9;
  --hist-r: rgba(220, 40, 40, 0.55);
  --hist-g: rgba(30, 160, 60, 0.55);
  --hist-b: rgba(40, 80, 220, 0.55);
  --hist-blend: multiply;
  --hist-zone: rgba(6, 116, 122, 0.14);
}

@media (pointer: coarse) {
  :root { --btn-h: 44px; --rail-w: 54px; }
}

/* Copy that only makes sense with a keyboard and mouse, or only on touch. */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .kbd-only { display: none !important; }
  .touch-only { display: inline; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
html, body { height: 100%; margin: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--tray-gap);
  padding: max(var(--tray-gap), env(safe-area-inset-top, 0px)) max(var(--tray-gap), env(safe-area-inset-right, 0px))
    max(var(--tray-gap), env(safe-area-inset-bottom, 0px)) max(var(--tray-gap), env(safe-area-inset-left, 0px));
  font-size: 13px;
  overflow: hidden;
}
body.well-gray { --well: var(--well-gray); }

/* ── Buttons ── */
.btn {
  height: var(--btn-h);
  min-width: var(--btn-h);
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface2);
  color: var(--text);
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface3); }
.btn:disabled { opacity: 0.4; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.icon { padding: 0; width: var(--btn-h); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn.wide { width: 100%; }
.btn.small { height: 24px; padding: 0 8px; font-size: 12px; }
.btn[aria-pressed='true'] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.btn.gusta { border-color: color-mix(in srgb, var(--gusta) 60%, var(--border)); color: var(--gusta); background: var(--gusta-bg); }
.btn.gusta[aria-pressed='true'] { background: var(--gusta); color: var(--on-gusta); border-color: var(--gusta); }
.btn.gusta-solid { background: var(--gusta); border-color: var(--gusta); color: var(--on-gusta); font-weight: 600; }
.btn-text { border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer; padding: 3px 6px; border-radius: var(--r-sm); }
.btn-text:hover { color: var(--text); background: var(--surface3); }
.btn-gusta-mini {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; background: none;
  color: var(--gusta); font-family: inherit; font-weight: 600; font-size: 11px; padding: 3px 7px; border-radius: var(--r-sm); cursor: pointer;
}
.btn-gusta-mini:hover { border-color: var(--gusta); background: var(--gusta-bg); }

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.brand { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 2px; color: var(--accent); }
.brand-name { color: var(--text); font-size: 14px; white-space: nowrap; }
.brand-name b { font-weight: 700; }
.cluster { display: flex; align-items: center; gap: 4px; }
.cluster.seg { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.cluster.seg .btn { border-color: transparent; background: transparent; height: calc(var(--btn-h) - 6px); }
.cluster.seg .btn:hover:not(:disabled) { background: var(--surface3); }
.cluster.seg .btn[aria-pressed='true'] { background: var(--accent-bg); color: var(--accent); }
.zoom-readout { min-width: 52px; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }

/* ── Popovers / dialogs ── */
.export-wrap { position: relative; }
.popover {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; padding: 12px;
  display: grid; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.pop-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 8px; color: var(--text-dim); }
.pop-row select { grid-column: 2 / 4; min-width: 0; }
.pop-check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.pop-note { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.pop-note.warn { color: var(--gusta); }
select {
  height: var(--btn-h); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md); font: inherit; padding: 0 8px;
}
.dialog-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 60; }
.dialog {
  position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 16px; display: grid; gap: 12px;
}
.dialog h2 { margin: 0; font-size: 16px; }
.dialog p { margin: 0; color: var(--text-dim); line-height: 1.5; }
.dialog .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dialog .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.dialog label { display: flex; align-items: center; gap: 8px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12.5px; }
.keys kbd { font: 11px ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap; }

/* ── Workspace ── */
.work {
  display: grid; gap: var(--tray-gap); min-height: 0;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--dock-w);
}
body.gusta-open .work { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--dock-w) var(--gusta-w); }
.rail {
  display: flex; flex-direction: column; gap: 4px; padding: 6px 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.tool {
  width: 100%; aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--r-md);
  background: none; color: var(--text-dim); cursor: pointer; display: grid; place-items: center;
}
.tool:hover { color: var(--text); background: var(--surface3); }
.tool.on { color: var(--accent); background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tool:disabled { opacity: 0.35; cursor: default; }

.stage {
  position: relative; background: var(--well); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; min-width: 0; min-height: 0; touch-action: none;
}
.stage.drop-hover { outline: 2px dashed var(--accent); outline-offset: -8px; }
.stage-host { position: absolute; inset: 0; }
.preview-canvas { position: absolute; left: 0; top: 0; display: block; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.overlay .hit { pointer-events: all; }
.stage[data-tool='hand'], .stage.panning { cursor: grab; }
.stage.grabbing { cursor: grabbing; }
.stage[data-tool='wb'] { cursor: crosshair; }
.stage[data-tool='mask'][data-mask-kind='brush'] { cursor: none; }
.stage-badge {
  position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 600; pointer-events: none;
}
.stage-badge.right { left: auto; right: 10px; }
.gesture-pill {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(10, 11, 14, 0.82); color: #f1f1f5; font: 500 13px ui-monospace, "SF Mono", Menlo, monospace; pointer-events: none;
}
.gesture-list { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 2px; pointer-events: none; }
.gesture-list span { padding: 4px 10px; border-radius: var(--r-sm); background: rgba(10, 11, 14, 0.55); color: #f1f1f5; font-size: 13px; }
.gesture-list span.on { background: rgba(10, 11, 14, 0.9); outline: 1px solid var(--accent); }
.navigator {
  position: absolute; right: 10px; bottom: 10px; padding: 4px; border-radius: var(--r-md);
  background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.navigator canvas { display: block; width: 160px; height: auto; max-height: 120px; border-radius: 3px; }
.nav-rect { position: absolute; border: 1.5px solid var(--accent); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35) inset; pointer-events: none; }
.crop-bar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 6px; border-radius: var(--r-lg); background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow);
  max-width: calc(100% - 24px);
}
.crop-angle { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.crop-angle input { width: 150px; }
.crop-angle output { font-variant-numeric: tabular-nums; min-width: 44px; color: var(--text); }
/* .empty (first run and Home) lives in the "First run, Home, coach" block at the end. */
.busy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-error { position: absolute; inset: auto 12px 12px 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--danger); color: var(--danger); }

/* overlay drawings */
.ov-line { fill: none; stroke: var(--overlay-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ov-grid { fill: none; stroke: var(--overlay-grid); stroke-width: 1; }
.ov-shade { fill: var(--overlay-shade); fill-rule: evenodd; }
.ov-handle { fill: var(--overlay-line); stroke: rgba(0, 0, 0, 0.5); stroke-width: 1; }
.ov-pin { fill: var(--surface2); stroke: var(--mask-pin); stroke-width: 2; }
.ov-pin.on { fill: var(--mask-pin); }
.ov-mask-line { fill: none; stroke: var(--overlay-line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ov-split { stroke: var(--overlay-line); stroke-width: 2; }
.ov-label { fill: #f1f1f5; font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; paint-order: stroke; stroke: rgba(0, 0, 0, 0.6); stroke-width: 3px; }
.ov-brush { fill: none; stroke: var(--overlay-line); stroke-width: 1.5; }
.ov-brush-inner { fill: none; stroke: var(--overlay-line); stroke-width: 1; stroke-dasharray: 3 3; }

/* ── Dock ── */
.dock {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}
.dock-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); }
.dock-tab {
  border: 0; background: none; color: var(--text-dim); font-family: inherit; font-weight: 600; font-size: 12px; padding: 7px 10px;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.dock-tab.on { color: var(--text); border-bottom-color: var(--accent); }
.dock-pane { overflow-y: auto; overflow-x: hidden; padding: 10px 12px 12px; min-height: 0; }
.hist-card { background: var(--well); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; margin-bottom: 4px; }
.hist-wrap { position: relative; }
.histogram { display: block; width: 100%; height: 84px; cursor: ew-resize; touch-action: none; }
.clip-tri { position: absolute; top: 0; width: 16px; height: 16px; border: 0; padding: 0; background: none; cursor: pointer; }
.clip-tri::before { content: ''; position: absolute; top: 2px; border: 6px solid transparent; opacity: 0.45; }
.clip-tri.lo { left: 0; } .clip-tri.lo::before { left: 2px; border-left-color: var(--clip-lo); border-top-color: var(--clip-lo); }
.clip-tri.hi { right: 0; } .clip-tri.hi::before { right: 2px; border-right-color: var(--clip-hi); border-top-color: var(--clip-hi); }
.clip-tri[aria-pressed='true']::before, .clip-tri.warn::before { opacity: 1; }
.hist-zone { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font: 600 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); background: var(--surface2); padding: 1px 7px; border-radius: var(--r-pill); pointer-events: none; }
.hist-clip { color: var(--text-dim); font-size: 11px; min-height: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }

details.sec { border-top: 1px solid var(--border); }
details.sec > summary {
  list-style: none; display: flex; align-items: center; gap: 6px; padding: 9px 0 7px; cursor: pointer; user-select: none;
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform 0.12s; margin: 0 4px 0 2px;
}
details.sec[open] > summary::before { transform: rotate(45deg); }
.sec-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); font-weight: 600; flex: 1; }
.sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sec-body { padding: 0 0 10px; display: grid; gap: 2px; }

.adj-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 2px 0; position: relative; }
.adj-row label { cursor: ew-resize; user-select: none; touch-action: none; }
.adj-val {
  width: 56px; text-align: right; font: 12px ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-dim); padding: 1px 4px;
}
.adj-val:hover { border-color: var(--border); }
.adj-val:focus { border-color: var(--accent); background: var(--surface2); color: var(--text); outline: none; }
.adj-val.changed { color: var(--accent); }
.adj-val.gusta { color: var(--gusta); }
.adj-row input[type=range] { grid-column: 1 / -1; }
.gusta-tick { position: absolute; bottom: 3px; width: 2px; height: 8px; background: var(--gusta); border-radius: 1px; transform: translateX(-1px); pointer-events: none; }
.tool-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dock-foot { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.dock-foot .btn { flex: 1; }
.seg-tabs { display: flex; gap: 2px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; margin-bottom: 6px; }
.seg-tabs button { flex: 1; border: 0; background: none; color: var(--text-dim); font-family: inherit; font-weight: 600; font-size: 11px; padding: 4px 0; border-radius: var(--r-sm); cursor: pointer; }
.seg-tabs button.on { background: var(--surface3); color: var(--text); }
.chan-r.on { color: var(--curve-r) !important; } .chan-g.on { color: var(--curve-g) !important; } .chan-b.on { color: var(--curve-b) !important; }

/* curve editor */
.curve-box { position: relative; background: var(--well); border: 1px solid var(--border); border-radius: var(--r-md); aspect-ratio: 1; touch-action: none; }
.curve-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.curve-hint { color: var(--text-faint); font-size: 11px; margin-top: 4px; }

/* grading wheels */
.wheels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wheel { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.wheel.global { grid-column: 2; }
.wheel-disc {
  width: 100%; max-width: 86px; aspect-ratio: 1; border-radius: 50%; position: relative; touch-action: none; cursor: crosshair;
  background: conic-gradient(from 90deg, #f35, #fa3, #ee3, #4d6, #3cd, #47f, #b4f, #f35); border: 1px solid var(--border);
}
.wheel-disc::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(128,128,128,0.95) 0%, rgba(128,128,128,0.4) 55%, transparent 72%); }
.wheel-puck { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,0.35); transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.wheel input[type=range] { width: 100%; }
.wheel-val { font: 10px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-faint); }

/* looks */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.look { border: 1px solid var(--border); background: var(--surface2); border-radius: var(--r-md); padding: 3px; cursor: pointer; color: var(--text); font-family: inherit; font-size: 10.5px; display: grid; gap: 2px; text-align: center; }
.look canvas { width: 100%; aspect-ratio: 3 / 2; height: auto; border-radius: 3px; display: block; background: var(--well); object-fit: cover; }
.look[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.look-amount { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 6px; color: var(--text-dim); font-size: 12px; }

/* masks pane */
.mask-add { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mask-list { display: grid; gap: 4px; margin: 10px 0; }
.mask-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); cursor: pointer; }
.mask-item.on { border-color: var(--mask-pin); }
.mask-item .k { font: 10px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-dim); text-transform: uppercase; }
.mask-item input.name { min-width: 0; border: 0; background: none; color: var(--text); font: inherit; padding: 2px; }
.mask-item input.name:focus { background: var(--surface); outline: 1px solid var(--accent); }
.mask-empty { color: var(--text-dim); line-height: 1.5; padding: 6px 0; }
/* AI masks: the people row, its progress and the on-device note */
.mask-ai { margin-top: 10px; display: grid; gap: 6px; }
.mask-ai-h { display: flex; align-items: baseline; gap: 8px; }
.mask-ai-h small { color: var(--text-faint); font-size: 11px; }
.mask-note { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
#seg-status { color: var(--text); }
.mask-item.pending .k { color: var(--accent); }
@media (pointer: coarse) { .mask-add .btn.small { height: 40px; } }
.mini-icon { width: 24px; height: 24px; border: 0; background: none; color: var(--text-dim); border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; }
.mini-icon:hover { color: var(--text); background: var(--surface3); }
.mini-icon[aria-pressed='false'] { opacity: 0.45; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
/* an on/off switch for your own tools (teal; Gusta's .gs-switch is apricot) */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 8px; cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 30px; height: 18px; margin: 0; border-radius: var(--r-pill); background: var(--surface3); position: relative; cursor: pointer; transition: background-color 0.15s ease; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); transition: transform 0.15s ease, background-color 0.15s ease; }
.switch:checked { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.switch:checked::after { transform: translateX(12px); background: var(--accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { opacity: 0.45; cursor: default; }
@media (pointer: coarse) {
  .switch-row { min-height: 44px; padding: 0; }
  .switch { width: 42px; height: 26px; }
  .switch::after { width: 22px; height: 22px; }
  .switch:checked::after { transform: translateX(16px); }
}

/* history pane */
.hist-list { display: grid; gap: 1px; }
.hist-step { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer; border: 0; background: none; color: var(--text); font: inherit; text-align: left; }
.hist-step:hover { background: var(--surface3); }
.hist-step i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.hist-step.current { background: var(--accent-bg); }
.hist-step.current i { background: var(--accent); }
.hist-step.undone { opacity: 0.45; }
.hist-step.gusta i { background: var(--gusta); }
.hist-step.gusta { background: color-mix(in srgb, var(--gusta-bg) 60%, transparent); }
.hist-step small { color: var(--text-faint); font-size: 10.5px; }
.hist-prompt { font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; color: var(--gusta); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 6px 2px; }
.snap-row { display: flex; gap: 6px; margin: 8px 0; }
.snap { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--r-sm); }
.snap:hover { background: var(--surface3); }
.snap button.name { flex: 1; text-align: left; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; padding: 0; }

/* ── Gusta panel ── */
.gusta-panel {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--gusta) 40%, var(--border)); border-radius: var(--r-lg);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; overflow: hidden;
}
.g-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.g-head b { font-size: 14px; }
.g-av { width: 22px; height: 22px; border-radius: 50%; background: var(--gusta); color: var(--on-gusta); display: grid; place-items: center; flex: none; }
.g-modes { margin-left: auto; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); }
.g-modes button { border: 0; background: none; color: var(--text-dim); font-family: inherit; font-weight: 600; font-size: 11px; padding: 3px 8px; border-radius: var(--r-sm); cursor: pointer; }
.g-modes button[aria-pressed='true'] { background: var(--gusta-bg); color: var(--gusta); }
.g-thread { overflow-y: auto; padding: 10px; display: grid; gap: 10px; align-content: start; font-size: 13px; line-height: 1.45; }
.g-msg-u { justify-self: end; background: var(--surface3); padding: 7px 10px; border-radius: 10px 10px 2px 10px; max-width: 92%; }
.g-msg { display: grid; gap: 8px; }
.g-msg p { margin: 0; }
.g-note { color: var(--text-dim); font-size: 12px; }
.receipt { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface2); }
.rc-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.rc-row { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rc-row:last-child { border-bottom: 0; }
.rc-row .k { font: 500 12px ui-monospace, "SF Mono", Menlo, monospace; }
.rc-row .k b { color: var(--gusta); font-weight: 500; }
.rc-row .why { color: var(--text-dim); font-size: 11.5px; line-height: 1.4; }
.rc-row .u { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.rc-row.off { opacity: 0.5; }
.rc-row.off .k { text-decoration: line-through; }
.g-checks { display: grid; gap: 3px; font-size: 11.5px; color: var(--text-dim); }
.g-checks span { display: flex; gap: 6px; align-items: flex-start; }
.g-checks .ok { color: var(--accent); }
.g-checks .bad { color: var(--danger); }
.g-cost { font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-dim); }
.g-alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-alt { border: 1px solid var(--border); background: var(--surface2); border-radius: var(--r-md); padding: 4px; cursor: pointer; text-align: left; color: var(--text); font-family: inherit; font-size: 11px; display: grid; gap: 3px; }
.g-alt canvas { width: 100%; height: auto; border-radius: 4px; display: block; aspect-ratio: 3 / 2; object-fit: cover; background: var(--well); }
.g-alt[aria-pressed='true'] { border-color: var(--gusta); box-shadow: 0 0 0 1px var(--gusta) inset; }
.g-alt small { color: var(--text-dim); font-size: 10px; line-height: 1.3; }
.g-intent { border: 1px solid color-mix(in srgb, var(--gusta) 50%, var(--border)); border-radius: var(--r-md); padding: 8px 10px; display: grid; gap: 4px; background: var(--surface2); }
.g-intent .r { display: flex; justify-content: space-between; font: 11px ui-monospace, "SF Mono", Menlo, monospace; }
.g-intent small { color: var(--text-dim); font-size: 10.5px; }
.g-guide { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; display: grid; gap: 8px; background: var(--surface2); }
.g-guide .stp { font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; color: var(--gusta); letter-spacing: 0.06em; text-transform: uppercase; }
.g-guide .row { display: flex; gap: 6px; flex-wrap: wrap; }
.g-ask { padding: 8px 10px 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.g-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.g-chip { font-family: inherit; font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-dim); background: var(--surface2); cursor: pointer; }
.g-chip:hover { color: var(--text); border-color: var(--gusta); }
.g-input { display: flex; gap: 6px; align-items: flex-end; border: 1px solid var(--border); border-radius: var(--r-md); padding: 5px 5px 5px 8px; background: var(--surface2); }
.g-input:focus-within { border-color: var(--gusta); }
.g-input textarea { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; resize: none; outline: none; max-height: 120px; line-height: 1.4; }
.g-status { font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; justify-content: space-between; }
.g-thinking { display: flex; gap: 8px; align-items: center; color: var(--text-dim); font-size: 12px; }
.g-thinking .spinner { border-top-color: var(--gusta); }
.g-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; display: grid; gap: 8px; background: var(--surface2); }

/* ── Bottom: filmstrip + status ── */
.bottom { display: grid; gap: var(--tray-gap); min-width: 0; }
.filmstrip {
  display: flex; gap: 6px; padding: 6px; overflow-x: auto; overflow-y: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.filmstrip:empty { display: none; }
.film {
  flex: none; height: 64px; min-width: 48px; border: 2px solid transparent; border-radius: var(--r-md); padding: 0; background: var(--well);
  cursor: pointer; position: relative; overflow: hidden;
}
.film img { height: 100%; width: auto; display: block; }
.film.current { border-color: var(--accent); }
.film.selected { border-color: var(--gusta); }
.film .dot { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,0.5); }
.film-actions { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 4px; }
.statusbar {
  display: flex; gap: 14px; align-items: center; padding: 3px 12px; color: var(--text-dim); font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; white-space: nowrap; overflow: hidden;
}
#status-name { overflow: hidden; text-overflow: ellipsis; max-width: 36vw; color: var(--text); }
.status-contest { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.status-contest.check { color: var(--gusta); }

/* ── range inputs ── */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; touch-action: pan-y; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: var(--r-pill); background: var(--surface3); }
input[type=range]::-moz-range-track { height: 3px; border-radius: var(--r-pill); background: var(--surface3); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); }
input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--text); border: 2px solid var(--surface); }
input[type=range]:disabled { opacity: 0.4; }
input[type=range].track-temp::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--wb-cool), var(--surface3), var(--wb-warm)); }
input[type=range].track-temp::-moz-range-track { background: linear-gradient(90deg, var(--wb-cool), var(--surface3), var(--wb-warm)); }
input[type=range].track-tint::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--wb-green), var(--surface3), var(--wb-magenta)); }
input[type=range].track-tint::-moz-range-track { background: linear-gradient(90deg, var(--wb-green), var(--surface3), var(--wb-magenta)); }
input[type=range].track-hue::-webkit-slider-runnable-track { background: var(--hue-track, var(--surface3)); }
input[type=range].track-hue::-moz-range-track { background: var(--hue-track, var(--surface3)); }
@media (pointer: coarse) {
  input[type=range] { height: 34px; }
  input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10.5px; }
  input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  .btn.small { height: 40px; padding: 0 12px; font-size: 13px; }
  .cluster.seg .btn { height: calc(var(--btn-h) - 4px); }
  .btn-text { padding: 11px 10px; font-size: 13px; }
  .btn-gusta-mini { padding: 10px 10px; font-size: 12px; }
  .mini-icon { width: 40px; height: 40px; }
  .dock-tab { padding: 13px 14px; font-size: 13px; }
  .seg-tabs button { padding: 10px 0; font-size: 12px; }
  .g-modes button { padding: 9px 12px; font-size: 12px; }
  .g-chip { min-height: 40px; padding: 9px 13px; font-size: 13px; }
  .clip-tri { width: 34px; height: 34px; }
  .adj-val { height: 34px; width: 64px; }
  details.sec > summary { min-height: 46px; }
  .hist-step { padding: 11px 8px; }
  .look { font-size: 12px; }
}

/* ── Toast ── */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); margin-inline: auto;
  width: fit-content; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: var(--r-md); background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow); z-index: 70; line-height: 1.45;
}
.toast[data-kind='error'] { border-color: var(--danger); }
.toast[data-kind='gusta'] { border-color: var(--gusta); }

/* ── Narrower desktops: Gusta floats over the stage ── */
@media (max-width: 1280px) {
  body.gusta-open .work { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--dock-w); }
  .gusta-panel { position: fixed; right: calc(var(--dock-w) + var(--tray-gap) * 3); top: 56px; bottom: 120px; width: var(--gusta-w); z-index: 40; box-shadow: var(--shadow); }
}
@media (max-width: 1080px) { .lbl-lg { display: none; } }

/* Narrow desktop windows: the top bar sheds the wordmark, then the zoom
   cluster (Z, Cmd/Ctrl+0/1/+/-, the wheel and the status bar still zoom). */
@media (max-width: 960px) { html:not(.pocket) .brand-name { display: none; } }
@media (max-width: 900px) { html:not(.pocket) .zoomer { display: none; } }

/* Side by side keeps a short label instead of disappearing. */
.lbl-sm { display: none; }
@media (max-width: 1080px) { .lbl-sm { display: inline; } }

/* ══ Pocket shell: phones, portrait tablets, short landscape ══════════
   theme-boot.js sets html.pocket before first paint (same query as
   pocket.js). The page never scrolls: the photo takes the flexible row,
   one tool row and the tabs sit in the thumb zone, and every sheet
   (all sliders, Gusta) shrinks the photo instead of covering it. */
.pocket-bar, #btn-more, .more-sheet { display: none; }
html.pocket { overscroll-behavior: none; }
html.pocket body {
  height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding-bottom: max(var(--tray-gap), env(safe-area-inset-bottom, 0px), var(--kb, 0px));
}
html.pocket .topbar { background: transparent; border-color: transparent; padding: 0 2px; gap: 4px; flex-wrap: nowrap; }
html.pocket .brand, html.pocket .lbl-md, html.pocket .zoomer, html.pocket .topbar .cluster[aria-label='Compare'],
html.pocket #account-toggle, html.pocket #btn-help, html.pocket #btn-theme { display: none; }
html.pocket #btn-more { display: inline-flex; }
html.pocket .work, html.pocket body.gusta-open .work { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
html.pocket .rail { display: none; }
html.pocket .stage { border-color: transparent; border-radius: var(--r-md); }
html.pocket .stage-badge { top: 8px; }
html.pocket .navigator canvas { width: 96px; max-height: 72px; }
html.pocket .crop-bar { display: none !important; }
html.pocket .dock { display: none; }
html.pocket body.sheet-open .dock { display: grid; height: min(46dvh, 560px); }
html.pocket body.sheet-open .pk-panels { display: none; }
html.pocket .gusta-panel { position: static; width: auto; max-height: min(44dvh, 500px); box-shadow: none; z-index: auto; }
html.pocket .g-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.pocket .g-chip { flex: none; }
html.pocket .g-head { padding: 6px 10px; }
html.pocket .g-thread { min-height: 72px; }
html.pocket .bottom { display: none; }
html.pocket body.film-open .bottom { display: grid; }
html.pocket .statusbar { display: none; }
html.pocket .popover, html.pocket .pop-menu {
  position: fixed; top: auto; width: auto; z-index: 50;
  left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--kb, 0px)));
  max-height: min(78dvh, 640px); overflow: auto;
}
html.pocket .toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
html.pocket body:not(.has-photo) .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* with a photo, ui.js sets the toast at the bottom edge of the photo area (over the photo
   column in short landscape); taps go through it to what is under it, except its button */
html.pocket.pocket-land .toast { right: calc(min(340px, 44vw) + 16px); }
html.pocket .toast { pointer-events: none; }
html.pocket .toast .toast-act { pointer-events: auto; }

/* the tool bar */
html.pocket .pocket-bar {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
html.pocket body:not(.has-photo) .pocket-bar { display: none; }
html.pocket body.gusta-open .pk-panels, html.pocket body.gusta-open .pk-grab { display: none; }
.pk-grab { height: 24px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; touch-action: none; flex: none; }
.pk-grab span { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border); }
.pk-grab:hover span, .pk-grab[aria-expanded='true'] span { background: var(--text-dim); }
.pk-panels { display: flex; flex-direction: column; justify-content: flex-end; min-height: 140px; min-width: 0; }
.pk-panel { display: flex; flex-direction: column; min-width: 0; }
.pk-row { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 12px 8px; scrollbar-width: none; align-items: flex-start; min-width: 0; }
.pk-row::-webkit-scrollbar { display: none; }
.pk-sep { flex: none; width: 1px; align-self: stretch; margin: 6px 2px 18px; background: var(--border); }
.pk-chip {
  flex: none; width: 58px; display: grid; justify-items: center; gap: 3px; border: 0; background: none; padding: 0;
  color: var(--text-dim); font-family: inherit; font-size: 11px; cursor: pointer; touch-action: manipulation;
}
.pk-ic { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; }
.pk-ic svg.ico { width: 22px; height: 22px; }
.pk-ic svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .rt { fill: none; stroke: var(--surface3); stroke-width: 2; }
.ring .rv { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 200; }
.pk-chip.g .ring .rv { stroke: var(--gusta); }
.pk-chip[aria-pressed='true'] { color: var(--text); }
.pk-chip[aria-pressed='true'] .pk-ic { background: var(--surface3); box-shadow: inset 0 0 0 1.5px var(--text); }
.pk-chip span.l { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a switch chip (B&W): on reads as your tool's teal, not as the slider the ruler holds */
.pk-chip[data-toggle][aria-pressed='true'] { color: var(--accent); }
.pk-chip[data-toggle][aria-pressed='true'] .pk-ic { background: var(--accent-bg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pk-pill {
  flex: none; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface2);
  color: var(--text); font-family: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.pk-pill svg { width: 18px; height: 18px; }
.pk-pill[aria-pressed='true'] { border-color: var(--text); background: var(--surface3); }
.pk-pill.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.pk-pill.gusta { color: var(--gusta); border-color: color-mix(in srgb, var(--gusta) 50%, var(--border)); background: var(--gusta-bg); }
.pk-card {
  flex: none; width: 150px; min-height: 72px; text-align: left; padding: 9px 11px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; cursor: pointer;
  display: grid; align-content: space-between; gap: 4px; touch-action: manipulation;
}
.pk-card b { font-size: 13.5px; font-weight: 600; }
.pk-card small { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
.pk-card.gusta b { color: var(--gusta); }
.pk-look { flex: none; width: 64px; display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--text-dim); font-family: inherit; font-size: 11px; cursor: pointer; }
.pk-look canvas { width: 64px; height: 64px; border-radius: var(--r-md); display: block; background: var(--well); }
.pk-look[aria-pressed='true'] { color: var(--text); }
.pk-look[aria-pressed='true'] canvas { box-shadow: 0 0 0 2px var(--accent); }
.pk-note { padding: 14px 14px 12px; color: var(--text-dim); font-size: 13px; line-height: 1.45; }

/* the ruler: a fixed needle over a scale that moves, magnetic at zero */
.pk-ruler { padding: 6px 0 2px; flex: none; }
.pk-ruler-h { display: flex; align-items: baseline; gap: 10px; padding: 0 14px; min-height: 18px; }
.pk-ruler-h .rl { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-ruler-h output { font: 600 14px ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--text); }
.pk-ruler-h output.g { color: var(--gusta); }
.pk-track { position: relative; height: 40px; touch-action: pan-y; cursor: ew-resize; outline-offset: -2px; border-radius: var(--r-sm); }
.pk-track canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pk-track::after { content: ''; position: absolute; left: 50%; top: 2px; height: 22px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--needle, var(--accent)); }
.pk-ruler.off .pk-track { opacity: 0.35; pointer-events: none; }

.pk-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); flex: none; }
/* wide pockets (portrait tablets): rows center while they fit, scroll when they do not */
.pk-row > :first-child { margin-left: auto; }
.pk-row > :last-child { margin-right: auto; }
@media (min-width: 761px) {
  html.pocket .pk-tabs { padding-inline: calc((100% - 640px) / 2); }
  html.pocket .brand, html.pocket .topbar .lbl-md { display: inline-flex; }
}
.pk-tab {
  min-height: 52px; border: 0; background: none; color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; padding: 4px 0; touch-action: manipulation;
}
.pk-tab svg { width: 22px; height: 22px; }
.pk-tab[aria-selected='true'] { color: var(--accent); }

/* the More sheet */
html.pocket .more-sheet:not([hidden]) {
  display: grid; position: fixed; z-index: 55; gap: 2px; padding: 8px;
  left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.more-item {
  min-height: 48px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font-family: inherit; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; text-align: left; cursor: pointer;
}
.more-item:hover { background: var(--surface3); }
.more-item small { color: var(--text-dim); font-size: 13px; }

/* short landscape: photo left, tools right */
html.pocket.pocket-land body { grid-template-columns: minmax(0, 1fr) min(340px, 44vw); grid-template-rows: auto minmax(0, 1fr); }
html.pocket.pocket-land .topbar { grid-column: 1 / -1; }
html.pocket.pocket-land .work { grid-column: 1; grid-row: 2; }
html.pocket.pocket-land .pocket-bar { grid-column: 2; grid-row: 2; justify-content: flex-end; }
html.pocket.pocket-land .bottom { display: none; }
/* sheets cover the tool column above its grab handle and tabs, never the photo */
html.pocket.pocket-land body.sheet-open .dock, html.pocket.pocket-land .gusta-panel {
  position: fixed; z-index: 45; height: auto; max-height: none; width: calc(min(340px, 44vw) - 2px);
  top: calc(max(var(--tray-gap), env(safe-area-inset-top, 0px)) + 52px);
  bottom: calc(max(var(--tray-gap), env(safe-area-inset-bottom, 0px)) + 72px);
  right: calc(max(var(--tray-gap), env(safe-area-inset-right, 0px)) + 1px);
}
html.pocket.pocket-land .gusta-panel { bottom: calc(max(var(--tray-gap), env(safe-area-inset-bottom, 0px)) + 54px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Account chip + menu (family pattern, markup shared with gusta-draw) ── */
.menu-wrap { position: relative; }
.tool-btn {
  height: var(--btn-h); padding: 0 10px; white-space: nowrap; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface2); color: var(--text); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.tool-btn:hover:not(:disabled) { background: var(--surface3); }
.tool-btn.wide { width: 100%; justify-content: center; }
.tool-btn.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.account-btn.signin { color: var(--text); }
.account-id { display: grid; line-height: 1.1; text-align: left; }
.account-name { font-size: 12px; font-weight: 600; }
.account-tokens { font-size: 10.5px; color: var(--text-dim); }
.pop-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 35; width: 320px; max-height: calc(100vh - 80px); overflow: auto;
  padding: 12px; display: grid; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.account-menu [hidden] { display: none !important; }
.menu-heading { font-weight: 700; font-size: 14px; }
.menu-label { color: var(--text-dim); font-size: 12px; }
.menu-note { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.menu-note a { color: var(--accent); }
.menu-note.warn { color: var(--danger); }
.auth-tabs { display: flex; gap: 4px; }
.auth-tabs .tool-btn { flex: 1; justify-content: center; }
.auth-field { display: grid; gap: 4px; }
.auth-field label { font-size: 12px; color: var(--text-dim); }
#gusta-auth, #gusta-wallet { display: grid; gap: 8px; }
.field {
  height: var(--btn-h); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; width: 100%;
}
.field:focus { outline: none; border-color: var(--accent); }
.link-btn { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 0; }
.link-btn:disabled { color: var(--text-faint); cursor: default; }
.account-summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#gusta-balance strong { font-size: 18px; }
.acct-section { border-top: 1px solid var(--border); padding-top: 8px; }
.acct-section > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.acct-section[open] > summary { margin-bottom: 8px; }
.acct-links { display: flex; gap: 12px; flex-wrap: wrap; }
.acct-form { display: grid; gap: 6px; margin: 6px 0; }
.gusta-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gusta-plan {
  position: relative; display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); color: var(--text); cursor: pointer; font: inherit;
}
.gusta-plan.featured { border-color: var(--gusta); }
.gusta-plan-badge { position: absolute; top: -8px; font-size: 9.5px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--gusta); color: var(--on-gusta); }
.gusta-plan-tokens { font-weight: 700; }
.gusta-plan-unit, .gusta-plan-designs { font-size: 10.5px; color: var(--text-dim); }
.gusta-plan-price { font-size: 12px; color: var(--accent); font-weight: 600; }
.launcher-grid { display: grid; gap: 6px; }
.launcher-card { display: flex; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.launcher-card:disabled { opacity: 0.6; cursor: default; }
.launcher-mark img { display: block; border-radius: 8px; }
.launcher-text { display: grid; }
.launcher-name { font-weight: 600; font-size: 12.5px; }
.launcher-tagline { font-size: 11px; color: var(--text-dim); }
.launcher-badge { margin-left: 6px; font-size: 9.5px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface3); color: var(--text-dim); }
.export-ready { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
.film { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.stage, .pocket-bar { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ═══ Platform (platform.js): the quiet install button and the one-time
   iOS Home Screen card. The card is chrome around the app, never over the
   photo's colors: an exact-gray surface, the tile as its only color. ═══ */
.status-install { color: var(--text-dim); }
.status-install:hover { color: var(--text); }
.install-hint {
  position: fixed; z-index: 72; right: 16px; bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 32px)); display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; align-items: center;
  padding: 10px 6px 10px 12px; border-radius: var(--r-lg); background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.install-hint img { width: 40px; height: 40px; display: block; }
.install-hint p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text-dim); }
.install-hint b { color: var(--text); font-weight: 600; }
.install-hint-close { width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-dim); cursor: pointer; display: grid; place-items: center; }
.install-hint-close:hover { background: var(--surface3); color: var(--text); }
html.pocket .install-hint {
  left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 40px minmax(0, 1fr) 44px;
}
html.pocket .install-hint-close { width: 44px; height: 44px; }

/* The privacy policy change notice (vendor/shared/policyNotice.mjs, markup
   only): signed-in people, once per policy version, a status card like the
   install hint. main.js shows it at a quiet moment and hosts it where it
   covers nothing: the dock's last row (docked or the iPad's floating card),
   or, in the pocket, over the tools (never over the photo). z 44 keeps it
   under every sheet, popover, menu and dialog, and it steps aside while one
   of them, the coach or Gusta's welcome card is up. */
.gusta-policy-notice {
  position: fixed; z-index: 44; right: 12px; bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  width: min(calc(var(--dock-w) - 8px), calc(100vw - 24px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 12px; border-radius: var(--r-lg); background: var(--surface2); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.dock > .gusta-policy-notice { position: static; width: auto; margin: 0 8px 8px; box-shadow: none; }
body:has(#dialog:not([hidden]), .popover:not([hidden]), .pop-menu:not([hidden]), #more-sheet:not([hidden]), .home-sheet:not([hidden]),
  #palette:not([hidden]), #coach:not([hidden]), #gusta-panel:not([hidden]) .g-welcome, .install-hint) .gusta-policy-notice,
html.pocket body.sheet-open .gusta-policy-notice, html.pocket body.gusta-open .gusta-policy-notice,
html.pocket body:not(.has-photo) .gusta-policy-notice { display: none; }
.gusta-policy-notice-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.gusta-policy-notice-body { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
.gusta-policy-notice-body a { color: var(--accent); }
.gusta-policy-notice-ok {
  justify-self: end; margin-top: 4px; height: var(--btn-h); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface3); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; touch-action: manipulation;
}
@media (pointer: coarse) { .gusta-policy-notice-ok { height: 44px; min-width: 64px; } }
html.pocket .gusta-policy-notice {
  left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) auto;
}
/* short landscape: over the tool column only, never across the photo */
html.pocket.pocket-land .gusta-policy-notice { left: auto; width: calc(min(340px, 44vw) - 2px); right: calc(max(var(--tray-gap), env(safe-area-inset-right, 0px)) + 1px); }
html.pocket .gusta-policy-notice-title, html.pocket .gusta-policy-notice-body { grid-column: 1; }
html.pocket .gusta-policy-notice-ok { grid-column: 2; grid-row: 1 / span 2; justify-self: auto; margin-top: 0; }

/* ══ Gusta shows its work (phase 3/4: copilot.js, point.js) ═══════════
   Review proposals (checkbox + eye per row, a sticky Apply bar), the
   cost before the run, measured and action chips, the landing moment
   over the photo, point and ask, Gusta noticed (My Style), Match. */
.g-precost { font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-dim); }
.g-chip.g-act { color: var(--gusta); border-style: dashed; border-color: color-mix(in srgb, var(--gusta) 45%, var(--border)); }
.g-run { display: grid; gap: 8px; min-width: 0; }
.g-run:empty { display: none; }
.receipt.pending { border-color: color-mix(in srgb, var(--gusta) 45%, var(--border)); }
.receipt.declined { opacity: 0.7; }
.rc-row.rc-pend { grid-template-columns: auto minmax(0, 1fr) auto; }
.rc-pend .k, .rc-pend .why { grid-column: 2; }
.rc-pend .rc-cb { grid-row: 1 / span 2; grid-column: 1; align-self: center; display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; }
.rc-pend .rc-cb input { width: 16px; height: 16px; margin: 0; accent-color: var(--gusta); cursor: pointer; }
.rc-eye {
  grid-row: 1 / span 2; grid-column: 3; align-self: center; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-dim); cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.rc-eye:hover, .rc-eye:focus-visible { color: var(--text); border-color: var(--gusta); }
.rc-row.peek { background: var(--gusta-bg); }
.rc-row.peek .rc-eye { color: var(--gusta); border-color: var(--gusta); }
.declined .rc-row .k { text-decoration: none; }
.g-prop-bar {
  position: sticky; bottom: -10px; z-index: 2; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
  padding: 8px 0 10px; margin-bottom: -10px; background: var(--surface); border-top: 1px solid var(--border);
}
.g-prop-bar[hidden] { display: none; }
.g-prop-bar .btn:disabled { opacity: 0.5; cursor: default; }

/* the landing moment: the biggest move, named over the photo (no effect on the pixels) */
.gusta-land {
  position: absolute; left: 50%; top: 18%; transform: translate(-50%, 6px); z-index: 6; pointer-events: none;
  padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--gusta);
  background: rgba(10, 11, 14, 0.8); color: #f4f4f6; font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease;
}
.gusta-land.on { opacity: 1; transform: translate(-50%, 0); }
.gusta-land[hidden] { display: none; }
.adj-row .adj-val { transition: color 0.25s ease, background-color 0.25s ease; }
.adj-row.g-land .adj-val { color: var(--gusta); background: var(--gusta-bg); }
.pk-chip.g-land .l { color: var(--gusta); }
@media (prefers-reduced-motion: reduce) {
  .gusta-land, .adj-row .adj-val { transition: none; }
  .gusta-land { transform: translate(-50%, 0); }
}

/* point and ask */
.point-layer { position: absolute; inset: 0; z-index: 5; cursor: crosshair; touch-action: none; }
.point-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.point-loop { fill: rgba(255, 255, 255, 0.07); stroke: #fff; stroke-width: 2; stroke-dasharray: 7 5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)); }
.point-hint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; max-width: calc(100% - 16px);
  padding: 4px 4px 4px 12px; border-radius: var(--r-lg); background: rgba(10, 11, 14, 0.82); color: #f1f1f5; font-size: 13px; width: max-content;
}
.point-bubble {
  position: absolute; width: min(340px, calc(100% - 16px)); display: grid; gap: 6px; padding: 8px; cursor: default;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--gusta) 55%, var(--border)); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.pb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-ask { display: flex; gap: 6px; align-items: center; }
.pb-input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); color: var(--text); font: inherit; padding: 6px 8px; }
.pb-input:focus { border-color: var(--gusta); outline: none; }

/* Gusta noticed: My Style as rules */
.g-style { border: 1px solid color-mix(in srgb, var(--gusta) 40%, var(--border)); border-radius: var(--r-md); padding: 10px; background: var(--surface2); }
.gs-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.gs-h span, .gs-note { color: var(--text-dim); font-size: 11px; }
.gs-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gs-rule { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; padding: 3px 0; }
.gs-switch { appearance: none; -webkit-appearance: none; flex: none; width: 30px; height: 18px; margin: 0; border-radius: var(--r-pill); background: var(--surface3); position: relative; cursor: pointer; transition: background-color 0.15s ease; }
.gs-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); transition: transform 0.15s ease, background-color 0.15s ease; }
.gs-switch:checked { background: var(--gusta-bg); box-shadow: inset 0 0 0 1px var(--gusta); }
.gs-switch:checked::after { transform: translateX(12px); background: var(--gusta); }
.gs-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-style .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Match a photo / match a set */
.g-match .row { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gm-ref img, .gm-blank { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; background: var(--well); }
.gm-ref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-opt { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-dim); }
.gm-sum { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 12px; }
.btn.small.gusta { color: var(--gusta); }

@media (pointer: coarse) {
  .rc-pend .rc-cb { width: 40px; height: 40px; }
  .rc-pend .rc-cb input { width: 20px; height: 20px; }
  .rc-eye { width: 42px; height: 42px; }
  .g-prop-bar .btn { height: 42px; padding: 0 16px; font-size: 14px; }
  .point-hint .btn { height: 40px; }
  .pb-input { min-height: 42px; }
  .pb-ask .btn.icon, .pb-ask .mini-icon { width: 42px; height: 42px; }
  .gs-rule { min-height: 42px; font-size: 13.5px; }
  .gm-opt { min-height: 40px; }
}
html.pocket .gusta-land { top: 12px; font-size: 18px; }
/* while a proposal waits on a phone, the thread gets the room: chips and status step aside */
html.pocket body.g-pending .g-chips, html.pocket body.g-pending .g-precost, html.pocket body.g-pending .g-status { display: none; }
html.pocket .point-bubble { width: calc(100% - 16px); }

/* ══ Export trust, Authenticity, my looks (exportTrust.js, authSheet.js,
   looksUi.js, beforeafter.js) ══════════════════════════════════════════
   Segmented radios in the Export popover (Photo / Before and after,
   Fill / Fit, border color), the Authenticity sheet, my-look tiles, the
   shared-look card. Neutral surfaces only; teal = your tools. */
.pop-pane { display: grid; gap: 10px; }
.pop-group { display: grid; gap: 8px; }
.pop-mode { display: grid; }
.pop-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pop-row .pop-seg { grid-column: 2 / 4; }
.pop-seg label { flex: 1 1 0; min-width: 0; position: relative; display: flex; }
.pop-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pop-seg span {
  flex: 1; display: grid; place-items: center; min-height: calc(var(--btn-h) - 6px); padding: 0 8px; border-radius: var(--r-pill);
  color: var(--text-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.pop-seg span:hover { color: var(--text); }
.pop-seg input:checked + span { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.pop-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.pop-check input:disabled, .pop-check:has(input:disabled) { opacity: 0.55; }
.ba-recorder { position: fixed; left: -10000px; top: 0; width: 2px; height: 2px; pointer-events: none; }

/* the Authenticity sheet */
.auth-list { margin: 0; display: grid; }
.auth-list > div { display: grid; grid-template-columns: 6.8em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.auth-list > div:first-child { border-top: 0; padding-top: 0; }
.auth-list dt { color: var(--text-dim); }
.auth-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.auth-changes { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; }
.auth-ok { color: var(--accent); }
.auth-check { color: var(--gusta); }
.auth-caption { font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin: 0; }
.copy-box { width: 100%; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; resize: none; }
/* dialogs that carry the marker become bottom sheets on a phone */
html.pocket .dialog:has(.as-sheet) {
  top: auto; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); transform: none; width: auto;
  bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--kb, 0px))); max-height: min(82dvh, 680px);
}
html.pocket .dialog:has(.as-sheet) .row .btn { min-height: 44px; flex: 1; }

/* my looks: first in the grid, deletable */
.look-mine { position: relative; display: grid; }
.look-mine .look span, .pk-look.mine span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-look.mine span { max-width: 64px; }
.look-del {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #f2f2f2; opacity: 0; transition: opacity 0.12s;
}
.look-mine:hover .look-del, .look-del:focus-visible { opacity: 1; }
@media (hover: none) { .look-del { opacity: 1; width: 28px; height: 28px; } }
.look-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.look-actions .btn { flex: 1 1 auto; }
@media (pointer: coarse) { .look-actions .btn.small { height: 40px; font-size: 13px; } }
.look-what { font-size: 12.5px; }
.field-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; color: var(--text-dim); }
.share-link { font: 12px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-dim); }
@media (pointer: coarse) { .field-row .field, .share-link { height: 44px; font-size: 16px; } }
.pk-look-new {
  flex: none; width: 64px; display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0;
  color: var(--text-dim); font-family: inherit; font-size: 11px; cursor: pointer; touch-action: manipulation;
}
.pk-look-plus { width: 64px; height: 64px; border-radius: var(--r-md); border: 1.5px dashed var(--border); display: grid; place-items: center; }
.pk-look-plus svg { width: 24px; height: 24px; }
.pk-look-tail, .pk-mine-acts { display: contents; }
.pk-look-tail .pk-pill { align-self: center; }
.pk-mine-acts[hidden] { display: none !important; }

/* a shared look arriving in a link: a calm card over the stage */
.look-banner {
  position: absolute; z-index: 25; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 20px));
  display: grid; gap: 10px; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.lb-text { display: grid; gap: 3px; line-height: 1.4; }
.lb-text b { font-size: 14px; }
.lb-text small { color: var(--text-dim); font-size: 12.5px; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lb-actions .btn:not(.icon) { flex: 1 1 auto; }
@media (pointer: coarse) { .lb-actions .btn { min-height: 44px; } .lb-actions .btn.icon { width: 44px; } }

/* ══ First run, Home, coach, batch export (home.js, coach.js, filmstrip.js) ══
   The empty state IS the first run (and Home once there are photos): it
   scrolls inside the stage, never the page. Practice tiles and library
   thumbnails are photos, so their chips are neutral glass, never color. */
:root {
  --chip-on-photo: rgba(12, 12, 12, 0.78);   /* the same in both themes: it sits on a photo */
  --chip-on-photo-text: #f1f1f1;
  --chip-on-photo-ok: #19e2dc;
  --chip-on-photo-no: #ff9b9b;
}
.empty {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 22px; padding: 28px max(16px, calc((100% - 780px) / 2)) 24px;
}
.empty > :first-child { margin-top: auto; }
.empty > :last-child { margin-bottom: auto; }
.fr-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.fr-mark { width: 44px; height: 44px; border-radius: 11px; display: block; }
.fr-head h1 { font-size: 26px; line-height: 1.15; margin: 4px 0 0; letter-spacing: -0.015em; text-wrap: balance; max-width: 520px; }
.fr-promise { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.fr-cta { display: grid; justify-items: center; gap: 8px; }
.btn.big { height: 48px; min-width: 220px; padding: 0 28px; border-radius: var(--r-pill); font-size: 15px; }
.empty-hint { margin: 0; color: var(--text-dim); font-size: 12px; text-align: center; line-height: 1.45; }
.fr-free { margin: 0; color: var(--text-dim); font-size: 12px; text-align: center; }
.fr-practice { display: grid; gap: 10px; }
.fr-k { margin: 0; font: 600 11px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.fr-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fr-practice.compact .fr-k { text-align: left; }
.fr-practice.compact .fr-tiles { grid-template-columns: repeat(4, minmax(0, 130px)); }
.fr-tile, .hm-tile {
  min-width: 0; border: 0; padding: 0; background: none; color: var(--text-dim); font: inherit; font-size: 12px; text-align: left;
  display: grid; gap: 5px; cursor: pointer; touch-action: manipulation;
}
.fr-img, .hm-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--surface2); }
.fr-img img, .hm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-tile:hover .fr-img, .hm-tile:hover .hm-img { box-shadow: 0 0 0 2px var(--text-dim); }
.fr-tile:focus-visible, .hm-tile:focus-visible { outline: none; }
.fr-tile:focus-visible .fr-img, .hm-tile:focus-visible .hm-img { box-shadow: 0 0 0 2px var(--accent); }
.fr-cap, .hm-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-cap { color: var(--text); }

/* Home: Just added (badges) and Continue (captions), by day */
.hm-sec { display: grid; gap: 8px; }
.hm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hm-h b { font-size: 14px; }
.hm-h span { color: var(--text-dim); font-size: 12px; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.hm-tile.current .hm-img { box-shadow: 0 0 0 2px var(--accent); }
.hm-tile.rejected .hm-img img { opacity: 0.4; }
.hm-badge {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 9px; line-height: 1.3;
  background: var(--chip-on-photo); color: var(--chip-on-photo-text); font-size: 11px; font-weight: 600; overflow-wrap: break-word;
}
.hm-badge.ok { color: var(--chip-on-photo-ok); }
.hm-marks { position: absolute; right: 5px; top: 5px; display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: var(--r-pill); background: var(--chip-on-photo); color: var(--chip-on-photo-text); }
.hm-marks svg { width: 11px; height: 11px; display: block; }
.hm-flag { display: inline-flex; }
.hm-flag.pick { color: var(--chip-on-photo-ok); }
.hm-flag.reject { color: var(--chip-on-photo-no); }
.hm-stars { display: inline-flex; gap: 1px; }
.hm-fix { justify-self: start; }
.hm-rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); }
.hm-rate-l { margin-right: auto; color: var(--text-dim); font-size: 12px; }
.hm-flag-btn {
  height: var(--btn-h); padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.hm-flag-btn svg { width: 15px; height: 15px; }
.hm-flag-btn[aria-pressed='true'] { border-color: var(--text); background: var(--surface3); }
.hm-star-row { display: inline-flex; }
.hm-star { width: var(--btn-h); height: var(--btn-h); padding: 0; border: 0; background: none; color: var(--text-dim); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.hm-star svg { width: 18px; height: 18px; }
.hm-star.on { color: var(--text); }

/* Home as a sheet: centered on desktop, a bottom sheet on phones */
.home-backdrop { position: fixed; inset: 0; z-index: 56; background: rgba(0, 0, 0, 0.45); }
.home-sheet {
  position: fixed; z-index: 57; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.hs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--border); }
.hs-head b { font-size: 14px; }
.hs-head .mini-icon svg { width: 16px; height: 16px; }
.home-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.home.in-sheet { display: grid; gap: 18px; padding: 14px; }
.home.in-sheet .fr-cta { justify-items: start; }
html.pocket .home.in-sheet .fr-cta { justify-items: stretch; }
html.pocket .home-sheet {
  left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); top: auto; transform: none; width: auto;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: min(84dvh, 760px);
}
.toast .toast-act { margin-left: 8px; vertical-align: middle; }

/* phones: top-aligned, practice in two columns, the big button in the thumb zone */
html.pocket .empty { padding: 18px 16px 0; gap: 16px; }
html.pocket .empty > :first-child { margin-top: 0; }
html.pocket .empty > :last-child { margin-bottom: 0; }
html.pocket .fr-head { justify-items: start; text-align: left; }
html.pocket .fr-head h1 { font-size: 24px; }
html.pocket .fr-k { text-align: left; }
html.pocket .fr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.pocket .fr-practice.compact .fr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html.pocket .fr-practice.compact .fr-cap { font-size: 11px; }
html.pocket .empty .fr-cta {
  order: 10; margin-top: auto; position: sticky; bottom: 0; z-index: 1; justify-items: stretch;
  padding: 12px 0 6px; background: linear-gradient(to bottom, transparent, var(--well) 14px);
}
html.pocket .empty .fr-free { order: 11; padding-bottom: 14px; }
html.pocket .btn.big { width: 100%; min-width: 0; height: 52px; }
html.pocket .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.pocket .hm-fix { justify-self: stretch; }

/* the first-fix coach: top of the dock on desktop, just above the tool bar on phones */
.dock.coaching { grid-template-rows: auto auto minmax(0, 1fr); }
.coach {
  display: flex; align-items: center; gap: 10px; margin: 8px 8px 0; padding: 9px 10px 9px 12px; border-radius: var(--r-md);
  background: var(--surface2); border: 1px solid color-mix(in srgb, var(--gusta) 45%, var(--border));
}
.dock .coach { flex-direction: column; align-items: stretch; }
.coach-body { flex: 1; min-width: 0; }
.coach-n { font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gusta); }
.coach-text { margin: 2px 0 0; line-height: 1.4; }
.coach-row { display: flex; align-items: center; gap: 6px; flex: none; }
html.pocket .coach-text { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .coach { animation: coach-in 0.22s ease-out; }
}
@keyframes coach-in { from { opacity: 0; transform: translateY(6px); } }

/* filmstrip: Home, the filter, flags and stars, selection actions */
.film-tools { flex: none; display: flex; align-items: center; gap: 6px; padding-right: 2px; }
.film-home {
  width: var(--btn-h); height: var(--btn-h); padding: 0; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface2); color: var(--text); display: grid; place-items: center; cursor: pointer;
}
.film-home:hover { background: var(--surface3); }
.film-filter { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); }
.film-filter button {
  height: calc(var(--btn-h) - 6px); padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-dim); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.film-filter button[aria-pressed='true'] { background: var(--surface3); color: var(--text); }
.film-none { flex: none; margin: 0; align-self: center; padding: 0 8px; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.film.rejected img { opacity: 0.4; }
.film-marks { position: absolute; left: 3px; bottom: 3px; display: flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: var(--r-pill); background: var(--chip-on-photo); color: var(--chip-on-photo-text); }
.film-marks svg { width: 9px; height: 9px; display: block; }
.film-flag { display: inline-flex; }
.film-flag.pick { color: var(--chip-on-photo-ok); }
.film-flag.reject { color: var(--chip-on-photo-no); }
.film-stars { display: inline-flex; gap: 1px; }
.film-actions { display: grid; grid-template-columns: auto auto; align-content: center; }
@media (pointer: coarse) {
  .film-filter button { height: 40px; padding: 0 12px; font-size: 13px; }
  .hm-star { width: 40px; height: 40px; }
}

/* ── Before a photo: no dead editor beside the first-run screen ──
   (the phone shell already hides its tools; the desktop dock waits too) */
html:not(.pocket) body:not(.has-photo) .dock { display: none; }
html:not(.pocket) body:not(.has-photo) .work { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

/* ═══ Feedback (feedback.js): the always-reachable support circle. A
   pop-menu on desktop, a bottom sheet in the pocket shell (the shared
   .pop-menu rule); the toggle hides there and More opens it. ═══ */
.fb-toggle { position: relative; }
.fb-dot, #btn-more.has-dot::after {
  position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg); pointer-events: none;
}
#btn-more { position: relative; }
#btn-more.has-dot::after { content: ''; }
html.pocket #feedback-toggle { display: none; }
.feedback-menu { width: 360px; gap: 12px; }
.feedback-menu [hidden] { display: none !important; }
.fb-head { display: flex; align-items: center; gap: 10px; }
.fb-head > b { font-size: 14px; }
.fb-close { margin-left: auto; border-color: transparent; background: transparent; }
.fb-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.fb-tab {
  height: calc(var(--btn-h) - 6px); padding: 0 10px; border: 0; border-radius: calc(var(--r-md) - 2px); background: none;
  color: var(--text-dim); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.fb-tab[aria-selected='true'] { background: var(--surface3); color: var(--text); }
.fb-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
.fb-view { display: grid; gap: 10px; }
.fb-lede { margin: 0; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-kind {
  min-height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.fb-kind:hover { background: var(--surface3); }
.fb-kind[aria-checked='true'] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.fb-kind.gusta { border-color: color-mix(in srgb, var(--gusta) 50%, var(--border)); color: var(--gusta); }
.fb-kind.gusta[aria-checked='true'] { background: var(--gusta-bg); border-color: var(--gusta); }
.feedback-menu .fb-text { height: auto; min-height: 96px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.fb-reply .fb-text { min-height: 60px; }
.fb-rate { display: grid; gap: 6px; }
.fb-rate i, .fb-email i { font-style: normal; color: var(--text-faint); margin-left: 4px; }
.fb-stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.fb-star {
  height: 32px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-dim);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.fb-star:hover { background: var(--surface3); color: var(--text); }
.fb-star[aria-checked='true'] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.fb-rate-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: -2px; }
.fb-email { display: grid; gap: 4px; }
.fb-details { font-size: 13px; }
.fb-peek > summary { cursor: pointer; font-size: 12px; color: var(--accent); width: fit-content; }
.fb-peek ul {
  margin: 6px 0 0; padding: 8px 10px 8px 22px; max-height: 168px; overflow: auto; border-radius: var(--r-md); background: var(--surface);
  font-size: 11.5px; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere;
}
.fb-status:empty { display: none; }
.fb-thanks { margin: 0; font-size: 14px; line-height: 1.5; }
.fb-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.fb-signin { margin-right: auto; font-size: 13px; }
/* the sheet scrolls: Send stays in reach in its pinned foot (.pop-foot), with the
   privacy line right above it, so nothing scrolls under a see-through button */
.fb-foot .menu-note { margin: 0; }
.fb-empty { margin: 4px 0; }
.fb-thread { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.fb-thread:first-child { border-top: 0; padding-top: 0; }
.fb-bubble { padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-bubble[data-author='support'] { border-left: 2px solid var(--accent); }
.fb-thread.unread .fb-bubble[data-author='support']:last-of-type { background: var(--accent-bg); }
.fb-author { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; }
.fb-author small { font-weight: 400; margin-left: 6px; color: var(--text-faint); }
.fb-reply { display: grid; gap: 6px; }
.fb-reply-open { justify-self: start; }
@media (pointer: coarse) {
  .fb-kind { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .fb-star { height: 44px; font-size: 15px; }
  .fb-tab { height: 36px; font-size: 14px; }
  .fb-peek > summary { line-height: 40px; font-size: 13px; }
  .fb-details { min-height: 40px; font-size: 14px; }
  .fb-details input { width: 20px; height: 20px; }
  .fb-reply-open { padding: 10px 0; font-size: 14px; }
  .feedback-menu .fb-text { font-size: 16px; }   /* 16px keeps iOS from zooming the page on focus */
  .feedback-menu .field { font-size: 16px; }
  .toast .toast-act { height: 36px; padding: 0 12px; font-size: 14px; }
}

/* ══ Platform (phase 5: osOpen.js, idb.js notices, palette.js, photoInfo.js,
   watermark export, WebP / AVIF everywhere) ═══════════════════════════ */
.tab-notice { grid-template-columns: 40px minmax(0, 1fr) auto; padding-right: 10px; z-index: 74; }
.tab-notice[data-kind='blocked'] { grid-template-columns: 40px minmax(0, 1fr); }
.tab-notice-reload { min-width: 72px; }
html.pocket .tab-notice { grid-template-columns: 40px minmax(0, 1fr) auto; }
html.pocket .tab-notice-reload { min-height: 44px; }
/* export: file size, format note, the opt-in watermark (exportExtras.js) */
html:not(.pocket) #export-pop { max-height: calc(100dvh - 72px); overflow: auto; overscroll-behavior: contain; }
.wm-opts { display: grid; gap: 8px; }
.wm-opts[hidden] { display: none; }
.wm-text {
  grid-column: 2 / 4; min-width: 0; height: var(--btn-h); padding: 0 8px; font: inherit;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md);
}
.wm-text:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.wm-group .pop-row input[type=range] { min-width: 0; }
.pop-seg svg { display: block; }
@media (pointer: coarse) {
  .wm-text { font-size: 16px; min-height: 40px; }
  /* fingers: every row, switch and segment of the export popover (and the sheets that share
     them) is a 44 px target; a checkbox is tapped through its whole label row */
  .pop-check { min-height: 44px; }
  .popover .pop-row { min-height: 44px; }
  .pop-seg span { min-height: 40px; }
}
/* Export stays in reach: its foot is pinned to the bottom of a popover that scrolls (a
   short window, or every option open), an opaque strip the options scroll behind. The
   negative margins cancel the popover's 12 px padding, so nothing moves when it fits. */
.pop-foot {
  position: sticky; bottom: -12px; z-index: 1; display: grid; gap: 8px;
  margin: 0 -12px -12px; padding: 0 12px 12px; background: var(--surface2);
}
/* what scrolls behind fades into the strip (the band covers only the 10 px gap above it) */
.pop-foot::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: linear-gradient(to bottom, transparent, var(--surface2)); pointer-events: none; }
/* Photo info (infoPanel.js): the status-bar file name opens it */
.status-info { cursor: pointer; border-radius: var(--r-sm); padding: 1px 4px; margin: -1px -4px; }
.status-info:hover { color: var(--text); background: var(--surface3); }
.status-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.info-list dd .btn { margin-left: 6px; vertical-align: middle; }
html.pocket .info-list dd .btn { min-height: 40px; margin: 6px 0 0; display: inline-flex; }
/* the command palette (palette.js): Cmd/Ctrl+K, More > Search on a phone */
.palette-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 62; }
.palette {
  position: fixed; z-index: 63; left: 50%; top: 12vh; transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(560px, 76vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.palette[hidden], .palette-backdrop[hidden] { display: none; }
.palette:focus { outline: none; }
.palette-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.palette-head input { min-width: 0; height: 32px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.palette-list { overflow: auto; padding: 6px; overscroll-behavior: contain; }
.palette-group { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.palette-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 34px; padding: 4px 10px;
  border-radius: var(--r-md); cursor: pointer; color: var(--text);
}
.palette-item.on { background: var(--accent-bg); }
.palette-item.on .palette-label { color: var(--accent); }
.palette-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-kind { color: var(--text-dim); font-size: 12px; }
.palette-item kbd { font: 11px ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; color: var(--text-dim); white-space: nowrap; }
.palette-empty { margin: 0; padding: 14px; color: var(--text-dim); }
.palette-foot { margin: 0; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; }
.adj-row.palette-flash { animation: palette-flash 1.4s ease-out; border-radius: var(--r-md); }
@keyframes palette-flash { 0%, 35% { background: var(--accent-bg); } 100% { background: transparent; } }
html.pocket .palette {
  top: auto; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); transform: none; width: auto;
  bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--kb, 0px))); max-height: min(72dvh, 600px);
}
html.pocket .palette-head input { font-size: 16px; height: 40px; }
html.pocket .palette-item { min-height: 44px; }
@media (pointer: coarse) { .palette-item { min-height: 44px; } .palette-close { min-height: 40px; } }

/* ══ Gusta extras (copilot.js, heat.js, talk.js, rules.js, authSheet.js) ══
   Where did this change (the heat overlay, styled like the J clipping
   view, and its coverage badge), receipt pins on the photo, hold to talk,
   and the rule-set pickers. Apricot = Gusta; the heat colors are data
   colors and sit on the photo, so they are the same in both themes. */
:root { --heat-brighter: #ff3d3d; --heat-darker: #3d78ff; --heat-color: #ffd633; }
.g-heat { position: absolute; z-index: 3; pointer-events: none; image-rendering: auto; }
.g-heat[hidden], .g-heat-badge[hidden] { display: none; }
.g-heat-badge {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 16px); padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--chip-on-photo); color: var(--chip-on-photo-text); font-size: 12px; white-space: nowrap; overflow: hidden;
}
.g-heat-badge b { font-weight: 600; }
.g-heat-key { display: inline-flex; align-items: center; gap: 4px; color: color-mix(in srgb, var(--chip-on-photo-text) 75%, transparent); font-size: 11px; }
.g-heat-key i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-left: 4px; }
.g-heat-key .hb { background: var(--heat-brighter); }
.g-heat-key .hd { background: var(--heat-darker); }
.g-heat-key .hc { background: var(--heat-color); }
.rc-row.rc-where { cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rc-row.rc-where:focus-visible { outline: 2px solid var(--gusta); outline-offset: -2px; }
.rc-row.where { background: var(--gusta-bg); }
.rc-row.pin-on { box-shadow: inset 3px 0 0 var(--gusta); }
.rc-cover { grid-column: 1; font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-dim); }
.rc-pend .rc-cover { grid-column: 2; }
.rc-cover[hidden] { display: none; }
.rc-no {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-right: 5px; padding: 0 3px; border-radius: var(--r-pill);
  background: var(--gusta); color: var(--on-gusta); font: 600 10px ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; vertical-align: 1px;
}
.g-where-hint { margin: 0; padding: 5px 8px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 11px; }
.declined .g-where-hint { display: none; }
.g-pins { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.g-pins[hidden], .g-pin[hidden] { display: none; }
.g-pin {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 2px solid var(--chip-on-photo); background: var(--gusta); color: var(--on-gusta); font: 700 11px ui-monospace, "SF Mono", Menlo, monospace;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); touch-action: manipulation;
}
.g-pin::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.g-pin.off { opacity: 0.55; }
.g-pin.on { box-shadow: 0 0 0 3px var(--chip-on-photo-text), 0 1px 6px rgba(0, 0, 0, 0.6); }
.g-pin:focus-visible { outline: 2px solid var(--chip-on-photo-text); outline-offset: 2px; }
.g-mic {
  flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-dim);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.g-mic[hidden] { display: none; }
.g-mic:hover, .g-mic:focus-visible { color: var(--text); border-color: var(--gusta); }
.g-mic.on { background: var(--gusta); border-color: var(--gusta); color: var(--on-gusta); }
.g-mic-note { margin: 0; color: var(--text-dim); font-size: 11.5px; line-height: 1.4; }
.g-mic-note[hidden] { display: none; }
.g-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.g-meta .g-precost { min-width: 0; }
.g-rules { flex: none; display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 11px; }
.g-rules select { font: inherit; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 4px; }
.g-rule-note { border-left: 2px solid var(--gusta); padding-left: 8px; }
.g-sugs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.g-sugs .g-askfull { margin-left: 2px; }
.g-auth-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g-welcome { border-color: color-mix(in srgb, var(--gusta) 40%, var(--border)); }
.g-welcome p, .g-nudge p { font-size: 12.5px; }
.g-helpful { display: flex; align-items: center; gap: 2px; color: var(--text-dim); font-size: 11.5px; }
.g-helpful > span { margin-right: 4px; }
.auth-rules { display: grid; gap: 6px; }
.auth-rules .pop-seg { flex-wrap: wrap; border-radius: var(--r-md); }
.auth-rules .pop-seg label { flex: 1 1 auto; }
.auth-rules .pop-seg span { font-size: 12px; padding: 0 6px; }
/* on a phone the welcome card needs the room: the cost and status lines step aside while it shows */
html.pocket .gusta-panel:has(.g-welcome) .g-meta, html.pocket .gusta-panel:has(.g-welcome) .g-status { display: none; }
@media (pointer: coarse) {
  .g-mic { width: 42px; height: 42px; }
  .g-rules select { min-height: 40px; font-size: 16px; }
  .g-pin { width: 28px; height: 28px; font-size: 12px; }
  .g-where-hint { font-size: 12px; }
  .g-helpful .btn-text { min-height: 40px; min-width: 44px; font-size: 13px; }
  .g-auth-row .btn, .g-sugs .btn { height: 42px; padding: 0 14px; font-size: 14px; }
  .g-auth-row .btn-text { min-height: 40px; font-size: 13px; }
}
html.pocket .g-heat-badge { top: 8px; }
html.pocket body.g-pending .g-meta { display: none; }

/* ── Phase 5 retouch (phase5-heal): spot heal and Guided upright on the stage ── */
/* spot heal: the target circle, the dashed circle it copies from (same photo), the link between them */
.ov-heal { fill: transparent; stroke: var(--overlay-line); stroke-width: 1.5; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
.ov-heal.on { stroke-width: 2.5; }
.ov-heal-src { fill: transparent; stroke: var(--overlay-line); stroke-width: 1.5; stroke-dasharray: 4 3; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }
.ov-heal-link { stroke: var(--overlay-grid); stroke-width: 1; stroke-dasharray: 2 3; }
/* Guided upright: the bar's note, the drawn guides (white, like every overlay line), their ends and remove mark */
.upright-note { color: var(--text-dim); padding: 0 6px; max-width: 360px; font-size: 12px; line-height: 1.35; }
.ov-guide { stroke: var(--overlay-line); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)); }
.ov-guide.draft { stroke-dasharray: 6 4; }
.ov-guide-x { fill: var(--surface2); stroke: var(--overlay-line); stroke-width: 1.5; }
.ov-guide-x-mark { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }

/* ═══ Phase 5 select: point to select, the iPad floating dock, similar-shot hints ═══ */
/* point to select (stage.js): the taps of the active selection; filled = selected, ring with a bar = left out */
.ov-spt { fill: var(--mask-pin); stroke: var(--overlay-line); stroke-width: 1.5; }
.ov-spt.minus { fill: rgba(0, 0, 0, 0.45); stroke: var(--mask-pin); stroke-width: 2; }
.ov-spt-bar { stroke: var(--overlay-line); stroke-width: 1.8; stroke-linecap: round; }
.stage[data-tool='mask'][data-mask-kind='point'] { cursor: crosshair; }

/* ── iPad sideways: the dock floats over the surround (floatDock.js) ──
   The photo takes the whole width; the dock is a card that moves by its
   grip, folds to its tab row and docks back at the side. */
.dock-ctl-row { margin-left: auto; display: flex; gap: 2px; align-items: center; padding-bottom: 2px; }
.dock-ctl {
  width: 44px; height: 44px; border: 0; border-radius: var(--r-md); background: none; color: var(--text-dim);
  display: grid; place-items: center; cursor: pointer; touch-action: none;
}
.dock-ctl:hover { color: var(--text); background: var(--surface3); }
.dock-ctl[data-dock='grip'] { cursor: grab; }
body.dock-float .work { position: relative; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
body.dock-float.gusta-open .work { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--gusta-w); }
/* z 24: under the stage's own cards (the look banner and the crop and upright bars, 25), the
   top bar's popovers (export, account, feedback), the Gusta panel, Home, dialogs, the palette
   and toasts. Never taller than the work area (floatDock.js keeps all of it inside: the page
   never scrolls); the pane scrolls inside it. */
body.dock-float .dock {
  position: absolute; z-index: 24; width: min(348px, calc(100% - 16px)); height: min(720px, calc(100% - 16px)); max-height: calc(100% - 16px);
  grid-template-columns: minmax(0, 1fr);
  background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.dock-float .dock.moving { opacity: 0.92; }
body.dock-float.dock-collapsed .dock { height: auto; grid-template-rows: auto; }
body.dock-float.dock-collapsed .dock .dock-pane { display: none; }
body.dock-float .dock-tabs { align-items: center; padding: 2px 4px 0 6px; min-width: 0; }
body.dock-float .dock-tab { padding-inline: 10px; }
body.dock-float .dock-ctl { width: 40px; }
/* in crop and Guided upright the bar's controls stay clear of a card moved low */
body.dock-float .crop-bar { z-index: 25; }
@media (max-width: 1280px) {
  body.dock-float .gusta-panel { right: calc(var(--tray-gap) * 2); }
}

/* similar shots and blurry ones: measured hints, never actions (quality.js) */
.hm-top { position: absolute; left: 5px; right: 5px; top: 5px; display: flex; align-items: center; gap: 4px; }
.hm-top .hm-marks { position: static; margin-left: auto; flex: none; }
/* narrow tiles (a phone's three columns): the hint wraps instead of losing its words */
.hm-hint {
  min-width: 0; padding: 2px 7px; border-radius: 9px; line-height: 1.3;
  background: var(--chip-on-photo); color: var(--chip-on-photo-text); font-size: 10.5px; font-weight: 600; overflow-wrap: break-word;
}
.hm-hint.sharpest { color: var(--chip-on-photo-ok); }
.hm-hint.blurry { color: var(--chip-on-photo-no); }
.hm-note { margin: 0; color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.hm-pick { justify-self: start; }
html.pocket .hm-pick { justify-self: stretch; }
.film-hint {
  position: absolute; left: 3px; top: 3px; padding: 0 4px; border-radius: var(--r-pill); font: 600 9px/14px system-ui, sans-serif; font-style: normal;
  background: var(--chip-on-photo); color: var(--chip-on-photo-text);
}
.film-hint.sharpest { color: var(--chip-on-photo-ok); }
.film-hint.blurry { color: var(--chip-on-photo-no); }

/* the share target asks before it opens anything (osOpen.js): the names, then Discard / Open */
.dialog .share-names { color: var(--text); overflow-wrap: anywhere; }
.share-confirm .btn { min-height: 40px; min-width: 88px; }
html.pocket .dialog:has(.as-sheet) .share-confirm .btn { min-height: 44px; }