/* Portrait Coach, laid out with Graphite (tokens.css + components.css). Only tokens here; no new hues. */

/* veils over the photo, derived from the paper and ink tokens for each theme */
:root { --veil: rgba(244, 241, 234, .84); --guide: rgba(31, 30, 28, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --veil: rgba(27, 26, 24, .84); --guide: rgba(240, 237, 230, .3); } }
:root[data-theme="dark"] { --veil: rgba(27, 26, 24, .84); --guide: rgba(240, 237, 230, .3); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--surface); color: var(--ink);
  font: 400 15px/24px var(--font-mono);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
.small { font-size: 13px; line-height: 19px; margin: 0; }
.muted { color: var(--ink-muted); }
.heading { font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.04em; margin: 0; }

.screen { height: 100%; display: flex; flex-direction: column; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; background: var(--surface-sunken); isolation: isolate; }

/* links and buttons that float over the photo, like Graphite's tabs on a phone */
.float { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); z-index: 3; }
.float-left { left: max(var(--space-4), env(safe-area-inset-left)); }
.float-right { right: max(var(--space-4), env(safe-area-inset-right)); }
.float-bottom { top: auto; bottom: var(--space-4); left: max(var(--space-4), env(safe-area-inset-left)); display: flex; gap: var(--space-3); }
.float .gr-link { background: var(--surface); padding: 6px 6px 12px; }

/* step 1: the photo moves under a fixed frame; outside it, a paper veil */
#src {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.shade { position: absolute; inset: 0; pointer-events: none; border: 0 solid var(--veil); }
.frame {
  position: absolute; pointer-events: none;
  outline: 1.5px solid var(--ink); box-shadow: var(--shadow-block);
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), var(--guide) calc(33.333% - .5px), var(--guide) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--guide) calc(66.666% - .5px), var(--guide) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), var(--guide) calc(33.333% - .5px), var(--guide) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--guide) calc(66.666% - .5px), var(--guide) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}

.empty {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-4); text-align: center; background: var(--surface);
}
.empty .gr-counter { margin: var(--space-2) 0 0; }
.theme-tabs { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); right: max(var(--space-4), env(safe-area-inset-right)); }
.stage.over .empty { outline: 2.5px solid var(--accent); outline-offset: -12px; }
.samples { display: grid; grid-template-columns: repeat(4, 64px); gap: var(--space-3); padding: 0 3px 3px 0; }
.sample {
  appearance: none; padding: 0; cursor: pointer; width: 64px; height: 84px; border-radius: var(--radius-none);
  border: 1.5px solid var(--ink); box-shadow: var(--shadow-block); background: var(--surface-raised); overflow: hidden;
  transition: transform .18s;
}
.sample:hover { transform: translate(-1.5px, -1.5px); }
.sample:active { transform: translate(2px, 2px); box-shadow: none; }
.sample:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 4px; }
.sample img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.picker-group { display: grid; justify-items: center; gap: var(--space-4); }
.picker-group .gr-counter { margin: var(--space-2) 0 0; }
/* recent photos: up to two rows show, the rest scroll */
.recent { max-height: calc(2 * 84px + var(--space-3) + 6px); overflow-y: auto; padding: 6px 6px 3px 0; }
.tile { position: relative; }
.tile-x {
  position: absolute; top: -6px; right: -6px; z-index: 1; width: 22px; height: 22px; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: var(--surface-raised); border: 1.5px solid var(--ink); border-radius: var(--radius-none);
}
.tile-x::after { content: ""; position: absolute; inset: -6px; }
.tile-x:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* step 2: the camera fills the stage; the photo floats above it */
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#photo { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; pointer-events: none; }

/* the dock: at most dock-height on a phone, so the photo keeps the screen */
.dock {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3);
  max-height: var(--dock-height);
  padding: var(--space-3) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  background: var(--surface); border-top: 1.5px solid var(--ink);
}
.row { display: flex; align-items: flex-end; gap: var(--space-3); min-width: 0; }
.dd { display: grid; gap: 2px; flex: none; }
/* the camera row keeps its height whether or not its options show, so nothing jumps */
.cam-row { min-height: 50px; }
.cam-opts { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: var(--space-3); animation: cam-in .18s ease-out; }
@keyframes cam-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.grow { flex: 1; }
.field { flex: 1; min-width: 0; display: grid; gap: 2px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.field-head output { font-size: 13px; line-height: 19px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* toggles: soft block when off, the strong block when on */
.gr-toggle[aria-pressed="false"] { --fill: var(--soft-fill); --line: var(--soft-line); --ink-on: var(--soft-ink); }
.gr-toggle[aria-pressed="true"] { --fill: var(--block-fill); --line: var(--block-line); --ink-on: var(--block-ink); }

/* dropdowns in the dock open upwards */
.gr-select { min-width: 0; }
.gr-select:disabled { opacity: .4; cursor: not-allowed; }
.dock .gr-menu { top: auto; bottom: 40px; }

/* step dots: three rounds of layers, grouped 2 · 3 · 3 */
.gr-dot.round-start { margin-left: 6px; }
.gr-ibtn:disabled .gr-block { transform: none; }

/* spirit level: a card like Graphite's frames; state is words, the accent marks "level" */
.level {
  position: absolute; z-index: 3; top: max(var(--space-4), env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  background: var(--surface-raised); border: 1.5px solid var(--ink); box-shadow: var(--shadow-block);
  --level: var(--ink-subtle);
}
.level[data-state="ok"] { --level: var(--accent); }
.level[data-state="near"] { --level: var(--ink); }
.dial { position: relative; flex: none; width: 52px; height: 52px; border-radius: var(--radius-round); border: 1.5px solid var(--level); }
.ring { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: var(--radius-round); border: 1.5px solid var(--line-strong); }
.bubble { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: var(--radius-round); background: var(--level); }
.level-read { display: grid; gap: 4px; min-width: 4.6em; }
.level-read .gr-counter { color: var(--level); }
.level-deg { font-size: 24px; line-height: 1; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock-height) + var(--space-4) + env(safe-area-inset-bottom)); z-index: 10;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  padding: var(--space-2) var(--space-3); max-width: calc(100vw - 2 * var(--space-4)); text-align: center;
  background: var(--surface-raised); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: var(--shadow-block);
  font-size: 13px; line-height: 19px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

#toneStep { white-space: nowrap; }
/* on a phone, keep the level clear of the Edit link */
@media (max-width: 520px) { .level { left: auto; right: max(var(--space-4), env(safe-area-inset-right)); transform: none; } }
@media (max-width: 380px) { .dock .row { gap: var(--space-2); } }
@media (prefers-reduced-motion: reduce) { .sample, .toast { transition: none; } .cam-opts { animation: none; } }