/* ════════════════════════════════════════════════════════════
   ATRIUM — shared motion & experience layer (codename)
   Cursor styles · cinematic intro · reveal-on-scroll · settings.
   Included by HQ, department pages, and the Marketing dashboard so
   the whole OS shares one feel. Pages may override :root tokens.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#F1EBE1; --bg-2:#EBE4D8; --card:#FAF6EF; --raised:#FFFFFF; --inset:#E9E1D4;
  --line:rgba(40,34,28,.10); --line-soft:rgba(40,34,28,.06); --line-strong:rgba(40,34,28,.17);
  --text:#26221E; --muted:#7B7367; --faint:#A89E90;
  --accent:#C25B38; --accent-bright:#A8472A; --accent-ink:#FDF6F1;
  --accent-soft:rgba(194,91,56,.12); --accent-line:rgba(194,91,56,.32);
  --teal:#5E908B; --teal-soft:rgba(94,144,139,.14);
  --green:#6F9156; --green-soft:rgba(111,145,86,.16);
  --amber:#C2883B; --red:#B23C2E; --grey:#9A9082;
  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --shadow:0 1px 2px rgba(78,52,30,.05), 0 16px 34px -14px rgba(86,56,30,.20);
  --ease:cubic-bezier(.76,0,.24,1); --ease-soft:cubic-bezier(.22,.61,.36,1);
  --card-radius:18px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── shared top bar + cross-department nav ───────────────────
   ONE nav across HQ · Media Buying · Commerce (and every future
   department). This is the single source — pages must NOT redefine
   .topbar/.brand/.topnav/.icbtn locally. Mark the current dept's
   link with class "active". ───────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-family:var(--display);font-weight:700;font-size:17px;box-shadow:var(--shadow)}
.brand .t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.1}
.brand .s{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em}
.topnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.topnav a{color:var(--muted);text-decoration:none;font-family:var(--body);font-size:13px;font-weight:600;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.topnav a:hover{color:var(--text);border-color:var(--line-strong)}
.topnav a.active{background:var(--text);color:var(--accent-ink);border-color:transparent}
.topnav a.active:hover{color:var(--accent-ink);border-color:transparent}
.topnav a.go{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.topnav a.go:hover{background:var(--accent-bright);color:var(--accent-ink)}
/* ── the nav's SECOND TIER ─────────────────────────────────────────────────
   A page's own links are not departments and must not look like them. Before
   this they shared one flat row: the Finance bar was 27 identical pills over
   five lines — four departments, seventeen finance pages and six more
   departments appended after them — and the eye had nothing to sort it by.
   `_normalise_nav` splits them at the render seam; these two rules are what
   make the split visible. `.nvbr` is a zero-height flex item that eats a whole
   line, so the second tier starts on its own row without needing a wrapper
   element — a wrapper would break `#finNav a` and the nav matchers. */
.nvbr{flex-basis:100%;height:0;margin:0;padding:0;border:0;overflow:hidden}
.topnav a.sec{font-size:12px;font-weight:500;padding:6px 11px;border-radius:8px;
  border-color:transparent;background:var(--inset);color:var(--muted)}
.topnav a.sec:hover{background:var(--bg-2);color:var(--text);border-color:transparent}
.topnav a.sec.active{background:var(--accent-soft);color:var(--accent-bright);border-color:var(--accent-line)}
/* The department you are in stays the strongest mark on the page, so a section
   link never borrows the solid fill — it gets the accent tint instead. */
.topnav a.sec.go{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.topnav a.sec.go:hover{background:var(--accent-bright);color:var(--accent-ink)}
.icbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;font-size:15px;cursor:pointer;transition:.2s var(--ease)}
.icbtn:hover{color:var(--accent-bright);border-color:var(--accent-line)}

/* ── universal "export AI chat to Excel" button (used across every department) ── */
.atr-export-btn{font-family:var(--body);font-weight:600;font-size:12px;border-radius:9px;padding:7px 11px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;transition:.15s;line-height:1}
.atr-export-btn:hover{color:var(--accent-bright);border-color:var(--accent-line)}

/* ── custom cursor ───────────────────────────────────────── */
/* z-index must beat EVERY overlay or the cursor vanishes behind them: #hubload 2147483600,
   the lightbox/right-panel 2147483400, the AI chat panel + FAB 2147483000, #imgLb 9999, the tour
   1300-1305, #arr-bar/#atr-nav 1200. At 1200 it was BELOW the chat panel — which is exactly why the
   owner lost the cursor "especially in the chat boxes". */
#atr-dot,#atr-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:2147483647;
  will-change:transform;opacity:0;transition:opacity .3s}
body.atr-cur-ready #atr-dot,body.atr-cur-ready #atr-ring{opacity:1}
body[data-cursor="native"] #atr-dot,body[data-cursor="native"] #atr-ring{display:none}
body[data-cursor="native"]{cursor:auto}
/* The native cursor has to be hidden on every element that would otherwise assert its OWN cursor.
   textarea / select / [contenteditable] were missing, so the browser's I-beam came back inside the
   chat composer — the second half of the "cursor disappears in chat boxes" report. Deliberately an
   explicit list, NOT `*`: a blanket rule would out-specify `cursor:grab` in Arrange mode (and
   zoom-in / wait / not-allowed elsewhere). */
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready a,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready button,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready input,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready textarea,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready select,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready label,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready summary,
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready [contenteditable],
body[data-cursor]:not([data-cursor="native"]).atr-cur-ready .dept{cursor:none}
/* RING (default): small dot + trailing ring */
body[data-cursor="ring"] #atr-dot{width:7px;height:7px;background:var(--accent);margin:-3.5px 0 0 -3.5px}
body[data-cursor="ring"] #atr-ring{width:34px;height:34px;border:1.5px solid var(--accent-line);margin:-17px 0 0 -17px;
  transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,border-color .25s,opacity .3s}
body[data-cursor="ring"] #atr-ring.hot{width:54px;height:54px;margin:-27px 0 0 -27px;background:var(--accent-soft);border-color:var(--accent)}
/* DOT: single solid dot that grows */
body[data-cursor="dot"] #atr-ring{display:none}
body[data-cursor="dot"] #atr-dot{width:14px;height:14px;background:var(--accent);margin:-7px 0 0 -7px;
  transition:width .2s var(--ease),height .2s var(--ease),margin .2s var(--ease),opacity .3s}
body[data-cursor="dot"] #atr-dot.hot{width:30px;height:30px;margin:-15px 0 0 -15px;background:var(--accent-bright)}
/* HALO: soft glowing disc, blended */
body[data-cursor="halo"] #atr-dot{width:5px;height:5px;background:var(--accent);margin:-2.5px 0 0 -2.5px}
body[data-cursor="halo"] #atr-ring{width:46px;height:46px;margin:-23px 0 0 -23px;background:radial-gradient(circle,var(--accent-soft),transparent 70%);
  filter:blur(2px);mix-blend-mode:multiply;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s}
body[data-cursor="halo"] #atr-ring.hot{width:80px;height:80px;margin:-40px 0 0 -40px}
/* CROSSHAIR: thin plus + center dot */
body[data-cursor="cross"] #atr-dot{width:5px;height:5px;background:var(--accent);margin:-2.5px 0 0 -2.5px}
body[data-cursor="cross"] #atr-ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:0;background:transparent;
  transition:transform .25s var(--ease),opacity .3s}
body[data-cursor="cross"] #atr-ring::before,body[data-cursor="cross"] #atr-ring::after{content:'';position:absolute;background:var(--accent-line)}
body[data-cursor="cross"] #atr-ring::before{left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px}
body[data-cursor="cross"] #atr-ring::after{top:50%;left:0;right:0;height:1.5px;margin-top:-.75px}
body[data-cursor="cross"] #atr-ring.hot{transform:rotate(45deg)}

/* ── extra cursor styles (size/colour only — position is set via inline transform) ── */
@keyframes atrCurPulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* glow — precise dot inside a large soft light */
body[data-cursor="glow"] #atr-dot{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
body[data-cursor="glow"] #atr-ring{width:60px;height:60px;margin:-30px 0 0 -30px;border:none;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 65%);transition:width .2s,height .2s,margin .2s}
body[data-cursor="glow"] #atr-ring.hot{width:104px;height:104px;margin:-52px 0 0 -52px}
/* disc — single translucent filled disc */
body[data-cursor="disc"] #atr-ring{display:none}
body[data-cursor="disc"] #atr-dot{width:24px;height:24px;margin:-12px 0 0 -12px;background:var(--accent-soft);border:1.5px solid var(--accent-line);transition:width .18s,height .18s,margin .18s,background .18s,opacity .18s}
body[data-cursor="disc"] #atr-dot.hot{width:42px;height:42px;margin:-21px 0 0 -21px;background:var(--accent);opacity:.85}
/* pulse — small dot + continuously pulsing ring */
body[data-cursor="pulse"] #atr-dot{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
body[data-cursor="pulse"] #atr-ring{width:28px;height:28px;margin:-14px 0 0 -14px;border:1.5px solid var(--accent);animation:atrCurPulse 1.6s ease-out infinite}
body[data-cursor="pulse"] #atr-ring.hot{border-color:var(--accent-bright);background:var(--accent-soft)}
/* square — rounded-square outline */
body[data-cursor="square"] #atr-dot{width:5px;height:5px;background:var(--accent);margin:-2.5px 0 0 -2.5px}
body[data-cursor="square"] #atr-ring{width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid var(--accent-line);border-radius:7px;transition:width .18s,height .18s,margin .18s,background .18s,border-radius .18s}
body[data-cursor="square"] #atr-ring.hot{width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:3px;background:var(--accent-soft);border-color:var(--accent)}
/* beam — slim vertical I-beam (great over text) */
body[data-cursor="beam"] #atr-dot{display:none}
body[data-cursor="beam"] #atr-ring{width:2px;height:26px;margin:-13px 0 0 -1px;border-radius:2px;background:var(--accent);border:none;transition:height .15s,background .15s}
body[data-cursor="beam"] #atr-ring.hot{height:36px;background:var(--accent-bright)}
/* comet — bright head + soft lagging trail (the ring already lags the dot) */
body[data-cursor="comet"] #atr-dot{width:9px;height:9px;background:var(--accent-bright);margin:-4.5px 0 0 -4.5px;box-shadow:0 0 10px var(--accent)}
body[data-cursor="comet"] #atr-ring{width:18px;height:18px;margin:-9px 0 0 -9px;border:none;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
body[data-cursor="comet"] #atr-ring.hot{width:32px;height:32px;margin:-16px 0 0 -16px}

/* The cinematic intro (curtain, big word, progress) and the Experience settings panel moved to
   experience.css — one copy for every page, including the Saul shell (owner, 2026-09-30). */

/* ── page-to-page transition (legacy full curtain — kept for reference, no longer used) ── */
#atr-exit{position:fixed;inset:0;z-index:1115;background:var(--accent);transform:translateY(100%);pointer-events:none}
#atr-exit.in{transform:translateY(0);transition:transform .45s var(--ease)}
#atr-exit .atr-exit-mark{position:absolute;left:6vw;bottom:36px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--accent-ink);opacity:0;transition:opacity .25s ease .15s}
#atr-exit.in .atr-exit-mark{opacity:.85}

/* ── slim navigation loader (replaces the full-screen curtain) — a thin top progress bar +
   a small spinning orb in the corner. Unobtrusive, fast-feeling, dismisses with the new page. ── */
#atr-nav{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;pointer-events:none;opacity:0;transition:opacity .25s ease}
#atr-nav.on{opacity:1}
#atr-nav i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));box-shadow:0 0 12px var(--accent-line);
  animation:atr-navfill 8s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes atr-navfill{0%{width:0}8%{width:42%}30%{width:68%}65%{width:86%}100%{width:96%}}
#atr-nav .orb{position:fixed;top:13px;right:16px;width:22px;height:22px;border-radius:50%;
  border:2.5px solid var(--accent-soft);border-top-color:var(--accent);animation:atr-navspin .7s linear infinite}
@keyframes atr-navspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#atr-nav i,#atr-nav .orb{animation:none}#atr-nav i{width:90%}}

/* ── reveal on scroll ────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(26px) skewY(1.2deg);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ── interactive demo tour ───────────────────────────────── */
#atr-tour{position:fixed;inset:0;z-index:1300;display:none}
#atr-tour.on{display:block}
#atr-tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(34,30,26,.74);
  pointer-events:none;transition:all .45s var(--ease);outline:2px solid var(--accent);outline-offset:3px}
#atr-tour-card{position:absolute;width:340px;max-width:calc(100vw - 32px);background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:18px 19px;box-shadow:var(--shadow);
  transition:top .45s var(--ease),left .45s var(--ease);font-family:var(--body)}
#atr-tour-card .tc-step{font-family:var(--display);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent-bright);margin-bottom:7px}
#atr-tour-card .tc-title{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;margin:0 0 7px}
#atr-tour-card .tc-text{font-size:13.5px;line-height:1.55;color:var(--text)}
#atr-tour-card .tc-foot{display:flex;align-items:center;gap:8px;margin-top:16px}
#atr-tour-card .tc-dots{display:flex;gap:5px;margin-right:auto}
#atr-tour-card .tc-dot{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
#atr-tour-card .tc-dot.on{background:var(--accent);width:18px;border-radius:3px}
#atr-tour-card button{border:none;border-radius:10px;font-family:var(--display);font-weight:700;font-size:12.5px;cursor:pointer;padding:9px 14px}
#atr-tour-card .tc-next{background:var(--accent);color:var(--accent-ink)}
#atr-tour-card .tc-next:hover{background:var(--accent-bright)}
#atr-tour-card .tc-back{background:var(--inset);color:var(--muted)}
#atr-tour-card .tc-end{background:transparent;color:var(--muted);font-weight:600;padding:9px 6px}
#atr-tour-card .tc-ask{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:12px}
#atr-tour-card .tc-askbtn{background:transparent;color:var(--accent-bright);padding:0;font-weight:600;font-size:12.5px}
#atr-tour-card .tc-chat{display:none;margin-top:10px}
#atr-tour-card .tc-chat.on{display:block}
#atr-tour-card .tc-msgs{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
#atr-tour-card .tc-m{font-size:13px;line-height:1.5;padding:8px 11px;border-radius:11px;max-width:90%}
#atr-tour-card .tc-m.ai{background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--accent);align-self:flex-start}
#atr-tour-card .tc-m.me{background:var(--accent);color:var(--accent-ink);align-self:flex-end}
#atr-tour-card .tc-row{display:flex;gap:6px}
#atr-tour-card .tc-row input{flex:1;background:var(--raised);border:1px solid var(--line-strong);border-radius:9px;padding:9px 11px;font-size:13px;color:var(--text);font-family:var(--body)}
#atr-tour-card .tc-row button{background:var(--text);color:var(--accent-ink);padding:0 13px}
#atr-tour-finish{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:1305;display:none;
  flex-direction:column;align-items:center;gap:11px;text-align:center;width:max-content;max-width:calc(100vw - 32px)}
#atr-tour-finish .tf-h{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--accent-ink);
  background:var(--text);padding:11px 20px;border-radius:13px;box-shadow:var(--shadow)}
#atr-tour-finish .tf-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#atr-tour-cta{background:var(--accent);color:var(--accent-ink);border:none;border-radius:13px;padding:14px 26px;
  font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--shadow)}
#atr-tour-cta:hover{background:var(--accent-bright)}
#atr-tour-free{background:var(--card);color:var(--text);border:1px solid var(--line-strong);border-radius:13px;
  padding:14px 22px;font-family:var(--display);font-weight:600;font-size:13.5px;cursor:pointer}
#atr-tour-free:hover{border-color:var(--accent-line);color:var(--accent-bright)}
#atr-tour-free.hide{display:none}
#atr-tour.finish #atr-tour-finish{display:flex}
#atr-tour.finish #atr-tour-hole{opacity:0}
#atr-tour.finish #atr-tour-card{display:none}

@media (pointer:coarse){#atr-dot,#atr-ring{display:none!important}body{cursor:auto!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}[data-reveal]{opacity:1;transform:none}}

/* ── arrange (drag-to-reorder) mode ───────────────────────── */
#arr-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:12px;background:var(--text);color:var(--accent-ink);padding:9px 12px 9px 18px;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);font-family:var(--display);font-weight:600;font-size:13px}
#arr-bar .arr-b-t{opacity:.92}
#arr-bar button{border:none;border-radius:10px;padding:9px 16px;font-family:var(--display);font-weight:700;font-size:12.5px;cursor:pointer}
#arr-bar .arr-b-done{background:var(--accent);color:var(--accent-ink)}
#arr-bar .arr-b-done:hover{background:var(--accent-bright)}
#arr-bar .arr-b-reset{background:rgba(253,246,241,.16);color:var(--accent-ink)}
body.arr-editing [data-arr-item]{cursor:grab;outline:1.6px dashed var(--accent-line);outline-offset:3px;border-radius:14px;transition:outline-color .18s,transform .12s}
body.arr-editing [data-arr-item]:hover{outline-color:var(--accent)}
body.arr-editing [data-arr-item]:active{cursor:grabbing}
body.arr-editing [data-arr-item] a,body.arr-editing [data-arr-item] button,body.arr-editing [data-arr-item] input,body.arr-editing [data-arr-item] select,body.arr-editing [data-arr-item] details{pointer-events:none}
.arr-dragging{opacity:.45;transform:scale(.98)}

/* ── mobile / phone (shared cross-department chrome) ─────────── */
@media (max-width:640px){
  .topbar{padding:14px 0 0;gap:9px}
  .brand .mark{width:31px;height:31px;font-size:15px}
  .brand .t{font-size:15px}
  .brand .s{font-size:10px;letter-spacing:.08em}
  .topnav{gap:6px}
  .topnav a{font-size:12px;padding:7px 11px;border-radius:9px}
}

/* ── Settings: the one administrative door ────────────────────────────────────
   Deliberately NOT another word in the nav. /settings/users, /settings/config
   and /settings/connections were reachable only by typing the URL, so the three
   pages that configure the whole company were effectively hidden. A gear is the
   thing every person already looks for, so it is given a distinct filled shape
   rather than the outline the other icon buttons share — findable at a glance
   without competing with the departments beside it. */
.icbtn.gear{background:var(--accent,#8E3A22);border-color:var(--accent,#8E3A22);color:#fff;
  border-radius:50%;font-size:16px}
.icbtn.gear:hover{background:var(--accent-bright,#A2452A);border-color:var(--accent-bright,#A2452A);
  color:#fff;transform:rotate(35deg)}
.setmenu{position:absolute;z-index:60;min-width:230px;background:var(--card,#fff);
  border:1px solid var(--line-strong,#D8CFC4);border-radius:14px;padding:7px;
  box-shadow:0 18px 40px -14px rgba(40,28,20,.35);display:none}
.setmenu.show{display:block}
.setmenu a{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:9px;
  color:inherit;text-decoration:none;font-size:13.5px;font-weight:500}
.setmenu a:hover{background:var(--inset,#EFEAE3)}
.setmenu .sec{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted,#6B6058);padding:8px 11px 4px}
.setmenu .ic{width:20px;text-align:center}