/* AdEQ — the app comes alive in the website's colours (Franz, 2026-10-28, via
 * adeq-20: "reflect the colours and styles from website to app, not just
 * fonts but some of the cool colours too, so stuff is alive").
 *
 * The logo's colours as fills and edges on the app's own things, as the site
 * does: orange, yellow, green, light blue, and deep blue (anticipation, joy,
 * trust, surprise, sadness). Purple and red stay for emotions only; together
 * they read pink. Buttons stay the accent green. Kinds of work always wear the
 * same colour: statics joy, video anticipation, forms surprise, landing
 * pages sadness, concepts trust. Colours are fills, edges, and glows, never
 * text on paper, so yellow never has to be read in day mode.
 */

:root {
  --joy: #F2D338; --trust: #96C93D; --surprise: #3FA9C9; --sadness: #3B6FB6; --anticipation: #E88A2E;
  --spectrum: linear-gradient(90deg, #7FC0A8, #3FA9C9, #3B6FB6, #3FA9C9, #96C93D, #F2D338, #E88A2E);
}
@property --live-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes live-turn { to { --live-a: 360deg; } }

/* ── a short page name in the spectrum (Home, Today, Library, Team, Clients) ── */
.page-head.is-poster h1 {
  background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── a client's tabs: each its colour, under the open one ── */
.subtab[data-tab="profile"] { --t: var(--trust); }
.subtab[data-tab="create"] { --t: var(--anticipation); }
.subtab[data-tab="tasks"] { --t: var(--joy); }
.subtab[data-tab="work"] { --t: var(--surprise); }
.subtab[data-tab="settings"] { --t: var(--sadness); }
.subtab[data-tab]:hover { border-bottom-color: color-mix(in srgb, var(--t) 50%, transparent); }
.subtab[data-tab][aria-current="page"] { border-bottom-color: var(--t); }

/* ── Home's tiles: a colour along the top, a soft glow when open ── */
.home-stat { --t: var(--accent); border-top: var(--s-half) solid color-mix(in srgb, var(--t) 85%, transparent); }
.home-stat:nth-child(1) { --t: var(--joy); }
.home-stat:nth-child(2) { --t: var(--anticipation); }
.home-stat:nth-child(3) { --t: var(--surprise); }
.home-stat:nth-child(4) { --t: var(--trust); }
.home-stat:nth-child(5) { --t: var(--sadness); }
.home-stat.is-open {
  border-color: var(--t);
  box-shadow: 0 0 0 var(--s-px) var(--t), 0 var(--s-1) var(--s-3) calc(var(--s-1) * -1) color-mix(in srgb, var(--t) 55%, transparent);
}

/* ── kinds of work: the same colour everywhere a piece is shown ── */
.work-card { --k: var(--accent); }
.work-card:is(.is-script, .is-video) { --k: var(--anticipation); }
.work-card:is(.is-ad, .is-bulk, .is-static) { --k: var(--joy); }
.work-card.is-form { --k: var(--surprise); }
.work-card.is-landing { --k: var(--sadness); }
.work-card.is-template { --k: var(--trust); }
.work-card { box-shadow: inset 0 var(--s-half) 0 color-mix(in srgb, var(--k) 85%, transparent); }
.work-card .wc-kind {
  background: color-mix(in srgb, var(--k) 22%, transparent);
  border-color: color-mix(in srgb, var(--k) 55%, transparent); color: var(--ink);
}

/* ── a slot in use: the logo's colours turning slowly round its edge ── */
.qs-slot:not(.is-free) { isolation: isolate; border-color: transparent; }
.qs-slot:not(.is-free)::before {
  content: ""; position: absolute; inset: calc(var(--s-px) * -1); z-index: -1; border-radius: inherit;
  padding: calc(var(--s-px) * 2); pointer-events: none;
  background: conic-gradient(from var(--live-a), #F2D338, #96C93D, #7FC0A8, #3FA9C9, #3B6FB6, #3FA9C9, #96C93D, #E88A2E, #F2D338);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: live-turn 8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .qs-slot:not(.is-free)::before { animation: none; } }

/* ── Briefs & Work: the switch leads the view's own bar ── */
.bw-switch .seg { min-height: var(--h-md); padding: 0 var(--s-2); font-weight: 600; }
/* ── Files: the media library, the whole page wide ── */
.cf-page .media { border: 0; padding: 0; }
.subtab[data-tab="files"] { --t: var(--surprise); }