/*
  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: lowercase wordmark, heavy and extra wide, set tight against a solid mark. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
}
.logo svg { width: 21px; height: 21px; flex: none; }
.logo span {
  font: 900 21px/1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.035em;
  padding-bottom: 2px;
}

/* 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; }
.btn-sm { --control: 30px; padding: 0 12px; font-size: 13px; }

.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; }
}

/* Signed-in shell with a sidebar: Reviews, Friends, Settings */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100dvh; }
.shell-main { min-width: 0; }

.rail {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px 10px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding-left: 8px; margin-bottom: 8px; }

.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 540;
}
.rail-item:hover { background: var(--hover); color: var(--text); }
.rail-item[aria-current="page"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.rail-item svg { width: 18px; height: 18px; flex: none; }
.rail-item .badge { margin-left: auto; }
.rail-new { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.rail-new .disc { width: 22px; height: 22px; margin-left: -2px; display: grid; place-items: center; border-radius: 50%; background: var(--invert); color: var(--on-invert); flex: none; }
.rail-new .disc svg { width: 14px; height: 14px; }

.rail-recents { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 18px; }
.rail-label { margin: 0 0 6px; padding: 0 10px; color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.recents { list-style: none; margin: 0; padding: 0; overflow: hidden auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1px; }
.rec {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
}
.rec:hover { background: var(--hover); color: var(--text); }
.rec-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Open notes on a clip: the one number worth seeing at a glance. */
.rec-open { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); font: 11px/16px var(--mono); text-align: center; }
.rec-none { padding: 4px 10px; color: var(--text-2); font-size: 13px; }

.rail-foot { display: flex; align-items: center; gap: 10px; padding: 10px 2px 0 6px; margin-top: 8px; border-top: 1px solid var(--line); }
.rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  flex: none;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.icon-btn:hover, .icon-btn[aria-current="page"] { background: var(--hover); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }

.mbar, .scrim, .rail-close { display: none; }
.shell .preview-banner { margin: 0; }

/* Collapsed to icons on wide screens. */
@media (min-width: 821px) {
  .shell.rail-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
  .rail-collapsed .rail { align-items: center; }
  .rail-collapsed .rail-top { flex-direction: column; padding: 0; }
  .rail-collapsed .rail .logo span,
  .rail-collapsed .rail-item > span:not(.disc),
  .rail-collapsed .rail-recents,
  .rail-collapsed .rail-name { display: none; }
  .rail-collapsed .rail-recents + .rail-foot { margin-top: auto; }
  .rail-collapsed .rail-item { width: 40px; justify-content: center; padding: 0; }
  .rail-collapsed .rail-new .disc { margin: 0; }
  .rail-collapsed .rail-foot { flex-direction: column; padding: 10px 0 0; }
  /* A dot stands in for the unread count. */
  .rail-collapsed .rail-item .badge { position: absolute; top: 6px; right: 6px; min-width: 8px; height: 8px; padding: 0; margin: 0; font-size: 0; }
}

/* Phones: a top bar, and the sidebar slides over the page. */
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .mbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 4px;
    height: 56px; padding: 0 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .mbar .logo { margin-right: auto; }
  .mbar .icon-btn { width: 44px; height: 44px; }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .1, 1), visibility 0s linear .28s;
  }
  .rail-open .rail { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform .28s cubic-bezier(.2, .7, .1, 1); }
  .rail-open .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .5); }
  .rail-toggle { display: none; }
  .rail-close { display: grid; }
  .rail-item, .rec { min-height: 44px; }
  .rail-foot .icon-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail { transition: none !important; }
}

/* The studio's other apps, under the recents. */
.rail-apps { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rail-app svg { width: 18px; height: 18px; flex: none; }
.rail-collapsed .rail-apps .rail-label { display: none; }

/* Phones: tab bar along the bottom, clear of the home indicator. */
.tabbar { display: none; }
@media (max-width: 820px) {
  .shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .mbar a[href="/review/"] { display: none; }
  .rail { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; inset: auto 0 0; z-index: 35;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(18px);
    backdrop-filter: saturate(1.4) blur(18px);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    position: relative;
    display: grid; justify-items: center; align-content: center; gap: 3px;
    min-height: 52px;
    border-radius: var(--r-md);
    color: var(--text-2);
    text-decoration: none;
    font-size: 11px; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--text); }
  .tabbar a:active { background: var(--hover); }
  .tabbar .tab-new svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--invert); color: var(--on-invert); }
  .tabbar .tab-new { gap: 1px; color: var(--text); }
  .tabbar .badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* Installed app: the page sits under a see-through status bar. */
@media (min-width: 821px) {
  .standalone .rail { padding-top: max(16px, env(safe-area-inset-top)); }
}

/* On/off switch: a checkbox with role="switch". */
.switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 44px; height: 26px;
  margin: 0;
  border-radius: 13px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background .2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fafafa;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35);
  transition: transform .2s cubic-bezier(.2, .7, .1, 1);
}
.switch:checked { background: var(--invert); }
.switch:checked::after { transform: translateX(18px); background: var(--on-invert); }
.switch:disabled { opacity: .45; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

.suspended-banner {
  padding: 12px 24px;
  background: var(--invert);
  color: var(--on-invert);
  font-weight: 600;
  font-size: 14px;
}

/* Touch screens: no control smaller than a fingertip. */
@media (pointer: coarse) {
  .btn-sm { min-height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
}