/* Glance "night sky glass" theme — starfield background, glass cards, amber accent.
   Loaded via theme.custom-css-file: /assets/glance-theme.css (glance.yml). */

:root {
  --border-radius: 16px;
  --accent: hsl(37, 91%, 55%);          /* #f5a623 */
  --accent-soft: hsla(37, 91%, 55%, .55);
  --teal: hsl(170, 60%, 52%);
  --glass-bg: rgba(30, 35, 46, .58);
  --glass-bg-inner: rgba(44, 50, 63, .42);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-border-strong: rgba(255, 255, 255, .14);
  --widget-gap: 26px;
}

html, body {
  background-color: #0c1018;
}
body {
  background: #0c1018 url('/assets/starfield.svg') center / cover fixed no-repeat;
  font-variant-numeric: tabular-nums;
}

/* ---------- header / nav ---------- */
.header-container .header {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding-inline: 18px;
}
.nav-item { letter-spacing: .08em; text-transform: uppercase; font-size: var(--font-size-h5); }
.nav-item.nav-item-current { border-bottom-color: var(--accent); }

/* ---------- glass cards ---------- */
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.widget-content:not(.widget-content-frameless) { padding: 18px 20px; }

/* nested cards (widgets inside a tab group) look like the reference's inner panels */
.widget-group-content .widget-content:not(.widget-content-frameless) {
  background: var(--glass-bg-inner);
  border-color: var(--glass-border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- titles: small, uppercase, letter-spaced, dotted underline ---------- */
.widget-header {
  font-size: var(--font-size-h5);
  letter-spacing: .14em;
  color: hsla(220, 15%, 82%, .85);
  margin-bottom: 1.1rem;
}
.widget-header h2 {
  padding-bottom: 3px;
  border-bottom: 1px dotted rgba(255, 255, 255, .22);
}
.widget-group-title {
  letter-spacing: .12em;
  font-size: var(--font-size-h5);
}
.widget-group-title-current {
  color: var(--color-text-highlight);
  border-bottom: 1px dotted var(--accent);
}
.widget-group-header { margin-bottom: 4px; }

/* headlines/links in amber like the reference */
.widget-type-rss .list a.color-primary-if-not-visited,
.widget-type-hacker-news a.color-primary-if-not-visited,
.color-primary-if-not-visited:not(:visited) { color: var(--accent); }
.list-horizontal-text, .list-horizontal-text > * { color: var(--color-text-subdue); }
.widget-type-rss li, .widget-type-hacker-news li { line-height: 1.5; }

.color-highlight { color: var(--color-text-highlight); }
hr, .margin-block-10 { border-color: rgba(255, 255, 255, .10); }

/* bookmarks & markets */
.widget-type-bookmarks a { color: var(--color-text-paragraph); }
.widget-type-bookmarks a:hover { color: var(--accent); }

/* ---------- weather (custom-api) ---------- */
.wx-now { display: flex; align-items: center; gap: 14px; }
.wx-icon-lg { font-size: 3.4rem; line-height: 1; filter: saturate(.85); }
.wx-temp { font-size: 3.4rem; color: var(--color-text-highlight); line-height: 1; letter-spacing: -.02em; }
.wx-desc { text-transform: uppercase; letter-spacing: .06em; font-size: var(--font-size-h6); color: var(--color-text-paragraph); line-height: 1.55; }
.wx-cond { color: var(--color-text-highlight); font-size: var(--font-size-h5); }
.wx-meta { margin-top: 10px; font-size: var(--font-size-h6); color: var(--color-text-subdue); letter-spacing: .04em; }
.wx-sep { height: 1px; background: rgba(255, 255, 255, .14); margin: 14px 0 12px; }
.wx-hours { display: flex; justify-content: space-between; text-align: center; }
.wx-hour { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--font-size-h6); }
.wx-hour .t { color: var(--color-text-subdue); }
.wx-hour .i { font-size: 1.7rem; line-height: 1.3; }
.wx-hour .v { color: var(--color-text-highlight); font-size: var(--font-size-h5); }
.wx-days { display: flex; flex-direction: column; gap: 6px; }
.wx-day {
  display: grid;
  grid-template-columns: 6.4ch 2.2rem 3.4ch 1fr 3.4ch 3.6ch;
  white-space: nowrap;
  align-items: center; gap: 7px;
  font-size: var(--font-size-h6);
}
.wx-day .d { color: var(--color-text-highlight); letter-spacing: .06em; }
.wx-day .i { font-size: 1.5rem; line-height: 1; text-align: center; }
.wx-day .lo { color: var(--color-text-base); text-align: right; }
.wx-day .hi { color: var(--color-text-highlight); }
.wx-day .p { color: hsl(200, 70%, 65%); font-size: 1rem; text-align: right; }
.wx-day.weekend .d { color: var(--accent); }
.wx-track { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.wx-bar {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, hsl(170, 60%, 52%), hsl(48, 95%, 58%));
}

/* ---------- sports (custom-api) ---------- */
.sp-section { font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-subdue); margin: 4px 0 8px; }
.sp-section + .sp-grid { margin-bottom: 14px; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-card {
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px;
  padding: 9px 10px 7px;
  background: rgba(255, 255, 255, .025);
  min-width: 0;
}
.sp-card.hl {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px hsla(37, 91%, 55%, .18), 0 0 18px hsla(37, 91%, 55%, .14);
}
.sp-card.live { border-color: hsla(37, 91%, 55%, .8); box-shadow: 0 0 0 1px hsla(37, 91%, 55%, .25), 0 0 20px hsla(37, 91%, 55%, .2); }
.sp-row { display: flex; align-items: center; gap: 7px; line-height: 1.9; min-width: 0; }
.sp-row img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.sp-row .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-paragraph); }
.sp-row .s { color: var(--color-text-highlight); text-align: right; white-space: nowrap; }
.sp-row.win .n, .sp-row.win .s { color: var(--accent); }
.sp-row .s.long { white-space: normal; font-size: 1rem; line-height: 1.25; max-width: 60%; }
.sp-foot {
  margin-top: 4px; text-align: center; font-size: 1rem; letter-spacing: .08em;
  color: var(--color-text-subdue); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.sp-foot::before, .sp-foot::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.sp-foot.live { color: var(--accent); }
.sp-foot.live::before { background: hsla(37,91%,55%,.4); }
.sp-sub { font-size: 1rem; color: var(--color-text-subdue); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-empty { color: var(--color-text-subdue); text-align: center; padding: 14px 0; font-size: var(--font-size-h6); letter-spacing: .06em; }

/* F1 */
.f1-race { color: var(--accent); font-size: var(--font-size-h5); }
.f1-circ { color: var(--color-text-subdue); font-size: var(--font-size-h6); margin-bottom: 8px; }
.f1-list { display: flex; flex-direction: column; gap: 3px; font-size: var(--font-size-h6); }
.f1-list .r { display: grid; grid-template-columns: 2.4ch 4ch 1fr auto; gap: 8px; }
.f1-list .r .pos { color: var(--color-text-subdue); }
.f1-list .r .code { color: var(--color-text-highlight); }
.f1-list .r .team { color: var(--color-text-base); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1-list .r .val { color: var(--color-text-highlight); text-align: right; }
.f1-list .r.next .code, .f1-list .r.next .val { color: var(--accent); }
.f1-list .r.done { opacity: .55; }

.sp-grid.one { grid-template-columns: 1fr; }
a.sp-card { display: block; color: inherit; }
a.sp-card:hover { border-color: hsla(37, 91%, 55%, .35); }

/* slightly wider side columns on desktop, like the reference */
@media (min-width: 1300px) {
  .page-column-small { width: 340px; }
}

/* ---------- connectivity (custom-api, conn-data) ---------- */
.cn-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cn-dot.cn-up { background: hsl(150, 65%, 50%); box-shadow: 0 0 10px hsla(150, 65%, 50%, .7); }
.cn-dot.cn-degraded { background: var(--accent); box-shadow: 0 0 10px hsla(37, 91%, 55%, .7); }
.cn-dot.cn-down { background: hsl(0, 80%, 60%); box-shadow: 0 0 10px hsla(0, 80%, 60%, .7); }
.cn-label { color: var(--color-text-highlight); letter-spacing: .08em; text-transform: uppercase; font-size: var(--font-size-h5); }
.cn-probe { margin-left: auto; font-size: 1rem; color: var(--color-text-subdue); }
.cn-ip { text-align: center; font-size: 2rem; color: hsl(210, 85%, 68%); margin: 10px 0 4px; letter-spacing: .02em; }
.cn-line { text-align: center; color: var(--color-text-paragraph); font-size: var(--font-size-h6); }
.cn-isp { font-style: italic; color: var(--color-text-base); }
.cn-updated { text-align: center; margin-top: 8px; font-size: 1rem; color: var(--color-text-subdue); letter-spacing: .04em; }
.cn-tiles { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 6px; }
.cn-chg { font-size: var(--font-size-h6); color: var(--color-text-subdue); }
.cn-chg.good { color: hsl(150, 60%, 55%); }
.cn-chg.bad { color: hsl(0, 75%, 65%); }
.cn-val { font-size: 2rem; color: var(--color-text-highlight); line-height: 1.3; }
.cn-val small { font-size: 1.1rem; color: var(--color-text-base); }
.cn-cap { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-subdue); }

.ng-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@container widget (max-width: 560px) { .ng-wrap { grid-template-columns: 1fr; } }
.ng-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; }
.ng-title { color: var(--color-text-highlight); letter-spacing: .1em; text-transform: uppercase; font-size: var(--font-size-h6); }
.ng-legend { font-size: 1rem; color: var(--color-text-subdue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 3px 0 6px; }
.ng-sw.down { background: hsl(170, 60%, 52%); }
.ng-sw.up, .ng-sw.lat { background: var(--accent); }
.ng-sw.off { background: hsl(0, 75%, 60%); height: 8px; width: 6px; }
.ng-body { display: flex; gap: 8px; }
.ng-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 1rem; color: var(--color-text-subdue); text-align: right; min-width: 3ch; }
.ng-svg { flex: 1; height: 110px; display: block; border-left: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.ng-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.ng-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ng-line.down { stroke: hsl(170, 60%, 52%); }
.ng-line.up, .ng-line.lat { stroke: var(--accent); }
.ng-area { fill: hsla(170, 60%, 52%, .12); stroke: none; }
.ng-off { fill: hsla(0, 75%, 60%, .35); }
.ng-x { display: flex; justify-content: space-between; font-size: 1rem; color: var(--color-text-subdue); margin: 4px 0 0 calc(3ch + 8px); }

/* =====================================================================
   v2 (2026-10-02): readable text in every scheme, texture, glass SHOW MORE
   Root cause of the dark-on-dark text: Glance's built-in "default-light" preset (theme picker) flips
   --scheme so all text colours become near-black, while these cards stay dark. The picker is now
   disabled in glance.yml AND the text palette below is pinned explicitly, so no preset can break it.
   ===================================================================== */
html:root, html:root[data-scheme], html:root[data-theme] {
  --scheme: ;
  --bgh: 222; --bgs: 22%; --bgl: 8%;
  --color-text-highlight: hsl(220, 30%, 96%);
  --color-text-paragraph: hsl(220, 24%, 87%);
  --color-text-base: hsl(220, 20%, 78%);
  --color-text-base-muted: hsl(220, 18%, 70%);
  --color-text-subdue: hsl(220, 18%, 63%);      /* ~5.6:1 on the card glass, was 3.0:1 */
  --color-primary: hsl(37, 91%, 55%);
  --color-positive: hsl(150, 60%, 55%);
  --color-negative: hsl(0, 75%, 66%);
  --color-background: hsl(222, 22%, 8%);
  --color-widget-background: rgba(30, 35, 46, .58);
  --color-widget-content-border: rgba(255, 255, 255, .09);
  --color-widget-background-highlight: rgba(255, 255, 255, .06);
  --color-separator: rgba(255, 255, 255, .10);
  --color-popover-background: hsl(222, 20%, 13%);
  --color-popover-border: rgba(255, 255, 255, .16);
  --color-progress-border: rgba(255, 255, 255, .18);
  --color-progress-value: hsl(220, 18%, 55%);
  --color-graph-gridlines: rgba(255, 255, 255, .08);
  color-scheme: dark;
}
html:root .flat-icon { filter: invert(1); }
.theme-picker { display: none !important; }   /* belt and braces; also disable-picker: true */

/* ---- texture: fine grain + vignette over the starfield (all background layers, never over text) ---- */
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat fixed,
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%) fixed,
    #0c1018 url('/assets/starfield.svg') center / cover fixed no-repeat;
}
.widget-content:not(.widget-content-frameless),
.widget-content-frame {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(0, 0, 0, .06));
  background-color: var(--glass-bg);
}
.widget-group-content .widget-content:not(.widget-content-frameless) {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 40%);
  background-color: var(--glass-bg-inner);
}

/* ---- SHOW MORE toggle: glass bar instead of solid fill ---- */
.expand-toggle-button {
  background: linear-gradient(180deg, rgba(24, 29, 40, .55), rgba(24, 29, 40, .92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--accent);
  border-top: 1px dotted rgba(255, 255, 255, .16);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-size: var(--font-size-h6);
  letter-spacing: .14em;
  padding-inline: 2px;
  transition: color .2s, background .2s;
}
.expand-toggle-button:hover { color: hsl(40, 100%, 70%); background: linear-gradient(180deg, rgba(40, 46, 60, .6), rgba(40, 46, 60, .95)); }
.cards-grid.collapsible-container + .expand-toggle-button { background: rgba(24, 29, 40, .7); border: 1px solid var(--glass-border); border-radius: 10px; }

/* secondary text that used near-black/very dim colours */
.color-subdue, .sp-foot, .sp-section, .sp-sub, .cn-updated, .cn-cap, .wx-meta, .wx-hour .t, .ng-x, .ng-y, .ng-legend,
.widget-group-title:not(.widget-group-title-current), .list-horizontal-text, .list-horizontal-text > * { color: var(--color-text-subdue); }
.sp-row .n { color: var(--color-text-paragraph); }
input, textarea, select { color: var(--color-text-highlight); background: rgba(255, 255, 255, .05); }

/* ---- eTraider open trades ---- */
.et-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: var(--font-size-h6); color: var(--color-text-subdue); }
.et-total { font-size: var(--font-size-h4); }
.et-rows { display: flex; flex-direction: column; gap: 6px; }
.et-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--glass-border-strong); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.et-sym { color: var(--color-text-highlight); }
.et-badge { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 6px; border: 1px solid; }
.et-badge.long { color: hsl(150, 60%, 58%); border-color: hsla(150, 60%, 55%, .45); }
.et-badge.short { color: hsl(0, 75%, 70%); border-color: hsla(0, 75%, 66%, .45); }
.et-pnl { text-align: right; white-space: nowrap; }
.et-sub { grid-column: 1 / -1; font-size: 1rem; color: var(--color-text-subdue); display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.et-pos { color: hsl(150, 60%, 58%); }
.et-neg { color: hsl(0, 75%, 68%); }
.et-more { text-align: center; font-size: 1rem; color: var(--color-text-subdue); margin-top: 6px; letter-spacing: .08em; }
.et-stale { color: var(--accent); font-size: 1rem; text-align: center; margin-bottom: 6px; }