/* New DB shared colour tokens. Page CSS should describe layout only. */
:root,
:root[data-theme="light"] {
  --app-header-content-width: 1240px;
  --app-header-height: 58px;
  --block-heading-height: 44px;
  --block-heading-padding-inline: 12px;
  --block-heading-padding-block: 4px;
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f5f6;
  --input-bg: #ffffff;
  --text: #101214;
  --muted: #4f5962;
  --line: #c5ccd2;
  --line-strong: #77838d;
  --accent: #55b900;
  --accent-hover: #3f8f00;
  --accent-soft: #e6f6d8;
  --on-accent: #ffffff;
  --header-bg: #69c91b;
  --header-text: #ffffff;
  --header-brand: #ffffff;
  --theme-marker: #91e341;
  --header-text-shadow: 0 1px 1px rgb(39 102 0 / 65%);
  --section-heading-bg: #70c927;
  --section-heading-text: #ffffff;
  --section-heading-muted: rgb(255 255 255 / 88%);
  --section-heading-shadow: 0 1px 1px rgb(39 102 0 / 55%);
  --mark-bg: #eaf8de;
  --row-hover: #f1faea;
  --blue: #079ed8;
  --blue-soft: #e1f5fc;
  --red: #e74379;
  --red-soft: #fde5ee;
  --green: #4cac00;
  --green-soft: #e7f6dc;
  --warning: #8a5700;
  --warning-soft: #fff0c7;
  --danger: #b42318;
  --danger-soft: #fde7e5;
  --success: #166b31;
  --success-soft: #e0f3e5;
  --header: var(--header-bg);
  --brand: var(--header-brand);
  --accent-quiet: var(--accent-soft);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #171a1d;
  --surface-2: #22262a;
  --input-bg: #0f1214;
  --text: #f5f7f8;
  --muted: #b6c0c8;
  --line: #3e464d;
  --line-strong: #78848e;
  --accent: #53adff;
  --accent-hover: #82c3ff;
  --accent-soft: #173b58;
  --on-accent: #07121b;
  --header-bg: #050607;
  --header-text: #ffffff;
  --header-brand: #6db9ff;
  --theme-marker: #53adff;
  --mark-bg: #213d54;
  --row-hover: #222f39;
  --blue: #64bfe8;
  --blue-soft: #173747;
  --red: #ff7f91;
  --red-soft: #4b222b;
  --green: #70d28b;
  --green-soft: #193d25;
  --warning: #ffd06a;
  --warning-soft: #493811;
  --danger: #ff8078;
  --danger-soft: #4b211f;
  --success: #72d990;
  --success-soft: #193d25;
  --header: var(--header-bg);
  --brand: var(--header-brand);
  --accent-quiet: var(--accent-soft);
  --section-heading-bg: #244416;
  --section-heading-text: #ffffff;
  --section-heading-muted: #d5e8cc;
  --section-heading-shadow: none;
}

:root[data-theme="another1"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --input-bg: #ffffff;
  --text: #101010;
  --muted: #555555;
  --line: #c9c9c9;
  --line-strong: #777777;
  --accent: #c51f2d;
  --accent-hover: #981722;
  --accent-soft: #ffe24c;
  --on-accent: #ffffff;
  --header-bg: #101010;
  --header-text: #ffffff;
  --header-brand: #ffdd00;
  --theme-marker: #ffdd00;
  --mark-bg: #fff1a5;
  --row-hover: #fff7c9;
  --blue: #006e9e;
  --blue-soft: #dceff7;
  --red: #c51f2d;
  --red-soft: #fae0e3;
  --green: #29743b;
  --green-soft: #e0f0e4;
  --warning: #825300;
  --warning-soft: #fff0bd;
  --danger: #b81925;
  --danger-soft: #fbe2e4;
  --success: #176b30;
  --success-soft: #dff1e3;
  --header: var(--header-bg);
  --brand: var(--header-brand);
  --accent-quiet: var(--accent-soft);
  --section-heading-bg: #171717;
  --section-heading-text: #ffffff;
  --section-heading-muted: #e5e5e5;
  --section-heading-shadow: none;
}

:root[data-theme="another2"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf7fa;
  --input-bg: #ffffff;
  --text: #10181c;
  --muted: #455b64;
  --line: #b5cdd5;
  --line-strong: #668995;
  --accent: #b71836;
  --accent-hover: #8d1028;
  --accent-soft: #cceef7;
  --on-accent: #ffffff;
  --header-bg: #8fd3e5;
  --header-text: #10181c;
  --header-brand: #93132d;
  --theme-marker: #b71836;
  --mark-bg: #d9f3f9;
  --row-hover: #e5f6fa;
  --blue: #006d93;
  --blue-soft: #d7f0f7;
  --red: #b71836;
  --red-soft: #f7dfe5;
  --green: #26733c;
  --green-soft: #def0e3;
  --warning: #7b5200;
  --warning-soft: #fff0bf;
  --danger: #ad1730;
  --danger-soft: #f8e0e5;
  --success: #176b31;
  --success-soft: #ddf0e2;
  --header: var(--header-bg);
  --brand: var(--header-brand);
  --accent-quiet: var(--accent-soft);
  --section-heading-bg: #8fd3e5;
  --section-heading-text: #10181c;
  --section-heading-muted: #314d57;
  --section-heading-shadow: none;
}

.theme-control { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.theme-control span { font-size: 13px; font-weight: 700; }
.theme-control select {
  min-height: 32px;
  padding: 0 26px 0 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: var(--header-bg);
  color: var(--header-text);
  font-size: 13px;
  font-weight: 700;
}
.theme-control option { background: var(--input-bg); color: var(--text); }

/* Shared shell for every browser-DB page. */
.app-header {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--app-header-height);
  padding: 0 max(16px, calc((100% - var(--app-header-content-width)) / 2));
  border-top: 4px solid var(--theme-marker);
  border-bottom: 1px solid var(--line-strong);
  background: var(--header-bg);
  color: var(--header-text);
  font-family: "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-shadow: var(--header-text-shadow, none);
}
.app-header .brand {
  flex: 0 0 auto;
  width: max-content;
  color: var(--header-brand);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}
.app-header > strong { flex: 0 0 auto; font-size: 14px; line-height: 1.4; white-space: nowrap; }
.app-header .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin-left: auto;
}
.app-nav { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.app-nav a {
  color: var(--header-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}
.app-nav a:hover { color: var(--header-brand); }
.app-nav a[aria-current="page"] { color: var(--header-brand); text-decoration: underline; text-underline-offset: 4px; }
.app-header .theme-control span,
.app-header .theme-control select { font-size: 14px; }

/* Block headings share one adjustable rhythm across all pages. */
.block-heading {
  min-height: var(--block-heading-height);
  padding-block: var(--block-heading-padding-block);
  padding-inline: var(--block-heading-padding-inline);
  border-bottom: 1px solid var(--line);
  background: var(--section-heading-bg);
  color: var(--section-heading-text);
  text-shadow: var(--section-heading-shadow, none);
}
.block-heading :where(h1, h2, h3, strong) { color: var(--section-heading-text); }
.block-heading p,
.block-heading small { color: var(--section-heading-muted); }
.block-heading :where(input, select, textarea, button) { text-shadow: none; }

@media (max-width: 980px) {
  .app-header { padding-inline: 12px; }
  .app-header > strong { display: none; }
  .app-nav { display: none; }
}

:where(input, select, textarea) { background-color: var(--input-bg); color: var(--text); }
:where(input, select, textarea, button):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}