/*
 * Citely app — the one place every app colour is decided.
 *
 * WHY THIS FILE EXISTS. Twelve app stylesheets each opened with their own copy
 * of the same :root palette, and each then hard-coded the dark ground into
 * hundreds of literals (rgba(255,255,255,.04) panels, rgba(11,10,26,.72) bars,
 * pale mint and pale amber text that only reads on near-black). That is fine
 * for one theme and impossible for two: there was no single value to flip.
 *
 * So the palette moved here and the literals became tokens. The app screens now
 * ship LIGHT by default, with dark available under html[data-theme="dark"].
 *
 * HOW IT SPLITS. Three groups, and the split is the whole design:
 *
 *   1. GROUND AND SURFACE (--void, --panel, --card, --line, --paper, --dim …)
 *      invert between themes. This is everything the eye reads text against.
 *
 *   2. ACCENTS (--violet, --cyan, --green …) do NOT change. They are fills:
 *      gradient buttons, chips, badges, glows. Roughly forty rules set
 *      `color:#fff` or `color:#0B0A1A` against one of them, and those stay
 *      correct only while the fill underneath stays the same colour.
 *
 *   3. ACCENT INK (--i-violet, --i-cyan, --i-green …) is the same hue tuned to
 *      sit on the GROUND rather than on a fill. #3ADFA5 on near-black is a
 *      confident green; on white it is about 1.6:1 and effectively invisible.
 *      Anywhere an accent was used as `color:` it now uses the ink token.
 *
 * One scalar carries the part that is not a colour: --shf multiplies every
 * black shadow alpha, because a 50%-black drop shadow that reads as depth on a
 * dark page reads as dirt on a white one.
 *
 * @package Citely
 */

:root{
	/* ── LIGHT — the default. No attribute on <html> means light. ── */

	/*
	 * ground & surface
	 *
	 * NEUTRAL, not a tinted version of the dark palette. The first pass simply
	 * lightened the dark tokens, which kept their violet in every value: a
	 * lavender page ground, lavender-white cards, and a lilac gradient inside
	 * the score band. Stacked three deep that reads as a stain rather than as a
	 * theme — the surfaces stopped looking clean and started looking dirty.
	 * Light mode gets white cards on a barely-grey ground, and takes ALL of its
	 * colour from the accents, which are the only things here that mean
	 * something.
	 */
	--void:#F6F7F9;
	--nebula:#FFFFFF;
	--panel:#FFFFFF;
	--panel2:#F5F6F9;
	--card:#FFFFFF;
	--card-deep:#FFFFFF;
	--card2:#FFFFFF;
	--card-stat:#FFFFFF;
	--lg-card:#FFFFFF;
	--sidebar-bg:#FFFFFF;
	--topbar-bg:rgba(255,255,255,.88);
	--band:#FFFFFF;
	--sunk:rgba(19,22,29,.045);
	--scrim:rgba(19,22,29,.42);
	--toast-bg:linear-gradient(100deg,#2A2364,#1A1740);
	--select-bg:#FFFFFF;
	--select-on:#EDE9FC;

	/* ink */
	--paper:#15181F;
	--dim:#5B6270;
	/* overlay channel: rgba(var(--ink),a) tints the ground in either theme */
	--ink:19,22,29;

	/* lines */
	--line:rgba(19,22,29,.10);
	--line2:rgba(19,22,29,.16);

	/* shadow strength: see --shf above */
	--shf:.30;
	/*
	 * Some colours arrive at runtime, not from this file: the dashboard hands
	 * each platform row, pipeline stage and engine card its own brand colour as
	 * an inline custom property. Those are picked to glow on near-black, so on
	 * white they have to be pulled toward the ink before they are used AS TEXT.
	 * Mixing is the only way to adjust a value we will not see until render.
	 */
	--tint:#12151C;
	--tint-amt:52%;

	/* accents — identical in both themes, because things are printed ON them */
	--violet:#7C6CFF; --cyan:#4FD8FF; --green:#3ADFA5;
	--pink:#FF5C8A;   --amber:#FFB65C; --red:#FF6B6B; --blue:#4FA3FF;
	/* the main button: flat violet with white text (about 4.6:1), the same
	   button the owner picked for citelx.com. No gradient, glow or shine. */
	--btn:#6E5CF6; --btn-hover:#7F6FFF;

	/* accent ink — the same hues, tuned to sit on the ground */
	--i-violet:#5B46D6;
	--i-cyan:#0A6E92;
	--i-green:#0B7A57;
	--i-amber:#8A5A00;
	--i-red:#B72B2B;
	--i-pink:#B82A55;
	--i-blue:#2457C5;
	/*
	 * The dark design used TWO inks per hue: the accent itself, and a paler
	 * relative of it for smaller or quieter text. On a light ground that
	 * distinction inverts into nothing — both have to darken, and darkening
	 * them differently would only make the quieter one shout. So the second
	 * family collapses onto the first here, and stays separate only in dark.
	 */
	--i2-violet:#5B46D6;
	--i2-cyan:#0A6E92;
	--i2-green:#0B7A57;
	--i2-amber:#8A5A00;
	--i2-red:#B72B2B;
	--i2-pink:#B82A55;
	--i2-blue:#2457C5;

	/*
	 * ACHIEVEMENT: what passed. ONE green, used sparingly: the seal, the ticks
	 * and the Passed figure, and nothing around them. The first version had a
	 * bright fill, a darker ink, a tint and a border green as well, and the
	 * owner read the card as "very scattered". This is Apple's system green in
	 * its accessible form (4.6:1 on white), so the same value can be a fill, a
	 * ring or a word.
	 */
	--ach:#248A3D;
	--on-ach:#FFFFFF;
	/* the glyph printed on a red status circle (--i-red) */
	--on-sev:#FFFFFF;
	/* the glyph printed on the amber accent; the accent is the same in both
	   themes, so this is too (dark does not redefine it) */
	--on-amber:#4A3000;

	/*
	 * MARKS are a third thing again, and the sidebar is the reason.
	 *
	 * The module glyphs and the brand dot are not text — they sit beside a label
	 * that already carries the meaning — but they ARE the only colour on a white
	 * sidebar, and they are what makes the product feel like itself. The dark
	 * design set them in pale tints (#8AB4F8, #6EF3EF …) which measure 1.3-2.3:1
	 * on white: that is the whole "it looks dull" problem. Pushing them all the
	 * way down to the text inks fixes the contrast and kills the brand with it.
	 * So marks land in between — brand-true, saturated, and 3.4-4.3:1.
	 */
	--m-blue:#3B7BEA;
	--m-violet:#7A67F0;
	--m-pink:#E0356F;
	--m-cyan:#0C8E9A;
	--m-red:#E23D3D;
	--m-live:#0EA472;

	/* module accents (Answer Engine, Meta writer) */
	--ae:#3F6FD8;  --ae2:#2A55C0;  --ae3:#5B6270;
	--mt:#6E5CF0;  --mt2:#5B46D6;
	/* what gets printed ON the module accent — it flips because the fill does */
	--on-ae:#FFFFFF;

	--sbw:250px;
}

html[data-theme="dark"]{
	/* ── DARK — the original app palette, unchanged. ── */

	--void:#0B0A1A;
	--nebula:#16143A;
	--panel:#12102A;
	--panel2:#151330;
	--card:rgba(21,19,48,.55);
	--card-deep:rgba(11,10,26,.45);
	--card2:linear-gradient(150deg,rgba(22,20,50,.75),rgba(15,14,36,.85));
	--card-stat:linear-gradient(180deg,rgba(22,20,50,.8),rgba(15,14,36,.9));
	--lg-card:linear-gradient(180deg,rgba(21,19,48,.92),rgba(15,14,36,.95));
	--sidebar-bg:linear-gradient(180deg,rgba(18,16,42,.92),rgba(11,10,26,.96));
	--topbar-bg:rgba(11,10,26,.72);
	--band:linear-gradient(140deg,#16143A 0%,#100E28 55%,#0D0C20 100%);
	--sunk:rgba(0,0,0,.22);
	--scrim:rgba(6,5,18,.72);
	--toast-bg:linear-gradient(100deg,#241E55,#1A1740);
	--select-bg:#151330;
	--select-on:#22304F;

	--paper:#F2F1FA;
	--dim:#9C98C6;
	--ink:255,255,255;

	--line:rgba(255,255,255,.08);
	--line2:rgba(255,255,255,.14);

	--shf:1;
	/* on dark the runtime colour is already the right one */
	--tint:transparent;
	--tint-amt:0%;

	/* on a dark ground the accent IS the ink, so these are the accents */
	--i-violet:#7C6CFF;
	--i-cyan:#4FD8FF;
	--i-green:#3ADFA5;
	--i-amber:#FFB65C;
	--i-red:#FF6B6B;
	--i-pink:#FF5C8A;
	--i-blue:#4FA3FF;
	/* and these are the paler relatives the dark design used for quieter text */
	--i2-violet:#B8A9FF;
	--i2-cyan:#6EF3EF;
	--i2-green:#7FE8C9;
	--i2-amber:#FFD27F;
	--i2-red:#FF8A8A;
	--i2-pink:#FF8AAF;
	--i2-blue:#8AB4F8;

	/* achievement: Apple's dark system green, the one green on a dark ground */
	--ach:#30D158;
	--on-ach:#0B0A1A;
	--on-sev:#0B0A1A;

	/* on dark the marks are the pale tints the design already used */
	--m-blue:#8AB4F8;
	--m-violet:#B8A9FF;
	--m-pink:#FF8AAF;
	--m-cyan:#6EF3EF;
	--m-red:#FF8A8A;
	--m-live:#7FE8C9;

	--ae:#5B8DEF;  --ae2:#8AB4F8;  --ae3:#8B93AD;
	--mt:#8B7BFF;  --mt2:#B8A9FF;
	--on-ae:#0B0A1A;
}

/*
 * The page ground is painted on <html> as well as on the app body. Without it
 * the browser paints its own white behind a dark theme for the few pixels of
 * overscroll, which flashes on every rubber-band scroll.
 */
html{background:var(--void)}

/*
 * LIGHT-ONLY REPAIRS
 *
 * Everything above is a value swap. These are the handful of places where the
 * dark design used a technique rather than a colour, and the technique itself
 * does not survive the inversion.
 */
html:not([data-theme="dark"]) .citely-app{
	/* The dark shell leans on glow for hierarchy. On white, hierarchy has to
	   come from edges and a little depth instead, so panels get a real border
	   and a soft shadow rather than a luminous halo. */
	--card-shadow:0 1px 2px rgba(19,22,29,.05),0 8px 24px rgba(19,22,29,.06);
}
html:not([data-theme="dark"]) .citely-app .tile,
html:not([data-theme="dark"]) .citely-app .panel,
html:not([data-theme="dark"]) .citely-app .card,
html:not([data-theme="dark"]) .citely-app .mod,
html:not([data-theme="dark"]) .citely-app .statcard,
html:not([data-theme="dark"]) .citely-app .step,
html:not([data-theme="dark"]) .citely-app .opp,
html:not([data-theme="dark"]) .citely-app .scoreband,
html:not([data-theme="dark"]) .citely-app .lg-card{
	box-shadow:var(--card-shadow);
}

/* An inset white highlight is a bevel on dark and a smudge on white. */
html:not([data-theme="dark"]) .citely-app .nitem.active{
	box-shadow:none;
}

/*
 * THE DECORATIVE WASHES ARE OFF IN LIGHT.
 *
 * Three 500px orbs blurred to 110px glow out of near-black; on white the same
 * shapes are enormous pastel clouds lying across the content, and the score
 * band adds a second violet-and-cyan wash of its own on top of them. Damping
 * them was not enough — a faint stain is still a stain. They are removed here
 * rather than made subtle, because on a light ground the panels themselves are
 * already doing the work the glow was doing.
 */
html:not([data-theme="dark"]) .citely-app .blob{display:none}
html:not([data-theme="dark"]) .citely-app .scoreband::before{display:none}
html:not([data-theme="dark"]) .citely-app .scoreband{border-color:var(--line)}
/* The login screen keeps its aurora — it is one card on an empty page, and
   there is nothing there for a wash to muddy — but at a quarter strength. */
html:not([data-theme="dark"]) .citely-app .lg-aurora{opacity:.13}
html:not([data-theme="dark"]) .citely-app .lg-aurora.a2{opacity:.09}

/*
 * SURFACES GO FLAT.
 *
 * Two panel fills are still gradients that only earn their keep on a dark
 * ground: the generic card fades from --panel into --panel2, and the content
 * pipeline lays a 7% cyan radial across itself. Both are a lift on near-black
 * and a grey-blue smudge on white, where a hairline border already separates
 * the panel from the page.
 */
html:not([data-theme="dark"]) .citely-app .card{background:var(--panel)}
html:not([data-theme="dark"]) .citely-app .pipe{background:var(--card-deep)}

/*
 * A ROW TINT THAT MOST ROWS SHARE IS NOT A SIGNAL.
 *
 * The freshness table paints every "never crawled" row in 5.5% amber. On dark
 * that is a faint lift; on white it turns the largest block on the page into a
 * sheet of cream — and since most stores are in that state, the tint marks
 * nothing anyway. The cell that is actually warning already says so in amber
 * text, so on light the row keeps the page's own surface.
 */
html:not([data-theme="dark"]) .citely-app .hz-table tr.warn td{background:none}

/*
 * DISPLAY NUMBERS WERE DRAWN AS A GRADIENT INTO THE PAGE COLOUR.
 *
 * The big figures fade from #fff into a pale accent, which is a highlight on
 * near-black and literally invisible on a white card — the Pinterest stat cards
 * rendered as empty boxes. On light they become solid ink, which is the more
 * usual way to set a large figure anyway.
 */
html:not([data-theme="dark"]) .citely-app .gauge .gtxt b,
html:not([data-theme="dark"]) .citely-app .opp b,
html:not([data-theme="dark"]) .citely-app .statcard b,
html:not([data-theme="dark"]) .citely-app .statcard.cov b{
	background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--paper);
}
/* The rest run accent-to-accent, so they keep the gradient and swap in the
   readable relatives of those accents. */
html:not([data-theme="dark"]) .citely-app .phead h1 .grad,
html:not([data-theme="dark"]) .citely-app .winband h2 em{
	background-image:linear-gradient(95deg,var(--i-cyan),var(--i-violet) 70%);
}
html:not([data-theme="dark"]) .citely-app .opp-top h2 em,
html:not([data-theme="dark"]) .citely-app .pipe-head h2 em,
html:not([data-theme="dark"]) .citely-app .tile b.pot{
	background-image:linear-gradient(95deg,var(--i-green),var(--i-cyan));
}

/* The scrollbar thumb was tuned against near-black. */
html:not([data-theme="dark"]) .citely-app ::-webkit-scrollbar-thumb{background:rgba(91,70,214,.28)}
html:not([data-theme="dark"]) .citely-app ::-webkit-scrollbar-thumb:hover{background:rgba(91,70,214,.45)}

/* Form controls are drawn by the OS from color-scheme, not from our tokens. */
html:not([data-theme="dark"]) .citely-app{color-scheme:light}
html[data-theme="dark"] .citely-app{color-scheme:dark}

/*
 * ROOM FOR ONE MORE CONTROL.
 *
 * The topbar was exactly full. Adding a 34px button to it made the flex line
 * over-subscribed, and since nothing there was marked as fixed the browser
 * shrank the widest item — the action button — until its label wrapped onto a
 * second line and the bar grew taller. The search field is the elastic thing on
 * that row; everything else keeps its size. appnav.css already says exactly
 * this below 900px, where the drawer button created the same squeeze.
 */
.citely-app .topbar > .btn,
.citely-app .topbar > .icobtn,
.citely-app .topbar > .thm-btn{flex:none}
.citely-app .topbar > .btn,
.citely-app .topbar > .crumb{white-space:nowrap}
.citely-app .topbar .searchbar{min-width:0}

/*
 * THE TOGGLE. Injected into whatever chrome the screen has (topbar, admin bar,
 * or floating on the login card), so it needs to look deliberate in all three.
 */
.thm-btn{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;flex:none;border-radius:10px;cursor:pointer;
	padding:0;line-height:0;
	color:var(--dim);background:rgba(var(--ink),.05);
	border:1px solid var(--line);
	transition:.16s;
}
.thm-btn:hover{color:var(--paper);background:rgba(var(--ink),.09);border-color:var(--line2)}
.thm-btn:focus-visible{outline:2px solid var(--i-violet);outline-offset:2px}
.thm-btn.thm-float{position:fixed;right:18px;top:18px;z-index:90;background:var(--panel)}
@media(max-width:900px){.thm-btn{width:32px;height:32px}}