/* =========================================================
   Crewland · looks
   data-theme = "dark" | "light"     (on <html>)
   data-style = "solid" | "glass"    (on <html>)
   Load AFTER styles.css (and app.css).
   ========================================================= */

/* ---------- LIGHT MODE ----------
   "cream" is the contrast/ink color in the design, so in light mode it flips to near-black. */
:root[data-theme="light"] {
  --bg:         #f3ece1;
  --bg-2:       #ebe1d2;
  --card:       #fbf7f0;
  --cream:      #15110f;
  --text:       #15110f;
  --text-soft:  #4d453e;
  --text-faint: #81776d;
  --line:       rgba(21, 17, 15, 0.12);
  --line-2:     rgba(21, 17, 15, 0.22);
  --nav-bg:     rgba(243, 236, 225, .9);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] body::before { opacity: .05; mix-blend-mode: multiply; }
:root[data-theme="light"] .hero::before { background: radial-gradient(ellipse at center, rgba(240, 58, 27, .14), transparent 65%); }
:root[data-theme="light"] .tile { box-shadow: 0 18px 36px -22px rgba(21,17,15,.55); }
:root[data-theme="light"] .project { box-shadow: 12px 12px 0 var(--red); }
:root[data-theme="light"] .verified { color: #0e8f63; border-color: currentColor; }
:root[data-theme="light"] .pcard__collab, :root[data-theme="light"] .handle-status.ok { color: #0e8f63; }

/* ---------- GLASS STYLE ---------- */
:root[data-style="glass"] {
  --glass:        rgba(255, 255, 255, .055);
  --glass-strong: rgba(255, 255, 255, .09);
  --glass-line:   rgba(255, 255, 255, .16);
  --glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, .65);
  --blur:         blur(22px) saturate(140%);
}
:root[data-style="glass"][data-theme="light"] {
  --glass:        rgba(255, 255, 255, .45);
  --glass-strong: rgba(255, 255, 255, .6);
  --glass-line:   rgba(255, 255, 255, .85);
  --glass-shadow: 0 24px 60px -28px rgba(80, 40, 20, .35);
}

/* glowing color field behind everything (added by theme.js) */
.glass-bg { display: none; }
:root[data-style="glass"] .glass-bg {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--bg);
}
.glass-bg i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: drift 26s ease-in-out infinite alternate;
}
.glass-bg i:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: -8vw;  background: var(--red); }
.glass-bg i:nth-child(2) { width: 38vw; height: 38vw; right: -8vw; top: 30vh;  background: var(--red-hi); animation-duration: 32s; opacity: .4; }
.glass-bg i:nth-child(3) { width: 34vw; height: 34vw; left: 25vw; bottom: -14vw; background: var(--red-lo); animation-duration: 38s; }
:root[data-theme="light"] .glass-bg i { opacity: .38; }
:root[data-theme="light"] .glass-bg i:nth-child(3) { background: var(--red-hi); }
@keyframes drift { to { transform: translate(6vw, 4vh) scale(1.12); } }

:root[data-style="glass"] body { background: transparent; }
:root[data-style="glass"] .section--panel { background: transparent; border-color: transparent; }
:root[data-style="glass"] .nav.is-scrolled,
:root[data-style="glass"] .app-nav {
  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom-color: var(--glass-line);
}

/* panels become frosted glass: soft, rounded, no hard print shadows */
:root[data-style="glass"] :is(.project, .join__inner, .card, .pcard, .stat, .deal__item, .status, .table-wrap, .ticker, .tile__tag, .project__type) {
  background: var(--glass);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
:root[data-style="glass"] :is(.project, .join__inner, .card, .pcard, .stat, .status, .table-wrap) { border-radius: 26px; }
:root[data-style="glass"] .project, :root[data-style="glass"] .pcard { overflow: hidden; }
:root[data-style="glass"] .project__cover, :root[data-style="glass"] .pcard__cover { border-radius: 0; }
:root[data-style="glass"] .pcard__cover { border-radius: 26px 26px 0 0; }
:root[data-style="glass"] .status { border-style: solid; }
:root[data-style="glass"] .deal { border-top: 0; gap: 18px; }
:root[data-style="glass"] .deal__item,
:root[data-style="glass"] .deal__item + .deal__item { padding: 30px; border-radius: 24px; }
:root[data-style="glass"] .tile { border-radius: 22px; border: 1px solid var(--glass-line); }
:root[data-style="glass"] .tile__tag, :root[data-style="glass"] .project__type { color: #fff; border-radius: 999px; padding: 5px 11px; }
:root[data-style="glass"][data-theme="light"] .tile__tag, :root[data-style="glass"][data-theme="light"] .project__type { color: var(--text); }
:root[data-style="glass"] .tile__tag--red { background: rgb(var(--red-rgb) / .75); color: #fff; }

:root[data-style="glass"] .ticker {
  background: var(--glass-strong); transform: rotate(-1.5deg);
  border-left: 0; border-right: 0; border-radius: 0;
}
:root[data-style="glass"] .ticker__track span { color: var(--text); }
:root[data-style="glass"] .ticker__track span::after { color: var(--red); }

:root[data-style="glass"] .tags li {
  background: var(--glass); color: var(--text);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); border-radius: 999px;
}
:root[data-style="glass"] .tags li.tag--red { background: rgb(var(--red-rgb) / .8); color: #fff; border-color: transparent; }
:root[data-style="glass"] .tags li.tag--cream { background: var(--glass-strong); }

:root[data-style="glass"] .btn {
  border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 0 10px 30px -10px rgb(var(--red-rgb) / .8), inset 0 1px 0 rgba(255,255,255,.35);
}
:root[data-style="glass"] .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgb(var(--red-rgb) / .9), inset 0 1px 0 rgba(255,255,255,.35); }
:root[data-style="glass"] .btn:active { transform: translateY(1px); }
:root[data-style="glass"] .btn--ghost { background: var(--glass); color: var(--text); box-shadow: none; border-color: var(--glass-line); }

:root[data-style="glass"] :is(.field input, .field select, .field textarea, .toolbar input) {
  background: var(--glass); border-color: var(--glass-line); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
:root[data-style="glass"] .tabs { border-bottom-color: var(--glass-line); }
:root[data-style="glass"] .tabs button + button { border-left-color: var(--glass-line); }
:root[data-style="glass"] .tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
:root[data-style="glass"] .subtabs { border-color: var(--glass-line); border-radius: 999px; overflow: hidden; }
:root[data-style="glass"] .subtabs button + button { border-left-color: var(--glass-line); }
:root[data-style="glass"] .subtabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
:root[data-style="glass"] .form__success { background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 22px; }
:root[data-style="glass"] .success-mark { border-radius: 50%; }
:root[data-style="glass"] th { background: var(--glass-strong); }
:root[data-style="glass"] .chips span { border-radius: 999px; }

/* ---------- LOOK SWITCHER BUTTON (added to nav by theme.js) ---------- */
.vibe-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; margin-right: 6px;
  background: transparent; color: var(--text-soft);
  border: 1.5px solid var(--line-2); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; transition: color .2s, border-color .2s; font-weight: 600; }
.vibe-btn:hover { color: var(--red); border-color: var(--red); }
.vibe-btn svg { width: 15px; height: 15px; }
.nav__inner > .vibe-btn { margin-right: 12px; }
.nav__inner > .nav__links { margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .vibe-btn span { display: none; } .vibe-btn { padding: 8px; } }

/* ---------- ENTRY SCREEN ---------- */
:root[data-entry="pending"] body > :not(.entry):not(.glass-bg):not(script) { opacity: 0; }
:root[data-entry="pending"] body { overflow: hidden; }
body > header, body > main, body > footer { transition: opacity .6s ease; }

.entry {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px 16px;
  background: var(--bg);
  overflow: hidden;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
:root[data-style="glass"] .entry { background: transparent; }
.entry.is-leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }
.entry.is-modal { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.floaters { position: absolute; inset: 0; pointer-events: none; }
.floater {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 56px); height: var(--s, 56px);
  display: grid; place-items: center;
  color: var(--text-soft);
  border: 1.5px solid var(--line-2); border-radius: 18px;
  background: var(--card);
  transform: translate(calc(var(--px, 0) * var(--depth, 1) * 1px), calc(var(--py, 0) * var(--depth, 1) * 1px)) rotate(var(--r, 0deg));
  transition: transform .25s ease-out;
}
.floater > span { display: grid; place-items: center; width: 100%; height: 100%; animation: bob var(--d, 7s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.floater svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.floater.is-red { color: #fff; background: var(--red); border-color: var(--red); }
:root[data-theme="light"] .floater.is-red { color: #fff; }
:root[data-style="glass"] .floater { background: var(--glass); border-color: var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 50%; }
:root[data-style="glass"] .floater.is-red { background: rgb(var(--red-rgb) / .8); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(6deg); } }

.entry__card { position: relative; z-index: 1; text-align: center; max-width: 520px; width: 100%; }
.entry__logo { display: inline-block; position: relative; width: min(78vw, 400px); aspect-ratio: 1391 / 476; font-size: 0; color: transparent; }
.entry__logo::before, .entry__logo::after { content: ""; position: absolute; inset: 0; }
.entry__logo::before { background: url(logo-color.svg) center / contain no-repeat; }
.entry__logo::after { background: var(--cream); -webkit-mask: url(logo-ink.svg) center / contain no-repeat; mask: url(logo-ink.svg) center / contain no-repeat; }
.entry__logo span { display: none; }
.entry__tag { font-family: var(--font-head); font-size: clamp(22px, 4vw, 30px); line-height: 1.05; margin: 18px 0 34px; font-weight: 700; }
.entry__tag em { font-size: 1.05em; }
.entry__pick { display: grid; gap: 14px; justify-items: center; margin-bottom: 30px; }
.entry__row { display: grid; gap: 8px; justify-items: center; }
.entry__row .label { margin: 0; }
.seg { display: inline-flex; border: 2px solid var(--cream); }
.seg button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; min-width: 120px; justify-content: center;
  border: 0; background: transparent; color: var(--text-soft); cursor: pointer;
  font-family: var(--font-head); font-size: 19px; font-weight: 700; }
.seg button + button { border-left: 2px solid var(--cream); }
.seg button[aria-pressed="true"] { background: var(--cream); color: var(--bg); }
.seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
:root[data-style="glass"] .seg { border: 1px solid var(--glass-line); border-radius: 999px; overflow: hidden; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
:root[data-style="glass"] .seg button + button { border-left: 1px solid var(--glass-line); }
:root[data-style="glass"] .seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.entry__go { min-width: 220px; }
.entry__note { margin-top: 16px; font-size: 13px; color: var(--text-faint); }

@media (max-width: 640px) {
  .seg button { min-width: 0; padding: 10px 16px; font-size: 17px; }
  .floater { --s: 44px !important; }
  .floater.hide-sm { display: none; }
  /* phones (and big text settings): nothing floats over the buttons, and the sheet scrolls */
  .entry { overflow-y: auto; place-items: start center; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
  .entry__card { margin: auto 0; }
  .entry.is-modal .floaters { display: none; }
  .floaters .floater { opacity: .35; }
  .entry__tag { margin: 12px 0 22px; }
  .entry__pick { gap: 12px; margin-bottom: 22px; }
  .entry .swatches { max-width: 300px; margin: 0 auto; justify-content: center; }
}
@media (max-height: 640px) { .entry { overflow-y: auto; place-items: start center; } .entry__card { margin: auto 0; } }
@media (prefers-reduced-motion: reduce) {
  .glass-bg i, .floater > span { animation: none; }
  .floater { transition: none; }
}

/* photo tiles always sit on dark artwork, so their text stays light in every mode */
.tile { color: #f6efe4; }
.project__play { color: #0b0a09; }
:root[data-theme="light"] .project__play { background: #fbf7f0; }

/* =========================================================
   BUTTONS v2: rounder, glossier, more tactile
   (overrides the boxy print-style buttons from styles.css)
   ========================================================= */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  gap: 10px;
  padding: 16px 28px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--red-hi) 0%, var(--red) 55%, var(--red-lo) 100%);
  color: #fff;
  font: 700 14px/1 var(--font-body);
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(120, 20, 0, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 0 rgba(120, 20, 0, .28),
    0 10px 24px -10px rgb(var(--red-rgb) / .75),
    0 2px 4px rgba(0, 0, 0, .18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s;
}
/* light sweep on hover */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(120, 20, 0, .28),
    0 16px 30px -12px rgb(var(--red-rgb) / .85),
    0 3px 6px rgba(0, 0, 0, .2);
}
.btn:hover::before { transform: translateX(120%); }
.btn:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    inset 0 2px 4px rgba(120, 20, 0, .35),
    0 4px 10px -6px rgb(var(--red-rgb) / .7);
}
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--red) 45%, transparent); outline-offset: 3px; }
.btn:disabled { filter: grayscale(.3) brightness(.9); transform: none; }

.btn--small {
  padding: 10px 16px; border-radius: 12px; font-size: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(120, 20, 0, .28),
    0 6px 16px -8px rgb(var(--red-rgb) / .75);
}
.btn--small:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(120,20,0,.28), 0 10px 20px -8px rgb(var(--red-rgb) / .85); }

.btn--ghost {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
  text-shadow: none;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn--ghost::before { background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--text) 12%, transparent) 50%, transparent 70%); }
.btn--ghost:hover { filter: none; box-shadow: inset 0 0 0 1.5px var(--text-soft); background: color-mix(in srgb, var(--text) 10%, transparent); }
.btn--ghost:active { box-shadow: inset 0 0 0 1.5px var(--text-soft); }

/* glass style: same button, full pill + frosted rim */
:root[data-style="glass"] .btn { border-radius: 999px; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.25), 0 12px 30px -10px rgb(var(--red-rgb) / .8); }
:root[data-style="glass"] .btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.3), 0 18px 36px -12px rgb(var(--red-rgb) / .9); }
:root[data-style="glass"] .btn--ghost { background: var(--glass); color: var(--text); box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }

/* ---------- toggles (entry Mode/Style) ---------- */
.seg, :root[data-style="glass"] .seg {
  display: inline-flex; gap: 4px; padding: 5px;
  border: 0; border-radius: 18px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  overflow: visible;
}
:root[data-style="glass"] .seg { border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }
.seg button, .seg button + button, :root[data-style="glass"] .seg button + button {
  border: 0; border-radius: 13px;
  padding: 11px 20px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft);
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}
:root[data-style="glass"] .seg button { border-radius: 999px; }
.seg button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.seg button[aria-pressed="true"], :root[data-style="glass"] .seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px -8px rgb(var(--red-rgb) / .9);
}
.seg button:active { transform: scale(.97); }

/* ---------- tabs on the login card + admin ---------- */
.tabs {
  margin: -14px -14px 26px; padding: 5px; gap: 4px;
  border: 0; border-radius: 16px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.tabs button, .tabs button + button,
:root[data-style="glass"] .tabs button + button {
  border: 0; border-radius: 12px; padding: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .06em;
  color: var(--text-soft); transition: background .2s, color .2s;
}
.tabs button[aria-selected="true"], :root[data-style="glass"] .tabs button[aria-selected="true"] {
  background: var(--text); color: var(--bg);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.5);
}
.subtabs, :root[data-style="glass"] .subtabs {
  padding: 4px; gap: 4px; border: 0; border-radius: 14px; overflow: visible;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.subtabs button, .subtabs button + button, :root[data-style="glass"] .subtabs button + button {
  border: 0; border-radius: 10px; padding: 9px 16px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .06em;
}
.subtabs button[aria-selected="true"], :root[data-style="glass"] .subtabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }

/* ---------- look button in the menu ---------- */
.vibe-btn {
  border: 0; border-radius: 12px; padding: 9px 13px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  font-family: var(--font-body); font-weight: 700; letter-spacing: .06em;
  transition: color .2s, box-shadow .2s, background .2s;
}
.vibe-btn:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text-soft); }
:root[data-style="glass"] .vibe-btn { border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }

/* "forgot password" style text buttons */
.linkish { border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: background .2s, color .2s; }
.linkish:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

@media (prefers-reduced-motion: reduce) { .btn::before { display: none; } }

/* =========================================================
   CARDS v2: rounded everything (solid style)
   ========================================================= */
:root { --r-card: 26px; --r-field: 14px; }

.tile { border-radius: 22px; }
.tile__tag, .project__type { border-radius: 999px; padding: 5px 11px; }
.join__inner { border-radius: 32px; box-shadow: 10px 10px 0 var(--red); }
.project { border-radius: var(--r-card); overflow: hidden; box-shadow: 10px 10px 0 var(--red); }
.project__cover { border-radius: 0; }
.verified { border-radius: 999px; padding: 4px 10px; }
.card { border-radius: var(--r-card); box-shadow: 10px 10px 0 var(--red); }
.pcard { border-radius: var(--r-card); overflow: hidden; }
.stat { border-radius: 20px; }
.status { border-radius: 20px; }
.table-wrap { border-radius: 20px; }
.meter, .meter span { border-radius: 999px; }
.crafts-bar i { border-radius: 999px; }
.success-mark { border-radius: 22px; }
.form__success { border-radius: 22px; }
.msg { border-radius: 12px; border-left-width: 0; box-shadow: inset 3px 0 0 var(--red); }
.msg--ok { box-shadow: inset 3px 0 0 #2ee6a8; }
.modal .card { border-radius: var(--r-card); }

/* the deal: three soft cards instead of ruled columns */
.deal { border-top: 0; gap: 18px; }
.deal__item, .deal__item + .deal__item {
  padding: 30px 28px 32px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.deal__item:last-child { border-right: 1px solid var(--line-2); }
.deal__item:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 18px 40px -24px rgb(var(--red-rgb) / .6); }
@media (max-width: 980px) {
  .deal__item, .deal__item + .deal__item { padding: 26px 24px; border: 1px solid var(--line-2); }
}

/* craft tags: rounded stickers */
.tags li { border-radius: 14px; }

/* inputs */
.field input, .field select, .field textarea, .toolbar input { border-radius: var(--r-field); }
.chips span { border-radius: 999px; }
.avatar-row .pcard__avatar { border-radius: 50%; }

/* entry floaters a bit softer */
.floater { border-radius: 20px; }

@media (max-width: 640px) {
  .join__inner, .project, .card { box-shadow: 7px 7px 0 var(--red); }
  .join__inner { border-radius: 26px; }
}

/* glass keeps its own soft shadows */
:root[data-style="glass"] .join__inner,
:root[data-style="glass"] .project,
:root[data-style="glass"] .card { box-shadow: var(--glass-shadow); }
:root[data-style="glass"] .join__inner { border-radius: 32px; }
:root[data-style="glass"] .deal__item:hover { box-shadow: var(--glass-shadow); }

/* =========================================================
   MOTION: fluid transitions everywhere
   ========================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* 1. Page-to-page: smooth cross-fade + slight rise (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.995); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px) scale(1.005); filter: blur(4px); } }
/* the logo stays put between pages */
.nav .logo { view-transition-name: crew-logo; }
::view-transition-group(crew-logo) { animation-duration: .5s; animation-timing-function: var(--ease-out); }

/* older browsers: pages fade in on load */
@supports not (view-transition-name: none) {
  body { animation: page-in .55s var(--ease-out) both; }
}
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
body.is-leaving > :not(.glass-bg) { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }

/* 2. Look switching cross-fade fallback (when theme.js can't use view transitions) */
:root.look-anim, :root.look-anim *, :root.look-anim *::before, :root.look-anim *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, fill .5s ease, stroke .5s ease !important;
}
::view-transition-old(root).look, ::view-transition-new(root).look { animation-duration: .5s; }

/* 3. Scroll reveals: softer, with a hint of blur */
.js .reveal { filter: blur(6px); transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), filter .9s var(--ease-out); }
.js .reveal.is-visible { filter: none; }

/* 4. Swapping panels (login tabs, admin tables, success states) */
@keyframes swap-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }
#signup-form:not([hidden]), #login-form:not([hidden]) { animation: swap-in .45s var(--ease-out) both; }
#table thead, #table tbody { animation: swap-in .4s var(--ease-out) both; }
.handle-status, .msg:not([hidden]) { animation: swap-in .3s var(--ease-out) both; }

/* 5. Entry + look picker */
.entry { animation: entry-in .6s var(--ease-out) backwards; }
.entry.is-modal .entry__card { animation: swap-in .5s var(--ease-out) .05s both; }
@keyframes entry-in { from { opacity: 0; } }
.entry__card > * { animation: swap-in .7s var(--ease-out) both; }
.entry__card > :nth-child(2) { animation-delay: .08s; }
.entry__card > :nth-child(3) { animation-delay: .16s; }
.entry__card > :nth-child(4) { animation-delay: .24s; }
.entry__card > :nth-child(5) { animation-delay: .3s; }
.floater { animation: pop-in .8s var(--ease-out) both; }
.floater:nth-child(2n) { animation-delay: .1s; } .floater:nth-child(3n) { animation-delay: .2s; }
@keyframes pop-in { from { opacity: 0; scale: .6; } }
.seg button[aria-pressed="true"] { transition: background .3s var(--ease-out), color .3s, box-shadow .3s; }

/* 6. Everything interactive eases */
a, button, input, select, textarea, .tile, .card, .stat, .tags li, .chips span, .pcard {
  transition-timing-function: var(--ease-out);
}
.nav { transition: background .4s var(--ease-out), border-color .4s, backdrop-filter .4s; }
.tile, .project, .pcard { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.project:hover { transform: rotate(0deg) translateY(-4px); }
.tags li { transition: transform .35s var(--ease-out), background .3s, color .3s; }
.field input, .field select, .field textarea { transition: border-color .25s, box-shadow .25s, background .25s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*) { animation: none !important; }
  .js .reveal { filter: none; }
  .entry, .entry__card > *, .floater, #signup-form, #login-form, #table thead, #table tbody, .msg, .handle-status { animation: none !important; }
}

/* =========================================================
   ACCENT COLORS: each member picks one (data-accent on <html>)
   --red is the accent everywhere; the name stays for history.
   ========================================================= */
:root, :root[data-accent="red"] { --red-rgb: 255 74 43;  --red: #ff4a2b; --red-hi: #ff6a4f; --red-lo: #e0341a; --red-deep: #2a0905; }
:root[data-accent="violet"]     { --red-rgb: 139 92 255; --red: #8b5cff; --red-hi: #a585ff; --red-lo: #6d3ef0; --red-deep: #17093a; }
:root[data-accent="blue"]       { --red-rgb: 47 128 255; --red: #2f80ff; --red-hi: #5b9cff; --red-lo: #1763e0; --red-deep: #061936; }
:root[data-accent="teal"]       { --red-rgb: 16 196 160; --red: #10c4a0; --red-hi: #3fd9b8; --red-lo: #0a9e81; --red-deep: #032a23; }
:root[data-accent="lime"]       { --red-rgb: 132 204 22; --red: #84cc16; --red-hi: #a3e635; --red-lo: #65a30d; --red-deep: #1a2905; }
:root[data-accent="gold"]       { --red-rgb: 245 166 35; --red: #f5a623; --red-hi: #ffc04d; --red-lo: #d48806; --red-deep: #2e1d02; }
:root[data-accent="pink"]       { --red-rgb: 255 77 166; --red: #ff4da6; --red-hi: #ff7abd; --red-lo: #e02686; --red-deep: #33061d; }
:root[data-accent="mono"]       { --red-rgb: 241 233 220; --red: #f1e9dc; --red-hi: #ffffff; --red-lo: #cfc6b8; --red-deep: #1a1715; }
/* light mode: slightly deeper accents so they read on cream */
:root[data-theme="light"][data-accent="red"], :root[data-theme="light"]:not([data-accent]) { --red: #f03a1b; --red-hi: #ff5a3c; --red-lo: #c92a10; }
:root[data-theme="light"][data-accent="lime"] { --red: #5f9a0c; --red-rgb: 95 154 12; --red-lo: #4a7a08; }
:root[data-theme="light"][data-accent="gold"] { --red: #d68a00; --red-rgb: 214 138 0; --red-lo: #a86c00; }
:root[data-theme="light"][data-accent="teal"] { --red: #0a9e81; --red-rgb: 10 158 129; }
:root[data-theme="light"][data-accent="mono"] { --red-rgb: 21 17 15; --red: #15110f; --red-hi: #3a332e; --red-lo: #000; --red-deep: #2a2420; }
/* text that sits ON the accent: dark for bright accents */
:root { --on-accent: #fff; }
:root[data-accent="lime"], :root[data-accent="gold"], :root[data-accent="mono"]:not([data-theme="light"]) { --on-accent: #0b0a09; }
.btn, .seg button[aria-pressed="true"], .fchip[aria-pressed="true"], .tile__tag--red, .tags li.tag--red,
.success-mark, .dropzone__icon, .tile-art__icon, .link-card__icon, .status__pill, .ticks li::before, .chip--accent,
.msg-row.mine .msg-bubble, .msg-row.mine .msg-bubble a { color: var(--on-accent) !important; }
:root[data-accent="lime"] .btn, :root[data-accent="gold"] .btn, :root[data-accent="mono"]:not([data-theme="light"]) .btn { text-shadow: none; }

/* swatch picker (entry screen + settings) */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: var(--sw); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
  transition: transform .2s var(--ease-out, ease), box-shadow .2s;
}
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--sw); transform: scale(1.08); }
.swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

/* ---------- motion layer helpers (motion.js) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.has-motion { scroll-behavior: auto; }
.spotlight {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--red-rgb) / .22), transparent 62%);
  opacity: 0; transition: opacity .5s ease; mix-blend-mode: screen;
}
:root[data-theme="light"] .spotlight { mix-blend-mode: multiply; background: radial-gradient(circle, rgb(var(--red-rgb) / .16), transparent 62%); }
.hero > .container, .about-hero > .container { position: relative; z-index: 1; }
.about-hero { position: relative; overflow: hidden; }
.has-motion .tile, .has-motion .project, .has-motion .cap, .has-motion .deal__item { transform-style: preserve-3d; will-change: transform; }
/* GSAP takes over these reveals on the public pages */
.has-motion .hero__title, .has-motion .section__title, .has-motion .vibe { opacity: 1 !important; translate: none !important; filter: none !important; }
.btn.btn--ghost, :root[data-style="glass"] .btn.btn--ghost { color: var(--text) !important; text-shadow: none; }

/* =========================================================
   App feel: smooth page changes, installed-app mode
   ========================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s ease both; }
::view-transition-new(root) { animation: vt-in .22s cubic-bezier(.2,.9,.25,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.tabbar { view-transition-name: tabbar; }
.app-nav { view-transition-name: topbar; }
:root[data-motion="reduce"] ::view-transition-group(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* phones: top bar sticks, respects the notch */
@media (max-width: 820px) {
  .app-nav { position: sticky !important; top: 0; z-index: 60; padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line); }
  .app-body { -webkit-user-select: none; user-select: none; }
  .app-body :is(input, textarea, [contenteditable], p, .post-body, .msg-bubble, .bubble) { -webkit-user-select: text; user-select: text; }
  a, button { touch-action: manipulation; }
}
:root[data-app="installed"] body { overscroll-behavior-y: none; }
:root[data-app="installed"] .footer { display: none; }

/* rounded type has real descenders (g, y, p): give the line masks of animated headlines room at the bottom */
.hero__title > div, .section__title > div, .vibe > div { padding-bottom: .16em; margin-bottom: -.16em; }