/* ============================================================
   AUGUR — celestial omen observatory for ASX resources
   palette: obsidian night + oracle gold, semantic signal hues
   ============================================================ */
:root {
  --bg:#070710;
  --bg2:#0b0b16;
  --ink:#f1ecdd;            /* warm parchment text */
  --muted:#9a93a8;
  --faint:#67617a;
  --hair:rgba(240,236,221,.09);
  --hair-2:rgba(240,236,221,.05);
  --glass:rgba(255,255,255,.025);
  --glass-2:rgba(255,255,255,.04);

  --gold:#e6c171;          /* the augur's light — brand chrome */
  --gold-dim:#9c8444;

  --buy:#4fe0a6;           /* buy signal — emerald omen */
  --watch:#6aa8ff;         /* watch — azure */
  --raise:#d68bff;         /* raise radar — dilution violet */
  --avoid:#ff5d72;         /* avoid — crimson portent */

  --rug-low:#4fe0a6;
  --rug-medium:#e6b455;
  --rug-high:#ff5d72;

  --pos:#4fe0a6; --neg:#ff5d72; --neu:#8e89a0;
  --r:18px;
}

* { box-sizing:border-box; }
html,body { margin:0; }
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(1100px 620px at 50% -180px, rgba(230,193,113,.13), transparent 60%),
    radial-gradient(900px 700px at 88% 8%, rgba(106,168,255,.07), transparent 55%),
    radial-gradient(700px 600px at 6% 22%, rgba(214,139,255,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono { font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.serif { font-family:Fraunces,Georgia,serif; }

/* drifting starfield + film grain, fixed behind everything */
.sky { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { position:relative; z-index:2; max-width:1140px; margin:0 auto; padding:46px 26px 90px; }

/* ---------- header ---------- */
.top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  flex-wrap:wrap; margin-bottom:34px; }
.brand { display:flex; gap:16px; align-items:center; }
.mark { width:50px; height:50px; flex:none; overflow:visible; }
.mark .halo { fill:none; stroke:var(--gold); stroke-width:1; opacity:.28;
  stroke-dasharray:3 6; transform-origin:center; animation:spin 64s linear infinite; }
.mark .staff, .foot-mark .staff { fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round; }
.mark .star, .foot-mark .star { fill:var(--gold); }
.mark { filter:drop-shadow(0 0 10px rgba(230,193,113,.45)); }
@keyframes spin { to { transform:rotate(360deg); } }

h1 { font-family:Fraunces,serif; font-optical-sizing:auto; font-size:2.5rem; font-weight:600;
  letter-spacing:.26em; margin:0; line-height:1; text-indent:.26em;
  background:linear-gradient(180deg,#fff5e0,var(--gold) 70%,#b89542);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tagline { margin:9px 0 0; color:var(--muted); font-size:.86rem; max-width:54ch; line-height:1.5; }
.meta { color:var(--muted); font-size:.78rem; text-align:right; line-height:1.7;
  font-family:"JetBrains Mono",monospace; padding-top:6px; white-space:nowrap; }
.meta b { color:var(--gold); font-weight:600; }

/* ---------- the templum (omen chart) ---------- */
.templum { position:relative; border:1px solid var(--hair); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  padding:18px 20px 22px; margin-bottom:26px; overflow:hidden;
  box-shadow:0 30px 80px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); }
.templum-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-bottom:4px; position:relative; z-index:3; }
.eyebrow { font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.42em;
  color:var(--gold); opacity:.85; }
.templum-cap { font-size:.72rem; color:var(--faint); }
.chart-stage { position:relative; width:100%; }
.wheel { display:block; width:100%; height:auto; position:relative; z-index:2; }

/* wheel inner elements (SVG, styled via class) */
.ring { fill:none; stroke:var(--hair); stroke-width:1; }
.ring.major { stroke:rgba(230,193,113,.16); stroke-dasharray:2 5; }
.ring-lbl { fill:var(--faint); font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.1em; }
.spoke { stroke:var(--hair-2); stroke-width:1; }
.core { fill:url(#coreGlow); }
.core-ring { fill:none; stroke:var(--gold); stroke-width:1; opacity:.5; }

.orb { cursor:pointer; transition:opacity .25s ease; }
.orb .body { transition:r .18s ease; }
.orb .ring-o { fill:none; stroke-width:1.4; opacity:0; transition:opacity .18s ease; }
.orb .lead { stroke-width:1; opacity:0; transition:opacity .18s; }
.orb-lbl { fill:var(--ink); font-family:"JetBrains Mono",monospace; font-size:10px; font-weight:600;
  text-anchor:middle; pointer-events:none; opacity:.78; paint-order:stroke;
  stroke:rgba(7,7,16,.85); stroke-width:2.6px; }
.orb:hover .ring-o, .orb.lit .ring-o { opacity:.9; }
.orb:hover .lead, .orb.lit .lead { opacity:.5; }
.orb:hover + .orb-lbl { opacity:1 !important; }

.tip { position:absolute; z-index:6; pointer-events:none; transform:translate(-50%,-118%);
  background:rgba(12,12,22,.96); border:1px solid var(--hair); border-radius:11px;
  padding:9px 12px; min-width:148px; box-shadow:0 14px 40px -12px #000;
  backdrop-filter:blur(8px); }
.tip .t-code { font-family:Fraunces,serif; font-size:1.15rem; font-weight:600; line-height:1; }
.tip .t-co { color:var(--muted); font-size:.7rem; margin:2px 0 7px; max-width:22ch;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tip .t-row { display:flex; justify-content:space-between; gap:14px; font-size:.74rem; }
.tip .t-row span:first-child { color:var(--faint); }
.tip .t-rec { font-family:"JetBrains Mono",monospace; font-weight:600; }

.legend { display:flex; flex-wrap:wrap; gap:7px 16px; justify-content:center; margin-top:10px;
  position:relative; z-index:3; }
.legend .lg { display:flex; align-items:center; gap:7px; font-size:.72rem; color:var(--muted); }
.legend .lg b { width:9px; height:9px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.legend .sep { color:var(--faint); font-size:.68rem; margin-left:6px; }

/* ---------- readouts ---------- */
.readouts { display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--hair); border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  margin-bottom:30px; }
.ro { background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0));
  padding:18px 20px 16px; position:relative; }
.ro::before { content:""; position:absolute; top:0; left:20px; width:22px; height:2px;
  background:var(--gold); opacity:.8; border-radius:2px; }
.ro .v { font-family:"JetBrains Mono",monospace; font-size:2.05rem; font-weight:700; line-height:1;
  letter-spacing:-.02em; }
.ro .k { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.13em;
  margin-top:10px; }
.ro.accent .v { color:var(--gold); }

/* ---------- controls ---------- */
.controls { display:flex; justify-content:space-between; align-items:center; gap:18px 22px;
  flex-wrap:wrap; margin-bottom:22px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid var(--hair); background:var(--glass); color:var(--muted);
  padding:7px 14px; border-radius:999px; font-size:.8rem; font-weight:600; cursor:pointer;
  user-select:none; transition:.16s; display:inline-flex; align-items:center; gap:8px; }
.chip .ct { width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.55;
  box-shadow:0 0 7px currentColor; transition:.16s; }
.chip .cn { font-family:"JetBrains Mono",monospace; font-size:.72rem; opacity:.6; }
.chip:hover { border-color:var(--faint); color:var(--ink); }
.chip.off { opacity:.4; }
.chip.off .ct { box-shadow:none; }
.chip.buy.on   { color:var(--buy);   border-color:color-mix(in srgb,var(--buy) 55%,transparent);   background:color-mix(in srgb,var(--buy) 11%,transparent); }
.chip.watch.on { color:var(--watch); border-color:color-mix(in srgb,var(--watch) 55%,transparent); background:color-mix(in srgb,var(--watch) 11%,transparent); }
.chip.raise.on { color:var(--raise); border-color:color-mix(in srgb,var(--raise) 55%,transparent); background:color-mix(in srgb,var(--raise) 11%,transparent); }
.chip.avoid.on { color:var(--avoid); border-color:color-mix(in srgb,var(--avoid) 55%,transparent); background:color-mix(in srgb,var(--avoid) 11%,transparent); }

.ctrl-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.search { display:flex; align-items:center; gap:8px; background:var(--glass); border:1px solid var(--hair);
  border-radius:999px; padding:6px 14px; transition:.16s; }
.search:focus-within { border-color:var(--gold-dim); }
.search svg { width:14px; height:14px; fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; }
.search input { background:none; border:none; outline:none; color:var(--ink); font-size:.82rem;
  width:160px; font-family:inherit; }
.search input::placeholder { color:var(--faint); }
.minscore { color:var(--muted); font-size:.8rem; display:flex; align-items:center; gap:11px; white-space:nowrap; }
.minscore input[type=range] { -webkit-appearance:none; appearance:none; width:120px; height:3px;
  background:var(--hair); border-radius:3px; outline:none; }
.minscore input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--gold); cursor:pointer; box-shadow:0 0 9px rgba(230,193,113,.7); }
.minscore input[type=range]::-moz-range-thumb { width:14px; height:14px; border:none; border-radius:50%;
  background:var(--gold); cursor:pointer; box-shadow:0 0 9px rgba(230,193,113,.7); }
.minscore .mono { color:var(--gold); min-width:1.4em; text-align:right; }
.sort { display:flex; border:1px solid var(--hair); border-radius:999px; overflow:hidden; background:var(--glass); }
.sort button { background:none; border:none; color:var(--muted); font:inherit; font-size:.76rem;
  padding:6px 13px; cursor:pointer; transition:.15s; }
.sort button:hover { color:var(--ink); }
.sort button.on { background:rgba(230,193,113,.14); color:var(--gold); }

/* ---------- signal cards (readings) ---------- */
.signals { display:flex; flex-direction:column; gap:13px; }
.card { --c:var(--watch); position:relative; background:linear-gradient(180deg, var(--glass-2), rgba(255,255,255,.008));
  border:1px solid var(--hair); border-radius:var(--r); overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s; }
.signals.intro .card { opacity:0; transform:translateY(14px);
  animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c); opacity:.85; box-shadow:0 0 16px var(--c); }
.card:hover { border-color:color-mix(in srgb,var(--c) 40%,var(--hair));
  box-shadow:0 24px 60px -40px var(--c), 0 0 0 1px color-mix(in srgb,var(--c) 14%,transparent); }
.card[open] { border-color:color-mix(in srgb,var(--c) 45%,var(--hair)); }
.card.lit { border-color:var(--c); box-shadow:0 0 0 1px var(--c), 0 24px 60px -36px var(--c); }

.card > summary { list-style:none; cursor:pointer; padding:18px 22px 18px 24px;
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; }
.card > summary::-webkit-details-marker { display:none; }

/* score dial */
.dial { position:relative; width:74px; height:74px; flex:none; }
.dial svg { width:100%; height:100%; transform:rotate(-90deg); }
.dial .track { fill:none; stroke:var(--hair); stroke-width:5; }
.dial .arc { fill:none; stroke:var(--c); stroke-width:5; stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--c)); transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); }
.dial .num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; }
.dial .num b { font-family:"JetBrains Mono",monospace; font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--ink); }
.dial .num s { text-decoration:none; font-size:.5rem; letter-spacing:.18em; color:var(--faint);
  margin-top:3px; }

.idy { min-width:0; }
.idy .line1 { display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.idy .code { font-family:Fraunces,serif; font-size:1.5rem; font-weight:600; line-height:1; color:var(--c);
  letter-spacing:.01em; }
.idy .co { color:var(--muted); font-size:.82rem; }
.idy .head { color:var(--ink); font-size:.96rem; margin:7px 0 8px; font-weight:500; }
.idy .cat-meta { display:flex; gap:8px 12px; flex-wrap:wrap; font-size:.72rem; color:var(--faint);
  font-family:"JetBrains Mono",monospace; letter-spacing:.02em; align-items:center; }
.idy .cat-meta .dir { font-weight:700; }
.idy .cat-meta .dir.pos { color:var(--pos); } .idy .cat-meta .dir.neg { color:var(--neg); }
.idy .cat-meta .dir.neu { color:var(--neu); }
.matdots { letter-spacing:1px; }

.status { display:flex; flex-direction:column; align-items:flex-end; gap:9px; text-align:right; min-width:118px; }
.seal { font-family:"JetBrains Mono",monospace; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; padding:5px 11px; border-radius:7px; color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent); background:color-mix(in srgb,var(--c) 12%,transparent); }
.rug { font-size:.74rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
.rug .d { width:8px; height:8px; border-radius:50%; box-shadow:0 0 7px currentColor; }
.conf { display:flex; align-items:center; gap:7px; font-size:.72rem; color:var(--faint);
  font-family:"JetBrains Mono",monospace; }
.conf .meter { width:54px; height:4px; border-radius:3px; background:var(--hair); overflow:hidden; }
.conf .meter i { display:block; height:100%; background:var(--c); border-radius:3px; }

/* detail */
.detail { border-top:1px solid var(--hair); padding:22px 24px 24px;
  display:grid; grid-template-columns:1fr 320px; gap:30px; }
.detail h4 { margin:0 0 9px; font-size:.66rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--gold); opacity:.85; font-family:"JetBrains Mono",monospace; }
.blk { margin-bottom:20px; }
.blk:last-child { margin-bottom:0; }
.detail p { margin:0; color:#ddd6e6; font-size:.92rem; }
.rationale { font-family:Fraunces,serif; font-style:italic; font-size:1.04rem; line-height:1.6;
  color:#e8e2d4; border-left:2px solid color-mix(in srgb,var(--c) 50%,transparent); padding-left:16px; }
.facts { list-style:none; margin:0; padding:0; columns:1; }
.facts li { padding:5px 0 5px 20px; position:relative; font-size:.875rem; color:#cdc7d8; line-height:1.5; }
.facts li::before { content:""; position:absolute; left:3px; top:.72em; width:5px; height:5px;
  border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c); }
.src { display:inline-flex; align-items:center; gap:7px; margin-top:4px; color:var(--gold);
  text-decoration:none; font-size:.82rem; font-weight:600; font-family:"JetBrains Mono",monospace; }
.src:hover { text-shadow:0 0 12px rgba(230,193,113,.6); }
.src::after { content:"↗"; }
.stamp { color:var(--faint); font-size:.68rem; margin-top:14px; font-family:"JetBrains Mono",monospace; }

.risk { background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006));
  border:1px solid var(--hair); border-radius:13px; padding:16px; }
.risk .row { display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:.82rem;
  border-bottom:1px solid var(--hair-2); align-items:baseline; }
.risk .row:last-of-type { border-bottom:none; }
.risk .row .lab { color:var(--muted); white-space:nowrap; }
.risk .row .val { text-align:right; color:var(--ink); }
.risk .row .val.runway { font-size:.76rem; color:#cdc7d8; line-height:1.4; }
.lvl { font-family:"JetBrains Mono",monospace; font-weight:700; font-size:.78rem; }
.lvl.low { color:var(--rug-low); } .lvl.medium { color:var(--rug-medium); } .lvl.high { color:var(--rug-high); }
.flag-on { color:var(--avoid); font-weight:600; } .flag-off { color:var(--muted); }
.portents { margin-top:14px; }
.portents ul { list-style:none; margin:8px 0 0; padding:0; }
.portents li { color:#f0b9c1; font-size:.8rem; padding:6px 0 6px 22px; position:relative; line-height:1.45; }
.portents li::before { content:"⚠"; position:absolute; left:0; top:5px; color:var(--avoid); font-size:.78rem; }
.val-note { font-size:.78rem; color:#cdc7d8; margin-top:13px; line-height:1.5; }
.val-note em { color:var(--gold); font-style:normal; font-family:"JetBrains Mono",monospace;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:4px; opacity:.85; }

.empty { text-align:center; color:var(--muted); padding:70px 0; font-family:Fraunces,serif;
  font-style:italic; font-size:1.1rem; }

.foot { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--faint);
  font-size:.74rem; margin-top:48px; font-family:"JetBrains Mono",monospace; letter-spacing:.04em;
  border-top:1px solid var(--hair); padding-top:26px; }
.foot-mark { width:18px; height:18px; opacity:.7; }
.foot-mark .staff { stroke-width:3; } .foot-mark .star { }
.dotsep { opacity:.5; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .readouts { grid-template-columns:repeat(3,1fr); }
  .ro:nth-child(4),.ro:nth-child(5){ border-top:1px solid var(--hair); }
  .detail { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:600px){
  .wrap { padding:32px 16px 70px; }
  h1 { font-size:2rem; }
  .meta { text-align:left; }
  .readouts { grid-template-columns:repeat(2,1fr); }
  .controls { flex-direction:column; align-items:stretch; }
  .ctrl-right { justify-content:space-between; }
  .card > summary { grid-template-columns:auto 1fr; gap:16px; }
  .status { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:flex-start;
    gap:14px; text-align:left; flex-wrap:wrap; }
  .dial { width:62px; height:62px; }
  .orb-lbl { display:none; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, ::before, ::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .card { opacity:1; transform:none; }
  .sweep, .mark .halo { animation:none; }
}