/* brand.css — the shared look of the Approval Studio for Asana pages
   (start page + connection page). Loaded AFTER each page's own base styles,
   so everything here overrides them. */

/* ================================================================ THEME
   Bright and playful, in Approval Studio's own palette (the four-colour
   mark: yellow, orange, green, blue, plus pink). Asana's coral is used ONLY
   inside their official logo file — see the co-branding rules below.
   Everything here overrides the plain base styles above. */
:root {
  --as-yellow:#FFC21A; --as-orange:#F2683A; --as-green:#6BBE5B; --as-blue:#4F8FE8; --as-pink:#EC5F8C;
  --bg:#FFF9F2; --panel:rgba(255,255,255,.78); --line:rgba(20,24,31,.08); --chip:rgba(79,143,232,.10);
  --accent:#4F8FE8; --ink:#1B1F2A; --muted:#5F6878;
  --glow:0 10px 30px rgba(80,60,160,.10), 0 2px 6px rgba(80,60,160,.06);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#10131B; --panel:rgba(26,30,42,.72); --line:rgba(255,255,255,.08); --chip:rgba(107,155,255,.14);
  --ink:#EEF1F7; --muted:#A3ABBB; --accent:#7AA8FF;
  --glow:0 10px 30px rgba(0,0,0,.35);
} }

body { background:var(--bg); font-family:"Nunito","Segoe UI Variable","Segoe UI",-apple-system,Roboto,sans-serif; }
main { max-width:680px; padding:28px 16px 90px; position:relative; z-index:1; }

/* ---- living background: colour blobs + dancing logo pairs ---- */
.bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob { position:absolute; width:46vmax; height:46vmax; border-radius:50%; filter:blur(70px); opacity:.55;
        animation:drift 26s ease-in-out infinite alternate; }
.blob.b1 { background:var(--as-yellow); top:-18vmax; left:-14vmax; }
.blob.b2 { background:var(--as-pink);     top:-16vmax; right:-16vmax; animation-delay:-8s; }
.blob.b3 { background:var(--as-green);  bottom:-22vmax; left:-10vmax; animation-delay:-14s; opacity:.40; }
.blob.b4 { background:var(--as-blue);   bottom:-20vmax; right:-12vmax; animation-delay:-4s; opacity:.45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blob { opacity:.22; } }
@keyframes drift { to { transform:translate(6vmax, 5vmax) scale(1.12); } }

/* a "pair" orbits its centre; each partner counter-rotates so they stay upright,
   and bobs on its own beat — two logos dancing together */
#pairs { position:absolute; left:0; top:0; width:100%; z-index:0; pointer-events:none; overflow:hidden; }
.spot { position:absolute; }
.pair { width:var(--span,78px); height:var(--span,78px); animation:orbit linear infinite; }
.pair > * { position:absolute; width:var(--logo,38px); height:var(--logo,38px); animation:counter linear infinite; }
.pair > .p1 { top:0; left:0; }
.pair > .p2 { bottom:0; right:0; }
.pair .bob { width:100%; height:100%; animation:bob var(--beat,2.4s) ease-in-out infinite; display:block; }
.pair img.bob { border-radius:10px; mix-blend-mode:multiply; }
.pair svg.tile { filter:drop-shadow(0 1px 2px rgba(20,24,31,.12)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pair img.bob { mix-blend-mode:normal; } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes counter { to { transform:rotate(-360deg); } }
@keyframes bob { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7px) scale(1.08); } }
@media (max-width:640px) { .spot { opacity:.3 !important; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spot { filter:brightness(.85); } }

/* ---- hero ---- */
.hero { text-align:center; padding:18px 0 8px; }
/* Co-branded lockup, per Asana Brand Identity Guidelines FY27 + asana.com/brand:
     - official logo file, untouched: no rotation, scaling of parts, gradients,
       effects, shadows, transparency or animation
     - nothing behind or in front of it  -> SOLID plate, no glass/blur here
     - clear space around it = symbol height (= the logo's full height, H)
     - gap to the partner logo = symbol width (1.06 H)
     - equal, optically balanced size; ours is not smaller than theirs
   H is 36px. Our own mark (left) may move; theirs never does. */
.duo { --H:36px; display:inline-flex; align-items:center; border-radius:24px;
       padding:var(--H) var(--H) var(--H) 26px; background:#FFFFFF; box-shadow:var(--glow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .duo { background:#0B0505; } }
.ourmark { display:inline-flex; align-items:center; gap:10px; }
.duo .ours { width:46px; height:46px; border-radius:12px; animation:dance 2.2s ease-in-out infinite; }
.ourname { font-weight:800; font-size:21px; letter-spacing:-.01em; color:#1B1F2A; white-space:nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ourname { color:#FFFFFF; } }
.duo .partner { display:block; margin-left:calc(var(--H) * 1.061); line-height:0; }
.duo .asana-logo { height:var(--H); width:auto; display:block; }
@media (max-width:520px) {
  .duo { --H:26px; padding:var(--H) var(--H) var(--H) 18px; }
  .duo .ours { width:34px; height:34px; } .ourname { font-size:16px; }
}
@keyframes dance { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-10px) rotate(6deg); } }
h1 { font-size:30px; font-weight:800; letter-spacing:-.02em; margin:18px 0 6px; }
h1 .grad { background:linear-gradient(90deg,var(--as-orange),var(--as-pink) 45%,var(--as-blue));
           -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub { font-size:15px; margin:0 auto 26px; max-width:520px; text-align:center; }

/* ---- glassy cards ---- */
.card { background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
        border:1px solid rgba(255,255,255,.65); border-radius:22px; padding:22px 24px; margin-bottom:16px;
        box-shadow:var(--glow); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(80,60,160,.14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .duo { border-color:rgba(255,255,255,.07); } }

/* section titles get a colour dot, cycling through the brand colours */
h2 { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; letter-spacing:.08em; color:var(--ink); }
h2::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--as-blue); flex:none;
             box-shadow:0 0 0 4px rgba(79,143,232,.18); }
#cardProjects h2::before  { background:var(--as-yellow); box-shadow:0 0 0 4px rgba(255,194,26,.22); }
#cardSettings h2::before  { background:var(--as-pink);     box-shadow:0 0 0 4px rgba(236,95,140,.20); }
#cardWorkflows h2::before { background:var(--as-green);  box-shadow:0 0 0 4px rgba(107,190,91,.22); }
#cardFields h2::before    { background:var(--as-orange); box-shadow:0 0 0 4px rgba(242,104,58,.20); }
#cardSettings h2 + *, #cardSettings .modes + .note + h2 { margin-top:0; }

/* ---- connection steps ---- */
.step { font-size:16px; font-weight:700; }
.tick { width:34px; height:34px; font-size:15px; font-weight:800; color:#fff;
        background:linear-gradient(135deg,var(--as-blue),var(--as-pink)); box-shadow:0 4px 12px rgba(79,143,232,.35); }
#tickAsana:not(.on) { background:linear-gradient(135deg,#F7A1A1,var(--as-pink)); }
.tick.on { background:linear-gradient(135deg,#7DD66C,#3FA46B); color:#fff; box-shadow:0 4px 12px rgba(63,164,107,.35); }

/* ---- buttons ---- */
button, .btn { border:0; border-radius:12px; padding:10px 18px; font-weight:700;
               background:linear-gradient(135deg,var(--as-blue),#7B6CF0 55%,var(--as-pink)); color:#fff;
               box-shadow:0 6px 16px rgba(123,108,240,.28); transition:transform .15s ease, box-shadow .15s ease, filter .15s; }
button:hover:not(:disabled), .btn:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(123,108,240,.35); filter:saturate(1.1); }
button:active:not(:disabled), .btn:active { transform:translateY(0); }
.btn.ghost, button.ghost { background:rgba(255,255,255,.7); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.ghost, :root:not([data-theme="light"]) button.ghost { background:rgba(255,255,255,.06); } }
.danger, .rulerow .x { box-shadow:none !important; background:none !important; transform:none !important; }
.danger { color:var(--bad); }
.rulerow .x { color:var(--muted); }

/* ---- form controls ---- */
select, .rulerow select, .rulerow input, .mode input[type=text] {
  border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.85); padding:9px 11px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) .rulerow input,
  :root:not([data-theme="light"]) .mode input[type=text] { background:rgba(255,255,255,.05); } }
select:focus, input:focus { outline:3px solid rgba(79,143,232,.30); outline-offset:1px; }
input[type=checkbox], input[type=radio] { accent-color:var(--as-blue); width:17px; height:17px; }

/* toggles become pill switches */
.switch input[type=checkbox] { appearance:none; -webkit-appearance:none; width:40px; height:23px; flex:none; margin-top:1px;
  border-radius:99px; background:rgba(95,104,120,.28); position:relative; cursor:pointer; transition:background .2s; }
.switch input[type=checkbox]::after { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease; }
.switch input[type=checkbox]:checked { background:linear-gradient(135deg,var(--as-green),#3FA46B); }
.switch input[type=checkbox]:checked::after { transform:translateX(17px); }
.switch { padding:8px 0; gap:12px; }

/* send modes read as selectable tiles */
.mode { padding:12px 14px; border-radius:14px; border:1.5px solid var(--line); background:rgba(255,255,255,.5); transition:border-color .15s, background .15s; }
.mode:has(input:checked) { border-color:var(--as-blue); background:rgba(79,143,232,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mode { background:rgba(255,255,255,.03); } }

.pill { font-weight:700; padding:3px 10px; }
.pill.live { background:linear-gradient(135deg,rgba(107,190,91,.25),rgba(63,164,107,.25)); }
.proj { padding:11px 0; }
.note { border-radius:14px; background:linear-gradient(135deg,rgba(255,194,26,.14),rgba(236,95,140,.10)); color:var(--ink); }
.num { background:linear-gradient(135deg,var(--as-orange),var(--as-pink)); color:#fff; font-weight:800; }
.log li { padding:9px 0; }
.log .upload { color:var(--ink); }
.log .upload::before { content:"📤 "; } .log .relay::before { content:"💬 "; } .log .link::before { content:"🔗 "; }
.log .warn::before { content:"⚠️ "; } .log .error::before { content:"⛔ "; } .log .skip::before { content:"⏭️ "; }

@media (prefers-reduced-motion: reduce) {
  .blob, .pair, .pair > *, .pair .bob, .duo .ours { animation:none !important; }
  .card, button, .btn { transition:none; }
}