/* Home (dashboard) and the "Connect a platform" sheet — 2026-11-11 redesign.
   Uses only the tokens and motion identity of styles.css (--ease, --t-fast/--t/--t-slow, rise). Spacing on a 4px rhythm:
   .25 / .5 / .75 / 1 / 1.25 / 1.5rem. Every movement has a reduced-motion path at the end of this file. */

/* page rhythm: one vertical gap between the blocks of the home page */
.dash{display:grid;gap:1.25rem}.dash>*{margin:0!important}.dash .page-head{margin-bottom:0}
.dash .page-sub::first-letter{text-transform:uppercase}

/* ---- quick actions: the first thing on the page ---- */
.qa-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.75rem}
.qa{display:flex;align-items:center;gap:.75rem;min-height:72px;padding:.75rem 1rem;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);font:inherit;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--hl),var(--shadow-1);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t-fast),background var(--t-fast)}
.qa:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:inset 0 1px 0 var(--hl),var(--shadow-2)}
.qa:active{transform:translateY(0) scale(.985);transition-duration:.06s}
.qa:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--r)}
.qa-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-l);color:var(--brand-d);transition:transform var(--t-slow) var(--ease)}
.qa-ic .ico{width:20px;height:20px}
.qa:hover .qa-ic{transform:scale(1.06) rotate(-4deg)}
.qa-t{display:flex;flex-direction:column;min-width:0;flex:1}.qa-t strong{font-weight:650;line-height:1.3}.qa-t small{color:var(--muted);font-size:.82rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.qa-go{flex:none;color:var(--muted);opacity:0;transform:translateX(-4px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.qa:hover .qa-go,.qa:focus-visible .qa-go{opacity:1;transform:none}
/* the main action carries the brand colour; the others stay quiet */
.qa.main{background:linear-gradient(135deg,var(--brand-hi),var(--brand) 60%,var(--brand-d));border-color:var(--brand);color:var(--on-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-brand)}
.qa.main .qa-ic{background:rgba(255,255,255,.18);color:inherit}.qa.main .qa-t small,.qa.main .qa-go{color:inherit;opacity:.85}
.qa.main:hover{border-color:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 28px -10px color-mix(in srgb,var(--brand) 75%,transparent)}
.qa.main:hover .qa-ic .ico[data-ic=plus]{transform:rotate(90deg)}
:root[data-theme=dark] .qa.main{color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .qa.main{color:#fff}}

/* ---- first-run: connect your first platform ---- */
.connect-hero{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;position:relative;overflow:hidden;isolation:isolate;border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.connect-hero::before{content:"";position:absolute;inset:-40% auto auto -10%;width:340px;height:340px;border-radius:50%;z-index:-1;background:color-mix(in srgb,var(--brand) 12%,transparent);filter:blur(60px);pointer-events:none}
.connect-hero h2{margin:0 0 .25rem}
.connect-hero>.grow{flex:1 1 260px}
.ch-marks{display:flex;flex:none}
.ch-marks>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1);margin-inline-start:-10px;animation:chIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*60ms + 200ms)}
.ch-marks>span:first-child{margin-inline-start:0}
@media(max-width:560px){.connect-hero{gap:1rem}.connect-hero .btn{width:100%}.ch-marks>span{width:38px;height:38px}}

/* ---- KPI: value, a plain-words line under it, then a meter or a sparkline ---- */
.dash .kpi .val{margin:.5rem 0 .125rem}
.kpi-sub{color:var(--muted);font-size:.82rem;margin-bottom:.5rem;min-height:1.2em}
.kpi-meter{height:5px;margin-top:.25rem}
.kpi.warn{border-color:color-mix(in srgb,var(--red) 40%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--red-l) 70%,var(--card)),var(--card) 70%)}
.kpi.warn .lab .ico{background:var(--red-l);color:var(--red)}.kpi.warn .val{color:var(--red)}
.kpi.calm .lab .ico{background:var(--ok-l);color:var(--ok-d)}

/* ---- your channels ---- */
.chan-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.chan{display:inline-flex;align-items:center;gap:.5rem;max-width:260px;min-height:40px;padding:.25rem .75rem .25rem .375rem;border:1px solid var(--line);border-radius:99px;background:var(--card-2);color:var(--ink);font:inherit;font-weight:550;font-size:.9rem;text-decoration:none;cursor:pointer;
  transition:transform var(--t) var(--ease),border-color var(--t-fast),background var(--t-fast),box-shadow var(--t) var(--ease)}
.chan:hover{text-decoration:none;transform:translateY(-1px);border-color:var(--line-2);background:var(--card);box-shadow:var(--shadow-1)}
.chan-mark{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.chan-dot{flex:none;width:8px;height:8px;border-radius:50%}.chan-dot.ok{background:var(--ok)}.chan-dot.warn{background:var(--red);animation:pulse 1.6s ease-in-out infinite}
.chan.bad{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.chan.add{border-style:dashed;background:transparent;color:var(--brand-d);padding-inline:.75rem}.chan.add:hover{border-color:var(--brand);background:var(--brand-l)}
.chan.add .ico{transition:transform var(--t-slow) var(--ease)}.chan.add:hover .ico{transform:rotate(90deg)}

/* ---- "Connect a platform" sheet ---- */
.net-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:.5rem}
.net-opt{display:flex;align-items:center;gap:.75rem;min-height:64px;padding:.625rem .75rem;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;
  animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*35ms + 60ms);transition:transform var(--t) var(--ease),border-color var(--t-fast),background var(--t-fast),box-shadow var(--t) var(--ease)}
.net-opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow-1)}
.net-opt:active:not(:disabled){transform:scale(.98);transition-duration:.06s}
.net-opt:disabled{cursor:not-allowed;background:transparent;border-style:dashed}.net-opt:disabled .net-t strong{color:var(--muted)}.net-opt:disabled .net-mark{filter:grayscale(1);opacity:.6}
.net-mark{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line);transition:transform var(--t-slow) var(--ease)}
.net-opt:hover:not(:disabled) .net-mark{transform:scale(1.07) rotate(-4deg)}
.net-t{display:flex;flex-direction:column;min-width:0;flex:1}.net-t strong{font-weight:650}.net-t small{color:var(--muted);font-size:.8rem;line-height:1.3}
.net-go{color:var(--muted);transition:transform var(--t) var(--ease),color var(--t-fast)}.net-opt:hover .net-go{color:var(--brand-d);transform:translateX(3px)}
.net-opt.busy{pointer-events:none;opacity:.75}

@keyframes chIn{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}

/* ---- touch and narrow screens ---- */
@media(max-width:560px){.qa-row{grid-template-columns:1fr 1fr;gap:.5rem}.qa{flex-direction:column;align-items:flex-start;gap:.5rem;min-height:0;padding:.75rem}.qa-t small,.qa-go{display:none}.qa-t strong{font-size:.92rem}.chan{max-width:100%}}
@media(hover:none){.qa:hover,.chan:hover,.net-opt:hover:not(:disabled){transform:none}.qa-go{opacity:1;transform:none}}

/* ---- reduced motion: no travel, no loops; state changes stay visible ---- */
@media(prefers-reduced-motion:reduce){
  .qa,.chan,.net-opt,.qa-ic,.net-mark,.qa-go,.net-go{transition-duration:.01ms!important}
  .qa:hover,.qa:active,.chan:hover,.net-opt:hover:not(:disabled),.net-opt:active:not(:disabled){transform:none!important}
  .qa:hover .qa-ic,.net-opt:hover .net-mark,.chan.add:hover .ico,.qa.main:hover .qa-ic .ico{transform:none!important}
  .ch-marks>span,.net-opt{animation:fade .16s linear both!important;animation-delay:0s!important}
  .chan-dot.warn{animation:none!important}
}