/* برج اليوم — birth chart & placement pages (uses main.css tokens only) */
.ch{padding-bottom:var(--section)}
.ch-head{padding-block:var(--s5) var(--s4);max-width:var(--readw)}
.ch-head h1{font-size:var(--t-l);line-height:var(--lh-l,1.375);margin:0 0 var(--s3)}
.ch-head .hero-sub{margin-inline:0;font-size:var(--t-body-l);line-height:var(--lh-body-l)}
.ch-head--seal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:center;max-width:none}
.ch-head--seal .hero-sub{grid-column:1/-1}
.ch-kicker{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;color:var(--ink-2);font-size:var(--t-meta)}

/* tool block */
.ch-tool{display:grid;gap:var(--s5);margin-block:var(--s4) var(--s7)}
.ch-tool.has-saved .ch-tool__form{display:none}
.bf{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r-panel);padding:var(--s5) var(--s4);display:grid;gap:var(--s4)}
.bf__set{border:0;margin:0;padding:0;min-width:0}
.bf__set legend,.bf__city>.field>span{font:600 var(--t-body)/1.6 var(--f-display);color:var(--ink);padding:0;margin-bottom:var(--s2)}
.bf small{font:400 var(--t-micro)/1.5 var(--f-body);color:var(--ink-3)}
.bf__date{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:var(--s2)}
.bf__time{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end}
.bf__time .field{flex:0 1 180px}
.bf input[type=time]{width:100%;min-height:48px;padding:0 14px;background:var(--night);border:1px solid var(--rule-strong);border-radius:var(--r-ctl);color:var(--ink);font:500 1rem var(--f-body);color-scheme:dark;text-align:right}
.bf input:disabled{opacity:.45}
.bf__check{display:inline-flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;color:var(--ink-2)}
.bf__check input{width:22px;height:22px;accent-color:var(--gold);margin:0}
.bf__credit{margin:6px 0 0;color:var(--ink-3)}
.bf__go .btn{width:100%;min-height:52px;font-size:1rem}
.bf__privacy{display:flex;gap:8px;align-items:flex-start;margin:0;color:var(--ink-3)}
.bf__privacy .icon{width:16px;height:16px;flex:none;color:var(--gold);margin-top:2px}
.bf__msg{margin:0}
.bf__nojs{margin:0;color:var(--rubric)}
.bf__year{max-width:220px}
@media (min-width:640px){.bf{padding:var(--s5)}.bf__go .btn{width:auto;min-width:220px}}

/* combobox */
.combo{position:relative}
.combo__list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;background:var(--night-2);border:1px solid var(--rule-strong);border-radius:var(--r-ctl);max-height:320px;overflow:auto}
.combo__list li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-height:44px;border-radius:6px;cursor:pointer}
.combo__list li b{font-weight:500}
.combo__list li span{font-size:var(--t-meta);color:var(--ink-2)}
.combo__list li[aria-selected=true],.combo__list li:hover{background:var(--night-3);outline:1px solid var(--rule-strong)}
.combo__none{color:var(--ink-2);cursor:default!important;font-size:var(--t-meta)}

/* result */
.cr{display:grid;gap:var(--s5)}
.cr__head .eyebrow{margin-bottom:4px}
.cr__head h2{margin:0 0 6px}
.cr__head h2:focus{outline:none}
.cr__head .meta{margin:0}
.cr__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cr__notes{display:grid;gap:var(--s2)}
.cr__note{margin:0;padding:var(--s3) var(--s4);border-inline-start:2px solid var(--gold);background:var(--night-2);color:var(--ink-2);font-size:var(--t-body);line-height:var(--lh-body);border-radius:0 var(--r-sm) var(--r-sm) 0}
.big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);border-block:1px solid var(--rule);padding-block:var(--s4)}
.big3__i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.big3__i .seal{margin-bottom:var(--s2)}
.big3__k{margin:0;font-size:var(--t-meta);color:var(--rubric);font-weight:500}
.big3__s{margin:0;font:700 1.125rem/1.5 var(--f-display)}
.big3__s a{color:var(--ink);text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.big3__s a:hover{color:var(--gold-hi)}
.big3__s--na{font:400 var(--t-meta)/1.5 var(--f-body);color:var(--ink-2)}
.big3__d{margin:0}
.big3__q{display:inline-grid;place-items:center;width:72px;height:72px;border:1px dashed var(--rule-strong);border-radius:50%;font:700 1.75rem var(--f-display);color:var(--ink-3)}
@media (min-width:640px){.big3__s{font-size:1.375rem}}

.cr__grid{display:grid;gap:var(--s5)}
.cr__wheel{margin:0}
.cr__wheel figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:var(--s2);color:var(--ink-2)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg i{display:inline-block;width:18px;height:2px;background:var(--c)}
@media (min-width:960px){.cr__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}

/* wheel svg */
.wheel-chart{display:block;width:100%;max-width:640px;height:auto;margin-inline:auto;font-family:var(--f-body)}
.wc-disc{fill:var(--night-2)}
.wc-sector{fill:var(--night);stroke:var(--rule);stroke-width:1}
.wc-sector.is-odd{fill:var(--night-3)}
.wc-sg{stroke-width:1.5}
.wc-ring{fill:none;stroke:var(--rule-strong);stroke-width:1.2}
.wc-ring--in{fill:var(--night);stroke:var(--gold)}
.wc-ring--h{stroke:var(--rule)}
.wc-ticks{stroke:var(--rule-strong);stroke-width:1}
.wc-cusp{stroke:var(--rule-strong);stroke-width:1}
.wc-axis{stroke:var(--gold);stroke-width:2}
.wc-axis--out{stroke-width:2.4}
.wc-ax{fill:var(--gold-hi);font-size:15px;font-weight:500}
.wc-hn{fill:var(--ink-3);font-size:13px;text-anchor:middle;dominant-baseline:central}
.wc-asp{stroke-width:1.4}
.wc-asp--sext{stroke-dasharray:5 4}
.wc-pt{stroke:var(--gold-hi);stroke-width:2}
.wc-lead{stroke:var(--rule-strong);stroke-width:.8}
.wc-dot{fill:var(--gold)}
.wc-pl{color:var(--ink)}
.wc-pl--sun,.wc-pl--moon{color:var(--gold-hi)}
.wc-deg{fill:var(--ink-2);font-size:13px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}

/* planets table */
.cr__tbl-wrap{overflow-x:auto}
.cr__tbl{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.cr__tbl th,.cr__tbl td{padding:10px 8px;border-bottom:1px solid var(--rule);text-align:start;white-space:nowrap}
.cr__tbl thead th{font:500 var(--t-meta)/1.4 var(--f-body);color:var(--gold-hi);border-bottom-color:var(--rule-strong)}
.cr__tbl tbody th{font-weight:500}
.cr__tbl tbody th,.cr__sg{display:flex;align-items:center;gap:8px}
.cr__tbl .pg,.cr__tbl .glyph{width:20px;height:20px;flex:none;color:var(--gold)}
.cr__sg .glyph{color:var(--el,var(--gold))}
.cr__sg.el-fire{--el:var(--fire)}.cr__sg.el-earth{--el:var(--earth)}.cr__sg.el-air{--el:var(--air)}.cr__sg.el-water{--el:var(--water)}
.cr__rx{color:var(--rubric);font-weight:500}
.cr__ang th,.cr__ang td{color:var(--ink-2)}
.cr__sys{margin:var(--s2) 0 0;color:var(--ink-3)}

/* aspects & readings */
.cr__sec{border-top:1px solid var(--rule);padding-top:var(--s5)}
.cr__sec h3{margin:0 0 var(--s2)}
.cr__lead{margin:0 0 var(--s4)}
.cr__asp{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cr__asp li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule)}
.cr__asp small{display:block;color:var(--ink-3);font-size:var(--t-micro)}
.cr__aspk{flex:none;width:18px;height:3px;margin-top:12px;background:var(--c);border-radius:2px}
@media (min-width:960px){.cr__asp{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.cr__reads{display:grid;gap:var(--s5)}
@media (min-width:960px){.cr__reads{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.cr__read h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 var(--s2);font:600 var(--t-h3)/var(--lh-h3) var(--f-display)}
.cr__read h4 .pg{width:22px;height:22px;color:var(--gold)}
.cr__read h4 small{font:400 var(--t-meta) var(--f-body)}
.cr__ascmark{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--gold);border-radius:50%;font:600 .8125rem/1 var(--f-display);color:var(--gold)}
.cr__sum{margin:0 0 var(--s2);color:var(--ink);font-size:var(--t-body-l);line-height:var(--lh-body-l);max-width:62ch}
.cr__sum.is-loading{color:var(--ink-3)}
.cr__more{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-hi);font-weight:500}
.cr__one{display:grid;gap:var(--s3)}
.cr__one .t-h3{margin:0}
.cr__big{margin:0;font:700 var(--t-h3)/var(--lh-h3) var(--f-display)}
.cr__moon{display:flex;gap:var(--s4);justify-content:center;padding-block:var(--s3)}
.cr__dl{margin:0}
.cr__passes{margin:0;padding-inline-start:1.2em;display:grid;gap:6px}

/* hub & library */
.ch-sec{margin-block:var(--section)}
.ch-sec .prose{max-width:var(--readw)}
.lib{display:grid;gap:var(--s5)}
@media (min-width:960px){.lib{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.lib__p h3{display:flex;align-items:center;gap:8px;margin:0 0 var(--s2);font:600 var(--t-h3)/var(--lh-h3) var(--f-display)}
.lib__p h3 svg{width:22px;height:22px;color:var(--gold)}
.lib__p ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lib__p a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r-chip);color:var(--ink);text-decoration:none;font-size:var(--t-meta)}
.lib__p a:hover{border-color:var(--gold);color:var(--gold-hi)}
.lib__p a[aria-current]{border-color:var(--gold);background:var(--night-3)}
.lib__p a .glyph{width:16px;height:16px;color:var(--gold)}
.ch-how{background:var(--night-2);border:1px solid var(--rule);border-radius:var(--r-panel);padding:var(--s5)}
.ch-how h2{font-size:var(--t-h3);line-height:var(--lh-h3);margin:0 0 var(--s3)}
.ch-how p,.ch-how li{color:var(--ink-2);font-size:var(--t-body);line-height:var(--lh-body)}
.ch-how ul{margin:0;padding-inline-start:1.2em}
.ch-tools{display:grid;gap:0}
@media (min-width:640px){.ch-tools{grid-template-columns:1fr 1fr;column-gap:var(--s5)}}
.ch-tools .ruled-link{margin-block:0;border-top:0}

/* placement / sign pages */
.pl .layout-read__main>.prose>p:first-child{font-size:var(--t-body-l)}
.pl-list{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.pl-list li{padding-inline-start:28px;position:relative;font-size:var(--t-body-l);line-height:var(--lh-body-l)}
.pl-list li::before{content:"";position:absolute;inset-inline-start:4px;top:.75em;width:10px;height:10px;border:1.25px solid var(--gold);transform:rotate(45deg)}
.pl-list--grow li::before{border-color:var(--rubric)}
.pl-list b{color:var(--gold-hi);font-weight:500}
.pl-q{margin-block:var(--s6);padding:var(--s5);border-block:1px solid var(--rule-strong);text-align:center}
.pl-q p{margin:0;font:600 var(--t-h3)/var(--lh-h3) var(--f-display);color:var(--ink)}
.pl-q .eyebrow{margin-bottom:var(--s2)}
.pl-cta{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.pl-cta p{margin:0;color:var(--ink-2);font-size:var(--t-meta)}
.pl-cta .btn{width:100%}
.pl-side .panel{display:grid;gap:var(--s3)}
.pl-side h2{font-size:var(--t-h3);line-height:var(--lh-h3);margin:0}
.pl-others{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.pl-others a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:var(--r-ctl);text-decoration:none;color:var(--ink-2);font-size:var(--t-micro);min-height:56px}
.pl-others a:hover{background:var(--night-3);color:var(--ink)}
.pl-others a[aria-current]{background:var(--night-3);color:var(--gold-hi);outline:1px solid var(--rule-strong)}
.pl-others .glyph{width:22px;height:22px;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.cr *{scroll-behavior:auto}}
.cr bdi.num{font-family:var(--f-body);font-weight:500;unicode-bidi:isolate}
.wc-deg.is-rx{fill:var(--rubric)}
.cr__noon{font-size:var(--t-micro);color:var(--ink-3);margin-inline-start:6px}
@media (max-width:639px){.ch-head--seal{grid-template-columns:1fr;gap:var(--s3)}.ch-head--seal .seal{justify-self:start}.ch-head--seal h1{font-size:1.75rem;line-height:1.45}}
/* prose (templates.css is not loaded on these views) */
.ch .prose{font-size:var(--t-body-l);line-height:var(--lh-body-l);max-width:var(--readw)}
.ch .prose>*{max-width:62ch}
.ch .prose p{margin:0 0 var(--s4)}
.ch .prose h2{font-size:var(--t-h2);line-height:var(--lh-h2);margin:var(--s7) 0 var(--s3);max-width:none}
.ch .prose h2::before{content:"";display:block;height:9px;margin-bottom:var(--s4);--tc:var(--rule-strong)}
.ch .prose a{color:var(--gold-hi)}
.ch .prose a:hover{color:var(--ink)}
.ch .prose b{font-weight:500;color:var(--gold-hi)}
@media (min-width:960px){.ch-tool__form{max-width:760px}.bf__date{grid-template-columns:1fr 1.6fr 1.2fr}}
.pl-side .panel{gap:var(--s2)}
.pl-side .ruled-link{margin:0;min-height:52px;padding-block:10px;border-top:0;order:0}
.pl-side .ruled-link strong{font-size:1rem}
.pl-side h2{margin-top:var(--s3)}