/* Styles are just sets of variables, so adding one is easy. */
  :root, html[data-style="yotsuba-b"] {
    --bg: #eef2ff;  --fade: #d6daf0;
    --text: #000000; --muted: #707070;
    --link: #34345c; --hover: #dd0000;
    --title: #af0a0f; --subject: #0f0c5d; --name: #117743;
    --reply: #d6daf0; --border: #b7c5d9; --block: #9988ee;
    --input: #ffffff; --focus: #34345c;
  }
  html[data-style="futaba"] {
    --bg: #ffffee;  --fade: #f7efe6;
    --text: #800000; --muted: #86694f;
    --link: #0000ee; --hover: #dd0000;
    --title: #af0a0f; --subject: #cc1105; --name: #117743;
    --reply: #f4e8dd; --border: #d8c9b7; --block: #ea8f81;
    --input: #ffffff; --focus: #800000;
  }
  html[data-style="tomorrow"] {
    --bg: #1d1f21;  --fade: #282a2e;
    --text: #c5c8c6; --muted: #8a8e8c;
    --link: #81a2be; --hover: #de935f;
    --title: #c5c8c6; --subject: #b294bb; --name: #b5bd68;
    --reply: #282a2e; --border: #111111; --block: #373b41;
    --input: #1d1f21; --focus: #81a2be;
  }

  * { box-sizing: border-box; }
  html { color-scheme: light; }
  html[data-style="tomorrow"] { color-scheme: dark; }
  body {
    margin: 0; padding: 0 8px 24px;
    background: var(--bg) linear-gradient(to bottom, var(--fade), var(--bg) 220px) no-repeat;
    color: var(--text);
    font: 13px/1.4 arial, helvetica, sans-serif;
  }
  a { color: var(--link); text-decoration: none; }
  a:hover { color: var(--hover); }
  hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
  main { max-width: 1100px; margin: 0 auto; }

  /* Top bar */
  .topbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 6px 0; font-size: 11px; }
  .topbar select { font-size: 11px; }

  /* Board title */
  .board-title {
    margin: 14px 0 0; text-align: center; color: var(--title);
    font: bold 28px/1.2 tahoma, sans-serif; letter-spacing: -2px;
  }
  .board-sub { margin: 2px 0 0; text-align: center; font-size: 10px; }

  /* Reply-style boxes */
  .reply {
    background: var(--reply); border: 1px solid var(--border); border-left: 0; border-top: 0;
    padding: 4px 8px 8px; margin: 8px 0;
    overflow-x: auto;   /* wide chart/buttons scroll in place, never out of the card */
  }
  .subject { color: var(--subject); font-weight: bold; }
  .name { color: var(--name); font-weight: bold; }
  .reply h2 { margin: 2px 0 6px; font-size: 13px; }
  .small { font-size: 11px; color: var(--muted); }
  .empty { margin: 0; padding: 40px 8px; text-align: center; color: var(--muted); }

  /* ---- mode / range / toggle rows (4chan-style boxed buttons) ---- */
  .modes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; }
  .btn {
    font: 13px arial, helvetica, sans-serif; color: var(--text); background: var(--input);
    border: 1px solid var(--border); padding: 4px 12px; cursor: pointer;
  }
  .btn:hover { border-color: var(--focus); }
  .btn[aria-pressed="true"] { background: var(--block); color: #fff; font-weight: bold; }
  html[data-style="tomorrow"] .btn[aria-pressed="true"] { color: var(--text); }
  .msep { border-left: 1px solid var(--border); height: 20px; margin: 0 4px; }
  .rowsite { font-size: 12px; color: var(--text); }
  .rowsite select { font: 12px arial, helvetica, sans-serif; }
  button:focus-visible, input:focus-visible, select:focus-visible { outline: 1px dotted var(--focus); outline-offset: 1px; }

  #dates { margin: 4px 0; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  #dates input[type="date"] {
    font: 12px arial, helvetica, sans-serif; color: var(--text); background: var(--input);
    border: 1px solid var(--border); padding: 2px 4px;
  }
  input[type="submit"] {
    font: 12px arial, helvetica, sans-serif; color: var(--text); background: var(--reply);
    border: 1px solid var(--border); padding: 2px 10px; cursor: pointer;
  }
  .formmsg { margin: 2px 0; min-height: 1.3em; color: var(--title); font-weight: bold; font-size: 11px; }

  /* ---- legend chips (one per board on the chart) ---- */
  .legend { margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; min-height: 1em; }
  .chip {
    font-size: 11px; cursor: pointer; color: var(--link);
    border-bottom: 2px solid transparent; padding-bottom: 1px;
  }
  .chip:hover { color: var(--hover); }
  .chip small { color: var(--muted); }
  .sw { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid rgba(0,0,0,0.45); vertical-align: baseline; }

  /* ---- chart ---- */
  .chart { position: relative; width: 100%; min-width: 560px; min-height: 360px; }
  .chart svg { display: block; touch-action: pan-y; font-family: arial, helvetica, sans-serif; }
  .chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
  html[data-style="tomorrow"] .chart .grid { stroke: #373b41; }
  .chart .axis { fill: var(--text); font-size: 10px; }
  .chart .line { fill: none; stroke-width: 1.5; opacity: 0.85; stroke-linejoin: round; }
  .chart .hl { fill: var(--text); opacity: 0.08; }
  html[data-style="tomorrow"] .chart .hl { opacity: 0.15; }

  .tip {
    position: absolute; z-index: 2; pointer-events: none;
    background: var(--reply); color: var(--text); border: 1px solid var(--text);
    padding: 4px 6px; font-size: 11px; min-width: 170px; max-height: 300px; overflow-y: auto;
  }
  .tip[hidden] { display: none; }
  .tip .t { font-weight: bold; margin-bottom: 2px; color: var(--subject); }
  .tip .r { display: flex; align-items: center; gap: 4px; }
  .tip .r .n { margin-left: auto; padding-left: 12px; }
  .tip .tot { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 2px; font-weight: bold; }
  .tip .inc { color: var(--title); }

  /* ---- board grid ---- */
  .gsite { margin: 6px 0 2px; }
  .gsite h3 { margin: 0 0 2px; font-size: 11px; color: var(--muted); font-weight: bold; }
  .gbtns { display: flex; flex-wrap: wrap; gap: 3px; }
  .gbtn {
    font: 12px arial, helvetica, sans-serif; color: var(--text); background: var(--input);
    border: 1px solid var(--border); padding: 3px 8px; cursor: pointer; white-space: nowrap;
  }
  .gbtn:hover { border-color: var(--focus); }
  .gbtn[aria-pressed="true"] { background: var(--block); color: #fff; }
  html[data-style="tomorrow"] .gbtn[aria-pressed="true"] { color: var(--text); }
  .gbtn small { color: inherit; opacity: 0.65; font-size: 10px; }

  footer { margin-top: 18px; text-align: center; font-size: 10px; color: var(--muted); }
  noscript p { text-align: center; color: var(--title); font-weight: bold; }