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

   ./git.css is the structure and names no colour. The palette is the shared set's
   (commons/themes/suite.css): every colour, weight, radius and width the page paints
   with is a contract token or a `--suite-*` token, defined there once per theme.
   So this file declares NO custom property. It holds only the few rules per theme
   that carry its character and that a token cannot express: pill buttons, serif
   weights, a still hover, the neon glows. The markup is identical in all five: a
   theme never changes what is on the page, only how it is painted.

   On the two light themes the series and status inks of the set are the darker
   members of their hues, because here they are also TEXT colours (ref pills, file
   marks, badges) and have to be readable on a light surface.

   A literal that remains below is a one-off of that rule (a glow, a selected fill
   that is not the set's wash). Where a value IS a set token, the rule names the token.
   ========================================================================== */

/* ---------- craftian: light pastel glass, purple accent ---------- */
/* soft floating panels, 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"] .tile.active{background:rgba(255,255,255,.86);box-shadow:var(--shadow-sm)}

/* ---------- porcelain: ivory editorial, teal accent, serif headings ---------- */
/* flat hairline panels, serif headings set a little larger and lighter */
[data-theme-set="suite"][data-theme="porcelain"] .h-name{font-weight:500;letter-spacing:-.01em}
[data-theme-set="suite"][data-theme="porcelain"] .g-head h2,
[data-theme-set="suite"][data-theme="porcelain"] .card-h h2,
[data-theme-set="suite"][data-theme="porcelain"] .t-name{font-weight:500}
[data-theme-set="suite"][data-theme="porcelain"] .eyebrow{font-family:var(--suite-font-ui);font-weight:600}
[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)}
[data-theme-set="suite"][data-theme="porcelain"] .head::before{height:1px}
[data-theme-set="suite"][data-theme="porcelain"] .tile.active{background:var(--suite-accent-soft);border-color:var(--suite-accent-line)}

/* ---------- carbon: graphite workbench, indigo accent ---------- */
/* compact, hairline separators, no floating */
[data-theme-set="suite"][data-theme="carbon"] .btn:hover{transform:none}
[data-theme-set="suite"][data-theme="carbon"] .tile:hover{transform:none}
[data-theme-set="suite"][data-theme="carbon"] .eyebrow{letter-spacing:.1em;font-weight:600}
[data-theme-set="suite"][data-theme="carbon"] .tile.active{background:var(--suite-accent-soft);border-color:var(--suite-accent-line)}

/* ---------- nocturne: dark glass, cyan / violet / pink (the study's palette) ---------- */
/* neon: a dot grid in the backdrop, gradient lettering, glow on the graph */
[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"] .h-name{
    background:var(--primary);-webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme-set="suite"][data-theme="nocturne"] .h-name{filter:drop-shadow(0 0 14px rgba(168,85,247,.45))}
[data-theme-set="suite"][data-theme="nocturne"] .head::before{box-shadow:0 0 18px rgba(168,85,247,.9)}
[data-theme-set="suite"][data-theme="nocturne"] .btn.primary{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"] .tile.active{box-shadow:0 0 22px -8px rgba(168,85,247,.75)}
[data-theme-set="suite"][data-theme="nocturne"] .tile::before{box-shadow:0 0 12px rgba(168,85,247,.9)}
[data-theme-set="suite"][data-theme="nocturne"] .edge,
[data-theme-set="suite"][data-theme="nocturne"] .cd{filter:drop-shadow(0 0 5px currentColor)}
/* an ordinary commit dot is filled with the canvas here, not the surface */
[data-theme-set="suite"][data-theme="nocturne"] .cd:not(.mg):not(.sel){fill:var(--page)}
[data-theme-set="suite"][data-theme="nocturne"] .pill{text-shadow:0 0 8px currentColor}
[data-theme-set="suite"][data-theme="nocturne"] .clone{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"] dialog{box-shadow:0 18px 46px -10px rgba(0,0,0,.7), 0 0 30px -8px rgba(168,85,247,.55)}

/* ---------- phosphor: green-tinted terminal dark ---------- */
/* terminal: mono headings set smaller, square corners, a faint glow on the head commit */
[data-theme-set="suite"][data-theme="phosphor"] .h-name{font-size:clamp(19px,2.4vw,24px);letter-spacing:-.01em}
[data-theme-set="suite"][data-theme="phosphor"] .g-head h2,
[data-theme-set="suite"][data-theme="phosphor"] .card-h h2{font-size:14.5px}
[data-theme-set="suite"][data-theme="phosphor"] .t-name{font-size:13.5px}
[data-theme-set="suite"][data-theme="phosphor"] .btn:hover,
[data-theme-set="suite"][data-theme="phosphor"] .tile:hover{transform:none}
[data-theme-set="suite"][data-theme="phosphor"] .ring{filter:drop-shadow(0 0 5px currentColor)}
[data-theme-set="suite"][data-theme="phosphor"] .tile.active{background:rgba(74,222,128,.13);border-color:rgba(74,222,128,.32)}