/* ═══════════════════════════════════════════════════════════════════════════
   nux skin — the account area's look, worn by nux's components everywhere
   ═══════════════════════════════════════════════════════════════════════════

   Thomas, 2026-10-09: "create me nux override css (so it can be removed if
   needed) so my components used in portal match the style you used in account
   page (just nux - dont redesign the whole portal)".

   ⚠️ REMOVABLE BY DESIGN. Delete the one <link> to this file in
   global/index.html and every nux component goes back to the stock theme;
   nothing else reads from here. Bump its `?skN` on every edit — nginx serves
   /css with `expires 1h` behind Cloudflare.

   What the account page is made of, and so what this file teaches nux:

     tcard, tcardfoot   → nux-modal, nux-block: a flat panel, one hairline,
                          10px corners, a plain white title, a foot strip of
                          buttons on the next panel step
     ttable             → nux-list: mono uppercase heads on a hairline, rows
                          ruled by hairlines, no fills, no column rules
     tsnav, tseg        → nux-tabs, dropdown rows, nux-switch faces
     tbanner, tdlgsum   → toasts, tooltips, tags

   ⚠️ FIELDS AND BUTTONS ARE LEFT ALONE, AND THAT IS THE POINT. The account page
   draws its inputs and its Save button with nux as global.css themes it, so
   they ARE the target already — restyling them here would change the very page
   this file copies. The account page renders identically with or without it.

   ── load order ────────────────────────────────────────────────────────────
   nux.min.css → global.css → THIS → module CSS (spliced into <head> later).
   So a module rule of equal specificity still beats this file, which is what
   keeps a screen's own deliberate overrides (projects.css on a dialog list,
   tenant.css on a button row) in charge. Nothing here uses !important.

   ── two frames, one file ──────────────────────────────────────────────────
   The tenant frame declares its --t-* palette on html:has(tenantapp); the
   staff frame has none. Every colour below therefore reads a --t-* token with
   the same literal as its fallback, so both frames get the same values.
   ⚠️ Tenant-only overrides are written `:root:has(tenantapp)`, NOT
   `html:has(tenantapp)`. The latter is specificity (0,0,2) and LOSES to a
   `:root` (0,1,0) block declaring the same property on the same element —
   which is exactly why tenant.css's own `--nux-radius: 6px` re-seed has never
   taken effect, and why the account page's fields are square.

   ── body-level overlays ───────────────────────────────────────────────────
   nux appends dialogs (<nux-modals>), toasts (<nux-toasts>) and tooltips to
   <body>, OUTSIDE <tenantapp>. Every selector here is a bare nux tag for that
   reason: a `tenantapp …` scope would miss every dialog.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--sk-ink:     var(--t-ink, #0b0d0c);
	--sk-panel:   var(--t-panel, #141815);
	--sk-panel-2: var(--t-panel-2, #1a201c);
	--sk-panel-3: var(--t-panel-3, #222923);
	--sk-line:    var(--t-line, #232925);
	--sk-line-2:  var(--t-line-2, #333b35);
	--sk-line-3:  var(--t-line-3, #47514a);
	--sk-text:    var(--t-text, #efece6);
	--sk-text-2:  var(--t-text-2, #c6cac4);
	--sk-muted:   var(--t-muted, #9ba29c);
	--sk-dim:     var(--t-dim, #767e78);
	--sk-orange:  var(--t-orange, #f37021);
	--sk-sans:    var(--t-sans, var(--af-sans));
	--sk-mono:    var(--t-mono, var(--af-mono));
	/* two radii, as tenant.css has: one for surfaces, one for controls */
	--sk-r:       var(--t-r, 10px);
	--sk-r-sm:    var(--t-r-sm, 6px);
	/* a hover that lightens whatever it lands on — panel or dialog alike */
	--sk-wash:    rgba(255, 255, 255, .035);
}

/* The tenant frame's text face. Linux draws Roboto either way; on a Mac the
   frame's own stack (-apple-system before Roboto) and nux's (Roboto first)
   picked two different faces for one screen. */
:root:has(tenantapp) {
	--nux-font: var(--t-sans);
}


/* ═══ dialogs — a tcard that floats ════════════════════════════════════════
   Head, body and a foot strip of buttons, exactly the card's three parts. The
   modal's own padding and gap go; each part pads itself, so the foot can run
   edge to edge and the title sits where a card's does. */
nux-modals > nux-modal {
	gap: 0;
	padding: 0;
	border: 1px solid var(--sk-line-2);
	border-radius: var(--sk-r);
	background-color: var(--sk-panel);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
nux-modals > nux-modal[error] {
	border-color: rgba(var(--nux-danger-deep-color), .45);
}
nux-modcaption {
	min-height: 0;
	padding: 20px 64px 0 24px;
	border-bottom: 0;
	color: var(--sk-text);
	font: 600 17px/1.3 var(--sk-sans);
	letter-spacing: -.01em;
}
/* the danger card's title, as tenant.css colours the close-account card */
nux-modals > nux-modal[error] nux-modcaption {
	color: rgb(var(--nux-danger-deep-color));
}
nux-modbody {
	padding: 16px 24px 20px;
	font-size: 15px;
	line-height: 1.55;
}
nux-modbody > p {
	color: var(--sk-text-2);
}
/* ⚠️ THE FOOT STRIP. nux-buttons is a flex row that already right-aligns and
   honours {type:'spacer'}; only its surface changes. */
nux-modal > nux-buttons {
	min-height: 58px;
	margin-top: 0;
	padding: 10px 24px;
	align-items: center;
	border-top: 1px solid var(--sk-line);
	background-color: var(--sk-panel-2);
}
/* a quiet square ×, not a toned ring — the card has no accent at rest */
nux-modclose {
	top: 15px;
	right: 16px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: var(--sk-r-sm);
	background-color: transparent;
	opacity: 1;
}
nux-modclose::before,
nux-modclose::after {
	width: 13px;
	height: 1.5px;
	background-color: var(--sk-muted);
}
nux-modclose:hover,
nux-modclose:focus-visible {
	border: 0;
	background-color: var(--sk-panel-3);
}
nux-modclose:hover::before,
nux-modclose:hover::after,
nux-modclose:focus-visible::before,
nux-modclose:focus-visible::after {
	background-color: var(--sk-text);
}


/* ═══ lists — a ttable ════════════════════════════════════════════════════
   The account tables: an uppercase mono head on a hairline, rows ruled by
   hairlines, and nothing filled — the list wears whatever it sits on. */
nux-list {
	background-color: transparent;
}
nux-listheader {
	border-bottom: 1px solid var(--sk-line-2);
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}
nux-listhead,
nux-listselecthead,
nux-listiconhead {
	color: var(--sk-dim);
	font: 600 11px/1.3 var(--sk-mono);
	letter-spacing: .1em;
}
/* no column rules — the gaps and the alignment are the columns */
nux-listhead + nux-listhead,
nux-listcell + nux-listcell {
	border-left: 0;
}
nux-listhead[nux-sortable]:hover {
	background-color: transparent;
	color: var(--sk-text-2);
}
/* the resize grip keeps its hit area and shows its line only on the header */
nux-listresize::after {
	background-color: transparent;
}
nux-listheader:hover nux-listresize::after {
	background-color: var(--sk-line-2);
}
nux-listrow,
nux-listrow[nux-even] {
	border-bottom: 1px solid var(--sk-line);
	background-color: transparent;
}
nux-listrow:hover {
	background-color: var(--sk-wash);
	box-shadow: none;
}
nux-listcell,
nux-listrowicon,
nux-listselect {
	color: var(--sk-text-2);
	font-size: 14px;
}
/* ⚠️ nux resets EVERY descendant of a list to 1rem (`nux-list *`), so a
   cell's own text came out 14px and a <span> beside it 16px — one row, two
   sizes. `:where()` keeps this at that reset's weight, so it wins the reset
   and nothing else: a module rule naming its own element still sets its size.
   nux's small prefix/suffix and an in-cell button keep theirs. */
nux-listcell :where(:not(nux-prefix, nux-suffix, nux-button, nux-button *)),
nux-listcell > .nux-listedit {
	font-size: 14px;
}
nux-listviewport {
	scrollbar-color: var(--sk-line-3) transparent;
}
/* the foot: a hairline over a strip that is not filled */
nux-listfooter {
	border-top: 1px solid var(--sk-line);
	background-color: transparent;
}
nux-listsearch {
	border: 1px solid var(--sk-line-2);
	border-radius: var(--sk-r-sm);
	background-color: var(--sk-ink);
}
nux-listsearch > input {
	font-size: 14px;
}
nux-listsum {
	color: var(--sk-muted);
	font: 600 12px/1 var(--sk-mono);
}
nux-listselectmenu {
	border: 1px solid var(--sk-line-2);
	border-radius: 8px;
	background-color: var(--sk-panel-2);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
nux-listmenuitem {
	border-radius: var(--sk-r-sm);
	color: var(--sk-text-2);
	font-size: 14px;
	font-weight: 500;
}
nux-listmenuitem:hover,
nux-listmenuitem:focus-visible {
	background-color: var(--sk-wash);
}


/* ═══ dropdowns — a small card of rows ════════════════════════════════════
   The section nav's language: a neutral hover, and the chosen row lit with
   the panel step and a 2px orange edge (tsnav a[on]). */
nux-dropcont,
nux-elm[nux-drop-up] > nux-dropcont {
	border: 1px solid var(--sk-line-2);
	border-radius: 8px;
	background-color: var(--sk-panel-2);
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5));
}
nux-dropsearch,
nux-elm[nux-drop-up] nux-dropsearch {
	border-color: var(--sk-line);
	background-color: transparent;
	color: var(--sk-text-2);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
}
nux-dropsearch::before {
	background-color: var(--sk-muted);
}
nux-ditem {
	border-radius: var(--sk-r-sm);
	color: var(--sk-text-2);
	font-size: 15px;
}
nux-ditem:hover,
nux-ditem[nux-cursor] {
	background-color: var(--sk-wash);
	color: var(--sk-text);
}
nux-ditem[nux-selected] {
	background-color: var(--sk-panel-3);
	color: var(--sk-text);
	box-shadow: inset 2px 0 0 var(--sk-orange);
}
nux-ditem[nux-selected]:hover,
nux-ditem[nux-selected][nux-cursor] {
	background-color: #29312b;
}


/* ═══ tabs — the section strip ════════════════════════════════════════════
   No raised tab faces: words on a hairline, the chosen one in full text with
   an orange rule under it — the account nav as it folds on a narrow screen. */
nux-tabs {
	background-color: transparent;
}
nux-tablist {
	gap: 4px;
	padding: 0;
	border-bottom: 1px solid var(--sk-line);
	border-radius: 0;
	background-color: transparent;
}
nux-tab {
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--sk-muted);
	font: 500 15px/1 var(--sk-sans);
	letter-spacing: 0;
}
nux-tab::before {
	left: 14px;
	right: 14px;
	border-radius: 0;
	background-color: var(--sk-orange);
}
nux-tab:hover:not([disabled], [nux-selected]) {
	border: 0;
	background-color: transparent;
	color: var(--sk-text);
}
nux-tab[nux-selected] {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--sk-text);
	font-weight: 600;
}
nux-tabcount,
nux-tab[nux-selected] nux-tabcount {
	height: 18px;
	padding: 0 7px;
	border: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .06);
	color: var(--sk-muted);
	font: 600 11px/1 var(--sk-mono);
}
nux-tabpanel {
	background-color: transparent;
}


/* ═══ blocks — a tcard ════════════════════════════════════════════════════
   The staff screens are built of ƒ.block panels; this is the card the
   account area is built of. The caption becomes the card's plain title. */
nux-block {
	padding: 18px 24px 20px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-r);
	background-color: var(--sk-panel);
	background-image: none;
	filter: none;
}
nux-block[caption]::before {
	padding-bottom: 14px;
	color: var(--sk-text);
	font: 600 17px/1.3 var(--sk-sans);
	letter-spacing: -.01em;
	text-transform: none;
}
nux-minimizer {
	top: 18px;
	right: 20px;
}
/* a block in a block is the plan card inside the plans card */
nux-block nux-block,
nux-block nux-block nux-block,
nux-block nux-block nux-block nux-block {
	padding: 14px 16px 16px;
	border-color: var(--sk-line-2);
	border-radius: var(--sk-r-sm);
	background-color: var(--sk-panel-2);
}
nux-block nux-block[caption]::before {
	font-size: 15px;
}
nux-block[nux-group] {
	border-style: solid;
	border-color: var(--sk-line-2);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .02);
}
nux-block[nux-group][caption]::before {
	background-color: var(--sk-panel-3);
	color: var(--sk-muted);
	font: 600 11px/1 var(--sk-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}


/* ═══ switches — the Monthly | Yearly control's colours ═════════════════════
   ⚠️ nux's own GEOMETRY is kept: a padded well around the group (tseg's
   shape) stood 4px taller than the button beside it in a list foot. Only the
   faces change — an ink well, the chosen one lifted to the panel step. */
nux-switch {
	border-color: var(--sk-line-2);
	border-radius: var(--sk-r-sm);
	background-color: var(--sk-ink);
	color: var(--sk-muted);
}
nux-switch:hover {
	background-color: var(--sk-panel-2);
	color: var(--sk-text);
}
nux-switch[nux-selected] {
	background-color: var(--sk-panel-3);
	color: var(--sk-text);
}


/* ═══ toasts — a banner that arrives ══════════════════════════════════════
   tbanner's surface; the tone keeps its edge, as the lit order row does. */
nux-toast {
	border: 1px solid var(--sk-line-2);
	border-radius: var(--sk-r);
	background-color: var(--sk-panel-2);
	background-image: none;
	box-shadow:
		inset 3px 0 0 rgb(var(--nux-toast-tone)),
		0 16px 40px rgba(0, 0, 0, .5);
}
nux-toastcaption {
	color: var(--sk-text);
	font: 600 15px/1.3 var(--sk-sans);
}
nux-toastbody {
	color: var(--sk-text-2);
	font-size: 14px;
	line-height: 1.5;
}
nux-toastclose::before,
nux-toastclose::after {
	background-color: var(--sk-muted);
}


/* ═══ tooltips ════════════════════════════════════════════════════════════ */
nux-tooltip {
	--nux-tooltip-bg: var(--sk-panel-3);
	--nux-tooltip-color: var(--sk-text);
	padding: 7px 10px;
	border-radius: var(--sk-r-sm);
	font-size: 13px;
	line-height: 1.45;
}


/* ═══ tags and the long add button ════════════════════════════════════════ */
nux-tag {
	border-color: var(--sk-line-2);
	background-color: var(--sk-panel-3);
	color: var(--sk-text-2);
}
nux-tag:hover,
nux-tag[nux-cursor] {
	border-color: var(--sk-line-3);
	background-color: #29312b;
}
nux-longbutton {
	border: 1px dashed var(--sk-line-3);
	border-radius: var(--sk-r-sm);
	color: var(--sk-muted);
}
nux-longbutton:hover {
	border-color: rgba(var(--nux-accent-color), .55);
	color: var(--sk-text);
}