/* Mentra — "Orbit" look (22 Oct, Taison's concept boards). Loaded after style.css; it only restyles.
   Night-sky obsidian, one icy light source (the orb), elegant serif for the big moments, small tracked capitals for
   labels, glass panels with hairline light borders, glowing outlined pill buttons. Real data only — the concept's
   numbers are never invented here. Remove this file + its <link> to go back to the previous look. */
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ob-ink: #030509; --ob-ink-2: #070B12;
  --ob-ice: 168, 214, 255;                      /* the one light: icy blue-silver */
  --ob-silver: #C9D3DF; --ob-mute: #8B97A6; --ob-dim: #5E6A79;
  --ob-line: rgba(196, 222, 255, .13); --ob-line-hi: rgba(206, 230, 255, .32);
  --ob-glass: linear-gradient(180deg, rgba(20, 30, 44, .52), rgba(8, 12, 19, .62));
  --ob-serif: "Cormorant", "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --ob-r: 20px;
  --holo: var(--ob-ice);
  color-scheme: dark;
}
/* one accent everywhere, like the boards (amber/red keep their meaning) */
:root, body[data-mode], body[data-mode="team"], body[data-mode="arena"] {
  --accent-rgb: var(--ob-ice); --accent: rgb(var(--ob-ice)); --accent-ink: #04121F;
  --accent-soft: rgba(var(--ob-ice), .08); --bk: rgba(var(--ob-ice), .3); --ok: rgb(150, 232, 196);
}
html, body { background: var(--ob-ink); }
body {
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 64% 31%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.3px 1.3px at 29% 44%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 8% 71%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 53% 83%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(120% 60% at 50% -12%, rgba(52, 96, 150, .30), transparent 62%),
    radial-gradient(80% 50% at 50% 110%, rgba(30, 60, 100, .18), transparent 70%),
    var(--ob-ink) !important;
  background-attachment: fixed !important;
}
::selection { background: rgba(var(--ob-ice), .28); color: #fff; }

/* ── header: a thin, wide wordmark ── */
html body .top { background: linear-gradient(var(--ob-ink) 60%, rgba(3, 5, 9, 0)); }
html body .top::after { display: none; }
html body .brand { font: 300 15px/1 var(--read); letter-spacing: .52em; color: #E9F1FA; gap: 12px; }
html body .brand .dot { width: 18px; height: 18px; border: 0; box-shadow: none; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0 8%, rgba(var(--ob-ice), .9) 22%, rgba(var(--ob-ice), .15) 58%, transparent 70%); }
html body .clock { font: 300 13px var(--read); color: var(--ob-silver); letter-spacing: .08em; }
html body .demo-pill { border-radius: 999px; padding: 4px 9px; font: 500 10px/1 var(--read); letter-spacing: .18em; }

/* ── type: serif for the big moments, small tracked capitals for labels ── */
html body h1, html body .hh-greet, html body .ld-big, html body .promise-h, html body .pf-title {
  font-family: var(--ob-serif); font-weight: 400; font-stretch: normal; letter-spacing: -.005em; text-shadow: none; line-height: 1.04; }
html body h2 { font-stretch: normal !important; }
html body h1 { font-size: clamp(32px, 8.6vw, 44px); }
html body h2 { font: 400 26px/1.1 var(--ob-serif); letter-spacing: 0; }
html body .eyebrow, html body .label, html body .core-cap { font: 500 11px/1.3 var(--read) !important; letter-spacing: .22em !important;
  text-transform: uppercase; color: var(--ob-mute) !important; }
html body .eyebrow:first-letter { text-transform: uppercase; }
html body .label { margin: 0 0 12px; }
html body .muted, html body .meta { color: var(--ob-mute); }

/* ── glass panels with a hairline of light ── */
html body .card, html body details.add, html body .challenge, html body #tm-squad, html body #tm-events, html body #a-hist,
html body #a-scen, html body #j-entries, html body .card.mental, html body .next-row {
  background: var(--ob-glass) !important; border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -28px rgba(0, 0, 0, .95) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html body .card::before, html body .card::after { display: none !important; }
html body .card.mental { border-color: rgba(255, 182, 72, .28) !important; }

/* ── buttons: glowing outlined pills ── */
html body button.primary, html body a.primary {
  background: linear-gradient(180deg, rgba(var(--ob-ice), .10), rgba(var(--ob-ice), .02)) !important;
  color: #EEF6FF !important; border: 1px solid rgba(var(--ob-ice), .62) !important; border-radius: 999px !important;
  font: 500 13px/1 var(--read) !important; letter-spacing: .2em !important; text-transform: uppercase;
  box-shadow: 0 0 22px -4px rgba(var(--ob-ice), .55), inset 0 0 14px rgba(var(--ob-ice), .14), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  min-height: 50px; padding: 0 26px; transition: box-shadow .4s var(--ease), border-color .4s var(--ease), transform .2s var(--ease);
}
html body button.primary:hover, html body a.primary:hover { filter: none; border-color: rgba(var(--ob-ice), .9) !important;
  box-shadow: 0 0 34px -2px rgba(var(--ob-ice), .7), inset 0 0 18px rgba(var(--ob-ice), .2), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
html body button.primary:active { transform: scale(.98); }
html body button.ghost { border-radius: 999px; border: 1px solid var(--ob-line-hi); background: rgba(255, 255, 255, .02); color: var(--ob-silver); }
html body input, html body select, html body textarea { border-radius: 14px; border: 1px solid var(--ob-line); background: rgba(6, 10, 16, .6); }
html body input:focus, html body select:focus, html body textarea:focus { border-color: rgba(var(--ob-ice), .55); box-shadow: 0 0 0 3px rgba(var(--ob-ice), .12); outline: none; }
html body :focus-visible { outline: 2px solid rgba(var(--ob-ice), .8); outline-offset: 2px; }

/* ── dock: glass, thin icons, the active one lit ── */
html body .dock { background: linear-gradient(180deg, rgba(10, 15, 23, .72), rgba(4, 7, 11, .92)) !important;
  border-top: 1px solid var(--ob-line) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html body .dock button { color: var(--ob-dim); background: none !important; box-shadow: none !important; }
html body .dock button svg { stroke-width: 1.4; }
html body .dock button span { font: 400 11px var(--read); letter-spacing: .04em; }
html body .dock button[aria-current], html body .dock button.on, html body .dock button[aria-selected="true"] { color: #F2F8FF; }
html body .dock button[aria-current] svg, html body .dock button.on svg, html body .dock button[aria-selected="true"] svg { filter: drop-shadow(0 0 6px rgba(var(--ob-ice), .8)); }
html body .dock::before, html body .dock::after, html body .dock .dk-mark { opacity: .0; }

/* ── Home: the orb is the hero ── */
html body .home-hero { display: flex; flex-direction: column; align-items: stretch; }
html body .home-hero .hh-stage { order: 1; height: min(78vw, 340px); margin: 6px 0 0; }
html body .home-hero .hh-coach { inset: 0; }
html body .home-hero .hh-copy { order: 2; align-items: center; text-align: center; gap: 10px; margin-top: 4px; }
html body .home-hero .hh-copy #t-date { order: 3; }
html body .home-hero .hh-greet { font-size: clamp(38px, 10.6vw, 52px); }
html body .home-hero .hh-sub { color: var(--ob-mute); font: 400 16px/1.45 var(--read); max-width: 30ch; }
html body .home-hero .hh-stage { margin-bottom: 40px; }
html body .home-hero .hh-coach { position: absolute; inset: 0; }
html body .home-hero .hh-bubble { position: absolute; left: 0; right: 0; top: auto; bottom: -38px; transform: none; max-width: 34ch; margin: 0 auto;
  text-align: center; background: none; border: 0; box-shadow: none; padding: 0; font: italic 400 19px/1.3 var(--ob-serif); color: var(--ob-silver); z-index: 3; }
html body .home-hero .hh-bubble::before, html body .home-hero .hh-bubble::after { display: none; }
html body .hh-go { order: 4; margin: 18px auto 2px; display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  min-width: min(78vw, 300px); min-height: 62px !important; font-size: 14px !important; letter-spacing: .26em !important;
  box-shadow: 0 0 40px -6px rgba(var(--ob-ice), .75), 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 22px rgba(var(--ob-ice), .22), inset 0 1px 0 rgba(255, 255, 255, .3) !important; }
html body .home-hero .hh-copy #t-date { display: none; }
html body .hh-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
html body .home-hero .hh-panel { order: 3; margin-top: 26px; gap: 12px; background: none; border: 0; box-shadow: none; }
html body .home-hero .hh-panel button { background: var(--ob-glass); border: 1px solid var(--ob-line); border-radius: 18px; min-height: 84px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); padding: 16px; }
html body .home-hero .hh-panel button:hover { border-color: var(--ob-line-hi); background: var(--ob-glass); }
html body .home-hero .hh-panel svg { stroke: rgb(var(--ob-ice)); stroke-width: 1.3; filter: drop-shadow(0 0 5px rgba(var(--ob-ice), .5)); }
html body .home-hero .hh-panel b { font: 500 15px/1.2 var(--read); }
html body .home-hero .hh-talk { order: 5; margin-top: 0; }
html body .home-hero .hh-mic { background: rgba(6, 10, 16, .5); border: 1px solid var(--ob-line-hi); box-shadow: 0 0 24px -6px rgba(var(--ob-ice), .5); }

/* Coach header: the face, in a glass ring */
html body #v-coach .core-head .core-cap { letter-spacing: .22em !important; }
html body .core-host .coach-holo, html body .core-mini .coach-holo { box-shadow: 0 0 0 1px var(--ob-line-hi), 0 0 30px -6px rgba(var(--ob-ice), .45); }

/* numbers: light and clean, like the boards (tabular so columns line up) */
html body .stats b, html body .num, html body .ret .num, html body .gauge b, html body .rp-v, html body .ar-stat b, html body [class*="stat"] b, html body .tm-kpi b {
  font-family: var(--read); font-weight: 300; font-stretch: normal; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html body .dock .dock-ind { background: none !important; box-shadow: none !important; border: 0 !important; }
html body .dock .dock-ind::after { background: rgb(var(--ob-ice)) !important; box-shadow: 0 0 10px rgba(var(--ob-ice), .9) !important; }

@media (prefers-reduced-motion: reduce) { html body button.primary { transition: none; } }

/* larger screens: keep the boards' centred composition (the old two-column hero is switched off here) */
@media (min-width: 760px) {
  html body .home-hero { display: flex; min-height: 0; }
  html body .home-hero .hh-stage { height: 400px; margin: 0 0 44px; }
  html body .home-hero .hh-coach { inset: 0; }
  html body .home-hero .hh-bubble { left: 0; right: 0; width: auto; bottom: -40px; font-size: 20px; padding: 0; }
  html body .home-hero .hh-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 30px 0 0; align-self: stretch; }
  html body .home-hero .hh-talk { margin-top: 0; }
}

/* orbs only (22 Oct, 05:00): the Coach tab header and the landing show the orb, no portrait frame */
html body .core-host.is-orb { background: none; box-shadow: none; border-radius: 50%; }
html body #v-coach .core-head .core-host.is-orb { width: 120px; height: 120px; margin: 0; }
html body #v-coach.fresh .core-head .core-host.is-orb { width: 200px; height: 200px; }

/* talk button within reach (22 Oct): right under Let's go, before the four areas — visible without scrolling */
html body .home-hero .hh-talk { order: 3; padding: 10px 0 0; }
html body .home-hero .hh-panel { order: 4; }
@media (max-height: 760px) { html body .home-hero .hh-stage { height: min(52vw, 210px); margin-bottom: 30px; } html body .home-hero .hh-bubble { display: none; } html body .hh-go { margin-top: 10px; } }

/* last old-style bits (22 Oct): the locker and Arena kit titles in the serif; the second chart series in silver
   (it was violet — the boards have one blue light plus silver) */
:root { --violet: 214, 228, 245; }
html body .lk-brand b, html body .ar-tag b { font: 400 26px/1 var(--ob-serif); font-style: normal; text-transform: none; letter-spacing: .005em; }

/* ══ Computers (22 Oct, board 01): the dock becomes a left sidebar; Home is a dashboard — the orb hero on the left,
   today's real cards (focus, mission, check-in, coach) in a column on the right. Nothing new is invented. ══ */
@media (min-width: 1100px) {
  html body { padding-bottom: 0; }
  html body .dock { left: 0; right: auto; top: 0; bottom: 0; transform: none; width: 220px; max-width: none; min-width: 0; border-radius: 0;
    display: flex; flex-direction: column; gap: 4px; padding: 96px 14px 24px; z-index: 4;
    border-top: 0 !important; border-right: 1px solid var(--ob-line); box-shadow: none !important;
    background: linear-gradient(180deg, rgba(8, 13, 20, .92), rgba(3, 5, 9, .96)) !important; }
  html body .dock button { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 48px; padding: 0 16px;
    border-radius: 14px; width: 100%; }
  html body .dock button span { font: 400 15px var(--read); letter-spacing: .01em; }
  html body .dock button svg { width: 22px; height: 22px; }
  html body .dock button.on { background: linear-gradient(90deg, rgba(var(--ob-ice), .12), rgba(var(--ob-ice), .02)) !important;
    box-shadow: inset 0 0 0 1px var(--ob-line), inset -2px 0 0 rgb(var(--ob-ice)) !important; }
  html body .dock .dock-ind { display: none; }
  html body .top { padding-left: 32px; padding-right: 32px; z-index: 6; }
  html body main { max-width: none; margin: 0 0 0 220px; padding: 24px clamp(28px, 4vw, 64px) 48px; }
  html body main > .view { max-width: 820px; margin: 0 auto; width: 100%; }
  html body main > #v-today { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    column-gap: 48px; row-gap: 18px; align-items: start; }
  html body #v-today > * { grid-column: 2; min-width: 0; }
  html body #v-today > .home-hero { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 84px; }
  html body #v-today .home-hero .hh-stage { height: min(44vh, 460px); }
  html body #v-today .home-hero .hh-greet { font-size: clamp(48px, 4.2vw, 68px); }
  html body #v-today .home-hero .hh-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #v-today .home-hero .hh-panel button { min-height: 96px; grid-template-columns: 1fr; }
  html body #v-today .home-hero .hh-panel svg { grid-row: auto; margin-bottom: 6px; }
  /* the coach's message box sits in the content area, not under the sidebar */
  html body .composer { left: calc(220px + clamp(28px, 4vw, 64px)); right: clamp(28px, 4vw, 64px); bottom: 20px;
    max-width: 820px; margin-left: auto; margin-right: auto; }
  html body #v-locker .ml-confirm { left: calc(50% + 110px); }
}

/* Coach screen: the send button keeps its size; the sticky header uses the page's own ink (no lighter box) */
html body .composer > button.primary { flex: 0 0 auto; width: 52px; min-width: 52px; padding: 0; letter-spacing: 0 !important; }
html body .composer > input, html body .composer > textarea { flex: 1 1 auto; min-width: 0; }
html body #v-coach .core-head { background: rgba(3, 5, 9, .35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }