/* percent.gripe: shared by the home page and the topic pages */
:root { --bg:#faf8f5; --fg:#1a1a1a; --muted:#6f6f6f; --line:#e4e0da; --hover:#efebe5; --panel:#f3efe9; --field:#fff; --accent:#e5484d; --accent-fg:#c22f35; --err:#b42318; --ok:#1a7f37; }
@media (prefers-color-scheme: dark) { :root { --bg:#111; --fg:#f2f2f2; --muted:#9a9a9a; --line:#2b2b2b; --hover:#1d1d1d; --panel:#171717; --field:#0b0b0b; --accent-fg:#ff6b70; --err:#ff8a80; --ok:#3fb950; } }
* { box-sizing:border-box; margin:0 }
html { scroll-padding-top:12px }
body { background:var(--bg); color:var(--fg); font:16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
       display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; -webkit-text-size-adjust:100% }
#app { flex:1 1 auto; width:100%; max-width:760px; margin:0 auto; padding:clamp(16px,3vw,40px) clamp(16px,3vw,40px) 24px }
a { color:var(--accent-fg) }
header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-bottom:18px }
h1, .brand { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.15 }
h1 span, .brand span { color:var(--accent) }
.brand { color:var(--fg); text-decoration:none }
.tag { color:var(--muted); font-size:.95rem }
header.site .all { font-size:.95rem }
main > h1 { font-size:clamp(1.5rem,4.5vw,2.1rem); margin:6px 0 6px }
.lead { color:var(--muted); margin-bottom:14px }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }

.bar { display:flex; align-items:center; gap:8px; justify-content:flex-end; color:var(--muted); font-size:.9rem; margin:0 0 10px }
select { font:inherit; color:var(--fg); background:var(--field); border:1px solid var(--line); border-radius:10px; padding:6px 8px; max-width:100% }
.jump { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px }
.jump a { padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--fg); text-decoration:none; font-size:.92rem }
.jump a:hover { border-color:var(--accent) }

.group { margin-top:26px }
.group > h2 { font-size:.82rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:650; margin:0 0 10px }
.calc { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:16px clamp(14px,3vw,22px) 12px; margin:0 0 14px; scroll-margin-top:12px }
.calc:target { border-color:var(--accent) }
.calc h2, .calc h3 { font-size:1.08rem; font-weight:650; letter-spacing:-.01em; margin:0 0 4px }
.blurb { color:var(--muted); font-size:.92rem; margin:0 0 8px; max-width:62ch }
.q { display:flex; flex-wrap:wrap; align-items:center; gap:8px 8px; font-size:1.08rem; margin:10px 0 4px; line-height:1.3 }
.in { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; background:var(--field); max-width:100% }
.in:focus-within { border-color:var(--accent) }
.in input { width:6.8em; min-width:0; border:0; outline:0; background:transparent; color:var(--fg); font:600 1.08rem/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif;
            padding:9px 10px; font-variant-numeric:tabular-nums; border-radius:10px }
.in.pc input { width:5.2em; padding-right:2px }
.in .u { color:var(--muted); padding:0 10px 0 0; font-weight:600 }
.in input[aria-invalid="true"] { color:var(--err) }
.q select { font-size:1.02rem; padding:8px 8px }

.out { margin-top:10px; padding-top:10px; border-top:1px solid var(--line) }
.main { font-size:clamp(1.5rem,6vw,2rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.out.need .main { font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0 }
.out.err .main { font-size:1rem; font-weight:600; color:var(--err); letter-spacing:0 }
.sub { color:var(--muted); margin-top:2px; overflow-wrap:anywhere }
.sub:empty { display:none }
.work { font:.95rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-top:6px; overflow-wrap:anywhere }
.work:empty { display:none }
.out dl { margin-top:8px }
.out dl div { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px dashed var(--line); font-size:.93rem }
.out dt { color:var(--muted) } .out dd { font-weight:600; text-align:right; overflow-wrap:anywhere; min-width:0 }
.note { color:var(--muted); font-size:.9rem; margin-top:6px }
.acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px }
.acts button, .btn { font:inherit; font-size:.85rem; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer }
.acts button:hover, .btn:hover { color:var(--fg); border-color:var(--accent) }

.conv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; align-items:center; margin:10px 0 4px; max-width:24rem }
.conv label { color:var(--muted); font-size:.95rem }
.conv .in input { width:100% }
.conv .in { width:100% }

.aside { color:var(--muted); font-size:.92rem; margin:2px 2px 0 }
.topics { margin-top:30px }
.topics h2 { font-size:1rem; margin:0 0 8px }
.topics ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.topics a { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--fg); font-size:.92rem }
.topics a:hover { border-color:var(--accent) }

.about { max-width:70ch; margin:40px 0 0; padding-top:22px; border-top:1px solid var(--line); color:color-mix(in srgb, var(--fg) 72%, var(--bg)); font-size:.95rem; line-height:1.6 }
.about h2 { margin:0 0 4px; font-size:1.15rem; font-weight:650; color:var(--fg) }
.about h2:not(:first-child) { margin-top:20px }
.about h3 { margin:18px 0 4px; font-size:1rem; font-weight:600; color:var(--fg) }
.about p { margin:0 0 6px; overflow-wrap:break-word }
.foot { margin-top:26px; color:var(--muted); font-size:.85rem; text-align:center }
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }
[hidden] { display:none !important }

/* gripe network badge (same on every site) */
.gn-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px 22px }
.gn-terms { color:var(--muted,#8a8a8a); font:.8rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration:none; text-align:center }
.gn-terms:hover { color:var(--accent,#e5484d); text-decoration:underline }
.gn { display:inline-flex; align-items:center; gap:10px; padding:6px 6px 6px 14px; border:1px solid var(--line,#e4e0da); border-radius:999px;
      background:var(--panel,var(--hover,#f3efe9)); color:var(--fg,#1a1a1a); text-decoration:none;
      font:500 .9rem/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; transition:border-color .15s, transform .15s }
.gn:hover { border-color:var(--accent,#e5484d); transform:translateY(-1px) }
.gn:focus-visible { outline:2px solid var(--accent,#e5484d); outline-offset:2px }
.gn-dot { width:8px; height:8px; border-radius:50%; background:var(--accent,#e5484d); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#e5484d) 22%, transparent) }
.gn b { color:var(--accent,#e5484d); font-weight:700 }
.gn-more { padding:5px 11px; border-radius:999px; background:var(--accent,#e5484d); color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap }
@media (prefers-reduced-motion: reduce) { .gn { transition:none } .gn:hover { transform:none } html { scroll-behavior:auto } }
@media (max-width:420px) { .in input { width:5.4em } .in.pc input { width:4.4em } .q { font-size:1.02rem } }