/* ────────────────────────────────────────────────────────────────
   ASPECT ENGINE — the whole of the instrument's appearance.

   Lifted out of index.html unchanged. The palette at the top is the
   single source of every colour; the aspect-thread colours in
   js/bodies.js are the one deliberate duplication, because those are
   drawn into SVG attributes rather than styled by CSS.
   ──────────────────────────────────────────────────────────────── */

  :root{
    --void:#0c0906; --ink:rgba(22,16,9,.88); --line:rgba(201,164,92,.28);
    --brass:#c9a45c; --brassdim:#8a7040; --verdigris:#7fae94; --oxblood:#b06a52;
    --candle:#e6c07a; --parch:#e9dfc8; --dim:#9a8a6c;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{min-height:100%;background:var(--void)}
  body{font-family:'IM Fell English',serif;color:var(--parch);
    padding:22px 16px 60px;display:flex;flex-direction:column;align-items:center;gap:18px}

  .panel{background:var(--ink);border:1px solid var(--line);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-radius:2px;
    box-shadow:0 0 0 3px rgba(12,9,6,.4), inset 0 0 24px rgba(201,164,92,.05);
    width:100%;max-width:640px;padding:20px 22px}

  header{text-align:center;max-width:640px}
  header h1{font-family:'IM Fell English SC',serif;font-weight:400;
    font-size:clamp(17px,4vw,24px);letter-spacing:.2em;color:var(--brass)}
  header .sub{font-style:italic;font-size:11px;letter-spacing:.18em;color:var(--dim);margin-top:6px}

  .sec-h{font-family:'IM Fell English SC',serif;font-size:12px;letter-spacing:.24em;
    color:var(--dim);margin:0 0 12px;display:flex;align-items:center;gap:10px}
  .sec-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
  .field{flex:1;min-width:170px}
  .field label{display:block;font-size:11px;letter-spacing:.12em;color:var(--dim);margin-bottom:6px}
  input[type=datetime-local],input[type=text],select{width:100%;background:rgba(12,9,6,.5);
    border:1px solid var(--line);color:var(--parch);font-family:'Cutive Mono',monospace;
    font-size:13px;padding:8px;border-radius:2px;color-scheme:dark}
  input:focus-visible,select:focus-visible{outline:1px solid var(--brass)}
  select{font-family:'IM Fell English',serif}

  .chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);margin-bottom:10px}
  .chk input{accent-color:var(--brass)}

  button{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.14em;
    color:var(--candle);background:transparent;border:1px solid rgba(230,192,122,.4);
    padding:8px 16px;cursor:pointer;border-radius:2px;transition:all .15s}
  button:hover{border-color:var(--candle);color:var(--parch)}
  button:focus-visible{outline:1px solid var(--candle);outline-offset:2px}
  button.primary{background:var(--brass);color:var(--void);border-color:var(--brass)}
  button.primary:hover{background:var(--candle);border-color:var(--candle)}
  button:disabled{opacity:.4;cursor:wait}
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

  .note{font-style:italic;font-size:11px;color:var(--dim);line-height:1.75;margin-top:10px}

  /* ── Place search ── */
  #place-results{display:none;flex-direction:column;gap:1px;margin-top:8px;
    border:1px solid rgba(201,164,92,.18);border-radius:2px;overflow:hidden}
  #place-results.show{display:flex}
  .place-opt{text-align:left;border:0;border-radius:0;padding:9px 11px;
    background:rgba(12,9,6,.4);color:var(--parch);font-family:'IM Fell English',serif;
    font-size:13px;letter-spacing:0;width:100%}
  .place-opt:hover{background:rgba(201,164,92,.1);color:var(--candle)}
  .place-opt small{display:block;font-family:'Cutive Mono',monospace;font-size:10px;color:var(--dim);margin-top:2px}
  #place-set{display:none;margin-top:8px;padding:9px 11px;border-radius:2px;
    border:1px solid rgba(127,174,148,.35);background:rgba(127,174,148,.06)}
  #place-set.show{display:block}
  #place-name{font-size:14px;color:var(--parch)}
  #place-meta{font-family:'Cutive Mono',monospace;font-size:10px;color:var(--verdigris);margin-top:3px}
  #place-clear{margin-top:8px;padding:5px 11px;font-size:9px}
  /* The second place search wears the same clothes as the first. */
  #here-results{display:none;flex-direction:column;gap:1px;margin-top:8px;
    border:1px solid rgba(201,164,92,.18);border-radius:2px;overflow:hidden}
  #here-results.show{display:flex}
  #here-set{display:none;margin-top:8px;padding:9px 11px;border-radius:2px;
    border:1px solid rgba(127,174,148,.35);background:rgba(127,174,148,.06)}
  #here-set.show{display:block}
  #here-name{font-size:14px;color:var(--parch)}
  #here-meta{font-family:'Cutive Mono',monospace;font-size:10px;color:var(--verdigris);margin-top:3px}
  #here-clear{margin-top:8px;padding:5px 11px;font-size:9px}
  #here-err{font-style:italic;font-size:11px;color:var(--oxblood);margin-top:8px;display:none}
  #here-err.show{display:block}

  #place-err{font-style:italic;font-size:11px;color:var(--oxblood);margin-top:8px;display:none}
  #place-err.show{display:block}

  /* ── The Wheel ── */
  #wheel-panel{padding:14px}
  #wheel-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;
    border:1px solid rgba(201,164,92,.15);border-radius:2px}
  #wheel{width:100%;height:100%;display:block;user-select:none;touch-action:none;cursor:grab}
  #wheel.dragging{cursor:grabbing}
  #wheel text{pointer-events:none}
  .planet-hit{cursor:pointer}
  .asp-line{cursor:pointer}
  .asp-label{pointer-events:none}
  /* Fullscreen. Two mechanisms, because iOS Safari will not put an
     arbitrary element full screen: the real Fullscreen API where it
     exists, and a fixed overlay where it doesn't. Both end up at the
     same CSS state, so everything downstream only has to know about
     .fs-on. The aspect-ratio must be released or the wheel would keep
     a square box in the middle of a landscape screen. */
  #fullscreen{position:absolute;top:10px;left:10px;
    background:var(--ink);box-shadow:0 0 0 2px rgba(12,9,6,.5);
    padding:6px 10px;font-size:9px;line-height:1;z-index:3}
  #wheel-wrap.fs-on{position:fixed;inset:0;width:100vw;height:100vh;
    max-width:none;aspect-ratio:auto;border:0;border-radius:0;
    background:var(--void);z-index:9999}
  #wheel-wrap:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;
    border:0;border-radius:0;background:var(--void)}
  #wheel-wrap.fs-on #wheel,#wheel-wrap:fullscreen #wheel{height:100%}
  body.fs-lock{overflow:hidden}

  #withdraw{position:absolute;top:10px;right:10px;display:none;
    background:var(--ink);box-shadow:0 0 0 2px rgba(12,9,6,.5)}
  #withdraw.show{display:block}
  #wheel-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
    margin-top:10px;font-size:11px;color:var(--dim)}
  .lg{display:flex;align-items:center;gap:6px}
  .lg .sw{width:18px;height:0;border-top:2px solid}
  .lg .sw.dashed{border-top-style:dashed}
  #orient-row{display:flex;gap:8px;justify-content:center;margin-top:8px}
  #orient-row button{padding:5px 11px;font-size:9px}
  #orient-row button.on{background:var(--brass);color:var(--void);border-color:var(--brass)}
  #view-row{display:flex;gap:8px;justify-content:center;margin-top:10px}
  #view-row button{padding:5px 14px;font-size:9px}
  #view-row button.on{background:var(--verdigris);color:var(--void);border-color:var(--verdigris)}
  #orrery{position:absolute;inset:0;touch-action:none;cursor:grab}
  #orrery.dragging{cursor:grabbing}
  #orrery canvas{display:block;width:100%;height:100%}
  #orrery-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-style:italic;font-size:12px;color:var(--dim);letter-spacing:.1em}
  [hidden]{display:none !important}

  /* ── Temporal Throttle ── */
  #throttle{margin-top:12px;border-top:1px solid rgba(201,164,92,.15);padding-top:10px}
  .th-label{font-family:'IM Fell English SC',serif;font-size:9px;letter-spacing:.3em;
    color:var(--dim);text-align:center;margin-bottom:6px}
  #th-top{display:flex;align-items:center;gap:10px}
  .th-btn{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.16em;
    color:var(--candle);background:transparent;border:1px solid rgba(230,192,122,.4);
    padding:6px 10px;cursor:pointer;border-radius:2px;white-space:nowrap}
  .th-btn:hover{border-color:var(--candle)}
  #lever{flex:1;-webkit-appearance:none;appearance:none;height:26px;background:transparent;cursor:pointer}
  #lever::-webkit-slider-runnable-track{height:3px;border-radius:2px;
    background:linear-gradient(90deg, rgba(176,106,82,.7), rgba(201,164,92,.25) 46%, rgba(201,164,92,.7) 50%, rgba(201,164,92,.25) 54%, rgba(127,174,148,.7))}
  #lever::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:24px;margin-top:-10.5px;
    background:linear-gradient(180deg,var(--candle),var(--brassdim));
    border:1px solid var(--brass);border-radius:3px;box-shadow:0 0 8px rgba(230,192,122,.5)}
  #lever::-moz-range-track{height:3px;border-radius:2px;
    background:linear-gradient(90deg, rgba(176,106,82,.7), rgba(201,164,92,.25) 46%, rgba(201,164,92,.7) 50%, rgba(201,164,92,.25) 54%, rgba(127,174,148,.7))}
  #lever::-moz-range-thumb{width:15px;height:24px;background:linear-gradient(180deg,var(--candle),var(--brassdim));
    border:1px solid var(--brass);border-radius:3px;box-shadow:0 0 8px rgba(230,192,122,.5)}
  #lever:focus-visible{outline:1px solid var(--brass);outline-offset:2px}
  #th-caption{display:flex;justify-content:space-between;font-family:'Cutive Mono',monospace;
    font-size:10px;color:var(--dim);margin-top:4px}
  #th-rate{color:var(--parch)}
  #th-disp{color:var(--oxblood)}
  #th-date{text-align:center;font-family:'Cutive Mono',monospace;font-size:13px;
    color:var(--candle);margin-top:6px}
  #th-tz{text-align:center;font-family:'Cutive Mono',monospace;font-size:9px;color:var(--dim);margin-top:2px}

  /* ── Angles strip ── */
  /* The warrant notice. Oxblood rather than red: this is the instrument
     admitting a limit, not an error the reader caused. */
  #th-warrant{display:none;text-align:center;font-style:italic;font-size:10px;
    line-height:1.5;color:var(--oxblood);margin-top:5px;padding:0 8px}
  #th-warrant.show{display:block}
  #moment-far,#natal-far{font-family:'Cutive Mono',monospace;font-size:12px}
  #moment-far{flex:1;min-width:150px}
  .far-note{font-style:italic;font-size:10px;color:var(--oxblood);margin-top:6px;display:none}
  .far-note.show{display:block}

  #angles{display:none;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:10px;
    font-family:'Cutive Mono',monospace;font-size:11px;color:var(--dim)}
  #angles.show{display:flex}
  #angles b{color:var(--candle);font-weight:400}

  /* ── Dossier & the Reading ── */
  #dossier{margin-top:12px;border-top:1px solid rgba(201,164,92,.15);padding-top:12px;display:none}
  #dossier.show{display:block}
  #do-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  #do-glyph{font-size:26px;color:var(--brass);font-family:serif}
  #do-name{font-family:'IM Fell English SC',serif;font-size:18px;letter-spacing:.12em}
  #do-kind{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.2em;
    color:var(--verdigris);border:1px solid rgba(127,174,148,.4);padding:2px 8px;border-radius:2px}
  #do-kind.natal{color:var(--brass);border-color:rgba(201,164,92,.4)}
  #do-stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;
    font-family:'Cutive Mono',monospace;font-size:11px;color:var(--dim)}
  #do-stats b{color:var(--parch);font-weight:400}
  #do-stats .retro{color:var(--oxblood)}
  #do-kind.lore{color:var(--dim);border-color:rgba(154,138,108,.4)}
  #do-brief{margin-top:12px;border-left:2px solid rgba(201,164,92,.2);padding-left:12px}
  #do-brief p{margin:0 0 9px;font-size:13.5px;line-height:1.62;color:var(--parch)}
  #do-brief p:last-child{margin-bottom:0}
  #do-brief .bl{font-family:'IM Fell English SC',serif;font-size:11px;letter-spacing:.12em;
    color:var(--brass);margin-right:2px}
  #do-hint{font-style:italic;font-size:11px;color:var(--dim);margin-top:10px}
  .lore-hit{cursor:pointer}
  #wheel-caption{text-align:center;font-style:italic;font-size:11px;color:var(--dim);
    margin-top:8px;min-height:16px}
  #wheel-caption b{color:var(--parch);font-weight:400;font-style:normal}
  #echoes{display:none;margin-top:10px;border-top:1px solid rgba(201,164,92,.15);padding-top:10px}
  #echoes.show{display:block}
  .echo-h{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.2em;
    color:var(--dim);margin-bottom:8px}
  .echo{display:flex;align-items:baseline;gap:10px;padding:3px 0;flex-wrap:wrap}
  .echo-l{font-family:'IM Fell English SC',serif;font-size:10px;letter-spacing:.16em;
    color:var(--brassdim);min-width:38px}
  .echo-v{font-family:'Cutive Mono',monospace;font-size:13px;color:var(--candle)}
  .echo-v.none{color:var(--dim);font-size:11px;font-style:italic}
  .echo-v.exact{color:var(--verdigris)}
  .echo-g{font-style:italic;font-size:11px;color:var(--dim)}
  .echo-wait{font-style:italic;font-size:11px;color:var(--dim)}
  .echo-f{font-style:italic;font-size:10px;color:var(--brassdim);margin-top:8px;line-height:1.6}

  table{width:100%;border-collapse:collapse;font-family:'Cutive Mono',monospace;font-size:12px}
  th{text-align:left;font-family:'IM Fell English SC',serif;font-weight:400;letter-spacing:.1em;
    font-size:10px;color:var(--dim);padding:4px 6px;border-bottom:1px solid var(--line)}
  td{padding:6px 6px;border-bottom:1px solid rgba(201,164,92,.1);color:var(--parch)}
  td.retro{color:var(--oxblood)}
  td .hs{color:var(--dim)}

  .aspsym{font-size:16px;padding:0 2px}
  .empty{font-style:italic;font-size:12px;color:var(--dim);padding:14px 4px;text-align:center}

  textarea{width:100%;height:180px;background:rgba(12,9,6,.5);border:1px solid var(--line);
    color:var(--verdigris);font-family:'Cutive Mono',monospace;font-size:11px;padding:10px;
    border-radius:2px;resize:vertical;margin-top:10px}
  #copied{font-size:11px;color:var(--verdigris);opacity:0;transition:opacity .3s}
  #copied.show{opacity:1}

  /* ── Wizard ── */
  .step{display:none}
  .step.on{display:block}
  .step .q{font-size:17px;line-height:1.7;margin-bottom:4px;color:var(--parch)}
  .step .qsub{font-style:italic;font-size:11px;color:var(--dim);line-height:1.7;margin-bottom:16px}
  .steps-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
  .dot{width:5px;height:5px;border-radius:50%;background:rgba(201,164,92,.25)}
  .dot.on{background:var(--brass)}

  /* ── Moment bar ── */
  #moment-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  #moment-bar label{font-size:11px;letter-spacing:.12em;color:var(--dim)}
  #moment-bar input[type=datetime-local]{flex:1;min-width:180px}
  .linkbtn{background:none;border:none;color:var(--dim);font-size:11px;
    text-decoration:underline;cursor:pointer;padding:2px;font-family:'IM Fell English',serif;font-style:italic}
  .linkbtn:hover{color:var(--candle)}

  /* ── Chat ── */
  #chat-log{display:flex;flex-direction:column;gap:10px;max-height:58vh;overflow-y:auto;padding:2px}
  .msg{padding:10px 13px;border-radius:3px;font-size:14px;line-height:1.75;max-width:90%;white-space:pre-wrap}
  .msg.user{align-self:flex-end;background:rgba(201,164,92,.1);
    border:1px solid rgba(201,164,92,.22);color:var(--parch)}
  .msg.oracle{align-self:flex-start;background:rgba(230,192,122,.04);
    border:1px solid rgba(230,192,122,.2);color:var(--parch)}
  .msg.waiting{font-style:italic;color:var(--dim)}
  .msg.err{color:var(--oxblood);font-style:italic}
  .msg .stamp{display:block;font-family:'Cutive Mono',monospace;font-size:9px;
    color:var(--brassdim);margin-bottom:5px;letter-spacing:.04em}
  #chat-empty{font-style:italic;font-size:12px;color:var(--dim);padding:10px 4px;text-align:center}
  #chat-input-row{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
  #chat-text{flex:1;background:rgba(12,9,6,.5);border:1px solid var(--line);color:var(--parch);
    font-family:'IM Fell English',serif;font-size:14px;padding:10px;border-radius:2px;
    resize:none;height:44px;max-height:120px;line-height:1.5}
  #chat-text:focus-visible{outline:1px solid var(--brass)}
  #chat-foot{font-style:italic;font-size:10px;color:var(--dim);margin-top:10px}
  /* The copy button lives in the panel heading so it is visible from the
     moment the Oracle appears, rather than materialising below the fold
     once a reply lands. The .sec-h rule ends with a stretching rule, so
     the button is pushed to the right of it. It sits disabled until
     there is a conversation to copy — present but plainly not yet
     useful, which reads better than absent. */
  .sec-h #chat-copy{margin-left:auto;padding:4px 10px;font-size:9px;
    letter-spacing:.14em;flex:0 0 auto;order:3}
  .sec-h #chat-copy:disabled{opacity:.35;cursor:default}
  #chat-actions{display:none;align-items:center;gap:10px;margin-top:8px;min-height:14px}
  #chat-actions.show{display:flex}
  #chat-copied{font-size:11px;color:var(--verdigris);opacity:0;transition:opacity .3s}
  #chat-copied.show{opacity:1}
  #ctx-wrap{margin-top:12px;border-top:1px solid rgba(201,164,92,.12);padding-top:10px}
  #ctx-wrap summary{cursor:pointer;font-size:11px;color:var(--dim);list-style:none;
    display:flex;align-items:center;gap:8px;font-style:italic}
  #ctx-wrap summary::-webkit-details-marker{display:none}
  #ctx-wrap summary::before{content:'▸';color:var(--brassdim);font-style:normal;transition:transform .15s}
  #ctx-wrap[open] summary::before{transform:rotate(90deg)}
  .ctx-opt{font-family:'IM Fell English SC',serif;font-size:9px;letter-spacing:.16em;
    color:var(--brassdim);border:1px solid rgba(201,164,92,.25);padding:1px 6px;border-radius:2px;font-style:normal}
  #ctx-text{width:100%;margin-top:10px;background:rgba(12,9,6,.5);border:1px solid var(--line);
    color:var(--parch);font-family:'IM Fell English',serif;font-size:13px;padding:9px;
    border-radius:2px;resize:vertical;line-height:1.6}
  #ctx-text:focus-visible{outline:1px solid var(--brass)}
  .ctx-note{font-style:italic;font-size:10px;color:var(--brassdim);margin-top:6px;line-height:1.6}
  .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .chip{font-family:'IM Fell English',serif;font-style:italic;font-size:11px;color:var(--dim);
    border:1px solid var(--line);border-radius:12px;padding:4px 11px;cursor:pointer;background:transparent}
  .chip:hover{color:var(--candle);border-color:var(--candle)}

  /* ── Data drawer ── */
  details.drawer summary{cursor:pointer;font-family:'IM Fell English SC',serif;font-size:11px;
    letter-spacing:.22em;color:var(--dim);list-style:none;display:flex;align-items:center;gap:10px}
  details.drawer summary::-webkit-details-marker{display:none}
  details.drawer summary::before{content:'▸';color:var(--brassdim);transition:transform .15s}
  details.drawer[open] summary::before{transform:rotate(90deg)}
  details.drawer .drawer-body{margin-top:14px}

  @media (max-width:480px){
    .panel{padding:16px 14px}
  }