/* ============================================================================
   Apps page: the per-theme CHARACTER of its one layout.

   ./apps.css is the structure and names no colour. The palette is the shared set's
   (commons/themes/suite.css): the surfaces, controls, menus, the backdrop, the
   status inks and washes are contract tokens and `--suite-*` tokens, defined there
   once per theme and read by every page of the set. This page loads no other page's
   stylesheet. This file adds, for each theme of the set, the SIX tokens that this
   gallery alone needs and that no formula over the shared vocabulary gives, and
   then a few rules that carry the theme's character. The markup is identical in all
   five: a theme never changes what is on the page, only how it is painted.

   Craftian is the palette the gallery was designed in. On the two light themes the
   darker members of a hue are used wherever the colour is also a TEXT colour (the
   Game tag), so it stays readable on a light surface.

   Page tokens (every theme defines the same six; the list is recorded, with the
   reason, in the rulebook header of commons/themes/suite.css)
     --apps-lift-y                    how far a hovered card rises
     --apps-tilt                      how far a card leans towards a mouse pointer
     --apps-chip2 / -chip3 / -chip4   the 2nd to 4th stat chip icons (and the copy
                                      burst); the first chip is the set's --primary
     --apps-kind-game                 the Game tag's ink; its wash is mixed from it

   Everything else the gallery paints (the countdown ring, the sparkline, the App
   tag, the Published status, the unsaved banner, the dot grid, the drawer, the
   toast) is derived from the shared vocabulary in ./apps.css. Where a theme wants
   more than the derived value (a glow, a two-colour banner, an inverted toast), it
   is a character rule below.

   The buttons, the backdrop and the dialogs use the same class names as the Git
   page and get the same per-theme treatment; the rules are restated here because
   this page does not load that page's file.
   ========================================================================== */

/* ---------- craftian: light pastel glass, purple accent (the study's palette) ---------- */
[data-theme-set="suite"][data-theme="craftian"]{
    --apps-lift-y:-7px;
    --apps-tilt:8deg;
    --apps-chip2:linear-gradient(135deg,#7dd3fc,#a5b4fc);
    --apps-chip3:linear-gradient(135deg,#6ee7b7,#34d399);
    --apps-chip4:linear-gradient(135deg,#fda4af,#fdba74);
    --apps-kind-game:#1d5fa8;
}
/* soft floating cards, round controls, pill buttons */
[data-theme-set="suite"][data-theme="craftian"] .btn{border-radius:999px}
[data-theme-set="suite"][data-theme="craftian"] .btn.icon{border-radius:50%}
[data-theme-set="suite"][data-theme="craftian"] .apps-stat .ico{border-radius:13px}
[data-theme-set="suite"][data-theme="craftian"] .drawer{border-radius:26px}
/* the unsaved banner blends the warning into the theme's rose */
[data-theme-set="suite"][data-theme="craftian"] .banner{background:linear-gradient(135deg,var(--suite-warn-wash),var(--suite-err-wash))}
/* an inverted toast: the ink as the surface */
[data-theme-set="suite"][data-theme="craftian"] .apps-toast{background:var(--ink);color:var(--surface);border-color:transparent}

/* ---------- porcelain: ivory editorial, teal accent, serif headings ---------- */
[data-theme-set="suite"][data-theme="porcelain"]{
    --apps-lift-y:-4px;
    --apps-tilt:4deg;
    --apps-chip2:#4b5f8f;--apps-chip3:#4a6b43;--apps-chip4:#8f6b22;
    --apps-kind-game:#8a6418;
}
/* flat hairline cards, serif headings set a little lighter */
[data-theme-set="suite"][data-theme="porcelain"] .hero h1,
[data-theme-set="suite"][data-theme="porcelain"] .card h3,
[data-theme-set="suite"][data-theme="porcelain"] .d-head h2,
[data-theme-set="suite"][data-theme="porcelain"] .sec h4,
[data-theme-set="suite"][data-theme="porcelain"] .apps-stat b{font-weight:500;letter-spacing:-.01em}
[data-theme-set="suite"][data-theme="porcelain"] .copy{font-family:var(--suite-font-ui)}
[data-theme-set="suite"][data-theme="porcelain"] .btn{border-radius:999px}
[data-theme-set="suite"][data-theme="porcelain"] .btn.primary{font-family:var(--suite-font-ui)}
/* the sparkline sits in a parchment well, not on the card's own white */
[data-theme-set="suite"][data-theme="porcelain"] .spark{background:var(--suite-code-bg)}
/* the Game tag is the theme's ochre: its wash is the warm paper one, not a mix */
[data-theme-set="suite"][data-theme="porcelain"] .kind.game{background:var(--suite-warn-wash)}
/* an inverted toast: the ink as the surface */
[data-theme-set="suite"][data-theme="porcelain"] .apps-toast{background:var(--ink);color:var(--surface)}

/* ---------- carbon: graphite workbench, indigo accent ---------- */
[data-theme-set="suite"][data-theme="carbon"]{
    --apps-lift-y:-3px;
    --apps-tilt:3deg;
    --apps-chip2:#0e7fb8;--apps-chip3:#0f9d74;--apps-chip4:#c2410c;
    --apps-kind-game:#34d399;
}
/* compact and still: the card keeps a small lift, nothing else moves */
[data-theme-set="suite"][data-theme="carbon"] .btn:hover,
[data-theme-set="suite"][data-theme="carbon"] .filt:hover,
[data-theme-set="suite"][data-theme="carbon"] .copy:hover{transform:none}

/* ---------- nocturne: dark glass, cyan / violet / pink ---------- */
[data-theme-set="suite"][data-theme="nocturne"]{
    --apps-lift-y:-7px;
    --apps-tilt:8deg;
    --apps-chip2:linear-gradient(135deg,#22d3ee,#6366f1);
    --apps-chip3:linear-gradient(135deg,#10b981,#0891b2);
    --apps-chip4:linear-gradient(135deg,#f59e0b,#ec4899);
    --apps-kind-game:#22d3ee;
}
/* neon: a violet dot grid in the backdrop, a glow on the title, the address, the card and the drawer */
[data-theme-set="suite"][data-theme="nocturne"] .mesh::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(168,85,247,.22) 1px, transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(70rem 50rem at 50% 12%, #000, transparent 80%);
    mask-image:radial-gradient(70rem 50rem at 50% 12%, #000, transparent 80%);
}
[data-theme-set="suite"][data-theme="nocturne"] .hero h1 b{filter:drop-shadow(0 0 14px rgba(168,85,247,.45))}
[data-theme-set="suite"][data-theme="nocturne"] .addr{box-shadow:0 0 22px -12px rgba(34,211,238,.9), inset 0 0 22px -16px rgba(34,211,238,.9)}
[data-theme-set="suite"][data-theme="nocturne"] .btn.primary,
[data-theme-set="suite"][data-theme="nocturne"] .copy,
[data-theme-set="suite"][data-theme="nocturne"] .filt[aria-pressed="true"]{box-shadow:0 10px 26px -8px rgba(168,85,247,.7), inset 0 1px 0 rgba(255,255,255,.3)}
[data-theme-set="suite"][data-theme="nocturne"] .spark span.w{box-shadow:0 0 8px rgba(168,85,247,.6)}
[data-theme-set="suite"][data-theme="nocturne"] .spark{background:var(--suite-code-bg)}
[data-theme-set="suite"][data-theme="nocturne"] article.card:hover{box-shadow:0 0 0 1px rgba(168,85,247,.35), 0 22px 50px -18px rgba(168,85,247,.55)}
[data-theme-set="suite"][data-theme="nocturne"] .drawer{box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 40px -10px rgba(168,85,247,.5)}
[data-theme-set="suite"][data-theme="nocturne"] dialog{box-shadow:0 18px 46px -10px rgba(0,0,0,.7), 0 0 30px -8px rgba(168,85,247,.55)}
/* the unsaved banner blends the warning into the theme's pink */
[data-theme-set="suite"][data-theme="nocturne"] .banner{background:linear-gradient(135deg,var(--suite-warn-wash),var(--suite-err-wash))}

/* ---------- phosphor: green-tinted terminal dark ---------- */
[data-theme-set="suite"][data-theme="phosphor"]{
    --apps-lift-y:-3px;
    --apps-tilt:3deg;
    --apps-chip2:#38bdf8;--apps-chip3:#86efac;--apps-chip4:#fbbf24;
    --apps-kind-game:#38bdf8;
}
/* terminal: headings set smaller, square corners, nothing bounces, a hairline ring on a lifted card */
[data-theme-set="suite"][data-theme="phosphor"] .hero h1{font-size:clamp(22px,3vw,28px);letter-spacing:-.01em}
[data-theme-set="suite"][data-theme="phosphor"] .card h3{font-size:16.5px}
[data-theme-set="suite"][data-theme="phosphor"] .d-head h2{font-size:20px}
[data-theme-set="suite"][data-theme="phosphor"] .d-close,
[data-theme-set="suite"][data-theme="phosphor"] .av{border-radius:var(--suite-radius-sm)}
[data-theme-set="suite"][data-theme="phosphor"] .btn:hover,
[data-theme-set="suite"][data-theme="phosphor"] .filt:hover,
[data-theme-set="suite"][data-theme="phosphor"] .copy:hover{transform:none}
[data-theme-set="suite"][data-theme="phosphor"] article.card:hover{box-shadow:0 0 0 1px rgba(74,222,128,.25), 0 14px 30px -18px rgba(0,0,0,.8)}