* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink);
font-family:var(--font-sans); font-size:15px; line-height:1.6; }
/* Grid and flex children default to min-width:auto, which lets a wide table
push the whole page sideways. This is the rule the signed-in mockup was
missing on all seventeen routes. */
.l-wrap > *, .l-sec > * { min-width:0; }
.l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.l-sec { padding:38px 0; }
.l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); }
.l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2);
margin:0; max-width:66ch; }
/* A link in a lede had no colour and came out in the browser's own
-webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on
every page, so this was one page today and any page that adds a link to a
lede tomorrow. Set here rather than on the page that happened to have
one. */
.l-sub a { color:var(--gold-dk); text-underline-offset:2px; }
/* A CENTRED SECTION, for pages whose head is centred too. Lives here rather
than in a page's stylesheet because two clusters use it now — it was
.ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without
the rule, so its ledes rendered left under centred heads and looked like
an oversight. margin-inline is not optional: .l-sub caps at 66ch, so
centring the text without centring the box leaves a centred column
sitting on the left of the wrap.
Only the lede. Lists, tables and cards inside a .l-ctr stay left —
centred body copy is ragged on both edges and a centred bulleted list
stops forming a column to scan. */
.l-ctr .l-sub { text-align:center; margin-inline:auto; }
/* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line
readable and the grid or panel under it carries the width. Two of them
stacked is not — they fill the left half of the band, the right half is
empty, and under a full-width heading with a full-width panel below it
the pair reads as a column that has been cut off rather than as air.
Measured at 1280: 582px of a 1180px section, 49% of it, twice over.
A track each, so both keep the SAME measure they had — this is a layout
fix, not a wider line. Stretching one paragraph across 1180px would give
150 characters to a line that is already at 74.
auto-fit rather than two fixed columns, because the home page has a pair
inside a half-width column; there they stack again rather than becoming
two forty-character ribbons.
.l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px
cap, so the track is what governs in two columns and the cap is what
governs when it falls back to one — which is the width it has today.
Overriding the cap to none looked tidier and gave a 736px tablet a
93-character line, which is the fault this rule exists to avoid.
min(400px, 100%), NOT 400px. A minimum track wider than the container
does not shrink — it overflows it, and at 320px the whole page scrolled
sideways by 26px. min() caps the floor at whatever room there is. */
.l-lede { display:grid; gap:10px 44px; margin-bottom:20px;
grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.l-mb { margin-bottom:20px; }
.l-mt { margin-top:22px; }
.l-signin, .l-signup { text-decoration:none; white-space:nowrap; }
.l-act-u, .l-act-a { display:flex; align-items:center; gap:8px; }
/* The drawer carries Sign in and Sign up and nothing else now — the theme
toggle moved to top_nav's `bar`, which is the header at every width. Its
own display and gap belong to the component, in ui.py, so the breakpoint
that hides it there is not overruled from here. */
.c-drawer-a .l-signin, .c-drawer-a .l-signup {
flex:1; min-height:44px; padding:0 15px; justify-content:center; }
/* Date and time are one question, asked once. Both values are short enough
to sit side by side even at 360px, and pairing them stops the form
reading as five separate chores. */
/* Date and time side by side, and STACKED on the narrowest phones. The two
were always a 1fr 1fr grid; what changed is that the time trigger now
reads 09:15 PM as four flex spans rather than one string, so its
min-content is wider than half of a 288px card and the card grew to 311 —
7px of sideways scroll on the page the whole site links to. minmax(0,1fr)
alone would have kept the row and clipped the readout instead. */
.l-dt { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:360px) {
.l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
/* Part of the hero's left column, not a band of its own. It anchors the
bottom of that column so it finishes level with the form card. */
/* Inside the form card the list sits under the button, separated by a rule
rather than by more whitespace — it is what pressing the button gets you,
so it should read as part of the button's promise. */
.l-cardsub { margin:2px 0 14px; }
.l-cardinc { margin-top:14px; padding-top:14px;
border-top:1px solid var(--line-soft); }
.l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.l-inc li { display:flex; align-items:flex-start; gap:9px; }
.l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); }
.l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); }
.l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px;
text-decoration:none; color:var(--ink); border:1px solid var(--line);
border-radius:var(--r-card); background:var(--surface); }
.l-samp:hover { border-color:var(--gold); background:var(--gold-bg); }
/* Between the two-column breakpoint and 1024 the left column runs 9px past
the card, because the headline takes an extra line before the columns are
wide enough. Four pixels off the padding and four off the stack gap close
it without anyone being able to tell the difference. */
.l-samp > svg:first-child { flex:none; color:var(--gold-dk); }
.l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; }
.l-samp span { min-width:0; }
.l-samp b { display:block; font-size:14.5px; font-weight:700; }
.l-samp i { display:block; font-style:normal; font-size:12.5px;
color:var(--ink-3); margin-top:2px; line-height:1.45; }
.l-dt .c-pf { margin-bottom:0; }
.l-dth { margin:6px 0 var(--space-3); }
.l-mb2 { margin-bottom:16px; }
.l-mark { display:block; width:34px; height:34px; flex:none; }
.l-mark img { display:block; width:100%; height:100%; border-radius:19%; }
/* proof row */
.l-proof { background:var(--gold-bg); border-block:1px solid var(--line); }
.l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0;
padding:4px 0; }
.l-pf { padding:18px 4px 18px 18px; }
/* Hairlines, not a colour change, do the separating — and only between
cells that are actually side by side, which changes at each breakpoint. */
.l-pf:nth-child(2n) { border-left:1px solid var(--line); }
.l-pf:nth-child(n+3) { border-top:1px solid var(--line); }
.l-pf:first-child { padding-left:0; }
.l-pf b { display:block; font-family:var(--font-serif); font-size:29px;
line-height:1.05; font-weight:600; color:var(--gold-dk);
letter-spacing:-.015em; }
.l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px;
color:var(--ink); }
.l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3);
margin-top:2px; }
@media (min-width:760px) {
.l-pfr { grid-template-columns:repeat(4,1fr); }
.l-pf:nth-child(n+3) { border-top:0; }
.l-pf:nth-child(n+2) { border-left:1px solid var(--line); }
}
/* panchang */
.l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); }
.l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in);
background:var(--surface); }
.l-pc span { display:block; font-family:var(--font-mono); font-size:9px;
letter-spacing:.13em; color:var(--ink-3); }
.l-pc b { display:block; font-size:15px; margin-top:5px; }
.l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); }
.l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); }
@media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } }
/* rashifal */
.l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); }
.l-rs { display:flex; flex-direction:column; align-items:center; gap:1px;
min-height:98px; justify-content:center; padding:12px 5px;
border:1px solid var(--line); border-radius:var(--r-in);
background:var(--surface); text-decoration:none; color:var(--ink);
text-align:center; }
.l-rs:hover { border-color:var(--gold); background:var(--gold-bg); }
.l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; }
.l-rs b { font-size:12.5px; font-weight:650; }
.l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); }
.l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); }
@media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } }
/* tools */
.l-tools { display:grid; gap:12px; }
.l-ti { display:grid; place-items:center; width:40px; height:40px;
border-radius:11px; color:var(--gold-dk); background:var(--gold-bg);
margin-bottom:11px; }
.l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.l-tl a { display:inline-flex; align-items:center; min-height:44px;
font-size:12.5px; font-weight:600; padding:0 14px;
border-radius:var(--r-pill); color:var(--ink-2);
border:1px solid var(--line); background:var(--surface);
text-decoration:none; }
.l-tl a:hover { color:var(--gold-dk); border-color:var(--gold);
background:var(--gold-bg); }
@media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } }
/* astrologers */
/* .h-astro in home.py sets display on top of this and is the only caller,
so anything layout-ish added here is dead. The phone rail lives there. */
.l-astro { display:grid; gap:11px; grid-template-columns:repeat(1,1fr); }
.l-ah { display:flex; align-items:center; gap:11px; }
.l-an { display:block; font-size:15px; font-weight:700; }
.l-as { display:block; font-size:12.5px; color:var(--ink-3); }
.l-am { display:flex; gap:5px; margin-top:12px; }
@media (min-width:600px) { .l-astro { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .l-astro { grid-template-columns:repeat(4,1fr); } }
/* The unknown-birth-time escape hatch belongs inside the time picker, where
someone reaches it at the exact moment they realise they cannot answer. */
.l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
.l-faq { margin-top:16px; }
/* ── page head ────────────────────────────────────────── */
.s-crumb { padding-top:16px; }
.s-top { padding:22px 0 6px; }
.s-head { max-width:64ch; }
/* With a form beside it the header is the full width and the two columns
share it, so the reading underneath is not squeezed into a rail. */
.s-head-2 { max-width:none; display:grid; gap:26px;
grid-template-columns:minmax(0,1fr); align-items:start; }
.s-head-2 > * { min-width:0; }
@media (min-width:960px) {
.s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); }
}
.s-head-t { max-width:64ch; }
.s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px;
letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk);
padding:5px 10px; border-radius:var(--r-pill);
background:var(--gold-bg); margin-bottom:14px; }
.s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px);
line-height:1.08; letter-spacing:-.021em; font-weight:600;
margin:0 0 13px; text-wrap:balance; }
.s-h1 em { font-style:normal; color:var(--gold-dk); }
.s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2);
margin:0; max-width:58ch; }
/* What the page gives back, named. See page_head() for why it is only on the
fourteen with a full birth-details form. */
.s-ret { margin-top:18px; max-width:58ch; }
.s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid;
gap:5px; }
.s-ret li { position:relative; padding-left:18px; font-size:14px;
line-height:1.55; color:var(--ink-2); }
.s-ret li::before { content:''; position:absolute; left:2px; top:9px;
width:5px; height:5px; border-radius:50%;
background:var(--gold-solid); }
@media (min-width:960px) {
.s-head-fill { align-items:stretch; }
.s-head-fill > .s-head-t { display:flex; flex-direction:column; }
.s-head-fill .s-meta { margin-top:auto; padding-top:16px; }
}
/* The facts a dek would otherwise carry as adjectives. Mono, so they read as
data rather than as more sentence. */
/* THE CENTRED HEAD, for pages that are not asking for a birth time. The
default sits beside a form card and runs to 64ch down the left; a page
whose top is a choice rather than a form leaves that whole right-hand
column empty, and the text reads as the caption of something that failed
to load. Two pages want this — the tarot hub, whose top half is six
readings, and the astrologer pages, whose top half is a roster — so it
lives here rather than being written twice. */
.s-head-c { max-width:700px; margin-inline:auto; text-align:center; }
.s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700;
border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; }
.s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); }
.s-head-c .s-dek { margin-inline:auto; max-width:62ch; }
.s-head-c .s-meta { justify-content:center; }
.s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
color:var(--ink-3); }
.s-meta span { display:flex; align-items:center; gap:7px; }
.s-meta span + span::before { content:''; width:3px; height:3px; flex:none;
border-radius:50%; background:var(--line); margin-left:-11px; }
/* ── related ──────────────────────────────────────────── */
.s-rel { display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } }
.s-rel > * { min-width:0; }
.s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
min-height:44px; text-decoration:none; color:var(--ink);
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-card); }
.s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); }
.s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px;
border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); }
.s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; }
.s-rel-x b { font-size:14px; font-weight:650; }
.s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3);
margin-top:2px; }
/* ── closing CTA ──────────────────────────────────────── */
.s-cta { display:grid; gap:20px; align-items:center; padding:28px;
border-radius:var(--r-card); border:1px solid var(--gold-lt);
background:
radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%),
var(--surface); }
@media (min-width:820px) {
.s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } }
.s-cta > * { min-width:0; }
.s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px);
line-height:1.16; letter-spacing:-.018em; font-weight:600;
margin:0 0 9px; text-wrap:balance; }
.s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2);
margin:0; max-width:52ch; }
.s-cta-b { display:flex; flex-wrap:wrap; gap:10px; }
.s-cta-b > * { flex:1 1 auto; }
.s-cta-alt { display:inline-flex; align-items:center; justify-content:center;
gap:8px; text-decoration:none; white-space:nowrap; }
.s-cta-alt svg { color:var(--gold-dk); }
/* ── the welcome gift ── */
.d-bon { position:fixed; inset:0; z-index:60; display:flex;
align-items:center; justify-content:center; padding:20px; }
.d-bon[hidden] { display:none; }
.d-bon-x { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.d-bon-c { position:relative; width:100%; max-width:390px; text-align:center;
padding:26px 26px 20px; border-radius:18px;
border:1px solid var(--line); background:var(--surface);
box-shadow:0 18px 50px rgba(0,0,0,.22);
max-height:calc(100dvh - 40px); overflow-y:auto; }
.d-bon-g { display:inline-flex; align-items:center; justify-content:center;
width:62px; height:62px; border-radius:50%;
background:var(--gold-bg); color:var(--gold-dk);
margin-bottom:13px; }
.d-bon-c h2 { font-family:var(--font-serif); font-size:23px; font-weight:600;
margin:0; color:var(--ink); letter-spacing:-.01em; }
.d-bon-s { margin:5px 0 16px; font-size:13.5px; color:var(--ink-2); }
.d-bon-amt { padding:15px; border-radius:var(--r-card);
background:var(--gold-bg); margin-bottom:16px; }
.d-bon-amt span { display:block; font-family:var(--font-mono);
font-size:10px; letter-spacing:.14em; color:var(--ink-3);
text-transform:uppercase; }
.d-bon-amt b { display:block; margin:5px 0 4px; font-family:var(--font-serif);
font-size:38px; font-weight:600; line-height:1;
color:var(--gold-dk); }
.d-bon-amt i { font-style:normal; font-size:12px; color:var(--ink-2); }
.d-bon-l { list-style:none; margin:0 0 18px; padding:0; display:grid;
gap:8px; text-align:left; }
.d-bon-l li { position:relative; padding-left:20px; font-size:13px;
color:var(--ink-2); }
.d-bon-l li::before { content:''; position:absolute; left:4px; top:.5em;
width:6px; height:6px; border-radius:50%;
background:var(--gold-dk); }
.d-bon-go { position:relative; width:100%; }
.d-bon-go .d-bon-lb { transition:opacity .12s linear; }
.d-bon-go[aria-busy="true"] .d-bon-lb { opacity:0; }
.d-bon-go[aria-busy="true"] { pointer-events:none; }
.d-bon-sp { position:absolute; top:50%; left:50%; width:20px; height:20px;
margin:-10px 0 0 -10px; opacity:0; pointer-events:none; }
.d-bon-go[aria-busy="true"] .d-bon-sp { opacity:1; }
.d-bon-no { display:block; width:100%; margin-top:9px; font:inherit;
font-size:12.5px; padding:7px; border:0; background:none;
color:var(--ink-3); cursor:pointer; }
.d-bon-no:hover { color:var(--ink-2); text-decoration:underline; }
.d-bon-e { margin:9px 0 0; font-size:12.5px; color:var(--bad); }
.d-bon-e[hidden] { display:none; }
/* The row for whoever closed it. Money nobody has taken should not be
invisible because a modal was dismissed once. */
.d-bonr { display:flex; align-items:center; gap:13px; flex-wrap:wrap;
padding:13px 16px; margin:0 0 18px;
border:1px solid var(--gold); border-radius:var(--r-card);
background:var(--gold-bg); }
.d-bonr[hidden] { display:none; }
.d-bonr-g { flex:none; color:var(--gold-dk); display:flex; }
.d-bonr-t { flex:1 1 210px; min-width:0; font-size:13.5px; color:var(--ink); }
.d-bonr-t b { font-weight:650; }
.d-bonr-x { flex:none; font:inherit; font-size:12.5px; border:0;
background:none; color:var(--ink-3); cursor:pointer;
padding:6px 8px; }
.d-bonr-x:hover { color:var(--ink-2); text-decoration:underline; }
/* ── shell ── */
.d-shell { display:grid; grid-template-columns:248px minmax(0,1fr);
min-height:100vh; background:var(--cream); }
.d-col2 { min-width:0; }
.d-rail { background:var(--rail); border-right:1px solid var(--line);
padding:16px 12px 12px; display:flex; flex-direction:column;
gap:3px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.d-brand { display:flex; align-items:center; gap:10px; padding:4px 8px 16px;
color:inherit; text-decoration:none;
font-family:var(--font-serif); font-size:16px; font-weight:600; }
.d-grp { margin-top:14px; padding:0 8px 6px; }
.d-grp b { display:block; font-family:var(--font-mono); font-size:9.5px;
letter-spacing:.14em; text-transform:uppercase; font-weight:600;
color:var(--ink-3); }
.d-grp i { display:block; font-family:var(--font-serif); font-style:italic;
font-size:11.5px; color:var(--ink-3); }
.d-nav { display:flex; align-items:center; gap:10px; padding:9px 10px;
border-radius:var(--r-in); font-size:13.5px; font-weight:500;
color:var(--ink-2); text-decoration:none; min-height:40px; }
.d-nav:hover { background:var(--surface); color:var(--ink); }
.d-nav .c-ico { width:18px; height:18px; flex:none; }
.d-nl { flex:1; min-width:0; }
.d-on { background:var(--pill-ink); color:var(--pill-text); font-weight:650; }
.d-tail { font-family:var(--font-mono); font-size:10px; padding:1px 5px;
border-radius:5px; background:var(--gold-bg); color:var(--gold-dk); }
.d-on .d-tail { background:var(--surface); color:var(--ink); }
.d-acct { position:relative; margin-top:auto; padding-top:12px;
border-top:1px solid var(--line); }
.d-acct-c { display:flex; align-items:center; gap:9px; padding:9px;
border:1px solid var(--line); border-radius:var(--r-in);
background:var(--surface); text-decoration:none;
cursor:pointer; }
.d-acct-c:hover { border-color:var(--gold-lt); }
.d-acct-c .c-ico { flex:none; color:var(--ink-3);
transition:transform .16s; }
#d-ac-o:checked ~ .d-acct-c .c-ico { transform:rotate(180deg); }
/* UPWARD. It is the last thing in the rail with the viewport floor under
it, so a menu hanging below it would open off the bottom of the screen.
Same checkbox the profile switcher uses rather than the prototype's
:hover, which on a touch screen is a menu that opens and will not close. */
.d-ac-m { display:none; position:absolute; left:0; right:0;
bottom:calc(100% + 7px); z-index:40; padding:6px;
border-radius:var(--r-card); background:var(--surface);
border:1px solid var(--line);
box-shadow:0 18px 44px -18px rgba(0,0,0,.5); }
#d-ac-o:checked ~ .d-ac-m { display:block; }
.d-ac-x { display:none; }
#d-ac-o:checked ~ .d-ac-x { display:block; position:fixed; inset:0;
z-index:35; }
.d-ac-i { display:flex; align-items:center; gap:11px; width:100%;
padding:9px 10px; border:0; border-radius:var(--r-in);
background:none; cursor:pointer; text-align:left; font:inherit;
font-size:13px; color:var(--ink); text-decoration:none; }
.d-ac-i:hover { background:var(--surface-2); }
.d-ac-i .c-ico { flex:none; color:var(--ink-3); }
.d-ac-sep { height:1px; background:var(--line); margin:5px 8px; }
/* No icon, and the only red thing in the rail: it is the one row here that
does something rather than going somewhere. */
.d-ac-out { padding-left:37px; color:var(--bad); font-weight:600; }
@media (prefers-reduced-motion:reduce) {
.d-acct-c .c-ico { transition:none; }
}
.d-av { width:30px; height:30px; border-radius:50%; flex:none;
display:grid; place-items:center; font-size:12px; font-weight:700;
background:var(--gold-solid); color:var(--gold-solid-text); }
.d-who { min-width:0; flex:1; }
.d-who b { display:block; font-size:13px; color:var(--ink); }
.d-who i { display:block; font-style:normal; font-size:11.5px;
color:var(--ink-3); }
/* ── top bar ── */
.d-top { display:flex; align-items:center; gap:12px; padding:11px 22px;
border-bottom:1px solid var(--line); background:var(--cream);
position:sticky; top:0; z-index:5; }
.d-crumb { font-size:13px; color:var(--ink-3); min-width:0; }
.d-crumb b { color:var(--ink); font-weight:600; }
.d-tb { margin-left:auto; display:flex; align-items:center; gap:8px; }
.d-chip { display:flex; align-items:center; gap:6px; font-size:12.5px;
padding:6px 11px; border:1px solid var(--line);
border-radius:var(--r-pill); background:var(--surface); }
.d-chip i { font-style:normal; font-family:var(--font-mono); font-size:9.5px;
letter-spacing:.05em; padding:1px 5px; border-radius:4px;
background:var(--gold-bg); color:var(--gold-dk); }
.d-wallet { display:flex; align-items:center; gap:7px; font-size:13px;
font-weight:700; padding:6px 7px 6px 12px; text-decoration:none;
border-radius:var(--r-pill); border:1px solid var(--gold);
background:var(--gold-bg); color:var(--gold-dk); }
.d-plus { display:grid; place-items:center; width:18px; height:18px;
border-radius:50%; background:var(--gold-solid);
color:var(--gold-solid-text); font-size:12px; line-height:1; }
.d-burger { display:none; }
.d-scrim { display:none; }
/* ── main ── */
.d-main { padding:26px 22px 56px; max-width:var(--wrap); }
.d-h1 { font-family:var(--font-serif); font-size:clamp(27px,3.2vw,42px);
line-height:1.08; letter-spacing:-.015em; font-weight:600;
margin:0 0 9px; text-wrap:balance; }
.d-h1 em { font-style:italic; color:var(--gold-dk); }
.d-sub { display:flex; align-items:baseline; gap:8px; margin:0;
color:var(--ink-2); font-size:14.5px; line-height:1.6;
max-width:640px; }
.d-sub b { color:var(--ink); font-weight:650; }
/* NOT .d-dot. This CSS used to live inside /home/ where a page owned its
own class names; moving it into lib/ made every name here global, and
pages/views/biorhythm.py has been drawing its chart's data points with
a .d-dot for months. The shell is the newcomer, so the shell renames. */
/* Prose links. Scoped to
on purpose: every signed-in page puts the
odd link in a caption or an empty-state sentence, and without this they
render browser-default blue in the middle of a gold page. Anchors that
are structure rather than prose — rail items, rashi tiles, roster cards,
the profile menu — are never inside a paragraph, so they keep their own
styling and this cannot reach them. */
.d-main p a { color:var(--gold-dk); text-underline-offset:2px; }
.d-main p a:hover { color:var(--gold); }
.d-live { width:7px; height:7px; border-radius:50%; background:var(--good);
flex:none; }
.d-mk { display:flex; align-items:baseline; gap:10px; margin:32px 0 13px; }
.d-mk0 { margin:0 0 13px; }
.d-mkn { font-family:var(--font-mono); font-size:12px; color:var(--gold-dk); }
/* An h2/h3 now, so the browser's own heading margin and 1.5em size have
to go — the row is a flex baseline and a UA margin would shove it. */
.d-mkt { font-family:var(--font-mono); font-size:12px; letter-spacing:.13em;
text-transform:uppercase; font-weight:600; margin:0;
color:inherit; }
.d-mkd { font-family:var(--font-serif); font-style:italic; font-size:13px;
color:var(--ink-3); }
.d-card { background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-card); padding:20px; }
.d-row { display:grid; gap:15px; }
/* THE LEFT CARD SETS THE HEIGHT AND BEST HOURS FITS ITSELF INTO IT.
Stretching the pair to their tallest is not the same thing: the tallest
is whichever has more to say, so the void simply moves to the other
column — which is exactly what happened when Best hours grew from three
rows to seven. The slot is an empty positioned box, so it contributes
nothing to the row; the card fills the slot absolutely and gives up
rows to its scroller instead of giving up its shape.
min-height so the pair cannot collapse when the left card is in one of
its short states — no birth details, or a chart that would not load. */
@media (min-width:980px) {
.d-2 { grid-template-columns:1.5fr 1fr; }
.d-hslot { position:relative; min-height:280px; }
.d-hslot > .d-hrs { position:absolute; inset:0; }
}
/* On one column there is nothing to match, so the card is its own height
and the whole list is simply there. */
@media (max-width:979.98px) { .d-hslot { display:contents; } }
.d-read { font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0; }
.d-read b { color:var(--ink); font-weight:650; }
/* ── profile switcher ── */
.d-pf { position:relative; }
.d-pf-t { display:flex; align-items:center; gap:9px; cursor:pointer;
padding:5px 9px 5px 6px; border:1px solid var(--line);
border-radius:var(--r-pill); background:var(--surface);
max-width:230px; }
.d-pf-t:hover { border-color:var(--gold-lt); }
.d-pf-n { min-width:0; text-align:left; }
.d-pf-n b { display:block; font-size:12.5px; font-weight:650; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-pf-n i { display:block; font-style:normal; font-family:var(--font-mono);
font-size:10px; color:var(--ink-3); }
.d-pf-t .c-ico { flex:none; color:var(--ink-3); }
.d-pf-m { display:none; position:absolute; top:calc(100% + 7px); left:0;
z-index:40; min-width:250px; padding:6px; border-radius:var(--r-card);
background:var(--surface); border:1px solid var(--line);
box-shadow:0 18px 44px -18px rgba(0,0,0,.5); }
/* The input sits INSIDE .d-top, so the menu and the catcher are its
siblings there — not descendants of .d-shell, which is what the
first version reached for and never matched. */
#d-pf-o:checked ~ .d-pf .d-pf-m { display:block; }
/* A full-screen catcher so the next click anywhere closes it — without one
the menu stays open behind whatever you clicked next. */
.d-pf-x { display:none; }
#d-pf-o:checked ~ .d-pf-x { display:block; position:fixed;
inset:0; z-index:35; }
.d-pf-i { display:flex; align-items:center; gap:9px; width:100%;
padding:8px 9px; border:0; border-radius:var(--r-in);
background:none; cursor:pointer; text-align:left;
text-decoration:none; font:inherit; }
.d-pf-i:hover { background:var(--surface-2); }
.d-pf-on { background:var(--gold-bg); }
.d-pf-on .d-pf-n b { color:var(--gold-dk); }
.d-pf-add { border-top:1px solid var(--line-soft); border-radius:0 0 9px 9px;
margin-top:4px; padding-top:11px; }
.d-pf-add .d-av { background:var(--surface-2); color:var(--ink-2); }
/* max-width:150px used to sit here too and had never once applied: the
phone block further down sets max-width:none at the same specificity and
later in the file, so it won every time. The date of birth is what this
rule is actually for. */
@media (max-width:560px) { .d-pf-n i { display:none; } }
/* ── waiting ── */
/* A grey block the shape of the answer, not a spinner in the middle of an
empty page: the layout is already correct, so nothing jumps when the real
values land. */
/* A SWEEP, NOT A PULSE. The old rule faded --line-soft in and out, and
--line-soft sits 1.07:1 against the card it lies on in dark — so the bar
was invisible at its brightest and more invisible at its dimmest, which
reads as a page that has finished loading and has nothing to say. The
band travelling left to right is the part that says "still coming"; the
bar underneath it is what says "and it will be about this big". */
.d-sk { display:block; min-height:1em; width:100%; border-radius:6px;
/* The that gives the span its height must not be seen. */
color:transparent; user-select:none;
background-color:var(--sk);
background-image:linear-gradient(100deg, rgba(0,0,0,0) 34%,
var(--sk-hi) 50%, rgba(0,0,0,0) 66%);
background-size:280% 100%; background-repeat:no-repeat;
animation:d-sheen 1.45s linear infinite; }
.d-sk + .d-sk { margin-top:7px; }
@keyframes d-sheen { from { background-position:170% 0; }
to { background-position:-70% 0; } }
/* Stationary, not still-but-invisible: reduced motion keeps the bar and
drops only the travel. */
@media (prefers-reduced-motion:reduce) {
.d-sk { animation:none; background-image:none; }
}
/* IN A FLEX PARENT A SKELETON COLLAPSES. .d-sub is a flex row, so a
`` shrink-wrapped its one space and came
out 3px wide — five screens opened with a crumb of grey under the
headline where a line of type was about to appear. Width here, and a
shorter one for the sub, because a full-column bar promises a paragraph
the line will not deliver. */
.d-sub .d-sk { flex:0 0 auto; width:min(26ch, 100%); }
/* Seen only when a live reading could not be fetched and the page is
showing what was built into it. It is a caveat on real data, not an
error — amber, in the subtitle, not a banner across the page. It lives
here because every signed-in page that reads a dated snapshot needs the
same sentence, and three copies would drift. */
.d-stale { color:var(--mid); font-size:13px; }
.d-stale b { color:var(--mid); font-weight:650; }
/* Same collapse, in the top bar. The profile chip and the wallet pill both
size to their contents, so a width:100% child resolves against nothing —
3px and 13px respectively. These are the widths a name and a balance
actually take, so the chrome does not resize when they arrive. */
.d-pf-n .d-sk { width:9ch; }
.d-wallet .d-sk { width:4.5ch; }
/* ── the rail becomes a drawer ── */
@media (max-width:900px) {
.d-shell { grid-template-columns:minmax(0,1fr); }
.d-burger { display:grid; place-items:center; width:44px; height:44px;
flex:none; cursor:pointer; border:1px solid var(--line);
border-radius:10px; background:var(--surface);
color:var(--ink-2); }
.d-rail { position:fixed; top:0; left:0; bottom:0; width:264px; z-index:40;
transform:translateX(-100%); transition:transform .2s ease; }
#d-menu:checked ~ .d-shell .d-rail { transform:none; }
#d-menu:checked ~ .d-shell .d-scrim { display:block; position:fixed;
inset:0; z-index:30; background:rgba(0,0,0,.45); }
.d-main { padding:20px 16px 48px; }
.d-top { padding:10px 16px; }
}
/* ── ONE ROW ON A PHONE ──
The bar holds a burger, the profile chip, a breadcrumb, a date, a wallet
and the theme toggle: 473px of controls in 358px at 390. Letting it wrap
kept everything on screen and made the header 116px of a 844px phone —
two rows, the second one shoved to the right by margin-left:auto with
124px of dead space beside it. It read as a header that had come apart,
not one that had been designed.
Two things go instead of wrapping. The breadcrumb, because it names the
page a reader is looking at. And the date chip, because it is the only
thing on the bar that is not a control — every page that turns on the
date says so in its own heading, and what a phone needs up here is the
way out (burger), who this is cast for (profile), and the money.
What is left is 191px of fixed controls, so the profile takes the rest
and truncates. That is why .d-pf gets min-width:0: it is a flex item, its
min-width defaults to its content, and without this the name would push
the wallet off the edge rather than ellipsing — the same trap that gave
the roster card a 326px floor. */
@media (max-width:620px) {
.d-top { flex-wrap:nowrap; gap:8px; }
.d-crumb { display:none; }
.d-chip { display:none; }
.d-tb { margin-left:auto; flex:none; gap:8px; }
/* FITS ITS NAME, and shrinks only when the row runs out. flex defaults to
0 1 auto, so the chip is as wide as its contents and no wider; the
max-width is the ceiling a long name truncates at, and min-width:0 is
what lets it give way at 320 rather than widening the page.
It used to be flex:1 1 auto with width:100%, which stretched it across
whatever the bar had spare — a chip holding "Rohit Singh" sat 167px
wide with the name floating in the left third of it. */
.d-pf { min-width:0; }
.d-pf-t { max-width:190px; }
}
@media (prefers-reduced-motion:reduce) { .d-rail { transition:none; } }
/* ── 11px IS THE FLOOR ON A PHONE, EVERYWHERE INSIDE THE SHELL ──
Thirty-six rules across four files set text between 8.5px and 10.5px on
these pages: axis labels, table headings, row labels, the segment names
inside the dasha bars, date pills, the notification-time caption. Each was
a fair call at 1280px, where the same component has half again the room.
On a phone they are collectively most of the words on the screen, and
8.5px is not a size anybody reads on a bus.
ONE BLOCK, NOT THIRTY-SIX EDITS, because scattering the same override
through four files is how the thirty-seventh gets written at 9px and
nobody notices. .d-main prefixes every selector because page CSS is
emitted AFTER the shell's, so this needs specificity rather than position
to win — and from here it wins wherever the base rule lives.
Anything that genuinely cannot hold 11px gets room made for it instead of
being allowed back under the floor.
THREE OF THESE WERE INVISIBLE LOCALLY. .d-fx (the dashboard's tithi /
nakshatra / yoga / karana row) and .c-tl-now (the "now" marker on the day
timeline) only render when there is live panchang data, and a local build
runs with COSMIQE_STALE_OK=1. They were found by running the check
against production after deploying, which is now the only way to see
them — worth remembering before trusting a local pass on these pages. */
@media (max-width:640px) {
.d-main .c-lb-i i,
.d-main .c-pf-l,
.d-main .c-scl-l,
.d-main .c-scl-t,
.d-main .c-scl-tag,
.d-main .c-scl-v,
.d-main .c-table th,
.d-main .c-tl-c b,
.d-main .c-tl-lbl,
.d-main .c-tl-night i,
.d-main .c-tl-now i,
.d-main .d-fx s,
.d-main .d-fx i,
.d-main .c-tl-t i,
.d-main .d-flc s,
.d-main .d-lk s,
.d-main .d-ovl,
.d-main .d-rate,
.d-main .d-scl,
.d-main .dl-lab i,
.d-main .dl-lab s,
.d-main .dl-life-t,
.d-main .dl-ls b,
.d-main .dl-ls i,
.d-main .dl-seg,
.d-main .dl-sg-h s,
.d-main .dl-sg-r s,
/* .dl-tbl th was here. The dasha table stacks on a phone and
hides its heads, so there is no width at which this rendered
— see the block at the end of dasha_app.py. */
.d-main .h-dl-r .h-dl-pc,
.d-main .h-f-b u,
.d-main .h-f-bn,
.d-main .h-f-hint,
.d-main .h-f-l,
.d-main .h-f-luck-t,
.d-main .h-f-tile i,
.d-main .h-trend,
/* ── THE THREE THAT MIX THEIR OWN TEXT WITH A CHILD ──
Missed for a reason in the checks rather than in the page:
shell-mobile.mjs only measured elements with no element
children at all, so anything shaped like
Finance87 or
Tithi… was never looked at, on five
horoscope pages and panchang. The eyebrow is 10.5, the anga
heading 10, and the radar label 8.5 in an SVG that renders it
at 9.0 on a 320 screen. */
.d-main .h-f-eyebrow,
.d-main .h-radar-l,
.d-main .p-anga-h,
.d-main .p-ch-h,
.d-main .p-per-h,
.d-main .p-sum i,
.d-main .st-pill-off i { font-size:11px; }
}
/* WHAT AN ASTROLOGER'S ANSWER LOOKS LIKE.
*
* Everything here is sized to sit INSIDE a chat bubble, not on a page. The
* bubble is 14px/1.62 and about 660px at its widest, so a heading that would
* be right in an article is a shout in here: the three levels land at 15,
* 14.5 and 14px and separate themselves by weight and space rather than size.
*
* Colours are tokens, never the app's literals. MessageComponents.tsx paints
* bold #111827 and blockquote #8B5CF6, which are a light-theme phone's
* colours — dropped into this site's dark theme they are near-black text on
* near-black ground and a purple that belongs to no palette here.
*/
.c-md > :first-child { margin-top:0; }
.c-md > :last-child { margin-bottom:0; }
.c-md p { margin:0 0 9px; }
/* The one thing the agents are told to do on EVERY answer: bold the planets,
signs, nakshatras and dashas. It carries most of the scanability, so it is
a real weight step and a colour step, not one or the other. */
.c-md strong { font-weight:700; color:var(--ink); }
.c-md em { font-style:italic; }
.c-md code { font-family:var(--font-mono); font-size:.92em;
padding:1px 5px; border-radius:5px;
background:var(--surface-2); color:var(--ink-2); }
/* NOT
. These come out of a language model, one turn at a time, and real
headings would let generated text rewrite the page's outline — a screen
reader would hear a document whose structure changes with every answer.
Styled as headings, absent from the outline, which is also what the app
does: MessageComponents.tsx renders them as styled . */
.c-md b.c-md-h { display:block; font-weight:700; color:var(--ink);
line-height:1.4; margin:14px 0 6px; }
.c-md b.c-md-h1 { font-size:15px; }
.c-md b.c-md-h2 { font-size:14.5px; }
.c-md b.c-md-h3 { font-size:14px; letter-spacing:.01em; }
.c-md ul, .c-md ol { margin:0 0 9px; padding-left:20px; }
.c-md li { margin:0 0 4px; }
.c-md li:last-child { margin-bottom:0; }
.c-md ul { list-style:none; padding-left:16px; }
/* A marker drawn rather than a disc, so it can take the accent and sit on the
text's first line at this line-height. */
.c-md ul > li { position:relative; padding-left:14px; }
.c-md ul > li::before { content:''; position:absolute; left:0; top:.62em;
width:5px; height:5px; border-radius:50%;
background:var(--gold-dk); }
/* Reserved by the prompt for Sade Sati, Mangal Dosha and the like — the
sentences somebody most needs to not skim past. */
/* --gold-dk on the rule, not --gold: against this block's own tinted ground
--gold measures 2.47:1 in the light theme — under the 3:1 a non-text
element carrying meaning needs, and it reads as a bar that is barely
there. --gold-dk is 4.88 light and 9.92 dark. */
.c-md blockquote { margin:9px 0; padding:8px 13px;
border-left:3px solid var(--gold-dk);
background:var(--gold-bg); border-radius:0 6px 6px 0;
color:var(--ink-2); }
.c-md blockquote p:last-child { margin-bottom:0; }
.c-md hr { height:1px; border:0; margin:13px 0;
background:var(--line-soft); }
/* The scroller belongs to the caller — it knows its own height, padding
and ground. This is the arrangement inside it. */
/* minmax(0,1fr), NOT the default auto track: an auto column sizes to
max-content and .cq-b's max-width is a percentage OF that track, so one
long reply widened the column past the viewport and carried the header
and the close button off the right edge with it. */
.cq-tx { display:grid; grid-template-columns:minmax(0,1fr); gap:14px;
justify-items:start; align-content:start; }
.cq-b { max-width:min(680px,88%); padding:12px 16px; border-radius:16px;
font-size:14px; line-height:1.62; border:1px solid var(--line);
background:var(--surface); color:var(--ink);
/* An order id, a URL or a pasted token has nowhere to break, and
one of them widens the bubble until the layout gives. */
overflow-wrap:break-word; }
/* The account's own words, on the right, the way every chat client has
done it for twenty years. Anything else reads as the astrologer talking. */
.cq-b-me { justify-self:end; background:var(--gold-bg);
border-color:var(--gold-lt); }
.cq-b s { display:block; text-decoration:none; margin-bottom:5px;
font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
text-transform:uppercase; color:var(--ink-3); }
/* The account's bubbles are plain text, so their paragraphs never get the
tightening MARKDOWN_CSS gives the astrologer's, and would otherwise
carry the browser's 1em top and bottom inside a 12px box. */
.cq-b p { margin:0 0 9px; }
.cq-b p:last-child { margin-bottom:0; }
.cq-b audio { display:block; width:100%; max-width:320px; margin-top:9px; }
/* Own prefix ch-. */
.ch-note { font-size:13.5px; line-height:1.62; color:var(--ink-2);
max-width:74ch; margin:0 0 16px; }
/* ── the filters ── */
/* `hidden` loses to a class that sets display — `[hidden]` is a
user-agent rule and any author display outranks it. Without this,
the filter row above the conversation list painted on every load
while the script still read el.hidden as true. Same fault as
.c-btn[hidden] in lib/ui.py. */
.ch-bar[hidden] { display:none; }
.ch-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
margin-bottom:14px; }
.ch-seg { display:inline-flex; border:1px solid var(--line);
border-radius:var(--r-pill); background:var(--surface);
padding:3px; }
.ch-sg { font:inherit; cursor:pointer; border:0; background:none;
padding:7px 15px; border-radius:var(--r-pill); font-size:13px;
color:var(--ink-2); }
.ch-sg-on { background:var(--gold-bg); color:var(--gold-dk);
font-weight:600; }
.ch-sel, .ch-chk { display:inline-flex; align-items:center; gap:8px;
font-size:13px; color:var(--ink-2); }
/* The system blue is the one colour on this page nobody chose. */
.ch-chk input { accent-color:var(--gold-solid); width:16px; height:16px; }
.ch-sel select { font:inherit; font-size:13px; padding:8px 11px;
border-radius:var(--r-in); border:1px solid var(--line);
background:var(--surface); color:var(--ink); }
/* ── THE FILTER ROW UNDER A THUMB ──
All / Typed / Spoken at 35px, the astrologer picker at 36, and the
archived checkbox's whole label at 22 — the smallest control on any
signed-in page. These sit in one row a thumb sweeps across, so the one
next to the one you meant is a few pixels away.
16px on the select as well: iOS zooms the document on focus for any form
control under it, exactly as it does for the chat composer, and a picker
is a control you tap. */
@media (pointer:coarse) {
.ch-sg { min-height:44px; }
.ch-sel, .ch-chk { min-height:44px; }
.ch-sel select { min-height:44px; font-size:16px; }
.ch-chk input { width:22px; height:22px; }
}
/* ── THREE CONTROLS DO NOT FIT ONE PHONE LINE, SO GIVE THEM TWO ──
Measured before this block: 106px and TWO lines at 390, 160px and THREE
at 320 — the segmented control alone, then the picker alone, then the
checkbox alone. Three ragged left-aligned rows of different widths, each
ending in whitespace, sitting above the list they filter.
The words came down first. "Typed" and "Spoken" describe how a question
was put; Chat and Call are what the two things are called everywhere
else in this product, including the buttons that start them. "Include
archived" became "Archived" — beside a row of filters the "include" was
doing no work and cost 60px, which is most of what stood between the
last two controls and one shared line.
Then the shape. The segment takes the full width in three equal parts:
a filter you sweep across should have thirds a thumb can trust, not
widths that follow how long each word happens to be. The picker and the
checkbox share the row under it. Two lines at 390 AND at 320, by
construction rather than by luck — the segment claims its own row, so
nothing about the words inside it can push a third line back. */
@media (max-width:640px) {
.ch-bar { gap:10px; }
.ch-seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
width:100%; }
.ch-sg { padding:7px 4px; }
/* BASIS 0, NOT auto. Wrapping is decided from each item's hypothetical
main size, and with `auto` that is the picker's CONTENT width — 258px,
which plus the checkbox exceeds 320 before shrinking is ever
considered, so the checkbox went to a third line anyway. A zero basis
takes the picker out of that sum and lets it grow into what is left.
min-width:0 on both, or the select's intrinsic width beats the flex. */
.ch-sel { flex:1 1 0; min-width:0; }
.ch-sel select { flex:1 1 auto; min-width:0; }
.ch-chk { flex:0 0 auto; }
}
/* ── the list ── */
/* THE SAME TRAP AS .ch-bar ABOVE. `display:grid` outranks the user-agent
`[hidden]` rule, and the list is now hidden by attribute while a
conversation is open — without this it stayed on screen under the
reader, which is the layout this change exists to remove. .ch-more and
.ch-fin set no display, so their own `hidden` still works. */
.ch-list[hidden] { display:none; }
.ch-list { display:grid; gap:10px; }
.ch-sk { height:124px; min-height:124px; border-radius:14px; }
/* The row is 154 on a phone once the title has its two lines and the meta
its reserved box, so the placeholder is too — a skeleton that is not the
height of the thing it stands in for is the jump it exists to prevent. */
@media (max-width:640px) {
.ch-sk { height:154px; min-height:154px; }
}
.ch-row { font:inherit; text-align:left; cursor:pointer; width:100%;
display:grid; gap:3px 14px; align-items:start;
grid-template-columns:auto minmax(0,1fr) auto;
padding:14px 16px; border:1px solid var(--line);
border-radius:14px; background:var(--surface); color:var(--ink);
transition:border-color .16s; }
.ch-row:hover { border-color:var(--gold-lt); }
.ch-row:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ch-av { grid-area:1 / 1 / span 3 / 2; width:42px; height:42px;
border-radius:50%; object-fit:cover; background:var(--surface-2); }
.ch-t { grid-area:1 / 2; font-family:var(--font-serif); font-size:16px;
font-weight:600; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
/* ── THE TITLE IS HOW YOU FIND THE CONVERSATION ──
nowrap and ellipsis, so at 390 two of three rows read "Whether to accep…"
and "Kaal sarp dosh a…". These titles are written from the first
question, which is exactly the part that identifies one exchange among
twenty. Two lines on a phone, clamped so the row height stays fixed —
which is what the skeleton below depends on. */
@media (max-width:640px) {
/* height, NOT min-height or a bare clamp. The row above is a fixed 124px
on purpose — the comment on .ch-p says why, and .ch-sk stands in for it
at exactly that height while the list loads. Letting the title be one
line or two put the rows at 160 / 119 / 140 against a 124px skeleton,
so the list jumped when the data landed. Both variable parts are
reserved instead, and the skeleton is retuned to the sum below. */
.ch-t { white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; line-height:1.3; height:42px; }
.ch-m { height:34px; overflow:hidden; }
}
.ch-m { grid-area:2 / 2; font-size:12.5px; color:var(--ink-3); }
.ch-m b { color:var(--ink-2); font-weight:600; }
/* TWO LINES, ALWAYS. Clamped-but-not-reserved meant a row was 104px with a
short preview and 124px with a long one, so twenty of them could not be
stood in for by a skeleton of any single height. Fixed box: every row is
124px, and the six placeholders are too. */
.ch-p { grid-area:3 / 2; margin-top:3px; font-size:13px; line-height:1.5;
height:39px; color:var(--ink-2); display:-webkit-box;
-webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ch-tags { grid-area:1 / 3 / span 3 / 4; display:flex; flex-direction:column;
align-items:flex-end; gap:6px; }
.ch-tag { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
text-transform:uppercase; padding:4px 9px;
border-radius:var(--r-pill); background:var(--surface-2);
color:var(--ink-3); white-space:nowrap; }
.ch-tag-v { background:var(--gold-bg); color:var(--gold-dk); }
@media (max-width:640px) { .ch-tag { font-size:11px; } }
.ch-empty { font-size:13.5px; line-height:1.62; color:var(--ink-2);
max-width:74ch; margin:0; padding:18px 0; }
.ch-more { margin-top:14px; }
.ch-fin { margin:16px 0 0; padding-top:15px;
border-top:1px solid var(--line-soft); font-size:13px;
color:var(--ink-3); }
.ch-more-b { font:inherit; cursor:pointer; font-size:13px; font-weight:600;
padding:10px 18px; border-radius:var(--r-in);
border:1px solid var(--line); background:var(--surface);
color:var(--ink); }
/* ── reading one back ──
IN THE PAGE, NOT OVER IT. This was position:fixed;inset:0, so opening a
conversation covered the whole viewport: no rail, no drawer, no top bar,
no wallet — the shell every other tab is read inside of simply vanished,
and the only way back was one Close button. A conversation is a place in
this account, not a lightbox over it.
So it is a card in the main column now, and the shell stays exactly
where it is. The list is hidden while it is open (see the JS) rather
than left to scroll past underneath — there is one thing on the screen
either way, but now it is one thing INSIDE the app. */
.ch-rd { display:grid; grid-template-columns:minmax(0,1fr);
grid-template-rows:auto minmax(0,1fr);
border:1px solid var(--line); border-radius:14px;
background:var(--surface); overflow:hidden; }
.ch-rd[hidden] { display:none; }
.ch-rd-bar { display:flex; align-items:center; gap:13px; padding:10px 16px;
border-bottom:1px solid var(--line); background:var(--surface); }
.ch-rd-av { width:34px; height:34px; border-radius:50%; object-fit:cover;
background:var(--surface-2); flex:0 0 auto; }
.ch-rd-h { flex:1 1 auto; min-width:0; }
.ch-rd-h b { display:block; font-family:var(--font-serif); font-size:15px;
font-weight:600; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
.ch-rd-h i { display:block; font-style:normal; font-size:12px;
color:var(--ink-3); }
.ch-rd-go { font:inherit; text-decoration:none; font-size:13px;
font-weight:600; padding:7px 14px; border-radius:var(--r-pill);
border:1px solid var(--gold-lt); background:var(--gold-bg);
color:var(--gold-dk); flex:0 0 auto; white-space:nowrap; }
.ch-rd-go[hidden] { display:none; }
.ch-rd-go:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ch-rd-x { font:inherit; cursor:pointer; font-size:13px; font-weight:600;
padding:9px 15px; border-radius:var(--r-pill);
border:1px solid var(--line); background:var(--surface-2);
color:var(--ink); }
/* minmax(0,1fr), NOT the default auto column. An auto grid track sizes to
max-content, and .ch-b's max-width is a percentage OF that track — so on
a phone one long reply widened the column past the viewport and carried
the header and the Close button off the right edge with it. Found while
building the support reader, which is the same shape. */
/* A BOUNDED SCROLLER NEEDS A BOUND. Fixed to the viewport it got its
height from `inset:0`; in the flow it has none, so a long conversation
would run the page to whatever length it liked and the bar above would
scroll away with it. dvh rather than vh, so iOS's address bar is not
counted twice. The subtraction is the shell's bar and this main's
chrome; min-height keeps a short conversation from a stubby box. */
.ch-rd-s { overflow:auto; overscroll-behavior:contain; padding:22px 18px 40px;
max-height:calc(100dvh - 250px); min-height:320px;
background:var(--surface-2); }
/* THE BUBBLES ARE u.TRANSCRIPT_CSS. They were eighteen lines here, and
the same eighteen with different numbers in support_app and admin_users
— which is how an admin came to read a reply with the asterisks still in
it. This page is where the shape was argued into place, so it is the
shape that moved. */
.ch-rd-e { justify-self:center; font-size:13.5px; color:var(--ink-3); }
@media (prefers-reduced-motion:reduce) { .ch-row { transition:none; } }