/*
 * css/chart-tool.css: the free birth-chart tool's look on the pages that embed
 * it (2026-10-12): /blog/chatgpt-birth-chart and /sky. js/chart-tool.js draws
 * the tool into <div id="chartTool">; this styles it there.
 *
 * /birth-chart does not load this file. Its own <head> holds these rules (that
 * head stays byte for byte what search engines indexed), and the free answer's
 * styles sit in its body. This file is those same rules, in the same order,
 * each scoped to #chartTool, after one reset: every element inside the tool
 * first has the host page's styles taken off (all: revert, back to the
 * browser's own), so the tool looks the same whatever the page does to p, h2,
 * table, .reply or .foot. The id keeps every rule here above any class rule a
 * host page has.
 */
#chartTool{
  --bg:#070708;--surface:#0d0d10;--surface2:#141418;--border:#222228;--border2:#35353c;
  --text:#ece9e2;--body:#b9b4a9;--muted:#8c887e;
  --gold:#c8a96e;--gold-dim:#a08848;--gold-ink:#08080a;--gold-wash:rgba(200,169,110,.07);
  --err:#e8a090;--ok:#a9d3a4;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
  display:block;width:100%;max-width:680px;margin:0 auto;padding:0;
  text-align:left;color:var(--body);
  font-family:var(--serif);font-size:1.125rem;font-weight:400;font-style:normal;line-height:1.65;
  letter-spacing:normal;text-transform:none;word-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
[data-theme="slate"] #chartTool{
  --bg:#26262b;--surface:#303036;--surface2:#37373e;--border:#45454d;--border2:#5a5a63;
  --text:#f2f0ea;--body:#d3d0c8;--muted:#a8a59d;--gold-wash:rgba(200,169,110,.09);
}
[data-theme="light"] #chartTool{
  --bg:#dcdad4;--surface:#e7e5df;--surface2:#d0cec8;--border:#c0beb6;--border2:#a3a198;
  --text:#14120e;--body:#34322a;--muted:#5a574d;
  --gold:#6a5520;--gold-dim:#4e3c14;--gold-ink:#f4f2ec;--gold-wash:rgba(106,85,32,.08);
  --err:#8f2f20;--ok:#25602f;
  color-scheme:light;
}
#chartTool *{all:revert}
#chartTool *,#chartTool *::before,#chartTool *::after{box-sizing:border-box}
#chartTool [hidden]{display:none!important}
#chartTool a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
#chartTool a:hover{color:var(--text)}
#chartTool :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#chartTool .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#chartTool h2{font-weight:400;font-size:1.6rem;line-height:1.25;color:var(--text);margin:0 0 10px}

/* form */
#chartTool .card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 16px 18px}
#chartTool .card-title{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
#chartTool .field{margin-bottom:20px}
#chartTool label,#chartTool .label{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;line-height:1.5;color:var(--text);margin-bottom:8px}
#chartTool .opt{color:var(--muted);margin-left:2px}
#chartTool input[type=text],#chartTool input[type=date],#chartTool input[type=time],#chartTool textarea{display:block;width:100%;min-width:0;max-width:100%;min-height:50px;padding:12px 14px;background:var(--bg);color:var(--text);border:1px solid var(--border2);border-radius:10px;font-family:var(--serif);font-size:1.15rem;line-height:1.4;-webkit-appearance:none;appearance:none}
#chartTool input::placeholder,#chartTool textarea::placeholder{color:var(--muted);opacity:.85}
#chartTool input:disabled{opacity:.45}
#chartTool textarea{min-height:104px;resize:vertical;line-height:1.5}
#chartTool .check{display:flex;align-items:center;gap:12px;min-height:44px;margin:6px 0 0;font-family:var(--serif);font-size:1.08rem;letter-spacing:0;color:var(--body);cursor:pointer}
#chartTool .check input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--gold)}
#chartTool .hint{font-size:1rem;line-height:1.5;color:var(--muted);margin:8px 0 0}
#chartTool .hint.ok{color:var(--ok)}
#chartTool .hint.bad{color:var(--err)}
#chartTool .echo{min-height:1.5em}
#chartTool input[aria-invalid=true]{border-color:var(--err)}
#chartTool .note{border-left:2px solid var(--gold);background:var(--gold-wash);border-radius:0 10px 10px 0;padding:12px 14px;margin:12px 0 0;font-size:1.02rem;line-height:1.55;color:var(--body)}
#chartTool .error{color:var(--err);font-size:1.05rem;line-height:1.5;margin:0 0 14px}
#chartTool .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:14px 22px;border:0;border-radius:10px;background:var(--gold);color:var(--gold-ink);font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:filter .2s}
#chartTool .btn:hover{filter:brightness(1.08)}
#chartTool .btn[disabled]{opacity:.6;cursor:progress}
#chartTool .privacy{font-size:1rem;line-height:1.5;color:var(--muted);margin:14px 0 0}

/* place search */
#chartTool .combo{position:relative}
#chartTool .combo ul{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
#chartTool .combo li{padding:11px 12px;border-radius:7px;font-size:1.08rem;line-height:1.35;color:var(--text);cursor:pointer;overflow-wrap:anywhere}
#chartTool .combo li:hover,#chartTool .combo li.on{background:var(--gold-wash);outline:1px solid var(--gold-dim)}

/* result (on a host page a fixed bar can sit at the top, hence the larger scroll margin) */
#chartTool .result{margin-top:30px;scroll-margin-top:88px}
#chartTool .result:focus{outline:none}
/* the result's place, held from the button press until the chart arrives (js/chart-tool.js holdResult) */
#chartTool .result.pending{min-height:100vh}
#chartTool .result.pending>*{visibility:hidden}
#chartTool .summary{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;line-height:1.6;color:var(--muted);margin:0 0 16px;overflow-wrap:anywhere}
#chartTool .big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 16px}
#chartTool .b3{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 6px 14px;text-align:center;min-width:0}
#chartTool .b3 .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#chartTool .b3 .g{font-size:2.1rem;line-height:1.25;color:var(--gold)}
#chartTool .b3 .s{font-size:clamp(1.05rem,4.7vw,1.5rem);line-height:1.15;color:var(--text);overflow-wrap:anywhere}
#chartTool .b3 .d{font-family:var(--mono);font-size:.8rem;color:var(--body);margin-top:4px}
#chartTool .b3.none .s{font-size:1rem;color:var(--muted);font-style:italic;padding:0 2px}
/* "Share my Big 3" (2026-10-12) */
#chartTool .share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px}
#chartTool .share button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:none;border:1px solid var(--border2);border-radius:10px;color:var(--body);font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
#chartTool .share button:hover{border-color:var(--gold);color:var(--gold)}
#chartTool .sharenote{font-size:1rem;line-height:1.4;color:var(--muted)}
#chartTool .tablewrap{overflow-x:auto;margin:18px 0 0}
#chartTool table{width:100%;border-collapse:collapse;font-size:1.08rem}
#chartTool th{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 6px;border-bottom:1px solid var(--border2)}
#chartTool td,#chartTool tbody th{padding:11px 6px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:baseline}
#chartTool tbody th{font-family:var(--serif);font-size:1.08rem;font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap}
#chartTool td.pos{font-family:var(--mono);font-size:.86rem;white-space:nowrap;color:var(--body)}
#chartTool td.house{font-family:var(--mono);font-size:.86rem;color:var(--body)}
#chartTool tr.angle td,#chartTool tr.angle th{color:var(--body)}
#chartTool .gl{display:inline-block;width:1.5em;color:var(--gold);font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols','Noto Sans Symbols 2',var(--serif)}
#chartTool .foot{font-size:.98rem;line-height:1.55;color:var(--muted);margin:14px 0 0}

/* hand-off */
#chartTool .handoff{margin-top:30px;padding:22px 16px 20px;background:var(--surface);border:1px solid var(--gold-dim);border-radius:14px}
#chartTool .handoff p{margin:0 0 16px}
#chartTool .handoff .privacy{margin:12px 0 0}

/* the free answer (on /birth-chart these sit in its body, beside the block) */
#chartTool .cask{margin:0 0 16px;padding:20px 16px 16px;background:var(--surface);border:1px solid var(--gold-dim);border-radius:14px}
#chartTool .cask h2{font-size:1.45rem;margin:0 0 14px}
#chartTool .chips{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
#chartTool .chip{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:11px 14px;text-align:left;background:var(--bg);color:var(--text);border:1px solid var(--border2);border-radius:10px;font-family:var(--serif);font-size:1.1rem;line-height:1.35;cursor:pointer;transition:border-color .2s,background .2s}
#chartTool .chip::after{content:'';flex:none;width:8px;height:8px;margin-right:4px;border-top:1.5px solid var(--gold);border-right:1.5px solid var(--gold);transform:rotate(45deg)}
#chartTool .chip[data-chip="0"]{border-color:var(--gold-dim);background:var(--gold-wash)}
#chartTool .chip[data-chip="0"]:hover{border-color:var(--gold)}
#chartTool .chip:hover{border-color:var(--gold);background:var(--gold-wash)}
#chartTool .chip[disabled]{opacity:.55;cursor:progress}
#chartTool .own{display:flex;gap:8px;align-items:stretch;margin:0}
#chartTool .own input{flex:1 1 auto;min-width:0}
#chartTool .own .go{flex:none;min-height:50px;padding:0 18px;border:0;border-radius:10px;background:var(--gold);color:var(--gold-ink);font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
#chartTool .convo{margin:0}
#chartTool .who{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
#chartTool .you{margin:0 0 18px;color:var(--body);font-style:italic;overflow-wrap:anywhere}
#chartTool .reply{border-left:2px solid var(--gold);padding:2px 0 2px 14px;color:var(--text);font-size:1.16rem;line-height:1.62;overflow-wrap:anywhere}
#chartTool .reply p{margin:0 0 12px}
#chartTool .reply p:last-child{margin-bottom:0}
#chartTool .reply .wait{color:var(--muted);font-style:italic}
#chartTool .reply.streaming p:last-child::after{content:'';display:inline-block;width:.45em;height:1em;margin-left:3px;vertical-align:-2px;background:var(--gold);animation:ctCaret 1s steps(1) infinite}
@keyframes ctCaret{50%{opacity:0}}
#chartTool .next{margin:18px 0 0}
#chartTool .next input{cursor:pointer}
#chartTool .next .gate{margin:12px 0 0}
#chartTool .next .keep{margin:14px 0 0}
#chartTool .cask .privacy{margin:14px 0 0}
#chartTool .alt{margin:14px 0 0}
#chartTool .alt button{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;color:var(--gold);font-family:var(--serif);font-size:1.1rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
#chartTool .alt button:hover{color:var(--text)}

/* the way to the account (2026-10-14, BC-CONVERT in js/chart-tool.js): the moment above the question and what
   continues under the answer, as /birth-chart has them; the phone bar is the birth chart pages' own (none here) */
#chartTool .cv-top{margin:0 0 12px}
#chartTool .cv-kick{margin:0 0 6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
#chartTool .cv-me{margin:0;font-size:1.18rem;line-height:1.4;color:var(--body);overflow-wrap:anywhere}
#chartTool .cv-me b{font-weight:500;color:var(--text)}
#chartTool .cv-sub{margin:-4px 0 14px;font-size:1.04rem;line-height:1.5;color:var(--muted)}
#chartTool .cv-proof{display:block;margin:8px 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;line-height:1.6;color:var(--muted)}
#chartTool .chips.cv-flash .chip{animation:cvPulse 1.4s ease-out 1}
@keyframes cvPulse{0%{box-shadow:0 0 0 0 rgba(200,169,110,.6)}100%{box-shadow:0 0 0 12px rgba(200,169,110,0)}}
#chartTool .cv-next{margin:16px 0 0;padding:16px 14px 14px;background:var(--bg);border:1px solid var(--border2);border-radius:12px}
#chartTool .cv-next h3{margin:0 0 6px;font-size:1.18rem}
#chartTool .cv-tease{margin:0 0 10px;padding:0;list-style:none}
#chartTool .cv-tease li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--border);font-size:1.06rem;line-height:1.45;color:var(--body)}
#chartTool .cv-tease li:first-child{border-top:0}
#chartTool .cv-tease li::before{content:'';position:absolute;left:2px;top:17px;width:8px;height:8px;border:1.5px solid var(--gold);border-radius:50%}
#chartTool .cv-tease b{font-weight:500;color:var(--text)}
#chartTool .cv-facts{margin:0;font-size:1rem;line-height:1.5;color:var(--body);font-variant-numeric:lining-nums}
#chartTool .cv-after{margin:10px 0 0;text-align:center}
#chartTool .cv-after .cv-proof{margin:0}
#chartTool .cv-step{margin:2px 0 0;font-size:1rem;line-height:1.5;color:var(--muted)}

/* /birth-chart narrows its table below 360 px of screen; a host page's own
   side padding makes the tool that narrow on a wider screen, so here it is 420. */
@media (max-width:419px){
  #chartTool th,#chartTool td,#chartTool tbody th{padding-left:3px;padding-right:3px}
  #chartTool th{letter-spacing:.08em}
  #chartTool tbody th,#chartTool td{font-size:1rem}
  #chartTool td.pos,#chartTool td.house{font-size:.78rem}
  #chartTool .gl{width:1.3em}
}
@media (min-width:640px){
  #chartTool .card{padding:28px 28px 24px}
  #chartTool .handoff{padding:28px 28px 24px}
  #chartTool .big3{gap:12px}
  #chartTool .b3{padding:18px 10px}
  #chartTool .btn{width:auto}
  #chartTool .cask{padding:26px 28px 22px}
}
@media (prefers-reduced-motion:reduce){
  #chartTool *{transition:none!important;scroll-behavior:auto!important}
  #chartTool .reply.streaming p:last-child::after{animation:none}
  #chartTool .chips.cv-flash .chip{animation:none}
}