/* ============================================================
   MY BOXES - COLOURS

   Every colour on the My Boxes page lives in this file and nowhere
   else. myBoxes.css holds the structure and never names a colour.

   WHAT CHANGED, AND WHY IT GOT SMALLER

   This file used to carry its own maroon palette twice over - a full
   set of values for light and another for dark - plus sixty lines
   repainting the site chrome around the app, because the chrome could
   not theme itself.

   It carries none of that now. The nineteen --box-* names below are
   aliases onto the site tokens in siteTheme-Tokens.css, which is where
   they came from in the first place: the site palette was built out of
   this file during Phase 0, so eleven of the nineteen were already
   identical and the rest were within a shade.

   The point of aliasing rather than repeating is that My Boxes now
   follows EVERY theme, not two. Light, dark, classic, and any customer
   theme added later, with no further work here - a new theme is a block
   of values in the token file and nothing else, anywhere.

   The names stay --box-* rather than being replaced throughout
   myBoxes.css. That would be 159 edits to say the same thing, and this
   indirection is worth keeping for a real reason: it is the seam where
   the app could take a colour that differs from the site's, if one ever
   should.

   The filename still says Maroon and no longer means it - same as
   siteTheme-Colors-Blue.css, which has no blue in it either. Both are
   worth renaming in one commit that does nothing else.

   David authorized 2026-09-01: My Boxes follows the site theme, so
   choosing Classic gives the boxes the blue rather than leaving them
   maroon on a blue site.
   ============================================================ */

:root {
	/* ---------------- ACCENT ---------------- */
	--box-accent:        var(--accent);
	--box-accent-strong: var(--accent-strong);
	--box-accent-soft:   var(--accent-soft);
	--box-accent-line:   var(--accent-line);
	--box-on-accent:     var(--on-accent);

	/* ---------------- SURFACES ----------------
	   Back to front: the app panel, the tinted pane inside it, then
	   the cards and controls on top of that.

	   --box-ground is the app PANEL, not the page - the page behind it
	   is the site's --ground. So it maps to --surface, and the pane
	   inside it to --surface-alt. Getting these two the wrong way round
	   would invert the whole page. */
	--box-ground:  var(--surface);
	--box-surface: var(--surface-alt);
	--box-raised:  var(--raised);

	/* ---------------- LINES AND TEXT ---------------- */
	--box-rule:        var(--rule);
	--box-rule-strong: var(--rule-strong);

	--box-ink:       var(--ink);
	--box-ink-muted: var(--ink-muted);
	--box-ink-faint: var(--ink-faint);

	/* ---------------- STATUS ----------------
	   Out of the accent's lane on purpose. In the maroon themes the
	   accent is red, so red cannot also mean "watch out". */
	--box-ok:   var(--ok);
	--box-warn: var(--warn);

	/* The playing row - the same green as ok, tinted to sit under
	   text. */
	--box-playing-soft: var(--ok-soft);

	/* The row Cut or Copy is holding - amber, the colour nothing else
	   on the page is using, so it stands out from both the selection
	   and the playing row. */
	--box-held:      var(--warn);
	--box-held-soft: var(--warn-soft);

	/* ---------------- CODE AND OVERLAY ---------------- */
	--box-code-ink: var(--code-ink);
	--box-backdrop: var(--backdrop);

	/* The one value here that is NOT a token, and deliberately the
	   same in every theme. Behind a video, and behind the letterbox
	   bars beside one: film is graded against black, and a pale
	   surround washes it out whichever way the rest of the page is
	   going. Named rather than written as a bare #000 in myBoxes.css,
	   because that file holds no colours. */
	--box-video-ground: #000000;
}


/* ---------------- CORRECTING THE CORE STYLESHEET ----------------
   siteTheme-Colors-Blue.css styles form fields by element and
   attribute - input[type="text"] beats a plain .box-input on
   specificity, so it wins and paints the edit fields with the site's
   field tokens rather than the app's. Two classes deep puts it back.

   Less critical than it was: the core's field colours are themed now,
   so what it wins with is at least the right colour for the theme. The
   app still wants its own raised surface for a field sitting on a
   card, which is what these restate. */
.box-app .box-input,
.box-import .box-input,
.box-import .box-import-format {
	color: var(--box-ink);
	border-color: var(--box-rule-strong);
	background: var(--box-raised);
}

/* Core paints every focused field with --field-focus-bg, which is a
   near-white in the light themes and a flash on every click into a
   note on a dark ground. */
.box-app .box-input:focus,
.box-app .box-search:focus,
.box-import .box-input:focus {
	background: var(--box-raised);
	border-color: var(--box-accent);
}

.box-app ::placeholder {
	color: var(--box-ink-faint);
	opacity: 1;
}


/* ---------------- COMPONENTS ---------------- */

/* The handover offer. Accent-tinted rather than a warning colour - it
   is an opportunity, not a problem, and nothing is at risk either way. */
.box-handover {
	background: var(--box-accent-soft);
	border-color: var(--box-accent-line);
	color: var(--box-ink);
}

/* Where a dragged row would land. */
.box-row.is-drop-target,
.box-col.is-drop-target {
	outline-color: var(--box-accent);
	background: var(--box-accent-soft);
}

/* The splitter reads as a hairline at rest and picks up the accent
   under the pointer, so it is discoverable without being furniture. */
.box-splitter::before {
	background: var(--box-rule);
}

.box-splitter:hover::before,
.box-splitter:focus-visible::before,
.box-splitter.is-dragging::before {
	background: var(--box-accent);
}

/* The column strip's scrollbar is the control that gets dragged most,
   so it is given a visible thumb rather than the default hairline.
   Geometry lives in myBoxes.css; only the colours are here. */
.box-strip::-webkit-scrollbar-track {
	background: var(--box-surface);
}

.box-strip::-webkit-scrollbar-thumb {
	background-color: var(--box-rule-strong);
}

.box-strip::-webkit-scrollbar-thumb:hover {
	background-color: var(--box-ink-faint);
}

.box-chip-btn {
	background: var(--box-raised);
	border-color: var(--box-rule-strong);
	color: var(--box-ink-faint);
}

.box-chip-btn:hover {
	border-color: var(--box-accent);
	color: var(--box-accent);
}

/* Scrollbars inside the columns. No longer guarded on the dark theme:
   the colours are tokens, so stating it once gets every theme a
   scrollbar that matches its own page instead of only dark getting one
   and classic keeping a bright white stripe down a blue page. */
.box-strip,
.box-col,
.box-detail-pane,
.box-results {
	scrollbar-color: var(--box-rule-strong) var(--box-ground);
}