@font-face {
font-family: "Noto Sans Devanagari";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/noto-sans-devanagari-subset.woff2") format("woff2");
unicode-range: U+0020-007E, U+00A0, U+0900-097F, U+200C-200D, U+20B9, U+25CC, U+A8E0-A8FF;
}
:root {
color-scheme: light;
--font-hi: "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--brand: #105a55;
--brand-ink: #ffffff;
--app-bg: #f4f6f5;
--app-card: #ffffff;
--app-ink: #1a2420;
--app-muted: #3f4a46;
--app-line: #d9e0dd;
--input-line: #8a9893;
--sup: #14532d;
--sup-bg: #e4f2e8;
--lean: #1d4e89;
--lean-bg: #e5eef8;
--und: #6b3d00;
--und-bg: #fbefd9;
--opp: #8c1d18;
--opp-bg: #fbe6e4;
--on-tag: #ffffff;
--none-bg: #eef1f0;
--wa: #0b5d3b;
--on-wa: #ffffff;
--warn-bg: #fff3dc;
--snack-bg: #1f2a26;
--snack-ink: #ffffff;
--snack-act: #ffd486;
--hover: #f3f7f5;
--focus: #f2b04a;
--amber: #f2b04a;
--mark-bg: #f9dbae;
--on-amber: #3b2a00;
--scrim: rgba(10, 18, 15, 0.45);
--grab: #c9d2ce;
--bubble: #dcf8c6;
--bubble-ink: #1b2a1f;
--bubble-link: #094f77;
--paper: #ffffff;
--paper-ink: #111111;
--text-sm: 16px;
--text-body: 17px;
--text-lg: 18px;
--text-name: 17px;
--text-btn: 17px;
--text-h2: 18px;
--text-big: 34px;
--touch: 48px;
--appbar-h: 58px;
--tabbar-h: 64px;
--radius-card: 16px;
--radius-btn: 14px;
--radius-field: 12px;
--app-max: 480px;
}
:root[data-theme="dark"] {
color-scheme: dark;
--brand: #6ccbbe;
--brand-ink: #0b0f0d;
--app-bg: #121816;
--app-card: #1b2320;
--app-ink: #e8eeeb;
--app-muted: #b4c1bc;
--app-line: #2c3733;
--input-line: #6d7b76;
--sup: #7ccf96;
--sup-bg: #173322;
--lean: #a9c8f0;
--lean-bg: #172a40;
--und: #e9b562;
--und-bg: #3a2a10;
--opp: #f3aaa4;
--opp-bg: #3d1a18;
--on-tag: #0b0f0d;
--none-bg: #242e2a;
--wa: #7ccf96;
--on-wa: #0b0f0d;
--warn-bg: #33280f;
--snack-bg: #e8eeeb;
--snack-ink: #121816;
--snack-act: #6b3d00;
--hover: #222c28;
--focus: #f2b04a;
--amber: #f2b04a;
--mark-bg: #51462a;
--on-amber: #3b2a00;
--scrim: rgba(0, 0, 0, 0.6);
--grab: #4a5753;
--bubble: #1f3a2a;
--bubble-ink: #e8eeeb;
--bubble-link: #a9c8f0;
--paper: #ffffff;
--paper-ink: #111111;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--brand: #6ccbbe;
--brand-ink: #0b0f0d;
--app-bg: #121816;
--app-card: #1b2320;
--app-ink: #e8eeeb;
--app-muted: #b4c1bc;
--app-line: #2c3733;
--input-line: #6d7b76;
--sup: #7ccf96;
--sup-bg: #173322;
--lean: #a9c8f0;
--lean-bg: #172a40;
--und: #e9b562;
--und-bg: #3a2a10;
--opp: #f3aaa4;
--opp-bg: #3d1a18;
--on-tag: #0b0f0d;
--none-bg: #242e2a;
--wa: #7ccf96;
--on-wa: #0b0f0d;
--warn-bg: #33280f;
--snack-bg: #e8eeeb;
--snack-ink: #121816;
--snack-act: #6b3d00;
--hover: #222c28;
--focus: #f2b04a;
--amber: #f2b04a;
--mark-bg: #51462a;
--on-amber: #3b2a00;
--scrim: rgba(0, 0, 0, 0.6);
--grab: #4a5753;
--bubble: #1f3a2a;
--bubble-ink: #e8eeeb;
--bubble-link: #a9c8f0;
--paper: #ffffff;
--paper-ink: #111111;
}
}
:root[data-text-size="large"] {
--text-sm: 17px;
--text-body: 21px;
--text-lg: 21px;
--text-name: 21px;
--text-btn: 20px;
--text-h2: 22px;
--text-big: 38px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--app-bg); }
body {
margin: 0;
background: var(--app-bg);
color: var(--app-ink);
font-family: var(--font-hi);
font-size: var(--text-body);
line-height: 1.55;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
h1, h2, h3, p { margin: 0; }
a { color: var(--brand); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app {
position: relative;
width: 100%;
max-width: var(--app-max);
height: 100vh;
height: 100dvh;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--app-bg);
}
.appbar {
flex: none;
min-height: var(--appbar-h);
padding: 0 8px 0 6px;
padding-top: env(safe-area-inset-top, 0px);
background: var(--brand);
color: var(--brand-ink);
display: flex;
align-items: center;
gap: 6px;
}
.avatar {
width: 38px; height: 38px; border-radius: 50%;
background: var(--amber); color: var(--on-amber);
display: grid; place-items: center; overflow: hidden;
font-weight: 600; font-size: 16px;
border: 2px solid rgba(255, 255, 255, 0.7);
flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.appbar .who { flex: 1; min-width: 0; line-height: 1.25; }
.appbar .who b { display: block; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .who span { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
appearance: none; border: 0; background: transparent; color: inherit; padding: 0;
width: var(--touch); height: var(--touch); border-radius: 50%;
display: grid; place-items: center; flex: none;
}
.iconbtn svg { width: 24px; height: 24px; }
.iconbtn:active { background: rgba(255, 255, 255, 0.16); }
.sync {
appearance: none; border: 0; color: inherit;
min-height: 40px; border-radius: 999px; padding: 4px 12px;
display: flex; gap: 5px; align-items: center; white-space: nowrap;
font-size: 16px; font-weight: 600;
background: rgba(255, 255, 255, 0.16);
}
.sync.off { background: var(--amber); color: var(--on-amber); gap: 4px; }
.sync.off svg { width: 18px; height: 18px; }
.sync, .iconbtn.synci { min-width: var(--touch); min-height: var(--touch); justify-content: center; }
.content {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 14px 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.content > * { flex-shrink: 0; min-width: 0; }
.src { font-size: var(--text-sm); color: var(--app-muted); line-height: 1.5; padding: 10px 2px 2px; border-top: 1px solid var(--app-line); margin-top: 4px; }
.tabbar {
flex: none;
height: var(--tabbar-h);
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--app-card);
border-top: 1px solid var(--app-line);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.tabbar button {
appearance: none; border: 0; background: transparent; padding: 0;
display: grid; justify-items: center; align-content: center; gap: 1px;
font-size: 16px; color: var(--app-muted); position: relative;
}
.tabbar button svg { width: 24px; height: 24px; }
.tabbar button[aria-current="page"] { color: var(--brand); font-weight: 600; }
.tabbar button[aria-current="page"]::before {
content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
width: 56px; height: 30px; border-radius: 999px;
background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.tabbar button svg, .tabbar button span { position: relative; }
.tabdot { position: absolute; top: 6px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: var(--opp); border: 2px solid var(--app-card); }
.sticky {
flex: none;
padding: 10px 14px;
background: var(--app-card);
border-top: 1px solid var(--app-line);
display: flex;
gap: 10px;
align-items: center;
}
.sticky .count { flex: 1; font-size: var(--text-sm); }
.sticky .btn { flex: 1; }
.sticky.stack { flex-direction: column; align-items: stretch; }
.setup h1 { font-size: 24px; line-height: 1.3; font-weight: 600; }
.steps { display: flex; gap: 6px; align-items: center; font-size: var(--text-sm); color: var(--app-muted); }
.steps i { height: 6px; flex: 1; border-radius: 3px; background: var(--app-line); }
.steps i.on { background: var(--brand); }
.card { background: var(--app-card); border-radius: var(--radius-card); padding: 14px; display: grid; gap: 10px; border: 1px solid var(--app-line); }
.card.hero { background: var(--brand); color: var(--brand-ink); border: 0; }
.card.hero .sub, .card.hero .kicker, .card.hero .hint { color: inherit; opacity: 0.95; }
.card.warn { background: var(--warn-bg); border: 0; }
.card.plain { background: var(--none-bg); border: 0; }
.card h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.35; }
.card .sub { font-size: var(--text-sm); color: var(--app-muted); }
.kicker { font-size: var(--text-sm); font-weight: 600; color: var(--app-muted); }
.hero .kicker { color: inherit; }
.big { font-size: var(--text-big); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hint { font-size: var(--text-sm); color: var(--app-muted); }
.ok { color: var(--sup); font-weight: 600; }
.warnText { color: var(--und); font-weight: 600; }
.danger-text { color: var(--opp); font-weight: 600; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.hint-card { display: grid; gap: 8px; background: var(--brand); color: var(--brand-ink); border-radius: 14px; padding: 12px 14px; font-size: var(--text-body); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); }
.banner { background: var(--warn-bg); border-radius: 12px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; font-size: var(--text-sm); }
.banner .x { appearance: none; border: 0; background: transparent; color: var(--app-muted); font: 600 20px var(--font-ui); width: var(--touch); height: var(--touch); flex: none; }
.ready { display: flex; gap: 10px; align-items: center; background: var(--sup-bg); color: var(--sup); border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: var(--text-sm); }
.btn {
appearance: none; border: 0; box-sizing: border-box; cursor: pointer;
min-height: 52px; border-radius: var(--radius-btn); padding: 10px 16px;
display: flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: var(--text-btn); text-align: center; text-decoration: none;
background: transparent; color: inherit;
}
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.onbrand { background: var(--brand-ink); color: var(--brand); }
.btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.wa { background: var(--wa); color: var(--on-wa); }
.btn.danger { background: var(--opp); color: var(--on-tag); }
.btn.small { min-height: var(--touch); font-size: var(--text-sm); padding: 6px 12px; border-radius: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.link {
appearance: none; background: none; border: 0; padding: 0 4px; cursor: pointer;
min-height: var(--touch); display: inline-flex; align-items: center;
color: var(--brand); font-weight: 600; font-size: var(--text-sm); text-decoration: none;
}
.hero .link, .warn .link { color: inherit; text-decoration: underline; }
.callbtn {
appearance: none; border: 0; cursor: pointer; padding: 0;
width: var(--touch); height: var(--touch); border-radius: 50%; flex: none;
display: grid; place-items: center; color: var(--brand);
background: color-mix(in srgb, var(--brand) 10%, var(--app-card));
}
.callbtn svg { width: 20px; height: 20px; }
.bar { height: 10px; border-radius: 999px; background: var(--app-line); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; }
.hero .bar { background: rgba(255, 255, 255, 0.28); }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--text-sm); }
.legend-row span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.stat .bar { grid-column: 1 / -1; }
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 10px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.t-sup { background: var(--sup-bg); color: var(--sup); }
.t-lean { background: var(--lean-bg); color: var(--lean); }
.t-und { background: var(--und-bg); color: var(--und); }
.t-opp { background: var(--opp-bg); color: var(--opp); }
.t-none { background: var(--none-bg); color: var(--app-muted); font-weight: 400; }
.t-away { background: var(--none-bg); color: var(--app-ink); }
.list { background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--radius-card); overflow: hidden; }
.item {
appearance: none; border: 0; background: transparent; text-align: left; color: inherit;
box-sizing: border-box; width: 100%; cursor: pointer;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
min-height: var(--touch); padding: 10px 14px; border-top: 1px solid var(--app-line);
}
.item:first-child { border-top: 0; }
.item:active { background: var(--hover); }
.item .name { font-weight: 600; font-size: var(--text-name); }
.item .meta { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--app-muted); }
.item .right { grid-row: 1; grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.item mark, .result mark { background: var(--mark-bg); color: inherit; border-radius: 3px; }
.item.struck .name { text-decoration: line-through; }
.mrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--app-line); }
.mrow:first-child { border-top: 0; }
.mrow .av { width: 38px; height: 38px; border-radius: 50%; background: var(--none-bg); display: grid; place-items: center; font-weight: 600; color: var(--brand); }
.mrow .nm { font-weight: 600; min-width: 0; }
.mrow .nm small { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--app-muted); }
.mrow .num { font-size: var(--text-sm); color: var(--app-muted); text-align: right; font-variant-numeric: tabular-nums; }
.mrow .bar { grid-column: 2 / -1; height: 6px; }
.mrow.quiet .nm small { color: var(--und); font-weight: 600; }
button.mrow { appearance: none; border-left: 0; border-right: 0; border-bottom: 0; background: transparent; color: inherit; width: 100%; text-align: left; }
.hrow {
appearance: none; border: 0; border-top: 1px solid var(--app-line); background: transparent; color: inherit; text-align: left;
box-sizing: border-box; width: 100%; cursor: pointer;
display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px;
}
.hrow:first-child { border-top: 0; }
.hrow .hn { width: 52px; height: 44px; border-radius: 10px; background: var(--none-bg); display: grid; place-items: center; font: 600 17px var(--font-ui); }
.hrow.done .hn { background: var(--sup-bg); color: var(--sup); }
.hrow.now .hn { background: var(--brand); color: var(--brand-ink); }
.hrow .res { font-size: var(--text-sm); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .res small { display: block; color: var(--app-muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check { width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--input-line); display: grid; place-items: center; color: var(--brand-ink); font: 600 15px var(--font-ui); }
.on .check { background: var(--brand); border-color: var(--brand); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: var(--text-sm); }
.kv dt { color: var(--app-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.history { font-size: var(--text-sm); display: grid; gap: 6px; }
.history div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.history small { color: var(--app-muted); font-size: var(--text-sm); }
details.fold summary { cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; min-height: var(--touch); display: flex; align-items: center; }
details.fold summary::-webkit-details-marker { display: none; }
details.fold[open] summary { margin-bottom: 4px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px; scrollbar-width: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip {
appearance: none; cursor: pointer; white-space: nowrap; color: inherit;
min-height: var(--touch); border-radius: 999px; padding: 6px 14px; font-size: var(--text-sm);
border: 1px solid var(--app-line); background: var(--app-card);
display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; flex: none;
}
.chip b { font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--app-ink); color: var(--app-bg); border-color: var(--app-ink); }
.fchip {
appearance: none; border: 0; cursor: pointer;
display: inline-flex; gap: 6px; align-items: center; min-height: var(--touch);
border-radius: 999px; padding: 4px 8px 4px 14px; font-size: var(--text-sm);
background: var(--app-ink); color: var(--app-bg); flex: none;
}
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: var(--text-sm); font-weight: 600; }
.input {
box-sizing: border-box; width: 100%; min-height: 52px; border-radius: var(--radius-field);
border: 1.5px solid var(--input-line); background: var(--app-card);
padding: 10px 14px; font: 18px var(--font-hi); color: var(--app-ink);
}
.input[aria-invalid="true"] { border-color: var(--opp); }
.inwrap { position: relative; }
.inwrap .input { padding-right: 90px; }
.inwrap .in-act { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.agree { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--text-sm); background: var(--none-bg); border-radius: 12px; padding: 12px; cursor: pointer; }
.agree { grid-template-columns: 36px minmax(0, 1fr); }
.switch { display: flex; gap: 10px; align-items: center; justify-content: space-between; min-height: var(--touch); cursor: pointer; }
input[type="checkbox"] {
appearance: none; -webkit-appearance: none; flex: none; cursor: pointer;
width: var(--touch); height: var(--touch); margin: -12px; padding: 0; border: 0; background: transparent;
display: grid; place-items: center;
}
input[type="checkbox"]::before {
content: ""; grid-area: 1 / 1; width: 24px; height: 24px; box-sizing: border-box;
border-radius: 6px; border: 2px solid var(--input-line); background: var(--app-card);
}
input[type="checkbox"]::after {
content: ""; grid-area: 1 / 1; width: 7px; height: 13px; margin-top: -3px;
border: solid transparent; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
input[type="checkbox"]:checked::before { background: var(--brand); border-color: var(--brand); }
input[type="checkbox"]:checked::after { border-color: var(--brand-ink); }
input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus); outline-offset: -8px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--app-muted); font-size: var(--text-sm); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--app-line); }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper output { min-width: 3ch; text-align: center; font: 600 22px var(--font-ui); font-variant-numeric: tabular-nums; }
.num-in { width: 92px; min-height: var(--touch); text-align: right; font: 600 19px var(--font-ui); }
.tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tags > * { min-width: 0; }
.tag {
appearance: none; box-sizing: border-box; cursor: pointer;
min-height: 56px; border-radius: 12px; padding: 4px 2px;
display: grid; justify-items: center; align-content: center; gap: 0;
font-size: var(--text-sm); font-weight: 600; text-align: center; line-height: 1.25;
border: 1.5px solid var(--app-line); background: var(--app-card); color: var(--app-ink);
}
.tag .ic { line-height: 1; }
.tag .ico { width: 22px; height: 22px; }
.tag.sup .ic { color: var(--sup); }
.tag.lean .ic { color: var(--lean); }
.tag.und .ic { color: var(--und); }
.tag.opp .ic { color: var(--opp); }
.tag.sup[aria-pressed="true"] { background: var(--sup); border-color: var(--sup); color: var(--on-tag); }
.tag.lean[aria-pressed="true"] { background: var(--lean); border-color: var(--lean); color: var(--on-tag); }
.tag.und[aria-pressed="true"] { background: var(--und); border-color: var(--und); color: var(--on-tag); }
.tag.opp[aria-pressed="true"] { background: var(--opp); border-color: var(--opp); color: var(--on-tag); }
.tag[aria-pressed="true"] .ic { color: var(--on-tag); }
:root[data-text-size="large"] .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-text-size="large"] .tag { min-height: 60px; grid-auto-flow: column; gap: 8px; padding: 0 6px; }
.moretags { display: flex; gap: 8px; flex-wrap: wrap; }
.member { background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--radius-card); padding: 12px; display: grid; gap: 10px; }
.member .mh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.member .mh b { font-size: var(--text-name); }
.member .mh span { font-size: var(--text-sm); color: var(--app-muted); }
.member .foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--app-muted); }
.callhead {
appearance: none; border: 0; background: transparent; color: inherit; text-align: left;
box-sizing: border-box; cursor: pointer; width: 100%;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
margin: -4px; padding: 4px; border-radius: 10px; min-height: var(--touch);
}
.callhead .ch-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.callhead .ch-top b { font-size: var(--text-name); }
.callhead .hint { grid-column: 1; }
.callhead .chev { grid-column: 2; grid-row: 1 / span 2; color: var(--app-muted); }
.people { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.person {
appearance: none; cursor: pointer; flex: none; color: inherit; text-align: left;
border: 1.5px solid var(--app-line); background: var(--app-card); border-radius: 14px;
padding: 8px 12px; display: grid; gap: 2px; min-width: 100px; line-height: 1.35;
}
.person b { font-size: var(--text-sm); }
.person small { font-size: var(--text-sm); color: var(--app-muted); }
.person[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--app-card)); }
.person.quiet small { color: var(--und); font-weight: 600; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg button {
appearance: none; box-sizing: border-box; cursor: pointer; color: inherit; text-align: left;
border: 1.5px solid var(--app-line); border-radius: 12px; padding: 10px 12px;
display: grid; gap: 2px; background: var(--app-card); min-height: 56px;
}
.seg button b { font-size: var(--text-sm); font-weight: 600; }
.seg button small { font-size: var(--text-sm); color: var(--app-muted); }
.seg button[aria-pressed="true"] { border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--app-card)); padding: 9.5px 11.5px; }
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 6; }
.sheet {
position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto;
background: var(--app-bg); border-radius: 22px 22px 0 0; z-index: 7;
padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px;
}
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--grab); justify-self: center; }
.sheet .sh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sheet .sh h2 { font-size: 20px; font-weight: 600; }
.sheet .close { appearance: none; border: 0; background: transparent; cursor: pointer; flex: none; font: 600 24px var(--font-ui); color: var(--app-muted); width: var(--touch); height: var(--touch); display: grid; place-items: center; border-radius: 50%; }
.menu { background: var(--app-card); border: 1px solid var(--app-line); border-radius: var(--radius-card); overflow: hidden; }
.menu button, .menu a {
appearance: none; border: 0; border-top: 1px solid var(--app-line); background: transparent; color: inherit; text-align: left; text-decoration: none; font-weight: 400;
box-sizing: border-box; cursor: pointer; width: 100%;
display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px; font-size: var(--text-body);
}
.menu > :first-child { border-top: 0; }
.menu button small, .menu a small { display: block; color: var(--app-muted); font-size: var(--text-sm); }
.menu .mi { width: 36px; height: 36px; border-radius: 10px; background: var(--none-bg); display: grid; place-items: center; flex: none; color: var(--brand); }
.menu .mi svg { width: 22px; height: 22px; }
.menu .danger { color: var(--opp); }
.snack {
position: absolute; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px);
background: var(--snack-bg); color: var(--snack-ink); border-radius: 12px;
padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 10px; font-size: var(--text-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); z-index: 5;
}
.snack .msg { flex: 1; }
.snack button { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--snack-act); font-weight: 600; min-height: var(--touch); padding: 4px 8px; }
.snack.up { bottom: calc(var(--tabbar-h) + 82px); }
.snack.notabs { bottom: 12px; }
.snack.notabs.up { bottom: 82px; }
@media (prefers-reduced-motion: no-preference) { .snack { animation: rise 0.18s ease-out; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.sw { appearance: none; cursor: pointer; width: var(--touch); height: var(--touch); border-radius: 50%; border: 3px solid var(--app-card); box-shadow: 0 0 0 1.5px var(--input-line); padding: 0; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--app-ink); }
.photo {
appearance: none; cursor: pointer; padding: 0; overflow: hidden;
width: 76px; height: 76px; border-radius: 50%; background: var(--none-bg); border: 2px dashed var(--input-line);
display: grid; place-items: center; color: var(--app-muted); font-size: var(--text-sm); text-align: center; line-height: 1.3; flex: none;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.preview { border-radius: 14px; overflow: hidden; border: 1px solid var(--app-line); }
.preview .appbar { min-height: 54px; padding-top: 0; }
.preview .cap { font-size: var(--text-sm); color: var(--app-muted); background: var(--app-card); padding: 4px 10px; }
.symgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.symtile {
appearance: none; cursor: pointer; color: var(--paper-ink); background: var(--paper);
border: 1.5px solid var(--app-line); border-radius: 12px; padding: 8px 4px; min-height: 96px;
display: grid; justify-items: center; align-content: center; gap: 4px; font-size: var(--text-sm);
}
.symtile[aria-pressed="true"] { border: 3px solid var(--brand); padding: 6.5px 2.5px; }
.symart { display: grid; place-items: center; }
.symart svg, .symart img { display: block; }
.symart .ph { font-weight: 600; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--paper-ink); color: var(--paper-ink); }
.appeal {
--brand-ink: #ffffff;
background: var(--appeal-brand, #105a55); color: #ffffff;
border-radius: 18px; padding: 20px 16px; display: grid; justify-items: center; text-align: center; gap: 8px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.appeal h2 { font-size: 24px; line-height: 1.25; }
.appeal .post { font-weight: 600; font-size: 17px; }
.appeal .place, .appeal .when { font-size: 16px; }
.appeal .slogan { font-size: 18px; }
.appeal .when { border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 8px; width: 100%; }
.appeal .vote { font-size: 20px; font-weight: 600; line-height: 1.35; }
.appeal .aphoto { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid #ffffff; background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; font-size: 32px; font-weight: 600; }
.appeal .aphoto img { width: 100%; height: 100%; object-fit: cover; }
.symbox { background: #ffffff; color: #111111; border-radius: 14px; padding: 10px 18px 8px; display: grid; justify-items: center; gap: 2px; }
.symbox b { font-size: 18px; }
.paper { background: var(--paper); color: var(--paper-ink); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); padding: 10px; display: grid; gap: 6px; font-size: 16px; line-height: 1.35; overflow: hidden; }
.paper .ph { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; border-bottom: 1.5px solid var(--paper-ink); padding-bottom: 4px; }
.paper table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.paper th, .paper td { text-align: left; padding: 3px 2px; border-bottom: 1px solid #cccccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.paper th { font-weight: 600; color: #333333; }
.paper .num { font-variant-numeric: tabular-nums; }
.paper .slips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.paper .slip { border: 1px dashed #777777; border-radius: 3px; padding: 6px; display: grid; gap: 1px; }
.paper .more { text-align: center; color: #444444; }
.poll .big { font-size: 40px; }
.booth { display: grid; gap: 6px; }
.booth, .booth > * { min-width: 0; }
.booth .bh { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); }
.booth .bh b { font-variant-numeric: tabular-nums; flex: none; }
.booth .bh span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bubble { background: var(--bubble); border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: var(--text-sm); line-height: 1.5; color: var(--bubble-ink); overflow-wrap: anywhere; }
.bubble u { color: var(--bubble-link); text-decoration: none; }
.qr { background: #ffffff; border-radius: 10px; padding: 8px; justify-self: center; }
.qr svg, .qr img { display: block; width: 200px; height: 200px; }
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.tk { display: inline-block; width: 0.38em; height: 0.72em; border: solid currentColor; border-width: 0 0.14em 0.14em 0; transform: rotate(45deg); margin: 0 0.3em 0 0.2em; vertical-align: 0.05em; }
.xx { display: inline-block; position: relative; width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
.xx::before, .xx::after { content: ""; position: absolute; left: 50%; top: 0; width: 0.13em; height: 100%; background: currentColor; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.xx::after { transform: translateX(-50%) rotate(-45deg); }
.chev { display: inline-block; width: 0.45em; height: 0.45em; border: solid currentColor; border-width: 0.13em 0.13em 0 0; transform: rotate(45deg); margin: 0 0.25em 0 0.3em; vertical-align: 0.08em; }
.chev.back { transform: rotate(-135deg); margin: 0 0.3em 0 0.25em; }
.chev.down { transform: rotate(135deg); vertical-align: 0.2em; }
.chev.up { transform: rotate(-45deg); vertical-align: -0.05em; }
.spin { display: inline-block; width: 0.8em; height: 0.8em; border: 0.13em solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -0.08em; }
@media (prefers-reduced-motion: no-preference) { .spin { animation: turn 1s linear infinite; } }
@keyframes turn { to { transform: rotate(360deg); } }
.brand-splash { position: fixed; inset: 0; z-index: 20; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: 24px; }
.brand-splash-body { display: grid; justify-items: center; gap: 12px; }
.brand-splash-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid currentColor; background: #ffffff; }
.brand-splash-name { font-size: 26px; font-weight: 600; margin: 0; }
.brand-splash-slogan { font-size: var(--text-lg); margin: 0; }
.update-bar { display: flex; gap: 10px; align-items: center; background: var(--warn-bg); padding: 6px 8px 6px 14px; font-size: var(--text-sm); }
.update-bar .msg { flex: 1; }
.install-steps { margin: 0; padding-left: 24px; display: grid; gap: 8px; line-height: 1.5; }
.persist-notice a { color: inherit; font-weight: 600; }
.setup h1 { color: var(--app-ink); }
.logo-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 600; font-size: 19px; flex: none; }
.print-pages { display: none; }
@media print {
@page { size: A4; margin: 0; }
html, body { background: #ffffff; }
.app { display: none !important; }
.print-pages { display: block; }
.print-pages img { display: block; width: 210mm; height: 297mm; page-break-after: always; break-after: page; }
}