/*
  Shutter is black and white end to end. Color belongs to the footage people
  review, so the interface never competes with it. Dark is the default because
  review happens next to graded images; light is a choice in Settings.
*/
:root {
  --bg: #0a0a0a;
  --panel: #111111;
  --raised: #191919;
  --hover: #222222;
  --line: #2a2a2a;
  --line-strong: #4a4a4a;
  --text: #fafafa;
  --text-2: #a3a3a3;
  --invert: #fafafa;
  --on-invert: #0a0a0a;
  --focus: #ffffff;
  --letterbox: #000000;
  --shadow: 0 16px 40px rgb(0 0 0 / .55);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  /* Archivo's narrow widths echo slate lettering and end-credit type; display use only. */
  --display: "Archivo", var(--font);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 14px;
  --control: 34px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #f5f5f5;
  --raised: #ffffff;
  --hover: #ebebeb;
  --line: #dcdcdc;
  --line-strong: #9a9a9a;
  --text: #0a0a0a;
  --text-2: #555555;
  --invert: #0a0a0a;
  --on-invert: #fafafa;
  --focus: #000000;
  --shadow: 0 16px 40px rgb(0 0 0 / .12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

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

[hidden] { display: none !important; }

/* ---------- Shutter's signatures, shared by every page ---------- */

@property --sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Changing page is a shutter turn: the next page wipes in with a rotary sweep, like the logo's blade. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) {
  animation: shutter-turn .42s cubic-bezier(.65, 0, .35, 1) both;
  -webkit-mask-image: conic-gradient(from 135deg, #000 var(--sweep), transparent 0);
  mask-image: conic-gradient(from 135deg, #000 var(--sweep), transparent 0);
}
@keyframes shutter-turn { from { --sweep: 0deg; } to { --sweep: 360deg; } }

/* Selected text reads like a film negative. */
::selection { background: var(--text); color: var(--bg); }

/* Viewfinder frame lines: "this is a shot". Put .frame-corners on any positioned box. */
.frame-corners::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  pointer-events: none;
  --c: rgb(255 255 255 / .9);
  --l: 14px;
  --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat;
}

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--invert); color: var(--on-invert);
  border-radius: var(--r-sm); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  font: 12px/1 var(--mono);
  text-align: center;
  padding: 3px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
  background: var(--raised);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
}
.logo svg { width: 24px; height: 24px; flex: none; }
.logo span {
  font: 700 19px/1 var(--display);
  font-stretch: 88%;
  letter-spacing: -0.01em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control);
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  font-weight: 560;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:disabled { opacity: .45; cursor: default; }

.btn-primary { background: var(--invert); border-color: var(--invert); color: var(--on-invert); }
.btn-primary:hover:not(:disabled) { background: var(--text-2); border-color: var(--text-2); }

.btn-ghost { border-color: transparent; }
.btn-lg { --control: 46px; padding: 0 20px; font-size: 16px; }

.link {
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
  font-weight: 520;
}
.link:hover { text-decoration-color: currentColor; }

/* Fields */
input, select, textarea {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: var(--control);
  padding: 5px 10px;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }

select {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}

/* Signed-in shell: dashboard, settings */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
  padding: 0 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.appnav { display: flex; gap: 4px; }
.appnav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 540;
}
.appnav a:hover { color: var(--text); background: var(--hover); }
.appnav a[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--invert);
  color: var(--on-invert);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.appbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.user-slot { min-width: 32px; min-height: 32px; display: grid; place-items: center; }

.avatar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 13px;
  font-weight: 650;
}

.preview-banner {
  padding: 8px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-2);
  font-size: 13px;
}

.page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.page-title {
  margin: 0;
  font: 700 clamp(30px, 4vw, 42px)/1.05 var(--display);
  font-stretch: 80%;
  letter-spacing: -0.01em;
}

.page-sub { margin: 6px 0 0; color: var(--text-2); }

/* Blocking states: loading, error */
.gate {
  min-height: 60vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.gate h1, .gate h2 { margin: 0; font-size: 20px; }
.gate p { margin: 0; max-width: 48ch; color: var(--text-2); }

/* The loader is the logo's shutter: a ring with a half-disc blade turning at 24 frames a second. */
.spinner {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--text);
}
.spinner::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(var(--text) 0 180deg, transparent 0);
  animation: spin 1s steps(24) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--invert);
  color: var(--on-invert);
  box-shadow: var(--shadow);
}
.toast .link { color: var(--on-invert); text-decoration-color: currentColor; }

/* Dialogs */
.sheet {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--raised);
  color: var(--text);
  box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgb(0 0 0 / .6); }
.sheet h2 { margin: 0 0 8px; font-size: 17px; }
.sheet p { margin: 0; color: var(--text-2); }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

@media (max-width: 720px) {
  :root { --control: 44px; }
  .appbar { gap: 12px; padding: 0 16px; }
  .appbar .logo span { display: none; }
  .appnav a { min-height: 44px; }
  .page { padding: 28px 16px 64px; }
  .preview-banner { padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* A loader still has to show work is happening: slow, stepped turns. */
  .spinner::before { animation: spin 4s steps(8) infinite !important; }
}