/* Local only: system fonts, no external stylesheet, no web font.
 *
 * THE TAMIL SCRIPT IS RENDERED IN A FACE THE MACHINE ALREADY HAS. The server
 * makes no outbound request and serves a content-security policy that permits
 * 'self' only, so there is no font CDN here and nothing to add one to. The
 * stack below names the Tamil faces that ship with macOS, iOS, Windows and
 * Android, with a generic sans-serif last. If a machine has none of them the
 * text comes out as boxes -- a visible failure rather than a silent
 * substitution, which is the right way round.
 *
 * The Tamil faces run taller than the Latin ones at the same nominal size, so
 * the .ta rules below give the script a little more line height rather than
 * letting it crowd. Nothing else about the layout changes with the language.
 */
:root {
  --ink: #1b1b1b;
  --dim: #5a5a5a;
  --faint: #8a8578;
  --line: #ddd9d1;
  --bg: #faf8f4;
  --card: #ffffff;
  --warn-bg: #fdf3e3;
  --warn-line: #b5731a;
  --stop-bg: #fcecec;
  --stop-line: #a32d2d;
  --good: #1d6b3f;
  --good-bg: #edf5f0;
  --poor: #8c3a3a;
  --poor-bg: #f7eeee;
  --accent: #2b4a7a;
  --accent-soft: #eef1f8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

body.ta {
  font-family: "Tamil Sangam MN", "Tamil MN", "Nirmala UI", Latha,
               "Noto Sans Tamil", "Noto Serif Tamil", -apple-system,
               BlinkMacSystemFont, sans-serif;
  line-height: 1.75;
}
body.ta table.data, body.ta table.small { line-height: 1.6; }
body.ta .si-grahas { font-size: 0.7rem; line-height: 1.4; }
body.ta .si-sign { font-size: 0.58rem; }

header, main, footer { max-width: 60rem; margin: 0 auto; }

/* ---- top bar ---- */
.topbar { display: flex; justify-content: space-between; align-items: center;
          gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0 0.4rem; }
.brand { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; }
.brand a { color: inherit; text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 1.2rem;
                flex-wrap: wrap; }
.langpick { display: flex; align-items: center; gap: 0.4rem; font-weight: 400;
            margin: 0; }
.langpick .langlabel { font-size: 0.78rem; color: var(--dim); }
.langpick select { width: auto; padding: 0.25rem 1.4rem 0.25rem 0.4rem;
                   font-size: 0.85rem; }

h1 { font-size: 1.6rem; margin: 1.2rem 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.9rem; }
h3 { font-size: 0.8rem; margin: 1.5rem 0 0.5rem; text-transform: uppercase;
     letter-spacing: 0.07em; color: var(--dim); }
h4 { font-size: 0.78rem; margin: 0 0 0.5rem; text-transform: uppercase;
     letter-spacing: 0.07em; color: var(--dim); }
body.ta h3, body.ta h4 { text-transform: none; letter-spacing: 0; }
.lede { color: var(--dim); max-width: 46rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  margin: 1rem 0;
  /* A wide table scrolls inside its own card rather than giving the whole
     page a horizontal scrollbar. On a phone the positions table and the
     Shadbala table are both wider than the screen, and a page that slides
     sideways loses the reader's place in everything else on it. */
  overflow-x: auto;
}

/* ---- the report head ---- */
.reporthead { margin: 1.2rem 0 0.4rem; }
.report-name { font-size: 1.5rem; margin: 0; }
.report-sub { color: var(--dim); margin: 0.2rem 0 0; font-size: 0.95rem; }

.actions.bar { margin: 0.8rem 0 0.4rem; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 0.45rem;
          font-weight: 600; font-size: 0.9rem; margin: 0; }
.toggle input { width: auto; margin: 0; }
#advancedHint { flex: 1 1 18rem; margin: 0; }
.advhead { font-size: 1.3rem; margin: 2rem 0 0.3rem;
           padding-top: 1.2rem; border-top: 2px solid var(--line); }

/* ---- forms ---- */
.field { margin-bottom: 1.1rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > .field { flex: 1 1 14rem; }

label { display: block; font-weight: 600; font-size: 0.9rem;
        margin-bottom: 0.3rem; }
.opt { font-weight: 400; color: var(--dim); }

/* A declaration the reader ticks, not a field label. Normal weight and a
   readable size, because this is a sentence to be read and agreed with
   rather than a caption for a box -- the 0.9rem bold used above is for
   naming an input, and setting a declaration in it makes it look like
   furniture. The checkbox sits on the first line with the text beside it. */
.check label { display: flex; gap: 0.5rem; align-items: baseline;
               font-weight: 400; font-size: 1rem; }
.check input[type=checkbox] { width: auto; margin: 0; flex: none; }
.check .hint { margin-top: 0.4rem; }

input[type=text], input[type=date], input[type=time], input[type=number],
input[type=password], select {
  width: 100%;
  padding: 0.45rem 0.5rem;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid #b8b2a8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }
/* :user-invalid, not :invalid -- a required field is "invalid" the moment
   the page loads, and outlining every empty field in red before anyone has
   typed anything reads as a page full of errors. */
input:user-invalid { border-color: var(--stop-line); }

.hint { font-size: 0.84rem; color: var(--dim); margin: 0.35rem 0 0; }
.hint.ours-note { border-left: 3px solid var(--warn-line);
                  padding-left: 0.7rem; }
.small-note { font-size: 0.78rem; color: var(--dim); }

button {
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary { background: #fff; color: var(--accent); }
.actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.actions a { text-decoration: none; }

details { margin-top: 0.6rem; }
summary { cursor: pointer; font-size: 0.88rem; color: var(--accent); }
details > *:not(summary) { margin-top: 0.75rem; }

a { color: var(--accent); }

/* ---- notices ---- */
.error, .notice {
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  font-size: 0.88rem;
  margin-top: 1rem;
  white-space: pre-wrap;
}
.error { background: var(--stop-bg); border-left: 4px solid var(--stop-line);
         color: #6d1f1f; }
.notice { background: #f3f3f0; border-left: 4px solid #b4afa4; }
.notice.stop { background: var(--stop-bg); border-left-color: var(--stop-line); }

.ack { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400;
       margin-top: 1.25rem; font-size: 0.92rem; padding: 0.8rem 0.9rem;
       background: var(--accent-soft); border-radius: 5px; }
.ack input { margin-top: 0.3rem; width: auto; }

/* ---- key/value ---- */
dl.kv { display: grid; grid-template-columns: max-content 1fr;
        gap: 0.25rem 1rem; margin: 0; font-size: 0.9rem; }
dl.kv dt { color: var(--dim); }
dl.kv dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo,
           Consolas, monospace; font-size: 0.86rem; overflow-wrap: anywhere; }

/* ---- tables ---- */
table.data, table.small { width: 100%; border-collapse: collapse;
                          font-size: 0.88rem; }
table.data th, table.data td, table.small td, table.small th {
  text-align: left; padding: 0.38rem 0.5rem;
  border-bottom: 1px solid var(--line); }
table.data th { font-size: 0.72rem; text-transform: uppercase;
                letter-spacing: 0.06em; color: var(--dim);
                white-space: nowrap; }
body.ta table.data th { text-transform: none; letter-spacing: 0;
                        font-size: 0.78rem; }
table.data td.num, table.data th.num { text-align: right;
  font-variant-numeric: tabular-nums; }
table.small td:first-child { white-space: nowrap; }
table.data tr.current { background: var(--accent-soft); font-weight: 600; }
tr.lagna-row { background: var(--accent-soft); font-weight: 600; }

/* ---- the south indian squares ----
   Full planet names, not abbreviations, so the cells are taller and the rows
   size to their contents rather than to a fixed height. */
.chart-grid { display: flex; gap: 2rem; flex-wrap: wrap; }
.chart-grid > div { flex: 1 1 19rem; }

.south-indian {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(6rem, auto);
  border: 2px solid var(--ink);
  max-width: 24rem;
  background: #fff;
}
.si-cell { border: 1px solid var(--line); padding: 0.2rem 0.3rem;
           position: relative; overflow: hidden; }
.si-cell.lagna { background: var(--accent-soft);
                 box-shadow: inset 0 0 0 2px var(--accent); }
.si-sign { font-size: 0.62rem; text-transform: uppercase;
           letter-spacing: 0.04em; color: var(--dim); padding-right: 1.1rem; }
body.ta .si-sign { text-transform: none; letter-spacing: 0; }
.si-house { position: absolute; top: 0.15rem; right: 0.3rem;
            font-size: 0.62rem; color: var(--faint); }
.si-grahas { font-size: 0.74rem; font-weight: 600; margin-top: 0.15rem;
             line-height: 1.35; }
.si-lagna { color: var(--accent); font-weight: 700; }
.si-inner { grid-column: 2 / 4; grid-row: 2 / 4; display: flex;
            flex-direction: column; align-items: center;
            justify-content: center; text-align: center; font-size: 0.74rem;
            color: var(--dim); padding: 0.5rem; }

/* ---- vimshottari, with expandable rows ---- */
.runline { font-weight: 600; margin: 0.6rem 0 0.8rem; }
.dasatable td:first-child { padding: 0.2rem 0.3rem; }
button.rowtoggle { background: none; border: none; color: var(--ink);
                   font: inherit; font-weight: 600; padding: 0.2rem 0.3rem;
                   display: inline-flex; gap: 0.4rem; align-items: baseline;
                   cursor: pointer; text-align: left; }
button.rowtoggle .caret { color: var(--accent); font-size: 0.8rem; }
.rowflat { padding-left: 1.3rem; display: inline-block; }
tr.bhukti-row > td { background: #fbfaf7; padding: 0.3rem 0.5rem 0.9rem
                     2rem; }
.bhuktis table.data { max-width: 34rem; }
.bhuktis h4 { margin: 0.6rem 0 0.3rem; }

/* ---- pills: the condition of a planet, at a glance ----
   A word from the classical dignity table, with a colour. There is no number
   behind any of these: mapping exalted/own/neutral/debilitated onto a scale
   would be inventing a quantity this project has not declared anywhere. */
.pill { display: inline-block; font-size: 0.76rem; font-weight: 600;
        padding: 0.1rem 0.5rem; border-radius: 10px; margin-right: 0.3rem;
        white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.poor { background: var(--poor-bg); color: var(--poor); }
.pill.warn { background: var(--warn-bg); color: var(--warn-line); }
.pill.flat { background: #f0efec; color: var(--dim); }

/* ---- the two-column panels: benefic/malefic, favourable/unfavourable ---- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
          margin-top: 1rem; }
.twocol .col { border: 1px solid var(--line); border-radius: 6px;
               padding: 0.8rem 0.9rem; }
.twocol .col.good { border-color: #bcd6c6; background: var(--good-bg); }
.twocol .col.poor { border-color: #dcc0c0; background: var(--poor-bg); }
.twocol .col.good h4 { color: var(--good); }
.twocol .col.poor h4 { color: var(--poor); }
.ruleList, .yogaList { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.ruleList li, .yogaList li { margin-bottom: 0.5rem; }
.ruleStatement { }
.ruleWhere { color: var(--dim); font-size: 0.8rem; }
.yogaName { font-weight: 600; }
.yogaPhrase { font-size: 0.82rem; color: var(--dim); margin-top: 0.1rem; }
@media (max-width: 44rem) { .twocol { grid-template-columns: 1fr; } }

/* ---- area-of-life bars ---- */
.domaintable td { vertical-align: middle; }
.domaintable .domlabel { font-weight: 600; }
.pct { position: relative; height: 1.3rem; min-width: 10rem;
       background: #eceae5; border-radius: 3px; }
.pct-fill { position: absolute; left: 0; top: 0; bottom: 0;
            background: #c9d6ea; border-radius: 3px 0 0 3px; }
.pct-num { position: absolute; right: 0.4rem; top: 0; line-height: 1.3rem;
           font-size: 0.78rem; color: var(--ink);
           font-variant-numeric: tabular-nums; }
.pct-num.left { right: auto; left: 0.4rem; }
.pct-none { font-size: 0.8rem; color: var(--dim); font-style: italic; }
.pct-empty { font-size: 0.76rem; color: var(--warn-line);
             margin-top: 0.2rem; }
.pct-span { position: absolute; top: 0; bottom: 0; background: #b6c6e0; }
.pct-mark { position: absolute; top: -2px; bottom: -2px; width: 2px;
            background: var(--accent); }
.fromcell summary { font-size: 0.82rem; }
.domdetail { margin-top: 0.5rem; }
.domdetail table.data { font-size: 0.8rem; }

/* ---- advanced view: the detail cards ---- */
.ev { border: 1px solid var(--line); border-radius: 5px; padding: 0.9rem 1rem;
      margin-bottom: 0.8rem; background: #fff; }
.ev-head { display: flex; justify-content: space-between; gap: 1rem;
           align-items: baseline; flex-wrap: wrap; }
.ev-q { font-weight: 600; font-size: 0.92rem; }
.ev-meta { font-size: 0.8rem; color: var(--dim); }
.verdict { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
           text-transform: uppercase; padding: 0.15rem 0.5rem;
           border-radius: 3px; white-space: nowrap; }
.verdict.hit { background: var(--good-bg); color: var(--good); }
.verdict.miss { background: var(--poor-bg); color: var(--poor); }
.verdict.na { background: #efefec; color: var(--dim); }
.ev-detail { font-size: 0.84rem; margin-top: 0.6rem; }
.lordline { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
            monospace; font-size: 0.84rem; }
.in { color: var(--good); font-weight: 700; }
.out { color: var(--poor); font-weight: 700; }
.muted-cell { color: var(--faint); }
#advFiredRules .ev-detail { border-top: 1px dotted var(--line);
                            padding-top: 0.5rem; }
#advFiredRules .ev-detail:first-of-type { border-top: none; }
#advGrahas td, #advBhavas td { vertical-align: top; }
#advBhavas td:nth-child(3) { font-size: 0.82rem; }
#advCornerHint { white-space: pre-line; }
.scoretable td, .scoretable th { vertical-align: middle; }
.scoretable .domlabel { font-weight: 600; }
.scoretable .domsub { display: block; font-size: 0.74rem; color: var(--dim);
                      font-weight: 400; }

/* the tradition on the left, our own choices on the right. The right-hand
   list is longer, which is the point of printing both. */
.prov { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
        margin-top: 0.6rem; }
.prov > div { border: 1px solid var(--line); border-radius: 4px;
              padding: 0.6rem 0.75rem; }
.prov ul { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; }
.prov ul li { margin-bottom: 0.25rem; }
.prov .ours { border-color: var(--warn-line); background: var(--warn-bg); }
@media (max-width: 40rem) { .prov { grid-template-columns: 1fr; } }

/* ---- account bar, sign-in page ---- */
.account-bar { display: flex; gap: 0.75rem; align-items: baseline;
               font-size: 0.85rem; color: var(--dim); min-height: 1.2rem; }
.account-bar .who { font-weight: 600; color: var(--ink); }
button.linkish { background: none; color: var(--accent); border: none;
                 padding: 0; font-size: 0.85rem; text-decoration: underline;
                 cursor: pointer; }

footer { margin-top: 2.5rem; padding-top: 1rem;
         border-top: 1px solid var(--line); font-size: 0.82rem;
         color: var(--dim); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: 0.85em; background: #f1f0ec; padding: 0.05rem 0.25rem;
       border-radius: 3px; }

/* ---- the dasa favourability band, and the rating that comes first ----
 *
 * THE PALETTE IS A PLACEHOLDER AND IS MEANT TO LOOK LIKE ONE. The dasa-phala
 * grid is net-malefic -- 201 adverse dicta to 150 favourable -- so a
 * saturated red/green band shows most readers most of their life in the
 * adverse colour, and how plainly that material should read is the owner's
 * decision, reserved by rules/dasa-phala/SCHEMA.yaml's "TONE IS NOT SMOOTHED"
 * section. These reuse the two restrained tones already in the palette
 * (--good / --poor, used by the strength bars) rather than introducing a
 * harsher or a softer pair. See demo/dasa-band.yaml
 * presentation.owner_choices_outstanding.
 *
 * THREE THINGS HERE ARE NOT STYLING. (1) There is no midpoint colour: mixed,
 * descriptive, undefined-in-text and remedy each get their own treatment,
 * because a grey centre would merge four states the pre-registration says
 * must never be summed. (2) The two provenance strata are drawn as separate
 * lines, the text's own word solid and our reading outlined, and there is no
 * element that totals them. (3) An abstention is drawn, not omitted --
 * abstaining visibly is the correct behaviour, and an empty cell would read
 * as a missing feature.
 */
/* Wide enough for a textarea and a row of chips. The per-row control is
 * cramped even so, which is the honest case for the per-mahadasa form the
 * owner raised -- see demo/dasa-band.yaml presentation form_shape. */
.bandcell { min-width: 21rem; vertical-align: top; }
.band-na { font-size: 0.8rem; color: var(--faint); }

.band { display: flex; flex-direction: column; gap: 0.3rem; }
.band-stratum { display: flex; flex-direction: column; gap: 0.15rem;
                padding: 0.3rem 0.4rem; border-radius: 4px; }
/* The text's own valence word: solid ground. */
.band-stratum.band-solid { background: #f4f2ed;
                           border-left: 3px solid var(--ink); }
/* Our reading of the content: outlined, so it can never be mistaken for the
 * line above it. 415 of 480 dicta land here. */
.band-stratum.band-outlined { background: transparent;
                              border-left: 3px dashed var(--warn-line); }
.band-whose { font-size: 0.72rem; text-transform: uppercase;
              letter-spacing: 0.05em; color: var(--dim); }
.band-marks, .band-abstentions, .band-agreement {
  display: flex; flex-wrap: wrap; gap: 0.25rem; }
.band-abstentions { padding: 0.15rem 0.4rem; }

.band-chip { font-size: 0.74rem; padding: 0.1rem 0.4rem; border-radius: 10px;
             border: 1px solid var(--line); white-space: nowrap; }
.band-chip.v-benefic { background: var(--good-bg); color: var(--good);
                       border-color: var(--good); }
.band-chip.v-malefic { background: var(--poor-bg); color: var(--poor);
                       border-color: var(--poor); }
/* Mixed is a REAL OUTCOME of the text and not a middle. Marked with both
 * edges rather than with a blend. */
.band-chip.v-mixed { background: linear-gradient(90deg,
                       var(--good-bg) 50%, var(--poor-bg) 50%);
                     color: var(--ink); border-color: var(--dim); }
/* Asserts no direction. Not a weak result. */
.band-chip.v-descriptive, .band-chip.v-abstain, .band-chip.v-contested {
  background: transparent; color: var(--dim); border-style: dashed; }
.band-chip.a-agree { background: var(--accent-soft); color: var(--accent);
                     border-color: var(--accent); }
.band-chip.a-disagree { background: transparent; color: var(--ink);
                        border-color: var(--ink); }
.band-chip.a-not { background: transparent; color: var(--faint);
                   border-style: dashed; }

.band-yousaid, .band-agreement { font-size: 0.78rem;
                                 display: flex; flex-wrap: wrap;
                                 gap: 0.3rem; align-items: baseline; }

/* The rating. Drawn where the band would be, and the band is not drawn, so
 * nothing about this period's direction is on screen while the question is
 * being answered. */
.band-rate { display: flex; flex-direction: column; gap: 0.3rem; }
.band-rate-q { font-size: 0.86rem; font-weight: 600; }
.band-rate-buttons { display: flex; flex-wrap: wrap; gap: 0.25rem; }
button.chip { font-size: 0.78rem; padding: 0.2rem 0.5rem; cursor: pointer;
              border: 1px solid var(--accent); border-radius: 12px;
              background: var(--card); color: var(--accent); }
button.chip:hover { background: var(--accent-soft); }
/* The two non-answers. Kept visually apart from the five scale points
 * because "I don't remember" is not a middling period. */
button.chip.muted { border-color: var(--line); color: var(--dim); }

details.band-branches { margin-top: 0.2rem; font-size: 0.8rem; }
details.band-branches summary { cursor: pointer; color: var(--accent); }
dl.band-facts { display: grid; grid-template-columns: auto 1fr;
                gap: 0.1rem 0.5rem; margin: 0.35rem 0; }
dl.band-facts dt { color: var(--dim); }
dl.band-facts dd { margin: 0; }
ul.band-dicta { margin: 0.35rem 0 0; padding-left: 0; list-style: none; }
ul.band-dicta li { margin-bottom: 0.5rem; padding-left: 0.5rem;
                   border-left: 2px solid var(--line); }
.band-gist { }
.band-qualifier { color: var(--dim); font-size: 0.78rem; }
.band-undefined { color: var(--warn-line); font-size: 0.76rem; }

.bandlegend { margin-top: 0.9rem; padding: 0.6rem 0.75rem;
              border: 1px solid var(--line); border-radius: 4px;
              background: #fcfbf8; font-size: 0.82rem; }
.bandlegend h4 { margin: 0 0 0.4rem; font-size: 0.86rem; }
.bandlegend dl { display: grid; grid-template-columns: auto 1fr;
                 gap: 0.15rem 0.6rem; margin: 0; }
.bandlegend dt { color: var(--dim); }
.bandlegend dd { margin: 0; }
.error-inline { color: var(--stop-line); font-size: 0.78rem; margin: 0; }

@media (max-width: 52rem) {
  .bandcell { min-width: 0; }
  .bandlegend dl { grid-template-columns: 1fr; }
}

/* The rating block, collapsed. A chart has up to 37 lived periods with the
 * bhuktis open; seven buttons on each would make the dasa table a
 * questionnaire. Collapsing is presentation only -- no direction is on
 * screen either way, and the band still arrives only from the reveal call. */
details.band-rate-open > summary { cursor: pointer; font-size: 0.84rem;
                                   font-weight: 600; color: var(--accent); }
details.band-rate-open[open] > summary { margin-bottom: 0.25rem; }
details.band-rate-open .hint { margin-bottom: 0.3rem; }

/* ---- the comparison view ----
 *
 * Everything the chapters say lives here and nothing of it in the dasa
 * table, which is what makes the rows blind by construction rather than
 * blind until someone clicks. The bar carries the one button and, before it
 * is pressed, what pressing it costs. */
.comparebar { margin-top: 0.9rem; padding-top: 0.8rem;
              border-top: 1px solid var(--line); }
.comparebar .hint { max-width: 44rem; }
#bandCompare { margin-top: 1rem; }
#bandCompare h3 { margin: 0 0 0.2rem; font-size: 1.02rem; }
.comparecard { border: 1px solid var(--line); border-radius: 4px;
               padding: 0.7rem 0.8rem; margin-top: 0.7rem;
               background: var(--card); }
.comparehead { display: flex; flex-wrap: wrap; gap: 0.5rem;
               align-items: baseline; margin-bottom: 0.35rem; }
.compare-period { font-weight: 600; }
/* The user's own answer sits above the block and is spaced away from it, so
 * the layout does not read as though it were a response to what follows. */
.comparecard .band-yousaid { margin-bottom: 0.5rem;
                             padding-bottom: 0.45rem;
                             border-bottom: 1px dashed var(--line); }
.bandcell .band-yousaid { flex-direction: column; gap: 0.1rem; }

/* ---- the thumbs scale, and the note ----
 *
 * THE GLYPH IS NEVER THE ONLY CARRIER OF MEANING. Emoji render differently
 * on every platform, some render as a blank box, several have no settled
 * Tamil reading, and a screen reader handed one alone announces a Unicode
 * name nobody here chose. So every control carries the glyph AND the word,
 * the glyph is aria-hidden, and the word is the accessible name. A platform
 * that draws nothing for the glyph still shows a usable control.
 * demo/dasa-band.yaml declares this as glyph_is_never_alone. */
button.chip { display: inline-flex; align-items: center; gap: 0.3rem; }
.chip-glyph { font-size: 1rem; line-height: 1; }
.chip-word { white-space: nowrap; }

/* The note. Inside the rating control, above the thumbs, because a thumb is
 * the submit -- nothing is sent until one is pressed, so the box cannot be
 * answered instead of the scale. */
.band-note { display: flex; flex-direction: column; gap: 0.2rem;
             margin-bottom: 0.45rem; }
.band-note label { font-size: 0.8rem; color: var(--dim); }
.band-note textarea { width: 100%; min-height: 3.6rem; resize: vertical;
                      font: inherit; font-size: 0.86rem; padding: 0.35rem;
                      border: 1px solid var(--line); border-radius: 3px;
                      background: var(--card); color: var(--ink); }
.band-note textarea:focus { outline: 2px solid var(--accent);
                            outline-offset: 1px; }
.band-note .hint { margin: 0; }
/* Read back as a quotation, never as a field: nothing can edit a note once
 * it is written, because the rating it sits on is append-only. */
blockquote.band-note-said { margin: 0.35rem 0 0; padding: 0.3rem 0.6rem;
                            border-left: 3px solid var(--line);
                            font-size: 0.84rem; color: var(--ink); }


/* ------------------------------------------------------------- consent
 *
 * A screen somebody has to be able to finish, about two decisions they
 * should be able to tell apart. So: each purpose is a block with its own
 * tick, its own one-line summary, and its full wording one click down --
 * collapsed, not hidden, because the summary above it is a fair
 * description and burying the detail behind nothing would not be.
 */
.consent-purpose {
  border: 1px solid var(--line, #ddd);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin: 0.9rem 0;
}
/* A purpose whose dependency is not met. Dimmed and disabled rather than
 * removed: it should be visible that there is a second question and why it
 * cannot be answered yet. */
.consent-purpose.unavailable { opacity: 0.55; }
.consent-tick { display: flex; gap: 0.6rem; align-items: baseline; }
.consent-tick input { margin-top: 0.2rem; flex: 0 0 auto; }
.consent-title { font-weight: 600; }
.consent-summary { margin: 0.5rem 0 0 1.6rem; }
.consent-detail { margin: 0.6rem 0 0 1.6rem; }
.consent-detail p { margin: 0.5rem 0; }
.consent-declining { border-left: 3px solid var(--line, #ddd); padding-left: 0.7rem; }
.consent-standing { margin: 0.6rem 0 0 1.6rem; font-size: 0.9rem; opacity: 0.8; }
/* The wording moved since they answered. Not an error and not decoration:
   it is the one thing on this screen that asks them to do something. */
.consent-changed {
  margin: 0.4rem 0 0 1.6rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #8a3b32;
  font-size: 0.9rem;
}