/* Examine Viewer. The look follows the Studio's "quiet instrument" tokens: neutral interface, ink as the one accent, meaning colours only on the drawing. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/geist-mono.woff2") format("woff2"); }

:root {
  --ground: #f4f4f5; --surface: #ffffff; --draw: #ffffff; --tint: #f4f4f5; --frost: rgb(255 255 255 / .82);
  --ink: #18181b; --ink-2: #52525b; --ink-3: #71717a;
  --hair: #e4e4e7; --hair-2: #d4d4d8; --on-ink: #ffffff; --focus: #18181b;
  --font-body: "Geist", "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-data: "Geist Mono", ui-monospace, Menlo, monospace;
  --h-bar: 44px; --h-ctl: 32px; --r-ctl: 8px; --r-bar: 12px; --r-panel: 12px; --r-card: 20px;
  --edge: 16px; --inset: 8px;
  --shadow-float: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px rgb(0 0 0 / .08);
  --ease: cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}
@media (pointer: coarse) { :root { --h-ctl: 40px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0e0f11; --surface: #17181b; --draw: #1a1b1e; --tint: #202125; --frost: rgb(23 24 27 / .82);
    --ink: #f4f4f5; --ink-2: #a1a1aa; --ink-3: #8b8b93;
    --hair: #2a2b30; --hair-2: #3a3b41; --on-ink: #18181b; --focus: #f4f4f5;
    --shadow-float: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 14px/1.5 var(--font-body); -webkit-text-size-adjust: 100%; overflow: hidden; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 16px; height: 16px; } .ic.xs { width: 12px; height: 12px; }
.nojs { padding: 24px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* page: the view on top, the forms drawer under it */
.app { height: 100%; display: flex; flex-direction: column; gap: var(--inset); padding: var(--edge) var(--edge) 4px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
.view { position: relative; flex: 1 1 0; min-height: 0; background: var(--draw); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline-offset: -4px; }
#cv:active { cursor: grabbing; }

/* floating controls over the drawing */
.frost { background: var(--frost); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--hair-2); }
.bar { position: absolute; z-index: 3; top: var(--inset); left: var(--inset); height: var(--h-bar); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-bar); }
.bar-btn { height: calc(var(--h-bar) - 8px); min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; border-radius: 8px; font-weight: 500; font-size: 13px; cursor: pointer; color: var(--ink); }
.bar-btn:hover, .bar-btn[aria-expanded="true"] { background: var(--tint); }
.bar-btn.icon-only { padding: 0; width: 36px; }
.bar-btn.solo { position: absolute; z-index: 3; top: var(--inset); right: var(--inset); height: var(--h-bar); padding: 0 14px 0 12px; border-radius: var(--r-bar); }
.form-name { position: absolute; z-index: 2; top: var(--inset); left: 50%; transform: translateX(-50%); height: var(--h-bar); margin: 0; display: flex; align-items: center; font-size: 15px; font-weight: 600; pointer-events: none; max-width: 36%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pop { position: absolute; z-index: 6; top: calc(var(--inset) + var(--h-bar) + 6px); left: var(--inset); padding: 12px; background: var(--surface); border: 1px solid var(--hair-2); border-radius: var(--r-bar); box-shadow: var(--shadow-float); }
.pop.export { width: 216px; display: flex; flex-direction: column; gap: 4px; }
.pop.export .cap { margin: 4px 0; }
.pop .opt { display: flex; align-items: center; justify-content: space-between; height: var(--h-ctl); padding: 0 8px; background: none; border: 0; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.pop .opt:hover { background: var(--tint); }
.pop .opt small { font: 400 12px var(--font-data); color: var(--ink-3); }
.pop.howto { width: 300px; font-size: 13px; color: var(--ink-2); }
.pop.howto h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pop.howto ul { margin: 0; padding-left: 18px; } .pop.howto li { margin: 2px 0; }

/* controls panel */
.panel { position: absolute; z-index: 4; top: var(--inset); right: var(--inset); bottom: var(--inset); width: 320px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-panel); overflow: hidden; }
.panel.closed { display: none; }
.grabber { display: none; }
.panel-head .tools { display: flex; }
.panel-head, .drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 44px; background: var(--tint); border-bottom: 1px solid var(--hair); }
.band { display: flex; align-items: center; gap: 8px; padding-left: 16px; color: var(--ink-2); }
.band h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.panel-head { padding-right: 6px; }
.ibtn { width: var(--h-ctl); height: var(--h-ctl); display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-ctl); cursor: pointer; color: var(--ink-2); }
.ibtn:hover { background: var(--hair); color: var(--ink); }
.panel-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; overscroll-behavior: contain; }
.panel-body > section { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.panel-body > section:last-child { border-bottom: 0; }
.cap { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cap label { cursor: default; }
.seg { display: grid; gap: 4px; padding: 3px; background: var(--tint); border: 1px solid var(--hair); border-radius: 10px; }
.seg2 { grid-template-columns: repeat(2, 1fr); } .seg3 { grid-template-columns: repeat(3, 1fr); } .seg4 { grid-template-columns: repeat(4, 1fr); }
.seg button { height: calc(var(--h-ctl) - 2px); padding: 0 4px; background: none; border: 0; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; text-align: center; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; --pct: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--pct), var(--hair-2) var(--pct)); }
input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--hair-2); }
input[type=range]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink); box-sizing: border-box; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink); box-sizing: border-box; }
.ticks { display: flex; justify-content: space-between; margin: -2px 10px 4px; height: 6px; }
.ticks i { width: 1px; height: 6px; background: var(--hair-2); }
.range-labels { display: flex; justify-content: space-between; font: 400 12px var(--font-data); color: var(--ink-3); }

.switches { padding: 12px 0 4px !important; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--hair); }
.row:last-child { border-bottom: 0; }
.switch { flex: none; position: relative; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: var(--hair-2); cursor: pointer; transition: background .16s var(--ease); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .16s var(--ease); }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
@media (pointer: coarse) { .seg button { height: 40px; } .tri { width: 40px; height: 44px; } .switch { width: 48px; height: 28px; border-radius: 14px; } .switch::after { width: 22px; height: 22px; } .switch[aria-checked="true"]::after { transform: translateX(20px); } }

.vhead { display: none; }
.more { display: none; }
.vids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vid { min-width: 0; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; font-size: 12px; line-height: 1.35; font-weight: 500; }
.vid .thumb { position: relative; border: 1px solid var(--hair-2); aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #09090b; color: #fff; border-radius: 8px; }
.vid .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid .thumb .ic { position: relative; width: 32px; height: 32px; stroke-width: 1.5; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
.vid:hover .thumb { background: #3f3f46; }
.links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.links a { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.links a:hover .t { text-decoration: underline; }
.links .line { flex: 1; min-width: 0; padding: 6px 0; }
.links .t { font-size: 13px; font-weight: 500; }
.links .n { display: inline-block; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.links .ic { flex: none; width: 16px; height: 16px; color: var(--ink-3); }

/* forms drawer */
.drawer { flex: none; height: 172px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
.drawer-head { height: 36px; padding-right: 12px; }
.made { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.made:hover { color: var(--ink); text-decoration: underline; }
.drawer-row { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 4px; padding: 0 6px; }
.tri { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--tint); border: 1px solid var(--hair); border-radius: var(--r-ctl); cursor: pointer; color: var(--ink); }
.tri:hover { background: var(--hair); }
.strip { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px; }
.strip::-webkit-scrollbar { display: none; }
.group { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.group:first-child { padding-left: 4px; } .group + .group { border-left: 1px solid var(--hair-2); }
.group .cap { margin: 0; padding-left: 4px; font-size: 11px; white-space: nowrap; }
.items { display: flex; gap: 8px; }
.tile { flex: none; min-width: 92px; white-space: nowrap; width: auto; padding-inline: 8px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; background: none; border: 1px solid transparent; border-radius: var(--r-bar); cursor: pointer; font-size: 12px; font-weight: 500; }
.tile:hover { background: var(--tint); }
.tile[aria-pressed="true"] { background: var(--tint); border: 1.5px solid var(--ink); }
.tile canvas { width: 56px; height: 52px; display: block; }

/* laptop and wide iPad: two columns. The view and the forms drawer share the left column; Controls and Videos fill the right column, top and bottom lined up with them */
.side { display: none; }
@media (min-width: 901px) {
  .app { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr) 172px; gap: 12px; }
  .view { grid-area: 1 / 1; } .drawer { grid-area: 2 / 1; }
  .side { grid-area: 1 / 2 / 3 / 3; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .side .panel { position: static; width: auto; flex: 1 1 0; min-height: 0; border-radius: var(--r-card); }
  #panel-close, #panel-open { display: none; }
  .side #videos { flex: none; padding: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
  .side #videos .vcap { display: none; }
  .side #videos .vhead { display: flex; align-items: center; height: 36px; background: var(--tint); border-bottom: 1px solid var(--hair); }
  .side #videos .vids { padding: 12px; }
  .side .vids:not(.all) .vid:nth-child(n+3) { display: none; }
  .side #videos.expanded { max-height: min(55%, calc(100% - 420px)); display: flex; flex-direction: column; }
  .side #videos.expanded .vids { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
  .side #videos.expanded .vhead, .side #videos.expanded .more { flex: none; }
  .side #videos.expanded .more { margin-top: 0; }
  .side .more { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 24px); margin: 0 12px 12px; height: 32px; background: var(--tint); border: 1px solid var(--hair); border-radius: var(--r-ctl); font-size: 12px; font-weight: 500; cursor: pointer; }
  .side .more:hover { background: var(--hair); }
  .side .vids.one { grid-template-columns: minmax(0, 1fr); }
  .side .vids.one .vid { flex-direction: row; align-items: center; gap: 12px; }
  .side .vids.one .thumb { flex: none; width: 136px; }
  .side .vids.one .vid span:last-child { white-space: normal; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .side .vid span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
}
@media (min-width: 901px) and (max-width: 1200px) { .app { grid-template-columns: minmax(0, 1fr) 300px; } }

/* phone and iPad upright: the controls rise from the bottom as a sheet; the drawer stays at the bottom */
@media (max-width: 900px) and (min-height: 501px) {
  .app { padding: 8px 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .panel { top: auto; left: var(--inset); right: var(--inset); bottom: var(--inset); width: auto; height: 58%; border-radius: var(--r-card) var(--r-card) var(--r-panel) var(--r-panel); box-shadow: var(--shadow-float); }
  .grabber { display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--hair-2); }
  .panel-head { height: 40px; touch-action: none; }
  .view.sheet-open .bar, .view.sheet-open .bar-btn.solo, .view.sheet-open .form-name { display: none; }
  .form-name { max-width: 34%; font-size: 14px; }
}
@media (min-width: 701px) and (max-width: 900px) and (min-height: 501px) { .panel { left: 50%; right: auto; width: 560px; transform: translateX(-50%); } }
@media (max-width: 480px) { .made .long { display: none; } .bar-btn span { font-size: 13px; } .drawer-head .band { padding-left: 12px; } }
@media (max-height: 500px) and (orientation: landscape) {
  .panel { width: 280px; }
  .drawer { height: 88px; border: 0; background: none; }
  .drawer-head, .group .cap { display: none; }
  .drawer-row { padding: 0; }
  .tile { min-width: 64px; height: 64px; font-size: 12px; } .tile canvas { width: 36px; height: 32px; }
  .tri { width: 28px; height: 44px; border: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (pointer: coarse) { .links a { min-height: 40px; } .side .more { height: 40px; } }

/* phone portrait: a quick bar above the view carries the three main controls; More opens the sheet with the rest */
.quick { display: none; }
@media (max-width: 600px) and (min-height: 501px) {
  .quick { display: flex; align-items: center; gap: 6px; flex: none; padding: 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-bar); }
  .sel { position: relative; flex: none; }
  .quick { padding: 6px 4px; gap: 4px; }
  .sel select { -webkit-appearance: none; appearance: none; height: 44px; padding: 0 28px 0 12px; background: var(--tint); color: var(--ink); border: 1px solid var(--hair-2); border-radius: var(--r-ctl); font: 500 14px var(--font-body); }
  .sel .ic { position: absolute; right: 8px; top: 14px; pointer-events: none; color: var(--ink-2); }
  .qfs { flex: 1 1 0; min-width: 40px; padding: 0 4px; }
  .qfs input[type=range] { height: 32px; margin: -2px 0; }
  .qfs .range-labels { font-size: 10px; }
  .more-btn { flex: none; height: 44px; min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--tint); border: 1px solid var(--hair-2); border-radius: var(--r-ctl); font: 500 14px var(--font-body); cursor: pointer; }
  .more-btn[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  #panel-open { display: none; }
  /* the quick bar carries Perspective, View and Foreshortening: the sheet starts at the switches */
  .panel-body > section:nth-child(-n+3) { display: none; }
  .panel { height: auto; max-height: 58%; }
  .panel-body { flex: 0 1 auto; }
  /* drawer scaled down: icons only */
  .drawer { height: 128px; }
  .drawer-head { height: 32px; }
  .tile { width: 64px; min-width: 64px; height: 68px; padding: 4px; }
  .tile canvas { width: 48px; height: 48px; }
  .tile { position: relative; }
  .tile span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .group { padding: 0 8px; } .group .cap { font-size: 10px; }
  .tri { height: 44px; width: 28px; }
}