/* Reelset — the look every page shares (plan/PRODUCT.md §6): Runway's restraint, Instagram's
   colours. White ground, black type, hairlines, black pill buttons; Instagram's gradient only where
   something is happening (a montage running, a new version, the mark). Font: Onest, with Cyrillic. */

:root {
  --ground: #ffffff;
  --raised: #fafafa;
  --sunk: #efefef;
  --line: #dbdbdb;
  --line-soft: #efefef;
  --ink: #000000;
  --ink-2: #737373;
  --ink-3: #a8a8a8;
  --pill: #000000;
  --pill-hover: #262626;
  --on-pill: #ffffff;
  --bubble: #efefef;
  --frame: #121212;
  --link: #0095f6;
  --ok: #2e9e1f;
  --ok-soft: #e8f6e4;
  --warn: #b26a00;
  --warn-soft: #fff3df;
  --bad: #ed4956;
  --bad-soft: #fdecee;
  --ig: linear-gradient(45deg, #ffd600 0%, #ff7a00 25%, #ff0069 50%, #d300c5 75%, #7638fa 100%);
  --ig-ring: conic-gradient(from 200deg, #ffd600, #ff7a00, #ff0069, #d300c5, #7638fa, #ffd600);
  --dm: linear-gradient(160deg, #a033ff 0%, #5b51d8 55%, #0095f6 100%);
  --hot: #ff0069;
  --font: "Onest", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #000000; --raised: #121212; --sunk: #262626; --line: #363636; --line-soft: #262626;
    --ink: #f5f5f5; --ink-2: #a8a8a8; --ink-3: #737373;
    --pill: #f5f5f5; --pill-hover: #dbdbdb; --on-pill: #000000; --bubble: #262626; --frame: #121212;
    --ok: #58c322; --ok-soft: #14260e; --warn: #f0b45a; --warn-soft: #2b2112;
    --bad: #ff6b77; --bad-soft: #2e1417;
  }
}
:root[data-theme="dark"] {
  --ground: #000000; --raised: #121212; --sunk: #262626; --line: #363636; --line-soft: #262626;
  --ink: #f5f5f5; --ink-2: #a8a8a8; --ink-3: #737373;
  --pill: #f5f5f5; --pill-hover: #dbdbdb; --on-pill: #000000; --bubble: #262626; --frame: #121212;
  --ok: #58c322; --ok-soft: #14260e; --warn: #f0b45a; --warn-soft: #2b2112;
  --bad: #ff6b77; --bad-soft: #2e1417;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink);
  font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 500; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--link) 25%, transparent); }

.muted { color: var(--ink-2); font-size: 14px; }
.faint { color: var(--ink-3); font-size: 13px; }
.sp { flex: 1; }

/* The mark: Instagram's gradient with a ring, as in the mockup. */
.mark { width: 26px; height: 26px; border-radius: 8px; background: var(--ig); display: grid;
  place-items: center; flex: none; }
.mark::after { content: ""; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em; text-decoration: none; }

/* Buttons: black pills for the one thing to do, hairline pills for the rest. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px;
  padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground);
  cursor: pointer; font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--raised); }
.btn.primary { background: var(--pill); color: var(--on-pill); border-color: transparent; }
.btn.primary:hover { background: var(--pill-hover); }
.btn.quiet { border-color: transparent; background: none; color: var(--ink-2); }
.btn.quiet:hover { color: var(--ink); background: var(--raised); }
.btn.danger { color: var(--bad); }
.btn.small { height: 32px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: default; }
.icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 17px; flex: none; }
.icon:hover { background: var(--raised); color: var(--ink); }

input[type="text"], input[type="email"], input[type="password"], input:not([type]), textarea, select {
  border: 1px solid var(--line); border-radius: 12px; background: var(--ground); padding: 9px 12px;
  outline: 0; }
input:focus, textarea:focus, select:focus { border-color: var(--ink-3); }
select { appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23737373' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; }
textarea { resize: vertical; line-height: 1.45; }
::placeholder { color: var(--ink-3); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--raised);
  color: var(--ink-2); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.hot { background: var(--ink); color: var(--ground); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.dot.ig { background: var(--ig); }

/* A running thing: Instagram's ring, turning. */
.ring { width: 36px; height: 36px; border-radius: 50%; background: var(--ig-ring); padding: 2.5px;
  flex: none; animation: ring-turn 1.6s linear infinite; }
.ring::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--ground); }
.ring.small { width: 18px; height: 18px; padding: 2px; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30;
  background: var(--pill); color: var(--on-pill); padding: 11px 18px; border-radius: 999px;
  font-size: 14px; max-width: min(560px, calc(100vw - 32px)); }
.toast.bad { background: var(--bad); color: #fff; }

.veil { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .45); }
.dialog { width: min(440px, 100%); display: grid; gap: 14px; padding: 24px; border-radius: 20px;
  background: var(--ground); border: 1px solid var(--line-soft); }
.dialog h3 { font-size: 18px; font-weight: 500; }
.dialog .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.dialog input { width: 100%; }