/* clip.nullstate.io — Black Glass on the nullstate-ds tokens (ns-tokens.css, synced from the Mac app's static/).
   Flat black field, cream type, one crimson action per view. Works from 320 px phones to desktop. */
@font-face { font-family: "Berkeley Mono"; font-weight: 100 500; src: url("/fonts/BerkeleyMono-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Berkeley Mono"; font-weight: 501 1000; src: url("/fonts/BerkeleyMono-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Soehne Breit"; font-weight: 700; src: url("/fonts/SohneBreit-Dreiviertelfett.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Soehne Breit"; font-weight: 900; src: url("/fonts/SohneBreit-Extrafett.woff2") format("woff2"); font-display: swap; }

:root {
  --edge: rgba(242, 242, 242, 0.2);
  --fs-small: 11px; --fs-ui: 12px; --fs-body: 13px; --fs-display-s: 20px; --fs-display: 24px;
  --ns-font: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ns-display: "Soehne Breit", "Berkeley Mono", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--ns-bg); color: var(--ns-white); font: var(--fs-body)/1.6 var(--ns-font);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
::selection { background: var(--ns-selection); }
:is(button, a, input, select, textarea, summary):focus { outline: none; }
:is(button, a, input, select, textarea, summary, video):focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 3px; }
h1, h2 { font-family: var(--ns-display); font-weight: 700; letter-spacing: -.04em; line-height: 1.2; margin: 0 0 14px; }
h2 { font-size: var(--fs-display-s); }
h3 { font-size: var(--fs-ui); margin: 0; text-transform: lowercase; color: var(--ns-dim-raised); }
.muted { color: var(--ns-dim-2); }
.wordmark { font-size: var(--fs-display); margin: 0; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--edge); border-radius: 999px; background: rgba(242, 242, 242, 0.06); text-decoration: none;
  white-space: nowrap; font-size: var(--fs-ui); cursor: pointer; }
.button:hover { border-color: var(--ns-dim-2); }
.button.small { min-height: 36px; padding: 0 13px; font-size: var(--fs-small); }
.button.primary { background: var(--ns-crimson); border-color: var(--ns-crimson); color: var(--ns-white); }
.button.primary:hover { background: var(--ns-crimson-deep); }
.button:disabled { opacity: .5; cursor: default; }
.textbutton { background: none; border: 0; padding: 6px 4px; color: var(--ns-dim-raised); min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }
input:not([type=checkbox]), select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ns-line-2);
  border-radius: var(--ns-radius-control); background: var(--ns-surface); font-size: 16px; /* 16 px: iOS doesn't zoom */ }
label { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--ns-dim-raised); }
.chip { display: inline-block; padding: 3px 9px; border: 1px solid var(--ns-line-2); border-radius: var(--ns-radius-chip); font-size: var(--fs-small); white-space: nowrap; }
.chip.ok::before { content: "● "; color: #4caf6a; }
.chip.warn { border-color: var(--ns-dim-2); color: var(--ns-white); }
.chip.warn::before { content: "● "; color: #e0a43a; }
.chip.bad { border-color: var(--ns-crimson); }
.banner { margin: 0 16px 16px; padding: 10px 14px; border-left: 3px solid #e0a43a; background: var(--ns-surface); border-radius: var(--ns-radius-control); }
progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--ns-line-2); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--ns-line-2); }
progress::-webkit-progress-value { background: var(--ns-white); }
progress::-moz-progress-bar { background: var(--ns-white); }

.top { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px; border-bottom: 1px solid var(--ns-line); }
.top-status { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.top-user { display: flex; align-items: center; gap: 8px; }
main { max-width: 1180px; margin: 0 auto; padding: 16px; display: grid; gap: 28px; }
.card { border: 1px solid var(--ns-line-2); border-radius: var(--ns-radius-card); padding: 16px; background: var(--ns-surface); }
#link-form { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 12px; align-items: end; }
.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#form-msg { min-height: 1.6em; margin: 8px 0 0; color: var(--ns-dim-raised); }
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 8px; }

.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.job { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--ns-line-2); border-radius: var(--ns-radius-card); }
.job-main { display: flex; gap: 10px; align-items: center; min-width: 0; }
.job-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.job-detail { font-size: var(--fs-small); overflow-wrap: anywhere; }
.job-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.job-actions:empty { display: none; }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.clip { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.clip img, .noposter { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--ns-radius-art); background: var(--ns-surface); border: 1px solid var(--ns-line); }
.clip-title { font-size: var(--fs-ui); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-meta { font-size: var(--fs-small); }

.sheet { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 20px; color: var(--ns-white);
  background: var(--ns-glass-solid); border: 1px solid var(--edge); border-radius: var(--ns-radius-window); overflow: auto; }
.sheet::backdrop { background: var(--ns-scrim); }
.sheet-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.sheet-head h2 { flex: 1; }
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 12px 0; }
.vid { margin: 0; display: grid; gap: 8px; }
.vid video { width: 100%; max-height: 70vh; background: #000; border-radius: var(--ns-radius-art); }
.vid figcaption { display: flex; gap: 8px; flex-wrap: wrap; }
.field { margin: 14px 0; }
.field-head { display: flex; align-items: center; gap: 8px; }
.field-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ns-line-2); }
.sheet-actions label { min-width: 180px; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: var(--ns-radius-popover); background: var(--ns-glass-solid); border: 1px solid var(--edge); z-index: 10; }
.toast.bad { border-color: var(--ns-crimson); }

.splash { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.splash-card { width: min(400px, 100%); display: grid; gap: 14px; }
.splash-card form { display: grid; gap: 14px; }
#msg { min-height: 1.6em; margin: 0; color: var(--ns-dim-raised); }
#msg.bad { color: var(--ns-white); border-left: 3px solid var(--ns-crimson); padding-left: 10px; }

@media (max-width: 720px) {
  #link-form { grid-template-columns: minmax(0, 1fr); }
  #link-form .button { width: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .top { padding: 12px 16px; }
  .sheet { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 14px; }
  .vids { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }