/* Chandra's screens, carried over from the first screen Prasanna approved on
   Nov 2, 2026 (research/first-page/prototypes/first-screen.html in the
   Astrology folder). Fonts are the phone's own: the security headers only
   allow files from this site. */
:root {
  --bg: #FBF7F0;
  --surface: #FFFFFF;
  --line: #E8DFD0;
  --text: #29233D;
  --muted: #5F586D;
  --accent: #3B3470;
  --on-accent: #FFFFFF;
  --user: #ECE7F7;
  --gold: #B8862E;
  --soft: #F7ECD6;
  --soft-text: #654510;
  --chip-line: #D6CCE8;
  --moon-dark: #E6DCEB;
  --field-line: #9880C6;
  --focus: #3B3470;
  --shadow: 0 1px 2px rgba(41, 35, 61, 0.06), 0 8px 24px rgba(41, 35, 61, 0.08);
  --paper: #FFFAF0;
  --paper-ink: #2A2540;
  --paper-muted: #5E576C;
  --paper-gold: #B38B3A;
  --paper-pill: #F3E7C7;
  --paper-pill-ink: #3F3110;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14122A;
    --surface: #1F1C38;
    --line: #34304F;
    --text: #F2EDE3;
    --muted: #BBB4CC;
    --accent: #EBCB85;
    --on-accent: #1A1730;
    --user: #2F2A55;
    --gold: #EBCB85;
    --soft: #3A3020;
    --soft-text: #F3DA9F;
    --chip-line: #47426C;
    --moon-dark: #3A3560;
    --field-line: #6B64A2;
    --focus: #EBCB85;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    --paper: #F6EEDB;
    --paper-ink: #29243D;
    --paper-muted: #5A5368;
    --paper-gold: #A88232;
    --paper-pill: #ECDCB4;
    --paper-pill-ink: #3A2D0E;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 var(--sans);
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
.serif { font-family: var(--serif); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
.c:focus-visible { border-radius: 20px; border-top-left-radius: 6px; }
.note:focus-visible { border-radius: 16px; }
/* A screen's heading, focused by the page so a screen reader starts there, is
   not a control and shows no ring (Prasanna, Nov 5: the greeting was circled). */
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible { outline: none; }
[hidden] { display: none !important; }
svg { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: 480px; margin: 0 auto; padding: 0 16px; }

/* Small shared pieces */
.mark {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--soft);
}
.mark svg { width: 22px; height: 22px; color: var(--gold); }
.sample {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border: 1px dashed var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font: 600 14px/1.5 var(--sans);
  white-space: nowrap;
}
.textlink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 0;
  background: none; border: 0;
  color: var(--accent);
  font-size: 17px;
  text-align: left;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.textlink.quiet { color: var(--muted); font-size: 16px; }
.textlink svg { width: 18px; height: 18px; }

/* Home */
.home-head { display: flex; align-items: center; gap: 12px; padding: 16px 0 0; }
.brand-name { margin: 0; font-family: var(--serif); font-size: 23px; line-height: 1.15; }
.brand-sub { margin: 0; color: var(--muted); font-size: 16px; }
/* The home's banner, from the studio's drawing of Nov 3: centered, the
   greeting below it stays left-aligned. */
.brand-top { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 0 0; }
.brand-top .mark { width: 54px; height: 54px; }
.brand-top .mark svg { width: 30px; height: 30px; }
.brand-top .brand-name { margin: 12px 0 0; font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: 0.01em; }
.brand-top .brand-sub { margin: 8px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.35; text-wrap: balance; }
.brand-top .orn { width: 150px; height: 18px; margin: 16px 0 0; color: var(--gold); }
.greet { margin-top: 22px; }
.greet h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 33px; line-height: 1.15; }
.today-line { margin: 8px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.4; }
.city-btn {
  position: relative;
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  text-decoration-color: var(--muted);
}
.city-btn::after { content: ""; position: absolute; inset: -12px -8px; }
.sample-day { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.ask { margin: 22px 0 12px; font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.25; }
.choices { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; }
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px 10px 18px;
  border: 1.5px solid var(--chip-line);
  border-radius: 16px;
  background: var(--surface);
  font-size: 18px; line-height: 1.35;
  text-align: left;
}
.choice:hover { border-color: var(--accent); }
.choice svg { width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s ease; }
.choice[aria-expanded="true"] svg { transform: rotate(180deg); }
.more { display: flex; flex-direction: column; gap: 8px; padding-left: 14px; border-left: 2px solid var(--line); margin-left: 10px; }
.choice.small { min-height: 48px; font-size: 17px; }
/* The box comes first: two lines, solid, the send button inside. */
.own {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 6px 6px 16px;
  border: 1.5px solid var(--chip-line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.own:focus-within { border-color: var(--accent); }
/* The box's own border shows focus, so the text area needs no ring of its own. */
.own textarea:focus-visible { outline: none; }
.own textarea {
  flex: 1; min-width: 0; min-height: 84px; max-height: 40vh; resize: none;
  field-sizing: content; /* grows with its words, the hint's too (app.js fits it where this isn't supported) */
  padding: 8px 0;
  border: 0; background: transparent;
  font-size: 18px; line-height: 1.4;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.send {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
}
.send:disabled { background: transparent; color: var(--muted); cursor: default; }
.send svg { width: 20px; height: 20px; }
/* What was typed and Chandra's reply, under the box. */
.said { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; }
.said:empty { display: none; }
.said .u { white-space: pre-wrap; }
.said .card { margin: 0; }
.home-note { margin: 14px 0 0; }
.home-links { display: flex; flex-direction: column; align-items: flex-start; margin: 22px 0 0; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* Conversation */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.bar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; }
.bar-brand .mark { width: 34px; height: 34px; }
.bar-brand .mark svg { width: 19px; height: 19px; }
.back {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 8px 0 0;
  border: 0; background: none;
  color: var(--text); font-size: 17px;
}
.back svg { width: 20px; height: 20px; }
.log { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 150px; }
.c, .u {
  margin: 0;
  max-width: 92%;
  padding: 12px 16px;
  border-radius: 20px;
}
.c {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top-left-radius: 6px;
  font-family: var(--serif); font-size: 18px; line-height: 1.5;
}
/* Chandra's fixed replies keep their line breaks, so one can be laid out in
   short lines. Claude's own replies flow as written. */
.c.fixed { white-space: pre-line; }
.u {
  align-self: flex-end;
  background: var(--user);
  border-bottom-right-radius: 6px;
  font-size: 17px;
}
/* A phone number in the crisis reply. The words sit exactly where they would
   without the link; an invisible area at least 44 px each way, centred on the
   words, takes the tap. Where two areas would overlap, app.js's settleCalls
   has each reach away from the other: lead to the left and tail to the right
   on one line, up and down on lines next to each other. */
.c a.call {
  display: inline-block;
  position: relative;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  /* A number never splits across lines ("116 123" must not read as 116). */
  white-space: nowrap;
}
.c a.call::before {
  content: "";
  position: absolute;
  width: max(100%, 44px); height: max(100%, 44px);
  left: calc(50% - max(50%, 22px)); top: calc(50% - max(50%, 22px));
}
.c a.call.lead::before { left: auto; right: 0; }
.c a.call.tail::before { left: 0; }
.c a.call.lead.tail::before { left: 0; width: 100%; }
.c a.call.up::before { top: auto; bottom: 0; }
.c a.call.down::before { top: 0; }
.c a.call.up.down::before { top: 0; height: 100%; }
.enter { animation: rise 0.3s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel { display: flex; flex-direction: column; gap: 12px; margin: 2px 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 48px;
  padding: 10px 18px;
  border: 1.5px solid var(--chip-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 17px; line-height: 1.3;
  text-align: left;
}
.chip:hover { border-color: var(--accent); }
.primary {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: 0; border-radius: 16px;
  background: var(--accent); color: var(--on-accent);
  font-size: 18px; font-weight: 600;
}
.primary:disabled { opacity: 0.45; cursor: default; }
.secondary {
  width: 100%;
  min-height: 48px;
  padding: 10px 20px;
  border: 1.5px solid var(--chip-line); border-radius: 16px;
  background: transparent;
  font-size: 17px;
}
.box {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.box-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.box-title { margin: 0; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .field > label > span { color: var(--muted); font-size: 16px; }
.input, .field input {
  width: 100%; min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--field-line);
  border-radius: 12px;
  background: var(--bg);
  font-size: 17px;
  -webkit-appearance: none; appearance: none;
}
.field input:focus-visible, .input:focus-visible { outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.combo { position: relative; }
.options {
  display: flex; flex-direction: column;
  max-height: 264px; overflow-y: auto;
  margin-top: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.option {
  /* Rows keep their height in the capped list, so a long label wraps onto a
     second line and the list scrolls, rather than squeezing the row. */
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--line);
  background: none;
  text-align: left; font-size: 17px;
}
.option:last-child { border-bottom: 0; }
.option:hover, .option:focus-visible, .option.active { background: var(--user); }
.option .alt { color: var(--muted); }
.fact { margin: 0; font-size: 17px; }
.fact .k { color: var(--muted); font-size: 15px; display: block; }
.rasi-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.hint { margin: 0; color: var(--muted); font-size: 16px; }
.field-error { margin: 2px 0 0; color: var(--soft-text); font-size: 16px; }
.bar-right { display: flex; align-items: center; gap: 16px; }
.bar-brand, .back, .form-link { white-space: nowrap; }
@media (max-width: 340px) { .bar:has(#form-link:not([hidden])) .brand-name { display: none; } }
.form-link { font-size: 16px; }
.found { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--soft-text); font-size: 17px; }
.note {
  margin: 4px 0 6px;
  padding: 14px 16px;
  border: 1.5px dashed var(--chip-line);
  border-radius: 16px;
  color: var(--muted);
  font-size: 16px;
}
.note p { margin: 0 0 4px; }
.note .label { font-weight: 600; color: var(--text); }
.working { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--muted); font-size: 16px; }
.working svg { width: 20px; height: 20px; color: var(--gold); animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.composer .page { display: flex; gap: 8px; align-items: center; }
.composer input {
  flex: 1; min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--field-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 17px;
}
.composer .send { border-radius: 50%; }

/* The card, kept from the Nov 1 card prototype */
.card {
  position: relative;
  margin: 8px 0 4px;
  padding: 34px 24px 26px;
  border-radius: 6px;
  background: var(--paper);
  background-image: radial-gradient(120% 70% at 50% 0%, rgba(214, 180, 105, 0.12), transparent 70%);
  color: var(--paper-ink);
  box-shadow: var(--shadow);
  font-family: var(--serif);
  text-align: center;
}
.card::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--paper-gold); border-radius: 3px; opacity: 0.75; pointer-events: none; }
.card::after { content: ""; position: absolute; inset: 13px; border: 0.5px solid var(--paper-gold); border-radius: 2px; opacity: 0.35; pointer-events: none; }
.card > * { position: relative; }
.card .sample { position: absolute; top: 18px; right: 18px; border-color: var(--paper-muted); color: var(--paper-muted); font-size: 13px; z-index: 1; }
.card .cmoon { display: block; width: 34px; height: 34px; margin: 0 auto 10px; color: var(--paper-gold); }
.card .eyebrow { margin: 0 0 8px; font-family: var(--sans); font-size: 15px; letter-spacing: 0.04em; color: var(--paper-muted); }
.card .lead { margin: 0 auto 16px; max-width: 26ch; font-style: italic; font-size: 18px; line-height: 1.4; }
.card .day { margin: 0; font-weight: 500; line-height: 1.1; }
/* The weekday shrinks to fit the card whole at large text sizes: 17% of the
   card's width holds "Wednesday," in Noto Serif, Android's serif and the
   widest face measured (5.73 times its size at weight 500; Georgia 5.38),
   and at normal sizes on a 320 px phone it is more than 40 px, so
   nothing changes there. A browser without container units keeps the plain size. */
.card { container-type: inline-size; }
.card .wd { display: block; font-size: 40px; font-size: min(40px, 17cqi); }
/* The date line stays at most 0.8 of the weekday (0.8 x 17cqi), so at 200% page
   zoom it never reads bigger than the day. At 320 px and up it stays 22px. */
.card .dt { display: block; margin-top: 4px; font-size: 22px; font-size: min(22px, 13.6cqi); color: var(--paper-muted); }
.card .day2 { margin: 0; font-weight: 500; font-size: 25px; font-size: min(25px, 17cqi); line-height: 1.2; }
/* A Tamil weekday is one long word. செவ்வாய்க்கிழமை, the widest, is 10.83 times
   its size wide in Noto Serif Tamil at weight 500 (Android's Tamil faces; Noto
   Sans Tamil 10.40) and about 8 in this Mac's, against 5.73 for "Wednesday,".
   On a Tamil card the weekday takes 8.5% of the card's width (8.5 x 10.83 =
   92%), so it stays whole on one line at 375 px (25 px). It never goes below
   1rem, so it grows with zoom (WCAG 1.4.4). When the word is too wide for that
   it breaks only at its joint, the <wbr> tamilJoints() puts before கிழமை, and
   nowhere else. The widest first half, செவ்வாய்க், is 6.53 times its size
   wide, which fits the card's 108 px at 200% zoom up to 16.5 px: hence 1rem.
   English is unchanged. */
.card:lang(ta) .wd { font-size: max(1rem, min(40px, 8.5cqi)); overflow-wrap: normal; }
.card:lang(ta) .day2 { font-size: max(1rem, min(25px, 8.5cqi)); overflow-wrap: normal; }
.card .pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 4px; padding: 8px 16px;
  border-radius: 999px;
  background: var(--paper-pill); color: var(--paper-pill-ink);
  font: 600 17px/1.3 var(--sans);
}
.card .pill svg { width: 16px; height: 16px; }
/* A time outside the occasion's hours, among pills that suit it: same size, quieter. */
.card .pill.quiet { background: transparent; color: var(--paper-muted); box-shadow: inset 0 0 0 1px var(--paper-gold); font-weight: 500; }
.card .city { margin: 2px 0 0; font-family: var(--sans); font-size: 15px; color: var(--paper-muted); }
/* "Also good": quieter than the pills, but body size so it reads on a phone. */
/* A clock range kept together: it moves to the next line whole, and breaks inside only when wider than the line. */
.card .keep { display: inline-block; }
.card .also { margin: 14px auto 0; max-width: 30ch; font-family: var(--sans); font-size: 17px; line-height: 1.45; color: var(--paper-muted); text-wrap: pretty; }
.card .why { margin: 14px auto 0; max-width: 28ch; font-size: 18px; line-height: 1.45; }
.card .orn { display: block; width: 150px; height: 18px; margin: 22px auto 18px; color: var(--paper-gold); }
.card .sign { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 24px 0 0; font-size: 16px; color: var(--paper-muted); }
.card .sign svg { width: 15px; height: 15px; color: var(--paper-gold); }
.share { display: flex; align-items: center; justify-content: center; gap: 10px; }
.share svg { width: 20px; height: 20px; }
.share-row { margin: 14px 0 0; }

/* The share sheet and a shared card's page use the approved sheet's styles
   below ("Sheets", "Arrival from a shared card"); these are the additions. */
.sheet .share-note { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.sheet .textlink { margin-top: 6px; }
.sheet .msg .msg-text { overflow-wrap: anywhere; }
.arrive-top .brand-name { font-weight: 700; }
a.as-button { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }

/* Today */
.t-head { margin: 22px 0 0; }
.t-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.t-title h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; }
/* The switch, the arrows and the week, as the studio drew them (home-changes-2026-11-03). */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 16px 0 0; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.seg button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 17px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin: 14px 0 0; }
.arrow { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--chip-line); border-radius: 50%; background: var(--surface); color: var(--text); }
.arrow svg { width: 20px; height: 20px; }
.arrow:disabled { opacity: 0.35; cursor: default; }
.period { margin: 0; text-align: center; font-family: var(--serif); font-size: 19px; line-height: 1.3; text-wrap: balance; color: var(--text); }
.period:focus { outline: none; }
.to-today { display: flex; justify-content: center; }
.week { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.wrow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left;
}
.wrow.now { background: var(--soft); border-radius: 12px; }
.wrow .d { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.wrow .wd { color: var(--muted); font-size: 14px; }
.wrow .n { font-family: var(--serif); font-size: 24px; }
.wrow .nm { display: flex; flex-direction: column; min-width: 0; }
.wrow .ti { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.wrow .st { color: var(--muted); font-size: 15px; line-height: 1.35; }
/* The month: drawing 1, the Moon's shape in each square (home-changes-2026-11-03). */
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: 18px 0 0; }
.mgrid .h { padding: 4px 0; text-align: center; color: var(--muted); font-size: 13px; }
.mcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 56px; padding: 6px 0; border: 1.5px solid transparent; border-radius: 12px;
  background: none; color: var(--text); font-family: var(--serif); font-size: 18px; line-height: 1;
}
.mcell .moon { width: 18px; height: 18px; }
.mcell.now { border-color: var(--accent); }
.mcell[aria-pressed="true"] { background: var(--soft); }
.mcell:disabled { cursor: default; color: var(--muted); }
/* A Moon's room is kept while its week is on its way, so nothing moves. */
.mcell .slot { display: inline-block; width: 18px; height: 18px; }
.mcell .in { animation: fadein 0.35s ease-out both; }
@keyframes fadein { from { opacity: 0; } }
/* Under 360 px, seven 44 px squares need the grid to reach into the page's side margins. */
@media (max-width: 359px) { .mgrid { gap: 0; margin-left: -10px; margin-right: -10px; } }
.mpanel { margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.mpanel h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; }
.mpanel .t-rows { margin-top: 10px; }
.moon { width: 22px; height: 22px; }
.moon .dark { fill: var(--moon-dark); }
.moon .lit { fill: var(--gold); }
.moon .ring { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.t-big {
  margin: 22px 0 0; padding: 18px;
  border-radius: 18px;
  background: var(--soft); color: var(--soft-text);
}
.t-big h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--text); }
.t-big p { margin: 6px 0 0; font-size: 17px; color: var(--text); }
.t-sec { margin: 26px 0 0; }
.t-sec h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 21px; }
.t-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.t-rows li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.t-rows .k { display: block; color: var(--muted); font-size: 15px; }
.go {
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface);
}
.go p { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.go-list { margin: 0; padding: 0; list-style: none; }
.go-list li { font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.go-list li + li { margin-top: 6px; }
details.why-times summary {
  display: flex; align-items: center;
  min-height: 44px; margin-top: 6px;
  color: var(--accent); font-size: 16px;
  text-decoration: underline; text-underline-offset: 4px;
  list-style: none; cursor: pointer;
}
details.why-times summary::-webkit-details-marker { display: none; }
details.why-times p { margin: 4px 0 0; font-family: var(--sans); font-size: 16px; color: var(--muted); }
.t-foot { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }

/* Sheets */
dialog {
  width: 100%; max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: auto auto 0;
  padding: 0;
  border: 0; border-radius: 22px 22px 0 0;
  background: var(--bg); color: var(--text);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
}
dialog::backdrop { background: rgba(20, 18, 42, 0.45); }
.sheet { padding: 8px 20px calc(28px + env(safe-area-inset-bottom)); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; position: sticky; top: 0; z-index: 1; background: var(--bg); }
.sheet-top h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 23px; }
.close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; color: var(--text); }
.close svg { width: 22px; height: 22px; }
.sheet h3 { margin: 22px 0 6px; font-size: 17px; }
.sheet p { margin: 0 0 10px; }
.sheet .lede { font-family: var(--serif); font-size: 19px; }
.sheet .never { margin: 0 0 10px; padding-left: 22px; }
.sheet .never li { margin: 0 0 4px; }

/* Arrival from a shared card */
.arrive-top { display: flex; align-items: center; gap: 12px; padding: 20px 0 0; }
/* A language's name never breaks; the subtitle takes the squeeze. */
.arrive-top > div { flex: 1 1 auto; min-width: 0; }
.arrive-top .langs { flex: none; }
.arrive-note { margin: 26px 0 10px; color: var(--muted); font: inherit; }
.arrive-actions { display: flex; flex-direction: column; gap: 4px; margin: 22px 0 0; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* Sample fills, the way back to a conversation, matching checks, the share preview */
.fill-row { display: flex; }
.fill {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px dashed var(--muted);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 16px; font-weight: 600;
}
.fill:hover { border-color: var(--text); color: var(--text); }
.resume {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 26px 0 0;
  padding: 12px 16px 12px 18px;
  border: 0;
  border-radius: 16px;
  background: var(--soft); color: var(--soft-text);
  font-size: 18px; line-height: 1.35;
  text-align: left;
}
.resume svg { width: 18px; height: 18px; }
.greet-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 2px 0 0; }
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0 -6px 0 auto; }
.lang {
  min-height: 44px; min-width: 44px;
  padding: 0 6px;
  border: 0; background: none;
  color: var(--accent);
  font-size: 17px;
  white-space: nowrap;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.langs .dot { color: var(--muted); }
div.c p { margin: 0; }
.c .checks { margin: 6px 0 12px; padding-left: 22px; }
.c .checks:last-child { margin-bottom: 0; }
.c .checks li { margin: 0 0 4px; }
.card .day + .lead { margin-top: 12px; }
.card .card-lines { margin: 10px 0 4px; padding: 0; list-style: none; }
.card .card-lines li { margin: 0 0 4px; }
.c .c-note { margin-top: 8px; font-size: 15px; color: var(--muted); }
.msg {
  max-width: 320px;
  margin: 6px 0 18px auto;
  padding: 6px 6px 12px;
  border-radius: 18px 18px 6px 18px;
  background: var(--user);
}
.msg-card {
  position: relative;
  padding: 18px 12px 16px;
  border-radius: 13px;
  background: var(--paper); color: var(--paper-ink);
  font-family: var(--serif);
  text-align: center;
}
.msg-card svg { display: block; width: 22px; height: 22px; margin: 0 auto 6px; color: var(--paper-gold); }
.sheet .msg p { margin: 0; }
.msg-card .sample { position: absolute; top: 10px; right: 10px; border-color: var(--paper-muted); color: var(--paper-muted); font-size: 12px; }
.sheet .msg .mc-day { font-size: 26px; line-height: 1.15; }
/* A Tamil weekday stays whole in the small card too (see .card:lang(ta) .wd). */
.msg-card { container-type: inline-size; }
.sheet .msg .msg-card:lang(ta) .mc-day { font-size: max(1rem, min(26px, 8.5cqi)); overflow-wrap: normal; }
.sheet .msg .mc-date { color: var(--paper-muted); font-size: 16px; }
.sheet .msg .mc-pill {
  display: inline-block;
  margin-top: 10px; padding: 4px 12px;
  border-radius: 999px;
  background: var(--paper-pill); color: var(--paper-pill-ink);
  font: 600 14px/1.3 var(--sans);
}
.msg-meta { padding: 8px 8px 0; }
.sheet .msg .msg-title { font-weight: 600; font-size: 16px; }
.sheet .msg .msg-site { color: var(--muted); font-size: 14px; }
.sheet .msg .msg-text { margin: 8px 8px 0; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
  .working svg { animation: none; opacity: 1; }
  .choice svg { transition: none; }
}

/* Added for the real page: the content policy allows no inline styles. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bar-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.t-line { display: block; }
.build-note { margin: 12px 0 0; color: var(--muted); font-size: 16px; }

/* The plain form, from the approved plain form */
.f-page { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.f-head { margin: 22px 0 0; }
.f-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; text-wrap: balance; }
.f-lede { margin: 6px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.f-form { display: flex; flex-direction: column; gap: 28px; margin: 20px 0 0; }
.f-sec { min-width: 0; margin: 0; padding: 0; border: 0; }
.f-q { padding: 0; margin: 0 0 12px; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.3; }
.f-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.f-body:empty { display: none; }
.f-subq { margin: 0; font-size: 17px; }
.f-form .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--user); font-weight: 600; }
.f-person { display: flex; flex-direction: column; gap: 10px; }
.f-person + .f-person { padding-top: 14px; border-top: 1px solid var(--line); }
.f-selwrap { position: relative; }
.f-select {
  width: 100%; min-width: 0; min-height: 48px;
  padding: 10px 40px 10px 12px;
  border: 1.5px solid var(--field-line); border-radius: 12px;
  background: var(--bg); color: var(--text);
  font-size: 17px;
  -webkit-appearance: none; appearance: none;
}
.f-selwrap svg { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.f-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.f-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.f-check-hint { margin-top: -12px; padding-left: 34px; }
.f-answer { display: flex; flex-direction: column; gap: 10px; margin: 28px 0 0; }
.f-answer:empty { display: none; }
@media (max-width: 340px) { #formv .bar .brand-name { display: none; } }
/* Added for the real page */
.options-empty { padding: 10px 12px; }
.card .card-note { margin: 18px auto 0; max-width: 30ch; font-family: var(--sans); font-size: 15px; line-height: 1.4; color: var(--paper-muted); }
.f-rest { display: flex; flex-direction: column; gap: 28px; }

/* The privacy note: the first layer before an invited family's first chat or
   form, and the details, one tap away or reopened from Privacy. */
.pn { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.pn-title { margin: 22px 0 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; text-wrap: balance; }
.pn p { margin: 12px 0 0; }
.pn-details h2 { margin: 26px 0 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; }
#n-first .textlink { margin-top: 8px; }
.pn-actions { margin: 28px 0 0; }
/* A note line in two forms: .pn-earlier for an invite whose yes was to an earlier version, .pn-fresh for the rest (app.js, drawNote). */
main.pn:not([data-earlier]) .pn-earlier, main.pn[data-earlier] .pn-fresh { display: none; }
.pn-langs { justify-content: flex-end; margin: 10px -6px 0 0; }
/* The Tamil title misses one line at 375 px by a hair at 30 px; one line reads better than a lone first word. */
.pn-title:lang(ta) { font-size: 27px; }