/* Valmier rebrand (2026-10-24, owner: "dark great rebrand", logo "Folded V").
   Monochrome: black and white do the work, colour only means status (green ok, red error, orange warning).
   No gradients, glows or coloured shadows. Loaded LAST, after ios.css, and overrides its v2–v4 layers
   (crimson actions, Vormir balance card, amber money). Selectors repeat ios.css's own so order decides, not !important.
   The theme follows the phone (prefers-color-scheme, see base.html) unless the user picked one in the top bar. */

/* ================================================================ tokens */
html[data-theme] {
  --bg: #0A0A0B; --bg-2: #161618; --bg-3: #1F1F22; --bg-4: #2B2B2F;
  --fill: rgb(242 242 239 / .08); --fill-2: rgb(242 242 239 / .13); --fill-3: rgb(242 242 239 / .05);
  --sep: rgb(242 242 239 / .10);
  --label: #F2F2EF; --label-2: rgb(242 242 239 / .64); --label-3: rgb(242 242 239 / .40);
  --tint: #F2F2EF; --tint-2: #D6D6D2; --on-tint: #0A0A0B; --money: var(--label);
  --green: #3DBE7A; --red: #F0574D; --orange: #F0A23A; --purple: #A78BFA; --blue: #6AA8FF;
  --ok-bg: rgb(61 190 122 / .14); --bad-bg: rgb(240 87 77 / .14); --warn-bg: rgb(240 162 58 / .14); --vio-bg: rgb(167 139 250 / .14);
  --crimson-btn: var(--tint); --primary-bg: var(--tint); --primary-fg: var(--on-tint);
  --sky: var(--tint); --sky-soft: var(--fill); --accent-ink: var(--label);
  --hero-bg: #161618; --hero-line: rgb(242 242 239 / .12);
  --lg-shadow: 0 6px 22px rgb(0 0 0 / .5);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #F5F5F4; --bg-2: #FFFFFF; --bg-3: #EFEFED; --bg-4: #E3E3E0;
  --fill: rgb(10 10 11 / .05); --fill-2: rgb(10 10 11 / .09); --fill-3: rgb(10 10 11 / .03);
  --sep: rgb(10 10 11 / .10);
  --label: #0A0A0B; --label-2: rgb(10 10 11 / .62); --label-3: rgb(10 10 11 / .40);
  --tint: #0A0A0B; --tint-2: #2B2B2F; --on-tint: #FFFFFF;
  --green: #1F8A55; --red: #D23B30; --orange: #B86A0C; --purple: #6D4FD1; --blue: #2563EB;
  --ok-bg: rgb(31 138 85 / .10); --bad-bg: rgb(210 59 48 / .09); --warn-bg: rgb(184 106 12 / .10); --vio-bg: rgb(109 79 209 / .09);
  --crimson-btn: var(--tint); --primary-bg: var(--tint); --primary-fg: var(--on-tint);
  --hero-bg: #0A0A0B; --hero-line: transparent;
  --lg-shadow: 0 4px 16px rgb(0 0 0 / .08);
  color-scheme: light;
}

/* ================================================================ flat ground */
html[data-theme] body, html[data-theme="light"] body { background: var(--bg); }
html[data-theme] ::selection { background: rgb(127 127 127 / .3); }
html[data-theme] .login::before, html[data-theme] .login::after { display: none; }
html[data-theme] .brand img, html[data-theme] .login-brand img { box-shadow: none; }

/* ================================================================ primary actions: ink slab, text in the opposite */
html[data-theme] .btn, html[data-theme="light"] .btn,
html[data-theme] .btn.soul, html[data-theme] .btn.soul:hover, html[data-theme] .btn.soul:active {
  background: var(--tint); color: var(--on-tint); box-shadow: none;
}
html[data-theme] .btn:hover { background: var(--tint-2); color: var(--on-tint); box-shadow: none; opacity: 1; }
html[data-theme] .btn.loading::before, html[data-theme] .btn.soul.loading::before { border-color: var(--fill-2); border-top-color: var(--on-tint); }
html[data-theme] .btn.ghost, html[data-theme] .btn.ghost:hover { background: var(--fill-3); color: var(--label); box-shadow: inset 0 0 0 .5px var(--sep); }
html[data-theme] .btn.ghost:hover { background: var(--fill); }
html[data-theme] .btn.ghost .ico, html[data-theme] .card-head h2 .ico { color: var(--label-2); }

/* selected things: same ink slab */
html[data-theme] .side nav a.on, html[data-theme] .chip.on, html[data-theme] .tp-card .chip.on, html[data-theme] .pstrip a.on,
html[data-theme] .ptabs button.on, html[data-theme] .tag.crimson, html[data-theme] .node.src, html[data-theme="light"] .node.src {
  background: var(--tint); color: var(--on-tint); box-shadow: none;
}
html[data-theme] .side nav a.on .ico { color: var(--on-tint); }
html[data-theme] .option:has(input:checked) { background: var(--fill); box-shadow: inset 0 0 0 1.5px var(--tint); }
html[data-theme] .option:has(input:checked) .tick, html[data-theme] .steps-v li.now::before { background: var(--tint); color: var(--on-tint); }
html[data-theme] .wiz-n, html[data-theme] .card-head .wiz-n { background: var(--fill-2); color: var(--label); }
html[data-theme] .stat .s-ico, html[data-theme] .pmini .pi:not(.ok):not(.vio), html[data-theme] .prod-badge,
html[data-theme] .feed li.new .f-dot { background: var(--fill); color: var(--label); border: 0; }
html[data-theme] .avatar { background: var(--bg-4); color: var(--label); }
html[data-theme] .bar i { background: var(--tint); }
html[data-theme] .switch.on { box-shadow: none; }
html[data-theme] .thread.on { background: var(--fill); box-shadow: inset -2px 0 0 var(--tint); }
html[data-theme] .count, html[data-theme="light"] .count { background: var(--red); color: #fff; }
html[data-theme] .money, html[data-theme] .stat .v.money { color: var(--label); }

/* phone tab bar «+» */
@media (max-width: 900px) {
  html[data-theme] .tab-fab { background: var(--tint) !important; color: var(--on-tint); }
  html[data-theme] .tab-fab.on { background: var(--tint-2) !important; }
  html[data-theme] .tabbar a.on, html[data-theme] .tabbar a.on .ico { color: var(--label); }
  html[data-theme] .tabbar a.primary .ico { background: var(--tint); color: var(--on-tint); box-shadow: 0 0 0 4px var(--bg); }
}

/* connector map: grey wires, ink light */
html[data-theme] .node.src::before { border-color: var(--sep); }
html[data-theme] .net .wire { stroke: var(--sep); filter: none; }
html[data-theme] .net .draw { stroke: var(--label-3); }
html[data-theme] .net .flow { stroke: var(--label); filter: none; }

/* ================================================================ balance card: solid black slab in both themes */
html[data-theme] .hero, html[data-theme="light"] .hero {
  background: var(--hero-bg); box-shadow: inset 0 0 0 1px var(--hero-line); color: #fff;
}
html[data-theme] .hero .amount { color: #fff; -webkit-text-fill-color: #fff; }
html[data-theme] .hero .label b { color: #fff !important; }
html[data-theme] .hero .btn.light { background: #F2F2EF; color: #0A0A0B; }
html[data-theme] .hero .btn.ghost { background: rgb(255 255 255 / .12) !important; color: #fff; box-shadow: none; }
html[data-theme] .hero .btn.ghost .ico { color: #fff; }

/* ================================================================ links: label colour, underline on hover */
html[data-theme] a { color: var(--label); }
html[data-theme] a:not(.btn):not(.brand):hover { color: var(--label); opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme] .side nav a:hover, html[data-theme] .tabbar a:hover, html[data-theme] .pstrip a:hover,
html[data-theme] .doc-toc a:hover, html[data-theme] .topbar-logo:hover { text-decoration: none; }

/* ================================================================ layout polish (2026-10-24, owner: "looks like I put whatever
   was needed wherever"). One spacing rhythm, readable line lengths, aligned forms, no decoration that means nothing. */

/* one 16px rhythm between stacked blocks; grids own their gap, the cards inside them don't add more */
html[data-theme] .card { margin-bottom: 16px; }
html[data-theme] .cols, html[data-theme] .cols-2-1 { gap: 16px; margin-bottom: 16px; }
html[data-theme] .cols > .card, html[data-theme] .cols-2-1 > .card,
html[data-theme] .cols > * > :last-child, html[data-theme] .cols-2-1 > * > :last-child { margin-bottom: 0; }
html[data-theme] .cols-2-1 > .card { align-self: stretch; }               /* side-by-side cards end on one line */
html[data-theme] .cols-2-1 > .hero { margin: 0 !important; align-self: start; }

/* text: no line wider than a comfortable read */
html[data-theme] .card-body > p, html[data-theme] .card-body > ul, html[data-theme] .card-body > ol,
html[data-theme] .card-body .hint, html[data-theme] .note p { max-width: 72ch; }
html[data-theme] .card-body ul, html[data-theme] .card-body ol { padding-inline-start: 18px; }
html[data-theme] .card-body li + li { margin-top: 4px; }

/* forms: fields in a row line up at the top, whatever hint sits under one of them */
html[data-theme] .row:has(> .field) { align-items: flex-start; }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus {
  box-shadow: inset 0 0 0 1px var(--label-2); outline: none;
}

/* highlighted cards: a firmer hairline instead of an amber wash */
html[data-theme] .card.hl, html[data-theme="light"] .card.hl {
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--label-3); border-color: transparent;
}
html[data-theme] .card.danger, html[data-theme="light"] .card.danger {
  background: var(--bg-2); box-shadow: inset 0 0 0 1px rgb(240 87 77 / .45); border-color: transparent;
}

/* tags: amber/violet were decoration; they read as neutral now (green/red still mean ok/problem) */
html[data-theme] .tag.amber, html[data-theme] .tag.violet, html[data-theme] .tag.gray {
  color: var(--label-2); background: var(--fill-3); border-color: var(--sep); box-shadow: inset 0 0 0 .5px var(--sep);
}
html[data-theme] .tag.dot::before { box-shadow: none; }
html[data-theme] .pmini .pi, html[data-theme] .pmini .pi.ok, html[data-theme] .pmini .pi.vio { background: var(--fill); color: var(--label); }

/* section headings inside cards: quiet, one size */
html[data-theme] .card-head { min-height: 54px; }
html[data-theme] .card-head h2 { gap: 10px; }
html[data-theme] .card-body h3, html[data-theme] .set-group h3 { font: 600 14px/1.5 var(--text); color: var(--label); margin: 0 0 10px; }

/* phone: in table cards, location and time sit side by side, the usage bar goes last */
@media (max-width: 900px) {
  html[data-theme] table.rtable td:has(.usage) { order: 9; }
  html[data-theme] table.rtable td.actions { order: 10; }
  html[data-theme] .hero-facts > div { min-width: 0; }
}

/* stat tiles: one quiet icon style; five tiles fit one row on a laptop, an odd last tile spans the row on phones */
html[data-theme] .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
html[data-theme] .stat .s-ico, html[data-theme] .stat .s-ico.ok, html[data-theme] .stat .s-ico.warn, html[data-theme] .stat .s-ico.vio {
  background: var(--fill); color: var(--label); border: 0;
}
html[data-theme] .cols-2-1 > div > .hero { margin-bottom: 16px; }
@media (max-width: 900px) {
  html[data-theme] .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  html[data-theme] .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* wallet: once the columns stack, the balance, then buying, then the long history */
@media (max-width: 1100px) {
  html[data-theme] .wallet-grid { display: flex; flex-direction: column; gap: 0; }
  html[data-theme] .wallet-main { display: contents; }
  html[data-theme] .wallet-grid > *, html[data-theme] .wallet-main > * { align-self: stretch; width: auto; min-width: 0; }
  html[data-theme] .wallet-main > .hero { order: 0; }
  html[data-theme] .wallet-grid > :not(.wallet-main) { order: 1; margin-bottom: 16px; }
  html[data-theme] .wallet-main > .card { order: 2; }
}

/* pages that are a pile of independent cards (settings, admin tools): two packed columns instead of ragged grid rows */
@media (min-width: 1101px) {
  html[data-theme] .cols:has(> .card:nth-child(4)) { display: block; columns: 2; column-gap: 16px; }
  html[data-theme] .cols:has(> .card:nth-child(4)) > * { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; }
}

/* ================================================================ depth and life (2026-10-25, owner: "it feels dry").
   Still black and white. Glass only on floating chrome; cards get a lit top edge and a soft drop; the balance card
   carries the brand's moving line; a few small signs of life. Everything stops for prefers-reduced-motion. */

/* ground: a faint dot grid at the top of every page, fading out */
html[data-theme] body, html[data-theme="light"] body {
  background:
    linear-gradient(180deg, transparent 0, var(--bg) 460px),
    radial-gradient(rgb(var(--grid-rgb) / .07) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--bg);
}
html[data-theme] { --grid-rgb: 242 242 239; --edge: rgb(255 255 255 / .07); --drop: 0 12px 32px -20px rgb(0 0 0 / .8); }
html[data-theme="light"] { --grid-rgb: 10 10 11; --edge: rgb(255 255 255 / 1); --drop: 0 10px 28px -18px rgb(0 0 0 / .2); }

/* floating chrome = glass */
html[data-theme] .topbar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 -.5px 0 var(--sep);
}

/* cards: lit top edge + soft drop, so they sit above the page */
html[data-theme] :is(.card, .stat, .tile):not(.hl):not(.danger) {
  box-shadow: inset 0 1px 0 var(--edge), 0 0 0 .5px var(--sep), var(--drop);
}
html[data-theme] .side { box-shadow: inset 1px 0 0 var(--edge); }
html[data-theme] .me, html[data-theme] .side nav a.on { box-shadow: inset 0 1px 0 var(--edge); }

/* the balance card: dot grid + a line of light running along its divider */
html[data-theme] .hero, html[data-theme="light"] .hero {
  position: relative; overflow: hidden;
  background-color: var(--hero-bg);
  background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.3px);
  background-size: 18px 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px var(--hero-line), 0 24px 48px -28px rgb(0 0 0 / .9);
}
html[data-theme] .hero-facts { position: relative; }
html[data-theme] .hero-facts::before {
  content: ""; position: absolute; inset: -1px 0 auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .95), transparent) no-repeat;
  background-size: 34% 100%; animation: v-beam 3.4s cubic-bezier(.55, 0, .35, 1) infinite;
}
@keyframes v-beam { from { background-position: -45% 0; } to { background-position: 145% 0; } }

/* signs of life */
html[data-theme] :not(td) > .tag.dot.green::before { animation: v-pulse 2.6s ease-out infinite; }
@keyframes v-pulse { 0% { box-shadow: 0 0 0 0 rgb(61 190 122 / .55); } 70%, 100% { box-shadow: 0 0 0 6px rgb(61 190 122 / 0); } }
html[data-theme] :is(a.card, .pmini a, .tile, .option, .chip):active { transform: scale(.985); }
html[data-theme] :is(a.card, .pmini a, .tile, .option, .chip) { transition: transform .15s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .2s; }
html[data-theme] .hero .amount.counting { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .hero-facts::before, html[data-theme] .tag.dot.green::before { animation: none; }
}
html[data-theme] .hero .btn.ghost {
  background: rgb(255 255 255 / .1) !important; color: #fff;
  backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 .5px rgb(255 255 255 / .14);
}

/* signup: the brand line is the page h1 (SEO, 2026-10-25) — looks the same */
.login-h1{font:inherit;margin:0;line-height:1.3;color:inherit}
.login-more{margin:12px 0 0;text-align:center}