/* ENERTHON THEME, loaded after style.css.
   Brand palette from the Enerthon site (css/site.css): green #63A86D, ebony #353E40, base #0b1311, energy yellow
   #ECD116; Comfortaa headings, Inter text, JetBrains Mono data. The shared /hud/hud.css is JARVIS cyan; this file
   re-colours it for the hub without touching it, and styles the hub's own cards (holo.js). */
:root {
  --bg: #060c0a; --bg2: #10201a; --panel: rgba(12, 24, 20, .74);
  --line: rgba(99, 168, 109, .2); --line-strong: rgba(99, 168, 109, .45);
  --text: #f4f7f4; --muted: #8a9a91; --glow: #63A86D; --glow-soft: #c9ecd0;
  --amber: #ECD116; --green: #9fe3a9; --violet: #c9a3ff; --red: #e0705f;
  --font-hud: 'Comfortaa', 'Century Gothic', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
  --fx-rgb: 99, 168, 109; --fx-dot-rgb: 190, 235, 198;
  --globe-rgb: 99, 168, 109; --globe-lit-rgb: 46, 96, 66; --globe-dark-rgb: 9, 26, 19;
}
body[data-mode="listening"] { --glow: #8fe09b; --glow-soft: #e6fbe9; }
body[data-mode="followup"]  { --glow: #7fd0c4; --glow-soft: #dcf7f2; }
body[data-mode="thinking"]  { --glow: #ECD116; --glow-soft: #fbf3b0; }
body[data-mode="speaking"]  { --glow: #63A86D; --glow-soft: #d6f3db; }
body[data-mode="offline"]   { --glow: #e0705f; --glow-soft: #f6c9c1; }
body { font-size: 15px; }
.holo { background: linear-gradient(180deg, rgba(16, 32, 26, .8), rgba(7, 15, 12, .82));
  box-shadow: inset 0 0 30px rgba(99, 168, 109, .05), 0 0 24px rgba(0, 0, 0, .35); }
.holo-title, .nav button, .btn, .j-state { letter-spacing: .16em; }
.holo-title { font-weight: 600; }
input, textarea, select { background: rgba(6, 14, 11, .85); border-radius: 3px; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 1px var(--glow), 0 0 14px rgba(99, 168, 109, .3); }
select option { background: #10201a; }
code { background: rgba(99, 168, 109, .12); }
::-webkit-scrollbar-thumb { background: rgba(99, 168, 109, .3); }
.btn { background: rgba(20, 40, 32, .85); border-radius: 3px; font-weight: 600; }
.btn:hover { box-shadow: 0 0 12px rgba(99, 168, 109, .35); }
.btn.primary { background: var(--glow); border-color: var(--glow); color: #0c1a12; }
.btn.primary:hover { background: #7bbd85; }
.btn.on, .btn.icon.live { color: #0c1a12; }
.topbar { background: linear-gradient(180deg, rgba(8, 18, 14, .92), rgba(8, 18, 14, .55)); }
.brand-logo { height: 26px; display: block; }
.brand-sub { margin-top: 3px; letter-spacing: .22em; }
.gate-logo { width: 78%; margin: 0 auto 2px; display: block; }
.n-item:hover, .n-item.on { background: rgba(99, 168, 109, .12); }
.item, .chip, .task, .wx-day { background: rgba(8, 18, 14, .75); }
.toast { background: rgba(10, 22, 17, .97); }
.act .via.claude { color: var(--violet); }
.act .via.jarvis { color: #7fd0c4; }
.md .att { color: var(--muted); border-bottom: 1px dotted var(--muted); }
.props { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.props span { font-family: var(--font-mono); font-size: 11.5px; border: 1px solid var(--line); padding: 2px 7px; color: var(--muted); }
.props b { color: var(--glow-soft); font-weight: 500; }
.imp-out { color: var(--muted); font-size: 14px; min-height: 18px; }
.g-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 12px; vertical-align: -1px; }
.g-key i.ghost { background: none; border: 1.5px dashed var(--amber); }
.n-item .f { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--glow); margin-right: 6px; }

/* ------------------------------------------------------------------ shared cards, re-tinted */
.jc-card { --cg: var(--glow); max-height: 1200px; }
.jc-card.jc-location { --cg: var(--glow) !important; }
.jc-place { text-shadow: 0 0 12px rgba(99, 168, 109, .5); font-weight: 700; letter-spacing: .08em; text-transform: none; font-size: 20px; }
.jc-layer img.sat { filter: grayscale(1) sepia(1) hue-rotate(72deg) saturate(1.7) brightness(.8) contrast(1.25); }
.jc-layer img.lbl { filter: brightness(2.2) sepia(1) hue-rotate(70deg) saturate(2); }
.jc-map { background: #040a08; }
.jc-map .grid { background-image: linear-gradient(rgba(99, 168, 109, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 168, 109, .1) 1px, transparent 1px); }
.jc-map .tint { background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(4, 10, 8, .78) 100%); }
.gauge .track { stroke: rgba(99, 168, 109, .16); }
.wx-day .bar { background: rgba(99, 168, 109, .14); }
.jc-card .jc-sweep { background-image: linear-gradient(180deg, transparent 0, rgba(160, 235, 175, .16) 48%, rgba(235, 255, 238, .4) 50%, transparent 52%); }
.jc-foot { color: rgba(138, 154, 145, .85); align-items: center; }

/* ------------------------------------------------------------------ hub cards (holo.js) */
.hc-id { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 4px 14px 2px 20px; }
.hc-id > div { min-width: 0; }
.hc-id > div:not(.hc-badge):not(.hc-wx) { flex: 1; }
.hc-id .jc-place, .hc-id .jc-sub { padding-left: 0; padding-right: 0; }
.hc-badge { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; }
.hc-badge svg { position: absolute; inset: 0; overflow: visible; }
.hc-badge .b1 { fill: none; stroke: var(--cg); stroke-width: 1.5; stroke-dasharray: 40 9 6 9; transform-origin: 40px 40px; animation: spin 16s linear infinite; }
.hc-badge .b2 { fill: color-mix(in srgb, var(--cg) 16%, transparent); stroke: var(--cg); stroke-width: 2; }
.hc-badge span { position: relative; font-family: var(--font-hud); font-weight: 700; font-size: 19px; color: #fff; text-shadow: 0 0 12px var(--cg); }
.hc-brief { position: relative; z-index: 2; padding: 8px 16px 4px 20px; line-height: 1.5; min-height: 44px; }
.hc-k { position: relative; z-index: 2; padding: 10px 14px 4px 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--cg); }
.hc-points { position: relative; z-index: 2; margin: 0; padding: 0 16px 0 20px; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.hc-points li { padding-left: 14px; position: relative; line-height: 1.4; font-size: 14.5px; }
.hc-points li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--cg); transform: rotate(45deg); }
.hc-links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 4px 20px; }
.hc-link { background: rgba(8, 18, 14, .8); border: 1px solid var(--line-strong); color: var(--glow-soft); padding: 4px 9px; cursor: pointer;
  font-size: 13.5px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-link[data-f="people"], .hc-link[data-f="contacts"] { border-color: #7fd0c4; color: #c8f1ea; }
.hc-link[data-f="organisations"], .hc-link[data-f="clients"] { border-color: #f0a35e; color: #fbdcc0; }
.hc-link:hover { background: color-mix(in srgb, var(--cg) 22%, transparent); }
.hc-open { background: none; border: 1px solid var(--cg); color: var(--cg); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  padding: 4px 9px; cursor: pointer; }
.hc-open:hover { background: var(--cg); color: #0c1a12; }
.hc-rows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 5px; padding: 8px 14px 4px 20px; }
.hc-row { display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(8, 18, 14, .72); border: 1px solid var(--line);
  border-left: 2px solid var(--cg); padding: 6px 9px; color: var(--text); width: 100%; }
button.hc-row { cursor: pointer; }
button.hc-row:hover { border-color: var(--cg); background: color-mix(in srgb, var(--cg) 12%, rgba(8, 18, 14, .8)); }
.hc-row .n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; }
.hc-row .b { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.hc-row .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-row .t em { font-style: normal; font-weight: 400; }
.hc-row.static .t { white-space: normal; }
.hc-row .s { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-row .m { flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); text-align: right; min-width: 62px; }
.hc-row .m b { color: var(--glow-soft); font-size: 13px; }
.hc-row .m i { display: block; height: 3px; background: rgba(99, 168, 109, .16); margin-top: 3px; }
.hc-row .m u { display: block; height: 100%; width: 0; background: var(--cg); box-shadow: 0 0 6px var(--cg); transition: width 1s cubic-bezier(.2, .8, .2, 1) .6s; }
.pill { flex: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; padding: 2px 6px; border: 1px solid var(--line-strong); color: var(--muted); }
.pill.doing { border-color: var(--amber); color: var(--amber); }
.pill.via-claude { border-color: var(--violet); color: var(--violet); }
.pill.via-jarvis { border-color: #7fd0c4; color: #7fd0c4; }
.hc-none { color: var(--muted); padding: 4px 0; }
.hc-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px 14px 2px 20px; }
.hc-stats > div { border: 1px solid var(--line); background: rgba(8, 18, 14, .7); padding: 8px 4px 6px; text-align: center; }
.hc-stats .v { font-family: var(--font-hud); font-weight: 700; font-size: 22px; color: #fff; text-shadow: 0 0 14px var(--glow); }
.hc-stats .k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--muted); margin-top: 2px; }
.hc-wx { display: flex; align-items: center; gap: 8px; flex: none; }
.hc-wx .wi { width: 52px; height: 52px; }
.hc-wx b { display: block; font-family: var(--font-hud); font-size: 24px; color: #fff; }
.hc-wx span { font-size: 12px; color: var(--muted); text-transform: capitalize; }

/* ------------------------------------------------------------------ assistant layout on smaller screens */
@media (max-width: 1280px) {
  .v-jarvis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .j-side { grid-column: 1 / -1; flex-direction: row; max-height: 180px; }
  .j-side .panel { flex: 1; }
  .j-side .panel:last-child { max-height: none; }
  .j-reactor { width: min(38vh, 86%); }
}
@media (max-width: 900px) {
  .v-jarvis { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .j-side { flex-direction: column; max-height: none; grid-column: auto; }
  .j-cards .jc-stage { overflow: visible; }
  .hc-stats { grid-template-columns: repeat(3, 1fr); }
}

/* microphone status under the assistant's input */
.j-mic { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); flex-basis: 100%; text-align: center; }
.j-mic.on { color: var(--glow); }
.j-note { flex-basis: 100%; text-align: center; }
.hc-pic { width: 84px; height: 84px; object-fit: cover; flex: none; border: 1px solid var(--cg); box-shadow: 0 0 14px color-mix(in srgb, var(--cg) 40%, transparent); }
a.hc-open { text-decoration: none; }

/* ------------------------------------------------------------------ TV mode (body.tv): a display, nothing to type */
body.tv .nav, body.tv .who, body.tv #signout, body.tv .brand-sub, body.tv #mic, body.tv .j-toggles label,
body.tv #teach, body.tv .j-side, body.tv .j-hint, body.tv .j-note { display: none; }
body.tv .topbar { border-bottom: 0; background: none; padding: 14px 26px 0; }
body.tv .brand-logo { height: 34px; }
body.tv .me { margin-left: auto; }
body.tv .clock { font-size: 28px; font-family: var(--font-hud); font-weight: 700; }
body.tv #tv { opacity: .35; }
body.tv #tv:hover, body.tv #tv:focus-visible { opacity: 1; }
body.tv .v-jarvis { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 6px 26px 58px; gap: 26px; }
body.tv .j-reactor { width: min(64vh, 94%); max-width: none; }
body.tv .j-state { font-size: 14px; }
body.tv .j-caption { font-size: 23px; min-height: 96px; max-width: 760px; }
body.tv .j-cards { justify-content: center; }
body.tv .j-cards .jc-stage { max-height: 100%; }
.tv-strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 34px; padding: 12px 26px; white-space: nowrap;
  overflow: hidden; border-top: 1px solid var(--line); background: rgba(8, 18, 14, .92); font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .1em; color: var(--muted); }
.tv-strip span:first-child { color: var(--glow-soft); }
.tv-strip span + span::before { content: '◆'; color: var(--glow); margin-right: 34px; font-size: 9px; vertical-align: 2px; }
/* the question box stays in TV mode: a remote can select it, and a TV keyboard's voice typing then works as the microphone */
body.tv .j-input { width: min(560px, 90%); opacity: .75; }
body.tv .j-input:focus-within { opacity: 1; }
body.tv .j-input input { font-size: 18px; }