/* Shared semantic roles and form controls. Page layouts stay local. */
:root {
  --action-fill:#c6f36b;
  --action-hover:#d6ff86;
  --action-ink:#171b11;
  --control-line:#747a70;
  --raised:#222529;
  --nav-active:#c6f36b12;
  --row-line:#34363a80;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f6f8f2;
  --surface:#ffffff;
  --raised:#eaf0e1;
  --ink:#1d2619;
  --muted:#56614f;
  --line:#cbd2c4;
  --control-line:#819074;
  --accent:#3e6717;
  --lime:#3e6717;
  --error:#b7332a;
  --nav-active:#e8f2d9;
  --row-line:#dce2d5;
}
:root[data-theme="dark"] { color-scheme:dark; }
[data-theme-control] { display:inline-flex; flex:none; }
[data-theme-control]:empty { display:none; }
.theme-toggle { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--control-line); border-radius:.6rem; color:var(--muted); background:transparent; cursor:pointer; }
.theme-toggle:hover { color:var(--ink); background:var(--raised); }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
[data-theme-control] .theme-moon, :root[data-theme="dark"] [data-theme-control] .theme-sun { display:none; }
:root[data-theme="dark"] [data-theme-control] .theme-moon { display:inline; }

select:not(:where([multiple],[size])) {
  box-sizing:border-box;
  font-family:inherit;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--control-line);
  border-radius:.6rem;
  cursor:pointer;
  text-overflow:ellipsis;
}
select:not(:where([multiple],[size])):where(:enabled):hover { border-color:var(--muted); }
select:disabled { cursor:default; opacity:.55; }
select option { color:var(--ink); background:var(--surface); }

/* Browsers without customizable selects retain their native picker. */
@supports (appearance:base-select) and selector(::picker(select)) {
  select:not(:where([multiple],[size])) {
    &, &::picker(select) { appearance:base-select; }
    column-gap:10px;

    &:open { border-color:var(--accent,var(--lime)); }
    &::picker-icon {
      content:"";
      width:7px;
      height:7px;
      margin-inline:auto 3px;
      align-self:center;
      flex-shrink:0;
      border:solid currentColor;
      border-width:0 1.5px 1.5px 0;
      color:var(--muted);
      transform:translateY(-2px) rotate(45deg);
    }
    &:open::picker-icon {
      color:var(--accent,var(--lime));
      transform:translateY(2px) rotate(225deg);
    }
    &::picker(select) {
      width:anchor-size(width);
      min-width:0;
      max-height:min(18rem,55dvh);
      margin-block:5px;
      padding:4px;
      border:1px solid var(--control-line);
      border-radius:.75rem;
      background:var(--surface);
      color:var(--ink);
      font-size:inherit;
      overscroll-behavior:contain;
    }
    & option {
      min-height:36px;
      padding:8px 9px;
      border-radius:7px;
      white-space:normal;
      overflow-wrap:anywhere;
    }
    & option:checked { color:var(--accent,var(--lime)); background:var(--nav-active); }
    & option:hover,
    & option:focus-visible { background:var(--raised); }
    & option:focus-visible { outline-offset:-2px; }
    & option::checkmark { order:1; margin-inline-start:auto; color:var(--accent,var(--lime)); }
  }
}
::selection { background:var(--action-fill); color:var(--action-ink); }
input,textarea { caret-color:var(--accent,var(--lime)); }
html { scrollbar-color:var(--control-line) var(--bg); }
.button.primary,.primary,.skip { background:var(--action-fill); color:var(--action-ink); }
.button.primary:hover,.primary:hover { background:var(--action-hover); }
@media(prefers-contrast:more) {
  :root[data-theme="light"] { --muted:#293325; --line:#69775f; --control-line:#56634d; }
}