/* shared titlebar/menubar chrome plus the theme tokens: the app (style.css)
   and static pages (site.css) both link this, and both read these vars.
   Dark is a token swap only -- no rule may hardcode a color. */
:root {
  color-scheme: light;
  --bg: #fff;
  --fg: #1a1a1a;
  --fg-strong: #111;
  --fg-dim: #444;
  --muted: #888;
  --accent: #1971c2;   /* mirrored as a literal by ::highlight(playhead) in style.css */
  --accent-hi: #0b4f8c;
  --accent-ring: rgba(25, 113, 194, 0.35);
  --on-accent: #fff;
  --edit: #862e9c;

  --bg-panel: #fafafa;      /* toolbar, status bar, log, help card */
  --bg-raised: #fff;        /* menus, dialogs, buttons, popovers */
  --bg-sunken: #f6f6f6;     /* kbd, code, inert readonly text */
  --bg-inactive: #f1f1f1;   /* switched-off chips, missing clips */
  --hover: #eef;
  --line: #ccc;             /* control borders */
  --line-soft: #ddd;        /* section rules */
  --line-faint: #e3e3e3;    /* menu separators */

  --err: #c92a2a;
  --ok: #2b8a3e;
  --warn: #9a6700;

  --hl-bg: #ffec99;
  --hl-fg: #111;
  --hl-sel: #ffd43b;        /* selection over a highlight must still read yellow */

  --cmt-bg: #fff8c5;
  --cmt-line: #e6d200;
  --cmt-fg: #8a6d00;
  --cmt-ctl: #b08900;
  --cmt-field: #fffdf0;
  --cmt-mark: #e6a700;

  --edit-bg: #f3e8f7;
  --edit-bg-soft: #fdf7ff;

  --clip-bg: #e7f5ff;
  --clip-line: #b3d4e8;
  --clip-btn-bg: #eef7fd;
  --clip-btn-fg: #2b6a8c;

  --amber-bg: #fff4e6;      /* music beds, drift badge */
  --amber-bg-on: #ffe8cc;
  --amber-line: #ffc078;
  --amber-line-strong: #e8a33d;
  --amber-fg: #9c5a12;

  --backdrop: rgba(0, 0, 0, 0.25);
  --shadow: rgba(0, 0, 0, 0.18);
  --shadow-sm: rgba(0, 0, 0, 0.13);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17191d;
  --fg: #dfe3e8;
  --fg-strong: #f4f6f8;
  --fg-dim: #b3bbc5;
  --muted: #7e8794;
  --accent: #6cb0f0;   /* mirrored as a literal by ::highlight(playhead) in style.css */
  --accent-hi: #9ccdf7;
  --accent-ring: rgba(108, 176, 240, 0.4);
  --on-accent: #10141a;
  --edit: #d0a4ee;

  --bg-panel: #1d2025;
  --bg-raised: #22262c;
  --bg-sunken: #14161a;
  --bg-inactive: #1c1f24;
  --hover: #2e343d;
  --line: #4a515b;
  --line-soft: #343a42;
  --line-faint: #2b3037;

  --err: #ff8a8a;
  --ok: #63d17c;
  --warn: #d9a441;

  --hl-bg: #6b5600;
  --hl-fg: #ffe9a3;
  --hl-sel: #4a3c00;

  --cmt-bg: #37310f;
  --cmt-line: #6d6220;
  --cmt-fg: #e2d190;
  --cmt-ctl: #c6b46a;
  --cmt-field: #2a2610;
  --cmt-mark: #c9a227;

  --edit-bg: #3a2b4d;
  --edit-bg-soft: #291f39;

  --clip-bg: #16324b;
  --clip-line: #35617f;
  --clip-btn-bg: #1a2c3c;
  --clip-btn-fg: #9fc9e8;

  --amber-bg: #3a2b16;
  --amber-bg-on: #4b381b;
  --amber-line: #8a6430;
  --amber-line-strong: #b3813c;
  --amber-fg: #f0bd7c;

  --backdrop: rgba(0, 0, 0, 0.6);
  --shadow: rgba(0, 0, 0, 0.7);
  --shadow-sm: rgba(0, 0, 0, 0.5);
}

#titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 2px;
  line-height: normal;   /* site.css body 1.55: menubar height drift */
}
#titlebar h1 {
  margin: 0 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}
#titlebar h1 > button {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#appVersion { font-size: 10px; font-weight: 400; color: var(--muted); align-self: flex-end; }

#ghUser {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-raised);
  cursor: pointer;
}
#ghUser:hover { border-color: var(--accent); }
#ghUser img { width: 20px; height: 20px; border-radius: 50%; margin-left: -6px; }

#ghUser + #displayBtn { margin-left: 0; }
#displayBtn {
  margin-left: auto;   /* alone in the bar (static pages log in via #ghUser) */
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  background: none;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  cursor: pointer;
}
#displayBtn:hover { background: var(--hover); color: var(--fg); }

/* display dialog rides the shared titlebar: styled here, not style.css,
   so static pages (chrome.css + site.css only) get the same look */
dialog { position: relative; }
.dlgclose {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 0 4px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.dlgclose:hover { color: var(--fg); }
#displayDlg {
  min-width: 300px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--fg);
}
#displayDlg::backdrop { background: var(--backdrop); }
#displayDlg h2 { margin: 0 0 12px; font-size: 16px; }
#displayDlg .field { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 14px; }
#displayDlg .flabel { flex: 0 0 100px; }
#displayDlg select { font-size: 13px; }
#displayDlg .seg { display: inline-flex; }
#displayDlg .seg button {
  padding: 3px 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--fg);
  cursor: pointer;
}
#displayDlg .seg button:first-child { border-radius: 4px 0 0 4px; }
#displayDlg .seg button:last-child { border-radius: 0 4px 4px 0; border-left: none; }
#displayDlg .seg button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

#menubar { display: flex; align-items: center; gap: 2px; }
#menubar .menu { position: relative; }
#menubar button {
  font-size: 14px;
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
#menubar button:hover:not(:disabled) { background: var(--hover); }
#menubar button:disabled { color: var(--muted); cursor: default; }
.menuitems {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 4px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--shadow-sm);
}
.menuitems[hidden] { display: none; }
.menuitems button {
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  white-space: nowrap;
}
.menuitems button[hidden] { display: none; }   /* flex beats the UA hidden rule */
.menuitems kbd { opacity: 0.55; font-family: inherit; }
.menusep { height: 1px; background: var(--line-faint); margin: 4px 2px; }