/* ==========================================================================
   Astral Sovereignty — the THEMELESS look

   The owner's words, 2026-10-31: one layout with "an easy switch with boxes
   and colors and such, not 2 separate entities of concepts", where themeless
   is "a base black like with no effects for buttons and such". So this is not
   a layout and not a skin with ideas of its own. It is a subtraction: the
   colours come from core/colours.js's black set (written as tokens, like every
   other scheme), and this file takes away what the other sheets add ON TOP of
   colour — so what is left is boxes, lines and colours.

   SCOPE. Every selector starts with html[data-look="themeless"] — an attribute
   only core/colours.js applyColours() and index.html's pre-paint read write —
   so for a player on the themed look (every player, until they choose
   otherwise) this file matches nothing at all. tests/look_themeless.test.js
   fails on a selector without the scope. Loaded LAST, after colours.css, so at
   equal weight it wins; every override below is written one step heavier than
   the rule it replaces (the html type selector plus the attribute), never with
   !important.

   WHAT IT STRIPS, and why each one is an "effect" rather than information:
   - The starfield canvas and the Command preset's nebula behind every game
     screen (#stars, main.game-main's background-image). Base black means a
     black page.
   - Every gradient fill: the preset's glass cards, its gradient buttons, the
     table-head gradient, the card-heading and modal-head hairline gradients,
     the default meter's blue-to-cyan fill, the login card's glass-over-art, the
     profile hero's backdrop, and Mint's plain-hero radial glow and photo scrim.
     Each becomes the flat token underneath it.
   - Every glow and decorative shadow: the preset's inset panel glows, the
     primary button's halo, the tab marker's text glow, the login title's glow,
     the header and clock highlights, the input focus halo, the toast and
     bottom-sheet drop shadows, the crest badge's shadow, the hero text shadows
     and the hero glyphs' drop shadow.
   - Brightness hovers (`filter: brightness()` on the Mint CTA, the Mint
     primary button and the order-lock chip). A hover is a flat step instead:
     the border goes up a shade, or the background does.
   - Motion that only decorates: the route-enter slide on every screen, the
     toast slide-in, the fold/disclosure chevron and toggle-knob transitions,
     and the button/card hover fades.
   - The modal backdrop's blur. The dim scrim stays: it is what says the page
     behind is not live.
   - Hero artwork. The banner is hidden here and not even requested by
     ui/concept/mint/kit.js cmHero, so every hero is drawn as the plain header —
     title, sub-line, pills, crest — on a flat panel with a 1px line. A banner
     inside a card (Research's Sovereignty fold) goes the same way.
   - The glass on the crest badge and the bottom sheets: flat panels with a 1px
     line.

   WHAT IT KEEPS, because each one carries meaning:
   - Focus outlines (game.css :focus-visible) and the focused field's border
     colour. Only the decorative halo around a focused field goes.
   - Every "you are here" marker: the active tab's underline, the bottom bar's
     bar, the current segment's tint, the selected card's border, the checked
     radio.
   - Toned alert borders and tints, the toast and banner side bars, the
     combat and shutdown strips, the queue rows' state bars.
   - Overflow fades (the masks on scrolling strips and the tables' scroll
     shadows): they are how a strip says there is more of it.
   - The colour-vision patterns on meters and climate bars (colours.css §2),
     the climate bar's own rings and the "vague" band's soft edge.
   - The tick chip's pulse while a tick resolves: a status, not decoration, and
     game.css's reduced-motion rule already stops it for anyone who asked.
   - Backdrop blur on the sticky chrome and the designer's vitals bar. It is
     invisible until content scrolls under them, and without it page text reads
     through a near-opaque bar.
   - Mint's radii, every size and every tap floor: this file paints, it never
     moves a box.
   - The empire's own crest and flag: identity, not scenery.

   LEFT ALONE ON PURPOSE: the galaxy map and its HUD, side card, sheet and
   starfield backdrop (that screen is restyled on its own lane), the guided
   tour's spotlight (its pulse is how it points), the drawer's slide (it says
   where the menu came from), and Concept 02's own sheet.

   Discipline:
   - No colour literals: every colour is a token, so the black set — or a
     colour-vision mode over it — decides it.
   - No braces inside comments: the tests parse this file by counting them.
   ========================================================================== */

/* ---------- 1. The page --------------------------------------------------- */

html[data-look="themeless"] #stars { display: none; }

/* The preset's nebula behind every game screen, and Mint's (and the Mobile
   layout's) route-enter slide. Both are on <main>. */
html[data-look="themeless"] main.game-main {
  background-image: none;
  animation: none;
}

/* ---------- 2. Chrome ----------------------------------------------------- */

/* Paint only, like the preset itself: the glow under the header, the highlight
   on the clock, the glow on the tab you are on. The tab keeps its underline and
   its colour — that is the marker. */
html[data-look="themeless"] .shell-header { box-shadow: none; }
html[data-look="themeless"] .tick-chip { box-shadow: none; }
html[data-look="themeless"] .tabbar a[aria-current="page"] { text-shadow: none; }

/* ---------- 3. Cards ------------------------------------------------------ */

/* The preset's glass panel is a gradient with two inset glows; the flat panel
   is the token it was drawn over. Inside the Mint frame --panel is --cm-panel,
   so this is the colour concept-mint.css already paints there. */
html[data-look="themeless"] .card {
  background: var(--panel);
  box-shadow: none;
}
html[data-look="themeless"] .card--sub {
  background: var(--panel-2);
  box-shadow: none;
}
html[data-look="themeless"] .card.selectable { transition: none; }
html[data-look="themeless"] .card.selectable:hover {
  border-color: var(--edge-ui);
  box-shadow: none;
}
/* Selected keeps the preset's lit border — that is what says "this one" — and
   loses the glow and the gradient. */
html[data-look="themeless"] .card.is-selected {
  background: var(--panel-2);
  box-shadow: none;
}
html[data-look="themeless"] .card > h2 { background: none; }

/* The classic profile hero: a gradient backdrop behind the flag. The flag is the
   empire's own and stays; the gradient under it goes. */
html[data-look="themeless"] .profile-hero { background: var(--panel); }

/* ---------- 4. Meters and tables ------------------------------------------ */

/* The inset ring around every meter, and the default fill's blue-to-cyan run.
   The warn and bad fills are untouched, and so are colours.css's monochrome
   patterns on them — this rule cannot reach those two. */
html[data-look="themeless"] .meter { box-shadow: none; }
html[data-look="themeless"] .meter:not(.warn):not(.bad) > i { background: var(--blue); }

html[data-look="themeless"] .tbl th { background: var(--panel-2); }

/* ---------- 5. Buttons ---------------------------------------------------- */

/* game.css's own flat buttons, restated over the preset's gradients. Every
   variant is restated AFTER the base rule at the same weight, because the base
   rule here is heavier than the variant rules in game.css and would otherwise
   fill a ghost button or turn a primary grey on hover. */
html[data-look="themeless"] .btn {
  background: var(--panel-2);
  transition: none;
}
html[data-look="themeless"] .btn:hover {
  background: var(--panel-3);
  border-color: var(--edge-ui);
}
/* The primary: the accent, flat, no halo. Its hover is a border step to the
   text colour — the fill cannot get lighter without the ink on it failing. */
html[data-look="themeless"] .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: none;
}
html[data-look="themeless"] .btn--primary:hover {
  background: var(--blue);
  border-color: var(--text);
  filter: none;
}
html[data-look="themeless"] .btn--danger { background: transparent; }
html[data-look="themeless"] .btn--danger:hover { background: var(--danger-dim); }
html[data-look="themeless"] .btn--ghost {
  background: transparent;
  border-color: transparent;
}
html[data-look="themeless"] .btn--ghost:hover {
  background: var(--blue-dim);
  border-color: transparent;
}

/* Inside the Mint frame a primary is the ACTION colour, not game.css's blue
   (which there is the information colour). concept-mint.css already says so
   in <main> and in dialogs at a heavier weight than the rules above; these are
   the places it said so at a lighter one — the desk rail, a sheet outside
   <main> — and the hover, where its brightness filter is replaced by the same
   border step as everywhere else. Not on a disabled one: concept-mint.css
   draws those as a quiet panel, and that rule must keep winning. */
html[data-look="themeless"] .concept-mint .btn--primary:not(:disabled),
html[data-look="themeless"] .concept-mint ~ dialog.modal .btn--primary:not(:disabled) {
  background: var(--cm-accent);
  border-color: var(--cm-accent);
}
html[data-look="themeless"] .concept-mint .btn--primary:not(:disabled):hover,
html[data-look="themeless"] .concept-mint ~ dialog.modal .btn--primary:not(:disabled):hover {
  background: var(--cm-accent);
  border-color: var(--cm-text);
  filter: none;
}

/* The Mint call-to-action: its hover brightened the whole button. */
html[data-look="themeless"] .cm-cta:hover {
  filter: none;
  border-color: var(--cm-text);
}

/* The order-lock chip beside a submit button brightened on hover too. It is a
   link, so the flat step is the link's own underline. */
html[data-look="themeless"] a.lock-chip:hover {
  filter: none;
  text-decoration: underline;
}

/* ---------- 6. Forms ------------------------------------------------------ */

/* The halo round a focused field. The border colour change stays (it is the
   focus state), and so does the focus-visible outline game.css draws. */
html[data-look="themeless"] .field input:focus,
html[data-look="themeless"] .field select:focus,
html[data-look="themeless"] .field textarea:focus,
html[data-look="themeless"] input:not([type]):focus,
html[data-look="themeless"] input[type="text"]:focus,
html[data-look="themeless"] input[type="email"]:focus,
html[data-look="themeless"] input[type="number"]:focus,
html[data-look="themeless"] input[type="url"]:focus,
html[data-look="themeless"] input[type="search"]:focus,
html[data-look="themeless"] input[type="password"]:focus,
html[data-look="themeless"] select:focus,
html[data-look="themeless"] textarea:focus { box-shadow: none; }

/* ---------- 7. Toasts, dialogs, sheets ------------------------------------ */

/* #toasts in the second selector because the Mint frame styles toasts through
   it, at a weight only an id can match. The side bar that says ok / warn / bad
   is a border and stays. */
html[data-look="themeless"] .toast,
html[data-look="themeless"] #toasts .toast {
  box-shadow: none;
  animation: none;
}

html[data-look="themeless"] dialog.modal {
  background: var(--panel);
  box-shadow: none;
}
html[data-look="themeless"] dialog.modal::backdrop { backdrop-filter: none; }
html[data-look="themeless"] .modal-head { background: none; }

/* The kit's bottom sheet, phone and desk alike: flat, with the 1px line it
   already draws. */
html[data-look="themeless"] .cm-sheet { box-shadow: none; }

/* ---------- 8. The bare pages: login, shard select, status ---------------- */

/* The first thing anyone sees: the preset layers its art under a glass
   gradient here. A flat panel with its line, and a title with no glow. */
html[data-look="themeless"] .auth-card {
  background: var(--panel);
  box-shadow: none;
}
html[data-look="themeless"] .auth-card h1 { text-shadow: none; }

/* ---------- 9. The Mint hero, as a plain header ----------------------------
   ui/concept/mint/kit.js does not build the banner under this look, so a hero
   rendered now is already the `--plain` form. These rules draw EVERY hero that
   way, including one rendered before the switch that still holds its image:
   the image hidden, the body back in flow, the floor that keeps a title-only
   header from collapsing, and the plain form's border — on a flat panel
   instead of its glow and gradient. */
html[data-look="themeless"] .cm-hero__img { display: none; }
html[data-look="themeless"] .cm-hero {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 104px;
  border: 1px solid var(--cm-line);
  background: var(--cm-panel);
}
html[data-look="themeless"] .cm-hero::after { background: none; }
html[data-look="themeless"] .cm-hero .cm-hero__body {
  position: static; padding: 12px;
}
html[data-look="themeless"] .cm-hero__title,
html[data-look="themeless"] .cm-hero__sub { text-shadow: none; }
html[data-look="themeless"] .cm-hero__back,
html[data-look="themeless"] .cm-hero__switch > * { filter: none; }

/* The crest: a flat badge with a line, in flow at the left the way the plain
   hero places it, so it can never sit on a title that no longer has a banner
   to be pinned to. */
html[data-look="themeless"] .cm-hero__crest {
  position: static; margin: 10px 0 -4px 12px;
  border-color: var(--cm-line);
  background: var(--cm-panel-raised);
  box-shadow: none;
}

/* A decorative banner inside a card goes with the heroes. */
html[data-look="themeless"] .cm-card > .cm-art--banner,
html[data-look="themeless"] .cm-fold__body > .cm-art--banner { display: none; }

/* ---------- 10. Motion ---------------------------------------------------- */

/* The chevrons still turn — the turned state is how an open fold says so — but
   they snap instead of easing, and the toggle's knob jumps. */
html[data-look="themeless"] .cm-fold__chevron,
html[data-look="themeless"] .cm-disclosure__chevron,
html[data-look="themeless"] .cm-toggle__knob,
html[data-look="themeless"] .fold-caret { transition: none; }

/* ---------- 11. The 3D system view ---------------------------------------- */

/* #333's 3D view was built beside this look, not on it, so its effects are
   answered here. The lit markers (the pressed camera chip's underline, the
   in-flight row and the tapped fleet's side bar) stay markers: a flat accent
   tint, the same one the current sub-tab uses, in place of the inset bar. The
   docked sheet loses its drop shadow and keeps its 1px line, the edge tabs'
   arrows snap like the fold chevrons, and the slid-up bar and slid-down strip
   appear without sliding. */
html[data-look="themeless"] .concept-mint .cm-sv-cam__btn[aria-pressed="true"],
html[data-look="themeless"] .concept-mint .cm-sv-flight--on,
html[data-look="themeless"] .concept-mint .cm-sv-panel .cm-sv-flight--on,
html[data-look="themeless"] .concept-mint .cm-sv-panel__fleet--on {
  box-shadow: none;
  background: var(--cm-accent-bg);
}
html[data-look="themeless"] .concept-mint .cm-sheet.cm-sheet--sv-immersive { box-shadow: none; }
html[data-look="themeless"] .concept-mint .cm-sv-edgetab--top .cm-sv-edgetab__glyph,
html[data-look="themeless"] .concept-mint .cm-sv-edgetab--bottom .cm-sv-edgetab__glyph { transition: none; }
html[data-look="themeless"] .concept-mint .cm-sv-navbar,
html[data-look="themeless"] .concept-mint .cm-sv-subnav { animation: none; }