/* css/themes.css — Blueprint theme EXTRAS only. The grid density + line tokens
   already flip in design-tokens.css via [data-theme='blueprint']; this sheet
   adds the visible "densified / drafting" flourishes. All grayscale, subtle,
   and static (background-image / borders only) — zero animation, zero per-frame
   cost. Mono theme adds nothing here (clean default). */

/* -------------------------------------------------------------------------
   Widget corner tick marks — 8px L-shapes in the four corners, drafting style.
   Rendered with gradients so a single ::before/::after pair covers two corners
   each (no extra DOM). Color only ever grayscale (--line-bright).
   ------------------------------------------------------------------------- */
[data-theme='blueprint'] .widget {
  position: relative;
}
[data-theme='blueprint'] .widget::before,
[data-theme='blueprint'] .widget::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
/* top-left corner tick */
[data-theme='blueprint'] .widget::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--line-bright);
  border-left: 1px solid var(--line-bright);
}
/* bottom-right corner tick */
[data-theme='blueprint'] .widget::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--line-bright);
  border-right: 1px solid var(--line-bright);
}

/* Second pair of ticks (top-right + bottom-left) via the widget header, which
   the layout engine always renders. Keeps all four corners marked with no
   extra elements of our own. */
[data-theme='blueprint'] .widget .widget-head {
  position: relative;
}
[data-theme='blueprint'] .widget .widget-head::before,
[data-theme='blueprint'] .widget .widget-head::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
[data-theme='blueprint'] .widget .widget-head::before {
  top: -1px;
  right: -1px;
  border-top: 1px solid var(--line-bright);
  border-right: 1px solid var(--line-bright);
}
[data-theme='blueprint'] .widget .widget-head::after {
  /* anchor to the widget's bottom-left via a tall offset from the header */
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--line-bright);
  border-left: 1px solid var(--line-bright);
}

/* -------------------------------------------------------------------------
   Blueprint chrome for the v2 surfaces (the v1 #hud-top / #dock are deleted).
   Both the island pills and the settings glass card gain a drafting flavour.

   .glass already owns ::before for the highlight sheen, so we must NOT reuse
   ::before here. Two shape-aware techniques keep it clean and static:

   • Island pills (fully rounded, foreign DOM we don't control) get a layered
     inset hairline — box-shadow follows the pill's own radius, needs no free
     pseudo-element, and is never clipped. The first shadow preserves whatever
     drop shadow the pill already carried.

   • The settings card (gently rounded --glass-radius-sm, ours) gets true 8px
     corner tick marks via a single ::after painted with corner gradients — the
     L-shapes sit 8px inside the corners so the card's overflow:hidden + radius
     never clip them.

   All grayscale, all static (no animation, zero per-frame cost). --line* only.
   ------------------------------------------------------------------------- */
[data-theme='blueprint'] .island {
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--line-strong);
}

[data-theme='blueprint'] #settings-layer .glass {
  position: relative;
}
[data-theme='blueprint'] #settings-layer .glass::after {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 2;                 /* above the sheen ::before, below no real content */
  background-repeat: no-repeat;
  /* eight 8px arms = four corner L-ticks, drawn with flat grayscale gradients */
  background-image:
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright)),
    linear-gradient(var(--line-bright), var(--line-bright));
  background-position:
    top left, top left,            /* TL: horizontal arm, vertical arm */
    top right, top right,          /* TR */
    bottom left, bottom left,      /* BL */
    bottom right, bottom right;    /* BR */
  background-size:
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px,
    8px 1px, 1px 8px;
}

/* -------------------------------------------------------------------------
   Faint crosshair center marks on the grid background — a big, quiet
   drafting crosshair at screen center, layered UNDER the existing grid image.
   Static background gradients only, so no repaint cost.
   ------------------------------------------------------------------------- */
/* =====================================================================
   v3 #15 theme flourishes — the avatar stays WHITE across all themes, so
   "inverted" (the one light theme) paints a soft dark pool at screen-center
   behind the orb so it still reads. Cheap: one static radial in #grid-bg.
   ===================================================================== */
[data-theme='inverted'] #grid-bg {
  background-image:
    radial-gradient(circle at center, rgba(10,10,12,0.92) 0, rgba(10,10,12,0.55) 16%, transparent 34%),
    repeating-linear-gradient(to right,  var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-size));
  background-position: center center;
}
/* Per-theme widget body accents so the "color inside widgets" law stays on-theme. */
[data-theme='nature']  .widget-body { --wx-accent:#57d977; --tmr-accent:#9be36b; }
[data-theme='water']   .widget-body { --wx-accent:#38bdf8; --tmr-accent:#7dd3fc; }
[data-theme='newyear'] .widget-body { --wx-accent:#e0c478; --tmr-accent:#f0d79a; }
[data-theme='inverted'].widget-body,
[data-theme='inverted'] .widget-body { --wx-accent:#2f6ad9; --tmr-accent:#c8860a; }
[data-theme='gos']     .widget-body { --wx-accent:#0a84ff; --tmr-accent:#ffd60a; }
/* GSP: sharp, monochrome — kill the widget radius entirely + hard rims. */
[data-theme='gsp'] .widget { border-width:1px; }

/* =====================================================================
   Theme SCENERY (v3 #15b) — each theme is a whole SCENE, not just a palette.
   Particles are drawn on #scene-canvas (js/ui/theme-scene.js). The pieces below
   are the CHEAP static/CSS-animated parts: base ambience gradients + gOS blobs.
   ===================================================================== */
/* Ambience wash per theme (sits under the particles). */
[data-theme='nature']  #theme-scene { background:
  radial-gradient(120% 80% at 50% 120%, rgba(20,60,30,0.55), transparent 60%),
  radial-gradient(80% 50% at 50% -10%, rgba(30,80,45,0.25), transparent 70%); }
[data-theme='water']   #theme-scene { background:
  linear-gradient(to bottom, rgba(0,20,45,0.0), rgba(0,25,55,0.55) 70%, rgba(0,35,70,0.8)); }
[data-theme='gsp']     #theme-scene { background:
  radial-gradient(70% 55% at 30% 25%, rgba(40,30,90,0.35), transparent 60%),
  radial-gradient(60% 50% at 80% 75%, rgba(90,25,70,0.28), transparent 65%); }
[data-theme='newyear'] #theme-scene { background:
  radial-gradient(90% 60% at 50% 120%, rgba(40,40,120,0.35), transparent 60%); }
[data-theme='inverted'] #theme-scene { background:
  radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,0.05), transparent 70%); }

/* gOS — three big soft blurred colour blobs slowly drifting (Big Sur vibe).
   Pure CSS, transform-only animation → smooth + cheap. */
[data-theme='gos'] #theme-scene::before,
[data-theme='gos'] #theme-scene::after {
  content:''; position:absolute; border-radius:50%;
  filter: blur(80px); opacity:0.5; pointer-events:none;
}
[data-theme='gos'] #theme-scene::before {
  width:52vw; height:52vw; left:-8vw; top:-10vw;
  background: radial-gradient(circle, #0a84ff, transparent 65%);
  animation: gos-blob-a 26s var(--ease-in-out) infinite alternate;
}
[data-theme='gos'] #theme-scene::after {
  width:46vw; height:46vw; right:-6vw; bottom:-12vw;
  background: radial-gradient(circle, #bf5af2, transparent 65%);
  animation: gos-blob-b 32s var(--ease-in-out) infinite alternate;
}
@keyframes gos-blob-a { from{ transform:translate(0,0) scale(1);} to{ transform:translate(18vw,12vh) scale(1.2);} }
@keyframes gos-blob-b { from{ transform:translate(0,0) scale(1);} to{ transform:translate(-16vw,-10vh) scale(1.15);} }
@media (prefers-reduced-motion: reduce) {
  [data-theme='gos'] #theme-scene::before,
  [data-theme='gos'] #theme-scene::after { animation: none; }
}

[data-theme='blueprint'] #grid-bg {
  background-image:
    /* center crosshair: one vertical + one horizontal faint band */
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--grid-line) calc(50% - 0.5px), var(--grid-line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--grid-line) calc(50% - 0.5px), var(--grid-line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    /* existing vignette + line grid (kept from base.css, denser via token) */
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%),
    repeating-linear-gradient(to right,  var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-size));
  background-position: center center;
}