/* BrainGrid apps for Confluence: prototype styles.
   Tokens mirror BrainGridAI/website (src/app/globals.css, public/brand.json). */
/* WOFF2 (143 KB for both, from 423 KB of TTF; every glyph kept), preloaded by each page's head. */
@font-face { font-family: 'Futura PT Cond'; src: url('assets/fonts/futura-pt_cond-extra-bold.woff2') format('woff2'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Uncut Sans'; src: url('assets/fonts/UncutSans-Variable.woff2') format('woff2'); font-weight: 300 800; font-display: block; }

:root {
  --lime: #C2E476; --lime-mid: #B4D864; --lime-dark: #AACF57;
  --jungle: #10312D; --jungle-dark: #0B211F; --jungle-light: #3D5752; --jungle-ink: #0E2925;
  --cream: #F3F1E8; --offwhite: #FCFCFB; --black: #121212;
  --purple: #795BC2;
  --ink: #10312D; --ink-2: #3D5752; --ink-3: #6B7E7A;
  --line: rgba(16, 49, 45, 0.12); --line-2: rgba(16, 49, 45, 0.2);
  --on-dark: #F3F1E8; --on-dark-2: rgba(243, 241, 232, 0.72); --on-dark-3: rgba(243, 241, 232, 0.5);
  --line-dark: rgba(243, 241, 232, 0.12);
  --radius: 8px; --radius-lg: 16px; --radius-xl: 24px;
  --gradient-lime: linear-gradient(to bottom, #C2E476 0%, #B4D864 59.306%, #AACF57 100%);
  --swoop: cubic-bezier(0.22, 1, 0.36, 1);
  --display: 'Futura PT Cond', 'Futura', sans-serif;
  --body: 'Uncut Sans', 'Inter', system-ui, sans-serif;
  /* Confluence (Atlassian Design System) look for the product frames */
  --ads-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
  --ads-text: #292A2E; --ads-subtle: #505258; --ads-subtlest: #6B6E76; --ads-border: #DDDEE1;
  --ads-blue: #1868DB; --ads-surface: #FFFFFF; --ads-sunken: #F8F8F8;
  --ai: #964AC0; --human: #4D8A5E;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--offwhite); font-feature-settings: 'ss01', 'tnum' 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.92; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; transition: transform .2s var(--swoop), box-shadow .2s var(--swoop), background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--jungle); color: var(--cream); }
.btn-dark:hover { background: var(--jungle-dark); }
/* A call to action that can't be used yet: same shape, muted, no hover or pointer. */
.btn-soon, .btn-soon:hover { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; background: var(--jungle); }
.btn .arrow { transition: transform .2s var(--swoop); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; border-radius: 9px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.nav-inner { display: flex; align-items: center; height: 68px; gap: 28px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 22px; width: auto; }
.brand .sep { width: 1px; height: 22px; background: currentColor; opacity: .25; }
.brand .sub { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 6px; margin-left: auto; }
.nav-links a { font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; opacity: .82; transition: opacity .15s, background .15s; }
.nav-links a:hover { opacity: 1; background: rgba(16,49,45,.06); }
.nav-links a.on { opacity: 1; font-weight: 600; }
.nav-links { align-items: center; }

/* The nav is the two apps, each with its tile; the current app's link is marked. */
.nav-links a.nav-app { display: inline-flex; align-items: center; gap: 8px; }
.nav-app img { width: 22px; height: 22px; border-radius: 6px; }
.nav-app .soon { height: 18px; padding: 0 7px; font-size: 10px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 9px; border: 1.5px solid rgba(16,49,45,.25); place-items: center; }
.menu-btn svg { width: 18px; height: 18px; }
.mnav { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: grid; }
  .nav-inner > .btn { margin-left: auto; }
  .mnav { position: fixed; inset: 68px 0 auto 0; z-index: 49; background: var(--lime); border-bottom: 1px solid rgba(16,49,45,.12); padding: 8px 24px 20px; flex-direction: column; }
  .mnav.open { display: flex; }
  .mnav a { padding: 14px 0; font-size: 18px; font-weight: 600; border-bottom: 1px solid rgba(16,49,45,.1); }
  .mnav a.btn { margin-top: 16px; justify-content: center; border-bottom: 0; font-size: 16px; padding: 0; }
}

/* Try-it hint attached to the demo frame */
.hint-pill { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px; background: var(--jungle); color: var(--cream); font: 600 13px/1 var(--body); padding: 9px 13px; border-radius: 999px; pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.hint-pill::after { content: ''; position: absolute; left: -4px; top: calc(50% - 5px); width: 10px; height: 10px; background: var(--jungle); transform: rotate(45deg); }
@media (max-width: 900px) { .hint-pill { display: none; } }
.hint-pill.gone { opacity: 0; }

/* Lozenges (Pagecycle statuses, as the product draws them) */
.loz { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; font: 500 13px/1 var(--ads-font); border: 1px solid; white-space: nowrap; }
.loz-draft { background: #F8EEFE; border-color: #D8A0F7; color: #48245D; }
.loz-review { background: #E9F2FE; border-color: #8FB8F6; color: #123263; }
.loz-approved { background: #EFFFD6; border-color: #B3DF72; color: #2F4316; }
.loz-rereview { background: #FFF5DB; border-color: #F5CD47; color: #533F04; }
.loz-due { background: #FFECEB; border-color: #FD9891; color: #5D1F1A; }
.loz-archived { background: #F1F2F4; border-color: #C1C7D0; color: #2C3E5D; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--swoop), transform .8s var(--swoop); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Confluence frame (interactive demo) ---------- */
.cf { font-family: var(--ads-font); color: var(--ads-text); background: var(--ads-surface); border-radius: 14px; overflow: hidden; position: relative; text-align: left; letter-spacing: 0; }
.cf-chrome { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--ads-border); background: #fff; }
.cf-dots { display: none; }
.cf-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E2E3E6; }
.cf-search { flex: 0 1 340px; margin-inline: auto; height: 28px; border: 1px solid var(--ads-border); border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 13px; color: var(--ads-subtlest); }
.cf-avatar { width: 24px; height: 24px; border-radius: 50%; background: #1D7AFC; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.cf-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 0px; min-height: 560px; transition: grid-template-columns .6s var(--swoop); }
.cf-body.split { grid-template-columns: 220px minmax(0, 1fr) 370px; }
.cf-panel { position: relative; overflow: hidden; border-left: 1px solid var(--ads-border); background: #fff; }
.cf-side { border-right: 1px solid var(--ads-border); padding: 16px 10px; background: #FBFBFB; font-size: 13px; }
.cf-space { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; font-weight: 600; }
.cf-space b { width: 22px; height: 22px; border-radius: 5px; background: #6A9A23; color: #fff; display: grid; place-items: center; font-size: 11px; }
.cf-tree a { display: block; padding: 5px 8px 5px 22px; border-radius: 4px; color: var(--ads-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-tree a.on { background: #E9F2FE; color: #1558BC; font-weight: 500; }
.cf-main { padding: 22px 40px 40px; position: relative; overflow: hidden; }
/* Desktop: the window keeps one height while the panel opens and the page text rewraps, so the
   content below never moves. The page is clipped at the bottom with a fade, like a window at the fold. */
@media (min-width: 901px) {
  .cf-body { height: 684px; }
  .cf-main::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(255,255,255,0), var(--ads-surface)); pointer-events: none; }
}
.cf-crumbs { font-size: 12px; color: var(--ads-subtlest); margin-bottom: 18px; }
.cf-title { font-size: 28px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; margin-bottom: 14px; }
.cf-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--ads-subtle); margin-bottom: 22px; }
.cf-byline .who { display: flex; align-items: center; gap: 7px; }
.cf-byline .who .cf-avatar { width: 20px; height: 20px; font-size: 8.5px; background: #0E7B8C; }
.cf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 7px 3px 4px; margin: -3px 0; border-radius: 6px; color: var(--ads-subtle); position: relative; transition: background .2s, box-shadow .2s; }
.cf-chip:hover, .cf-chip.active { background: #F0F1F2; }
.cf-chip.active { background: #E9F2FE; color: #1558BC; }
.cf-chip img { width: 18px; height: 18px; border-radius: 4px; }
.cf-h { font-size: 18px; font-weight: 600; margin: 20px 0 8px; letter-spacing: -0.006em; }
.cf-p { font-size: 14.5px; line-height: 1.65; color: var(--ads-text); }
.cf-passage { position: relative; transition: background .4s; border-radius: 4px; padding: 2px 14px 6px 16px; margin: 0 -14px 0 -16px; }
.cf-passage::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: transparent; transition: background .4s; }
.cf-passage.ai.lit { background: rgba(150, 74, 192, 0.07); } .cf-passage.ai.lit::before { background: var(--ai); }
.cf-passage.human.lit { background: rgba(77, 138, 94, 0.07); } .cf-passage.human.lit::before { background: var(--human); }

/* Panels that the chips open (Confluence draws these as modals; a side sheet here) */
.cf-sheet { position: absolute; top: 0; left: 0; width: 370px; bottom: 0; background: #fff; padding: 22px 24px; opacity: 0; transform: translateX(24px); transition: opacity .35s, transform .6s var(--swoop); overflow: hidden; pointer-events: none; }
.cf-sheet.open { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.cf-sheet .x { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--ads-subtle); }
.cf-sheet .x:hover { background: #F0F1F2; }
.sheet-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ads-subtlest); margin-bottom: 14px; }
.sheet-kicker img { width: 16px; height: 16px; border-radius: 3px; }
.pc-head { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.35; padding-right: 26px; }
.pc-tag { flex: none; font-size: 12.5px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: #E9F2FE; border: 1px solid #8FB8F6; color: #123263; margin-top: 1px; }
.pc-meta { font-size: 12.5px; color: var(--ads-subtlest); margin: 8px 0 14px; }
.pc-bar { display: flex; gap: 3px; height: 6px; }
.pc-bar i { border-radius: 3px; transition: flex-grow 1s var(--swoop); }
.pc-bar .a { background: var(--ai); flex: 26; } .pc-bar .h { background: var(--human); flex: 74; }
.pc-legend { display: flex; gap: 18px; font-size: 13px; margin: 9px 0 16px; color: var(--ads-subtle); }
.pc-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--c); }
.pc-legend b { color: var(--ads-text); font-weight: 600; margin-left: 4px; }
.pc-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--ads-border); font-size: 13.5px; margin-bottom: 14px; }
.pc-tabs button { padding: 8px 0; color: var(--ads-subtle); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pc-tabs button.on { color: var(--ads-blue); border-color: var(--ads-blue); font-weight: 500; }
.pc-card { border-left: 3px solid var(--c); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.pc-card h5 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.pc-card p { font-size: 12.5px; line-height: 1.55; color: var(--ads-subtle); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cy-now { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ads-subtle); margin-bottom: 4px; }
.cy-review { font-size: 12.5px; color: var(--ads-subtlest); margin-bottom: 16px; }
.cy-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ads-subtlest); text-transform: uppercase; margin: 14px 0 8px; }
.cy-move { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; text-align: left; }
.cy-move:hover { background: #F0F1F2; }
.cy-move .loz { flex: none; white-space: nowrap; }
.cy-move small { color: var(--ads-subtlest); font-size: 12px; line-height: 1.4; text-align: right; }
.cy-hist { position: relative; padding-left: 18px; }
.cy-hist::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--ads-border); }
.cy-ev { position: relative; font-size: 12.5px; color: var(--ads-subtle); margin-bottom: 11px; line-height: 1.45; }
.cy-ev::before { content: ''; position: absolute; left: -17px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--ads-border); }
.cy-ev b { color: var(--ads-text); font-weight: 600; }
.cy-ev .loz { height: 19px; font-size: 11.5px; padding: 0 5px; vertical-align: 1px; }

/* Hotspot pulse on the byline chips, and the tour cursor */
.cf-chip.hint::after { content: ''; position: absolute; inset: -4px; border-radius: 9px; border: 2px solid rgba(24,104,219,.55); animation: ping 2.2s var(--swoop) infinite; pointer-events: none; }
.cf-chip.hint + .cf-chip.hint::after { animation-delay: .5s; }
@keyframes ping { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
.demo-cursor { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; opacity: 0; transition: transform .95s var(--swoop), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.demo-cursor.on { opacity: 1; }
.demo-cursor::after { content: ''; position: absolute; left: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(24,104,219,.28); transform: scale(0); opacity: 0; }
.demo-cursor.press::after { animation: press .45s var(--swoop); }
@keyframes press { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* "Runs on Atlassian" seal (stamp.js): jungle ring with lime lettering and a cream face on light
   sections; .ink-lime flips it for dark ones. */
.roa-stamp { --band: var(--jungle); --ink: var(--lime); --face: var(--cream); --mark: var(--jungle);
  display: inline-block; width: var(--size, 150px); aspect-ratio: 1; transform: rotate(var(--tilt, -8deg)); flex: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; /* a click stamps it (stamp.js) */
  /* A round box-shadow, not a CSS filter: a filter rasterizes the seal and softens its lettering. */
  border-radius: 50%; box-shadow: 0 1px 2px rgba(11,33,31,.2), 0 12px 24px -6px rgba(11,33,31,.3); }
.roa-stamp.ink-lime { --band: var(--lime); --ink: var(--jungle); --face: var(--jungle); --mark: var(--lime); box-shadow: 0 12px 26px -6px rgba(0,0,0,.45); }
.roa-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; text-rendering: geometricPrecision; }
/* The ring a click sends out (stamp.js). Every seal is positioned (hero absolute, dock fixed, flow relative). */
.roa-stamp .roa-ring-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--jungle); pointer-events: none; opacity: 0; }
.roa-stamp.ink-lime .roa-ring-pulse { border-color: var(--lime); }
.roa-stamp .roa-band { fill: var(--band); }
.roa-stamp .roa-face { fill: var(--face); }
.roa-stamp .roa-ink { fill: var(--ink); }
.roa-stamp .roa-rule { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .55; }
.roa-stamp .roa-rule-in { stroke: var(--mark); opacity: .25; }
.roa-stamp .roa-check { fill: none; stroke: var(--mark); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.roa-stamp .roa-ring { font-family: 'Futura PT Cond', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 2px; }
.roa-stamp .roa-ring-b { letter-spacing: 2.4px; }
/* backwards, not both: once it lands, the static rotate applies and the seal is redrawn at full sharpness. */
.roa-stamp.stamped { animation: roa-stamp .45s cubic-bezier(.3, 1.4, .5, 1) .7s backwards; }
@keyframes roa-stamp {
  from { opacity: 0; transform: rotate(calc(var(--tilt, -8deg) + 8deg)) scale(1.35); }
  50% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--tilt, -8deg)) scale(1); }
}
/* The docked copy (stamp.js): fixed in the top right under the nav. stamp.js moves it from the hero's
   seal to here in step with the scroll. Sized to sit in the page margin on wide screens and to stay
   small where it can't. */
.roa-dock { position: fixed; z-index: 45; top: 84px; right: 16px; --size: 88px; visibility: hidden; transition: opacity .25s ease; }
.roa-dock.on { visibility: visible; }
.roa-dock.away { opacity: 0; pointer-events: none; }
.hero-stamp.docked { visibility: hidden; }
@media (max-width: 1399px) { .roa-dock { --size: 56px; top: 80px; right: 10px; } }
/* Phones: the nav bar has room beside the menu button, so the seal docks there and covers no text. */
@media (max-width: 900px) { .roa-dock { z-index: 51; --size: 44px; top: 12px; right: 80px; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .cf-body, .cf-body.split { grid-template-columns: minmax(0, 1fr); position: relative; }
  .cf-side { display: none; }
  .cf-main { padding: 18px 18px 28px; }
  .cf-panel { position: absolute; inset: 0; border: 0; pointer-events: none; background: transparent; }
  .cf-sheet { width: auto; right: 0; box-shadow: 0 -12px 40px -10px rgba(9,30,66,.3); top: auto; height: min(78%, 520px); border-radius: 14px 14px 0 0; }
  .brand .sub, .brand .sep { display: none; }
}