:root {
  /* "Today" theme: a modern forest palette */
  --bg: #eef2ec;          /* morning mist */
  --surface: #fafcf8;
  --ink: #17261d;         /* pine-black */
  --muted: #5b6b5f;       /* lichen */
  --line: #d6dfd3;
  --accent: #2d6a43;      /* forest */
  --accent-hover: #3b8457;
  --accent-ink: #ffffff;
  --moss: #8db255;        /* used sparingly, on dark surfaces */
  --ok: #3f8f55;
  --danger: #a9452f;
  --pine: #13241a;        /* toolbars and panels */
  --pine-2: #1c3326;
  --pine-ink: #e8f0e6;
  --pine-muted: #a9bbab;
  --pine-field: #0f1d15;
  --pine-edge: #2f4a38;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(19, 36, 26, .07), 0 8px 24px rgba(19, 36, 26, .08);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1813; --surface: #16231b; --ink: #e6efe5; --muted: #9fb2a3;
    --line: #2a3d31; --accent: #6cbf88; --accent-hover: #86d19f; --accent-ink: #0d1a12;
    --ok: #6cbf88; --danger: #e0735e;
    --pine: #0b140f; --pine-2: #132219;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.center { text-align: center; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.badge { font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
nav a { color: var(--ink); text-decoration: none; }
nav a:hover { color: var(--accent); }

main { width: 100%; max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; flex: 1; }
main.wide { max-width: 1100px; }

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ok { color: var(--ok); }
.btn.danger { color: var(--danger); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
button.link.danger { color: var(--danger); }
button:disabled { opacity: .6; cursor: default; }

/* Discover */
.discover-head { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 6px; }
.discover-btn {
  font: inherit; font-size: 28px; font-weight: 800; letter-spacing: .01em;
  padding: 22px 64px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.discover-btn:hover { transform: translateY(-2px); }
.discover-btn:active { transform: translateY(1px); }
.filter { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
select, input, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; margin-top: 20px; box-shadow: var(--shadow);
}
.card h1 { margin: 10px 0 8px; font-size: 30px; }
.card-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.tag { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 99px; padding: 2px 10px; font-weight: 600; font-size: 13px; text-transform: capitalize; }
.card-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.votes { display: flex; gap: 6px; }
.vote { font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.vote.active[data-value="1"] { color: var(--ok); border-color: var(--ok); }
.vote.active[data-value="-1"] { color: var(--danger); border-color: var(--danger); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 14px; }
.form.narrow { max-width: 360px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.form label:has(input[type=radio]) { flex-direction: row; align-items: center; font-weight: 400; gap: 10px; }
.form .row { display: flex; gap: 10px; justify-content: flex-end; }
.hint { margin: -6px 0 0; font-size: 14px; color: var(--accent); }
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); max-width: 440px; width: calc(100% - 32px); padding: 24px; }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog h2 { margin: 0 0 4px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 10px;
  opacity: 0; pointer-events: none; transition: all .2s ease; max-width: calc(100% - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger); color: #fff; }
#toast.ok { background: var(--ok); color: #fff; }

.footer { text-align: center; font-size: 13px; padding: 20px 16px; border-top: 1px solid var(--line); }

/* Admin */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; color: var(--muted); cursor: pointer; }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.count { font-size: 12px; background: var(--line); border-radius: 99px; padding: 0 7px; margin-left: 2px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 200px; }
.mod-item {
  display: grid; grid-template-columns: 1fr 260px; gap: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 12px;
}
@media (max-width: 760px) { .mod-item { grid-template-columns: 1fr; } }
.mod-item h3 { margin: 8px 0 2px; }
.mod-item h3 a { color: var(--ink); }
.mod-item p { margin: 4px 0; overflow-wrap: anywhere; }
.mod-item .url, .mod-item .safety { font-size: 13px; }
.mod-item .reason { color: var(--danger); font-size: 14px; }
.mod-item .reports { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--danger); }
.mod-side { display: flex; flex-direction: column; gap: 10px; }
.mod-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tally { font-size: 14px; color: var(--muted); }
.status { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; background: var(--line); }
.st-pending { background: #f6e3b5; color: #6b4e00; }
.st-hidden { background: #f5cfc9; color: #7a1d12; }
.st-approved { background: #cfe9d8; color: #1d5634; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; }
.audit { width: 100%; border-collapse: collapse; font-size: 14px; }
.audit th, .audit td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }

/* Home launcher */
.hero { text-align: center; padding: 24px 0 8px; }
.hero h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 8px; }
.hero .discover-btn { display: inline-block; text-decoration: none; margin: 18px 0 6px; }
.interests-box { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.site-note { margin: 14px 4px 0; text-align: center; line-height: 1.5; }
.interests-box h2 { margin: 0 0 4px; font-size: 18px; }
.small { font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font: inherit; font-size: 14px; text-transform: capitalize; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Discover view: toolbar over the framed site */
body.discover-page { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.dbar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px;
  background: var(--pine); color: var(--pine-ink); box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.dbar-logo { display: flex; flex: none; }
.dbar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.dbar-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-domain { font-size: 12px; color: var(--pine-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.dbtn {
  font: inherit; font-size: 14px; line-height: 1; color: var(--pine-ink); background: rgba(255,255,255,.09); border: 0;
  border-radius: 999px; padding: 9px 13px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.dbtn:hover { background: rgba(255,255,255,.17); }
.dbtn:disabled { opacity: .35; cursor: default; }
.dbtn.ghost { background: transparent; color: #c3d2c5; }
.dbtn.ghost:hover { background: rgba(255,255,255,.09); color: #fff; }
.dbtn.ghost.on { color: var(--moss); }
.dbtn.vote-up.on { background: #3f8f55; }
.dbtn.vote-down.on { background: #b4372b; }
.dbtn.go { background: var(--accent); color: #fff; font-weight: 800; padding: 10px 18px; }
.dbtn.go:hover { background: var(--accent-hover); }
.dpanel {
  position: absolute; z-index: 3; top: 64px; right: 12px; width: min(420px, calc(100vw - 24px));
  background: var(--pine-2); color: var(--pine-ink); border-radius: 16px; padding: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.dpanel h4 { margin: 0; }
.dpanel .chip { background: rgba(255,255,255,.09); border-color: transparent; color: var(--pine-ink); }
.dpanel .chip.on { background: var(--accent); }
.dpanel .muted { color: var(--pine-muted); }
.dpanel input { width: 100%; margin-top: 12px; background: var(--pine-field); color: var(--pine-ink); border-color: var(--pine-edge); }
.dpanel .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dframe-wrap { position: relative; flex: 1; min-height: 0; max-width: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.dframe-wrap iframe { flex: 1; width: 100%; border: 0; background: #fff; display: block; }
.dhint { margin: 0; padding: 5px 16px; text-align: center; color: var(--muted); font-size: 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.dhint button { font-size: 12px; margin-left: 6px; }
.dempty { padding: 80px 16px; text-align: center; color: var(--muted); }
@media (max-width: 760px) {
  .dbar .lbl { display: none; }
  .dbar-actions { gap: 4px; }
  .dbtn { padding: 8px 10px; }
}
@media (max-width: 480px) {
  .dbar-info, #open { display: none; }
  .dbar { justify-content: space-between; padding: 0 8px; gap: 6px; }
  .dbar-actions { gap: 2px; }
  .dbtn { padding: 8px 9px; }
  .dbtn.go { padding: 9px 12px; }
}
@media (max-width: 420px) {
  .dbar { padding: 0 6px; gap: 4px; }
  .dbar-logo img { width: 24px; height: 24px; }
  .dbar-actions { gap: 0; }
  .dbtn { padding: 7px 6px; font-size: 13px; }
  .dbtn.go { padding: 8px 10px; }
}
@media (max-width: 350px) {
  .dbtn.go { font-size: 0; padding: 8px 12px; }
  .dbtn.go::after { content: "Go ▶"; font-size: 13px; }
}
.dpanel .btn:not(.primary):not(.danger) { background: rgba(255,255,255,.09); border-color: transparent; color: var(--pine-ink); }
.dpanel .btn.danger { background: #b4372b; border-color: #b4372b; color: #fff; }
#reasons .chip { text-transform: none; }
.share-text { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.07); line-height: 1.45; word-break: break-word; user-select: all; }
.share-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dpanel a.chip.share-target { text-decoration: none; text-transform: none; }

/* "Enjoying Elsewhere Online?" prompt (discover page, logged-out visitors) */
.join-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); }
.dpanel.join-prompt {
  position: fixed; z-index: 21; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 22px 22px 18px; text-align: center;
}
.join-prompt h4 { font-size: 20px; }
.join-prompt .join-text { margin: 8px 0 4px; line-height: 1.5; }
.join-prompt .join-form input { margin-top: 10px; }
.join-prompt .join-form .btn { width: 100%; margin-top: 12px; }
.join-prompt .join-error { margin: 10px 0 0; color: #ffab9c; font-size: 14px; }
.join-prompt .join-line { margin: 12px 0 0; font-size: 14px; }
.join-prompt .join-line + .join-line { margin-top: 8px; }
.join-prompt a, .join-prompt button.link { color: #b5d68a; }
.join-prompt button.link { text-decoration: underline; }

/* Account dashboard */
.account h1 { margin: 0 0 4px; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.acct-head .badge { margin-right: 6px; color: var(--accent); border-color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.tile-n { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.tile-n.ok { color: var(--ok); }
.tile-n.warn { color: #a87400; }
.tile-n.bad { color: var(--danger); }
.tile-l { font-size: 13px; color: var(--muted); }
.card-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; }
.card-sec h2 { margin: 0 0 6px; font-size: 20px; }
.narrow-sec { max-width: 520px; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.small-tabs { margin: 0; border: 0; }
.small-tabs button { padding: 6px 10px; font-size: 14px; }
.table-wrap { overflow-x: auto; }
table.storage-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 8px; min-width: 520px; }
.storage-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.storage-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.storage-table td:first-child { font-weight: 600; white-space: nowrap; }
table.subs { width: 100%; border-collapse: collapse; font-size: 15px; }
.subs th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.subs td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.subs tr:last-child td { border-bottom: 0; }
.subs td a { color: var(--ink); font-weight: 600; text-decoration: none; }
.subs td a:hover { color: var(--accent); }
.cap { text-transform: capitalize; }
.st-rejected, .st-removed { background: #ece6de; color: #5c544a; }
@media (prefers-color-scheme: dark) {
  .st-pending { background: #4a3b10; color: #f3d98a; }
  .st-hidden { background: #4d1f1a; color: #f2b3aa; }
  .st-approved { background: #183b27; color: #a6dcb9; }
  .st-rejected, .st-removed { background: #37322c; color: #c9bfb2; }
  .tile-n.warn { color: #e0b44a; }
}

/* Password fields */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px 6px; }
.pw-rules { list-style: none; margin: -4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 12px; font-size: 13px; color: var(--muted); }
.pw-rules li::before { content: "○"; display: inline-block; width: 1.3em; }
.pw-rules li.ok { color: var(--ok); }
.pw-rules li.ok::before { content: "✓"; }
.meter { display: flex; align-items: center; gap: 10px; margin-top: -6px; }
.meter-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--line); position: relative; overflow: hidden; }
.meter-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; transition: width .2s ease, background .2s ease; }
.meter[data-score="1"] .meter-bar::after { width: 25%; background: var(--danger); }
.meter[data-score="2"] .meter-bar::after { width: 50%; background: #d08b00; }
.meter[data-score="3"] .meter-bar::after { width: 75%; background: var(--ok); }
.meter[data-score="4"] .meter-bar::after { width: 100%; background: var(--ok); }
.meter-label { font-size: 13px; color: var(--muted); min-width: 80px; text-align: right; }
.field-error { margin: -8px 0 0; font-size: 13px; color: var(--danger); }
input.invalid { border-color: var(--danger); }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.status { white-space: nowrap; }
@media (max-width: 640px) {
  table.subs thead { display: none; }
  table.subs, .subs tbody, .subs tr, .subs td { display: block; width: 100%; }
  .subs tr { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .subs tr:last-child { border-bottom: 0; }
  .subs td { padding: 0; border: 0; }
  .subs td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .subs td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .subs td:nth-child(2), .subs td:nth-child(3) { display: inline; width: auto; font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
  .subs td:nth-child(5) { grid-column: 1 / -1; font-size: 14px; }
}
.notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.notice.warn { border-left-color: #d69a1c; }
#email-sec .form .row { justify-content: flex-start; }
.forgot-row { margin: -6px 0 0; text-align: right; font-size: .9em; }
.code-input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.6em; letter-spacing: .35em; text-align: center; max-width: 12em; }
.email-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 12px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.users-table td { vertical-align: middle; }
.users-table .badge, .users-table .status { margin-left: 8px; }
.users-table .btn { padding: 5px 12px; font-size: 14px; }
.dbtn.star.on { color: #f5b301; }
.dbtn.star { font-size: 15px; }
.tile-link { text-decoration: none; color: inherit; }
.tile-link:hover { border-color: var(--accent); }
.star-n { color: #d99a00; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.fav-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.fav-card h3 { margin: 6px 0 0; font-size: 17px; }
.fav-card h3 a { color: var(--ink); text-decoration: none; }
.fav-card h3 a:hover { color: var(--accent); }
.fav-card p { margin: 0; flex: 1; }
.fav-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fav-actions .btn { padding: 6px 12px; font-size: 14px; }
.star-btn { color: #c78a00; }
#favourites { scroll-margin-top: 16px; }

/* Admin: interests tab */
.interests-admin .card-sec { margin-bottom: 18px; }
.cat-add { display: flex; gap: 10px; margin: 12px 0 8px; flex-wrap: wrap; }
.cat-add input { flex: 1; min-width: 200px; }
.cat-table td, .refile-table td { vertical-align: middle; }
.cat-name { width: 100%; max-width: 260px; text-transform: lowercase; }
.cat-name:disabled { background: transparent; border-color: transparent; color: var(--ink); font-weight: 600; }
.cat-actions { white-space: nowrap; text-align: right; }
.cat-actions .btn { padding: 5px 12px; font-size: 14px; margin-left: 6px; }
.refile-pick { min-width: 150px; text-transform: capitalize; }
.interests-admin .toolbar select { min-width: 180px; }
.hint.busy { color: var(--muted); }
.hint.ok { color: var(--ok); }
.hint.warn { color: #a86b00; }
.hint.error { color: var(--danger); }
input.autofilled, textarea.autofilled { background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }

/* Account: history */
#history { scroll-margin-top: 16px; }
.hist-day { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 4px; }
.hist-day:first-child { margin-top: 8px; }
.hist-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hist-row:last-child { border-bottom: 0; }
.hist-main { min-width: 0; }
.hist-title { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.hist-title:hover { color: var(--accent); }
.hist-vote.up { color: var(--ok); }
.hist-vote.down { color: var(--danger); }
.hist-actions { display: flex; gap: 6px; align-items: center; }
.hist-actions .btn { padding: 5px 10px; font-size: 14px; }
.icon-btn { min-width: 34px; }
.star-toggle.on { color: #d99a00; }
#hist-more { margin-top: 12px; }
@media (max-width: 560px) {
  .hist-row { grid-template-columns: 1fr auto; }
  .hist-time { display: none; }
}
.hist-time { white-space: nowrap; }

/* Feedback page */
.fb-kinds { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.fb-kinds legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.form label.fb-kind { flex-direction: row; align-items: center; gap: 0; font-weight: 500; }
.fb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kind span { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.fb-kind input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fb-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-thanks { text-align: center; padding: 40px 0; }
.fb-message { white-space: pre-wrap; margin: 10px 0 !important; }
.fb-item .mod-side { justify-content: flex-start; }
.footer a { color: inherit; text-decoration: underline; }

/* ---------- Informal voice: everything lowercase, except the privacy policy (body.formal) ----------
   Things people type, and text whose capitals matter (web addresses, feedback messages, the share
   text that gets copied), keep their real case: mark anything else like that with .keep-case. */
body:not(.formal), body:not(.formal) *, body:not(.formal) *::before, body:not(.formal) *::after,
body:not(.formal) ::placeholder { text-transform: lowercase !important; }
body:not(.formal) :is(input, textarea, select, option, code, pre, .keep-case, .keep-case *) { text-transform: none !important; }

/* About and Roadmap pages */
.prose-page { max-width: 680px; }
.prose-page p { line-height: 1.7; font-size: 17px; }
.prose-page .lead { font-size: 20px; line-height: 1.6; color: var(--ink); }
.prose-page .pull { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--accent); font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.prose-page .page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.prose-page .page-actions .btn { text-decoration: none; }
ol.roadmap { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; counter-reset: rm; }
ol.roadmap li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 17px; line-height: 1.4; }
ol.roadmap .rm-icon { font-size: 22px; width: 30px; text-align: center; flex: none; }
ol.roadmap button.link { font-size: inherit; text-decoration: underline; }

/* ---------- Forest edge: a layered treeline along the top of the footer ("today" theme only) ---------- */
html:not([data-theme]) .footer {
  position: relative; margin-top: 96px; border-top: 0; color: #34493b; background: #c3d4bf;
}
html:not([data-theme]) .footer a { color: #173322; }
html:not([data-theme]) .footer::before, html:not([data-theme]) .footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; pointer-events: none;
}
html:not([data-theme]) .footer::before {
  height: 62px; background: #c3d4bf; z-index: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100' viewBox='0 0 360 100'%3E%3Crect x='0' y='96' width='360' height='4'/%3E%3Cpolygon points='14.0,26.0 25.6,64.5 2.4,64.5'/%3E%3Cpolygon points='14.0,43.5 30.1,96.0 -2.1,96.0'/%3E%3Cpolygon points='47.1,44.0 55.7,72.6 38.5,72.6'/%3E%3Cpolygon points='47.1,57.0 59.1,96.0 35.2,96.0'/%3E%3Cpolygon points='78.4,8.0 93.0,56.4 63.9,56.4'/%3E%3Cpolygon points='78.4,30.0 98.7,96.0 58.2,96.0'/%3E%3Cpolygon points='119.5,36.0 129.5,69.0 109.6,69.0'/%3E%3Cpolygon points='119.5,51.0 133.3,96.0 105.7,96.0'/%3E%3Cpolygon points='154.4,18.0 167.3,60.9 141.5,60.9'/%3E%3Cpolygon points='154.4,37.5 172.3,96.0 136.4,96.0'/%3E%3Cpolygon points='195.7,48.0 203.6,74.4 187.7,74.4'/%3E%3Cpolygon points='195.7,60.0 206.7,96.0 184.6,96.0'/%3E%3Cpolygon points='218.9,4.0 234.1,54.6 203.7,54.6'/%3E%3Cpolygon points='218.9,27.0 240.1,96.0 197.7,96.0'/%3E%3Cpolygon points='256.4,32.0 267.0,67.2 245.8,67.2'/%3E%3Cpolygon points='256.4,48.0 271.1,96.0 241.6,96.0'/%3E%3Cpolygon points='295.9,22.0 308.1,62.7 283.6,62.7'/%3E%3Cpolygon points='295.9,40.5 312.9,96.0 278.8,96.0'/%3E%3Cpolygon points='330.6,40.0 339.9,70.8 321.4,70.8'/%3E%3Cpolygon points='330.6,54.0 343.5,96.0 317.8,96.0'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100' viewBox='0 0 360 100'%3E%3Crect x='0' y='96' width='360' height='4'/%3E%3Cpolygon points='14.0,26.0 25.6,64.5 2.4,64.5'/%3E%3Cpolygon points='14.0,43.5 30.1,96.0 -2.1,96.0'/%3E%3Cpolygon points='47.1,44.0 55.7,72.6 38.5,72.6'/%3E%3Cpolygon points='47.1,57.0 59.1,96.0 35.2,96.0'/%3E%3Cpolygon points='78.4,8.0 93.0,56.4 63.9,56.4'/%3E%3Cpolygon points='78.4,30.0 98.7,96.0 58.2,96.0'/%3E%3Cpolygon points='119.5,36.0 129.5,69.0 109.6,69.0'/%3E%3Cpolygon points='119.5,51.0 133.3,96.0 105.7,96.0'/%3E%3Cpolygon points='154.4,18.0 167.3,60.9 141.5,60.9'/%3E%3Cpolygon points='154.4,37.5 172.3,96.0 136.4,96.0'/%3E%3Cpolygon points='195.7,48.0 203.6,74.4 187.7,74.4'/%3E%3Cpolygon points='195.7,60.0 206.7,96.0 184.6,96.0'/%3E%3Cpolygon points='218.9,4.0 234.1,54.6 203.7,54.6'/%3E%3Cpolygon points='218.9,27.0 240.1,96.0 197.7,96.0'/%3E%3Cpolygon points='256.4,32.0 267.0,67.2 245.8,67.2'/%3E%3Cpolygon points='256.4,48.0 271.1,96.0 241.6,96.0'/%3E%3Cpolygon points='295.9,22.0 308.1,62.7 283.6,62.7'/%3E%3Cpolygon points='295.9,40.5 312.9,96.0 278.8,96.0'/%3E%3Cpolygon points='330.6,40.0 339.9,70.8 321.4,70.8'/%3E%3Cpolygon points='330.6,54.0 343.5,96.0 317.8,96.0'/%3E%3C/svg%3E") repeat-x left bottom / auto 100%;
}
html:not([data-theme]) .footer::after {
  height: 88px; background: #d6e2d2; z-index: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100' viewBox='0 0 360 100'%3E%3Crect x='0' y='96' width='360' height='4'/%3E%3Cpolygon points='14.0,6.0 28.9,55.5 -0.9,55.5'/%3E%3Cpolygon points='14.0,28.5 34.7,96.0 -6.7,96.0'/%3E%3Cpolygon points='57.1,20.0 69.7,61.8 44.5,61.8'/%3E%3Cpolygon points='57.1,39.0 74.6,96.0 39.6,96.0'/%3E%3Cpolygon points='94.1,0.0 110.0,52.8 78.3,52.8'/%3E%3Cpolygon points='94.1,24.0 116.2,96.0 72.1,96.0'/%3E%3Cpolygon points='134.7,26.0 146.3,64.5 123.1,64.5'/%3E%3Cpolygon points='134.7,43.5 150.8,96.0 118.6,96.0'/%3E%3Cpolygon points='176.7,2.0 192.2,53.7 161.1,53.7'/%3E%3Cpolygon points='176.7,25.5 198.3,96.0 155.0,96.0'/%3E%3Cpolygon points='214.7,14.0 228.3,59.1 201.1,59.1'/%3E%3Cpolygon points='214.7,34.5 233.6,96.0 195.8,96.0'/%3E%3Cpolygon points='255.6,8.0 270.2,56.4 241.1,56.4'/%3E%3Cpolygon points='255.6,30.0 275.9,96.0 235.4,96.0'/%3E%3Cpolygon points='304.1,22.0 316.4,62.7 291.9,62.7'/%3E%3Cpolygon points='304.1,40.5 321.1,96.0 287.1,96.0'/%3E%3Cpolygon points='336.4,0.0 352.3,52.8 320.5,52.8'/%3E%3Cpolygon points='336.4,24.0 358.5,96.0 314.3,96.0'/%3E%3C/svg%3E") repeat-x 170px bottom / auto 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='100' viewBox='0 0 360 100'%3E%3Crect x='0' y='96' width='360' height='4'/%3E%3Cpolygon points='14.0,6.0 28.9,55.5 -0.9,55.5'/%3E%3Cpolygon points='14.0,28.5 34.7,96.0 -6.7,96.0'/%3E%3Cpolygon points='57.1,20.0 69.7,61.8 44.5,61.8'/%3E%3Cpolygon points='57.1,39.0 74.6,96.0 39.6,96.0'/%3E%3Cpolygon points='94.1,0.0 110.0,52.8 78.3,52.8'/%3E%3Cpolygon points='94.1,24.0 116.2,96.0 72.1,96.0'/%3E%3Cpolygon points='134.7,26.0 146.3,64.5 123.1,64.5'/%3E%3Cpolygon points='134.7,43.5 150.8,96.0 118.6,96.0'/%3E%3Cpolygon points='176.7,2.0 192.2,53.7 161.1,53.7'/%3E%3Cpolygon points='176.7,25.5 198.3,96.0 155.0,96.0'/%3E%3Cpolygon points='214.7,14.0 228.3,59.1 201.1,59.1'/%3E%3Cpolygon points='214.7,34.5 233.6,96.0 195.8,96.0'/%3E%3Cpolygon points='255.6,8.0 270.2,56.4 241.1,56.4'/%3E%3Cpolygon points='255.6,30.0 275.9,96.0 235.4,96.0'/%3E%3Cpolygon points='304.1,22.0 316.4,62.7 291.9,62.7'/%3E%3Cpolygon points='304.1,40.5 321.1,96.0 287.1,96.0'/%3E%3Cpolygon points='336.4,0.0 352.3,52.8 320.5,52.8'/%3E%3Cpolygon points='336.4,24.0 358.5,96.0 314.3,96.0'/%3E%3C/svg%3E") repeat-x 170px bottom / auto 100%;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .footer { background: #17281d; color: #a7bbab; }
  html:not([data-theme]) .footer a { color: #cfe3d1; }
  html:not([data-theme]) .footer::before { background: #17281d; }
  html:not([data-theme]) .footer::after { background: #132119; }
}