/* style.css -- rfc.geneticassemblies.com
   No external font deps; system mono stack only. */

:root {
  --bg:         #f2f0e9;     /* bone -- main viewer in light mode */
  --bg-pane:    #ffffff;     /* white panes (preseed slide style) */
  --bg-elev:    #fff0e0;
  --fg:         #1a1a1a;
  --fg-dim:     #4a4a4a;
  --fg-mute:    #8a8a8a;
  --fg-bright:  #000000;
  --accent:     #ff4d00;
  --accent-dim: #ffb38c;
  --highlight:  #00cc66;
  --warn:       #cc2200;
  --ok:         #00cc66;
  --rule:       #1a1a1a;
  --rule-2:     #e6e2d4;

  --main-bg:        var(--bg);
  --main-fg:        var(--fg);
  --main-fg-dim:    var(--fg-dim);
  --main-fg-mute:   var(--fg-mute);
  --main-fg-bright: var(--fg-bright);
  --main-rule:      var(--rule);
  --bracket-color:  var(--fg);

  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

body[data-theme="dark"] {
  --bg-pane:        #f2f0e9;     /* dark mode: keep bone panes around the dark viewer */
  --main-bg:        #1a1a1a;
  --main-fg:        #e8e3d3;
  --main-fg-dim:    #b8b0a0;
  --main-fg-mute:   #6a6457;
  --main-fg-bright: #ffffff;
  --main-rule:      #2e2c27;
  --bracket-color:  var(--accent);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 15.5px;
  line-height: 1.55;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }

/* ---- APP GRID ---- */
.app {
  display: grid;
  grid-template-rows: 40px 1fr 24px;
  grid-template-columns: 30ch 1fr 26ch;
  grid-template-areas:
    "top  top  top"
    "left main right"
    "bot  bot  bot";
  height: 100vh;
  gap: 0;
}

/* ---- TOP HEADER ---- */
.top {
  grid-area: top;
  background: var(--bg-pane);
  border-bottom: 2px solid var(--fg);
  display: grid;
  grid-template-columns: 30ch 1fr 26ch;
  align-items: stretch;
}
.top .id {
  border-right: 2px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
}
.top .id .brand-link {
  color: var(--fg);
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.top .id .mark {
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 14px;
}
.top .id .mark .swatch {
  display: inline-block; width: 14px; height: 14px;
  background: var(--accent); margin-right: 8px;
  vertical-align: -2px; border: 2px solid var(--fg);
}
.top .id .ver { color: var(--fg-mute); font-size: 11px; }

.top .center {
  display: flex; align-items: center;
  padding: 0 14px; gap: 16px;
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.top .center .seg .k { color: var(--fg-mute); margin-right: 4px; }
.top .center .seg .v { color: var(--fg); }
.top .center .seg.acc  .v { color: var(--accent); }
.top .center .seg.high .v { color: var(--highlight); }

.top .right {
  border-left: 2px solid var(--rule);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 12px; gap: 10px;
  font-size: 11px;
  color: var(--fg-dim);
}
.top .right .light {
  width: 9px; height: 9px; background: var(--ok); border: 2px solid var(--fg);
}

.theme-toggle {
  appearance: none; background: var(--bg-pane); border: 2px solid var(--fg);
  padding: 0; cursor: pointer; font: inherit; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg); display: inline-flex;
}
.theme-toggle span { padding: 2px 6px; }
.theme-toggle .on  { background: var(--fg); color: var(--bg-pane); }
.theme-toggle .off { background: transparent; }
body[data-theme="dark"] .theme-toggle .on  { background: transparent; color: var(--fg); }
body[data-theme="dark"] .theme-toggle .off { background: var(--fg); color: var(--bg-pane); }

/* ---- LEFT PANE ---- */
.left {
  grid-area: left;
  background: var(--bg-pane);
  border-right: 2px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 0;
}
.left .scroll { flex: 1; overflow-y: auto; min-height: 0; }

.tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--rule);
  background: var(--bg-pane);
}
.tabs button {
  appearance: none; background: var(--bg-pane);
  border: none; border-right: 2px solid var(--rule);
  padding: 10px 8px;
  font: inherit; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-mute); cursor: pointer;
}
.tabs button:last-child { border-right: none; }
.tabs button.active { background: var(--fg); color: var(--bg-pane); }
.tabs button:hover:not(.active) { background: var(--bg-elev); color: var(--fg); }

.files { padding-bottom: 16px; }
.files[hidden] { display: none; }
.files .group {
  display: inline-block;
  margin: 14px 12px 6px;
  padding: 3px 8px;
  border: 2px solid var(--fg);
  background: var(--bg-pane);
  color: var(--fg);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.files a {
  display: grid; grid-template-columns: 4ch 1fr;
  gap: 10px; padding: 3px 12px;
  color: var(--fg); text-decoration: none;
  border-left: 2px solid transparent;
  white-space: nowrap;
  font-size: 14px;
}
.files a .id { color: var(--fg-dim); }
.files a .nm { overflow: hidden; text-overflow: ellipsis; }
.files a:hover { background: var(--rule-2); }
.files a.active {
  background: var(--bg-elev);
  border-left-color: var(--accent);
  color: var(--fg-bright);
  font-weight: 700;
}
.files a.active .id { color: var(--accent); }

.left-footer {
  border-top: 2px solid var(--rule);
  background: var(--bg-pane);
  padding: 10px;
}
.copy-all-btn {
  display: block;
  width: 100%;
  appearance: none;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--fg);
  box-shadow: 2px 2px 0 0 var(--fg);
  padding: 8px 6px;
  font: inherit; font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.copy-all-btn:hover { background: #e64500; }
.copy-all-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--fg);
}
.copy-all-btn.copied { background: var(--fg); color: var(--accent); }

/* ---- RIGHT PANE ---- */
.right-pane {
  grid-area: right;
  background: var(--bg-pane);
  border-left: 2px solid var(--rule);
  overflow-y: auto;
}
.pane-h {
  color: var(--fg-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 10px 12px 6px;
  border-bottom: 2px solid var(--rule);
  display: flex; justify-content: space-between;
}
.meta { padding: 10px 12px; font-size: 13px; border-bottom: 2px solid var(--rule); }
.meta dl { margin: 0; display: grid; grid-template-columns: 8ch 1fr; gap: 5px 10px; }
.meta dt { color: var(--fg-mute); }
.meta dd { margin: 0; color: var(--fg); }
.meta dd.highlight { color: var(--highlight); }
.meta dd.accent    { color: var(--accent); }

.blurb { padding: 12px; font-size: 13px; line-height: 1.5; color: var(--fg-dim); }
.blurb p { margin: 0 0 10px; }
.blurb p:last-child { margin: 0; }
.blurb a { color: var(--accent); text-decoration: underline dotted; }

.toc a {
  display: flex; gap: 8px;
  padding: 4px 12px;
  color: var(--fg); text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.toc a .sn { color: var(--accent); width: 4ch; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.toc a:hover { background: var(--rule-2); }
.toc a.active {
  background: var(--bg-elev);
  border-left-color: var(--accent);
  color: var(--fg-bright);
}
.toc-empty { padding: 6px 12px; color: var(--fg-mute); font-size: 12px; }

/* ---- MAIN ---- */
.main {
  grid-area: main;
  overflow: auto;
  position: relative;
  background: var(--main-bg);
  color: var(--main-fg);
}
.main::before, .main::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  z-index: 2; pointer-events: none;
}
.main::before {
  top: 10px; left: 10px;
  border-top: 2px solid var(--bracket-color);
  border-left: 2px solid var(--bracket-color);
}
.main::after {
  top: 10px; right: 10px;
  border-top: 2px solid var(--bracket-color);
  border-right: 2px solid var(--bracket-color);
}

.main-inner {
  padding: 28px 24px 56px;
  display: grid;
  grid-template-columns: 5ch minmax(0, 80ch);
  justify-content: center;
  column-gap: 18px;
}
.gutter {
  color: var(--main-fg-mute);
  text-align: right;
  padding-right: 14px;
  user-select: none;
  border-right: 1px solid var(--main-rule);
  font-family: var(--font-mono);
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
}
.gutter span { display: block; }

.body {
  white-space: pre;
  font-family: var(--font-mono);
  color: var(--main-fg);
}
.body .h     { color: var(--main-fg-bright); font-weight: 700; }
.body .hdr   { color: var(--accent); font-weight: 700; }
.body .tag   { color: var(--highlight); font-weight: 700; }
.body .dim   { color: var(--main-fg-mute); }
.body .ref   { color: var(--main-fg-mute); }
.body .num   { color: var(--accent); }
.body .sign  { color: var(--ok); }
.body .dot   { color: var(--main-fg-mute); }
.body .title { color: var(--main-fg-bright); font-weight: 800; }
.body a {
  color: var(--main-fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--main-fg-mute);
}
.body a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.body a .id { color: var(--accent); font-weight: 700; }
.body a.copy-all,
.body a.copy-one {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  font-weight: 700;
}
.body a.copy-all:hover,
.body a.copy-one:hover {
  background: var(--accent);
  color: var(--main-bg);
  border-bottom-color: transparent;
}
.body a.copy-all.copied,
.body a.copy-one.copied {
  background: var(--main-fg-bright);
  color: var(--accent);
  border-bottom-color: transparent;
}
.body a.ref-link {
  color: var(--accent);
  border-bottom: none;
}

::highlight(find) {
  background: var(--accent);
  color: #fff;
}

/* ---- BOTTOM MODELINE ---- */
.bot {
  grid-area: bot;
  background: var(--accent);
  border-top: 2px solid var(--fg);
  display: flex; align-items: center;
  padding: 0 14px; gap: 14px;
  font-size: 11px; color: var(--bg);
  font-weight: 700; letter-spacing: 0.06em;
}
.bot .mode { background: var(--fg); color: var(--accent); padding: 1px 8px; font-weight: 700; }
.bot .seg .k { color: var(--bg); opacity: 0.7; margin-right: 4px; }
.bot .seg .v { color: var(--bg); }
.bot .spacer { flex: 1; }
.bot .keys { display: inline-flex; gap: 14px; }
.bot .keys b {
  color: var(--accent); background: var(--bg);
  border: 2px solid var(--fg); padding: 0 5px; margin-right: 4px;
}

/* ---- FIND OVERLAY ---- */
.find {
  position: fixed;
  left: 30ch; right: 26ch; bottom: 24px;
  z-index: 10;
  background: var(--bg-pane);
  border: 2px solid var(--fg);
  border-bottom: none;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.find[hidden] { display: none; }
.find .find-prompt { color: var(--accent); font-weight: 700; }
.find .find-input {
  flex: 1;
  appearance: none;
  background: transparent;
  border: none; outline: none;
  font: inherit;
  font-family: var(--font-mono);
  color: var(--fg);
}
.find .find-count {
  color: var(--fg-mute);
  font-size: 11.5px;
  min-width: 6ch; text-align: right;
}
.find .find-hint { color: var(--fg-mute); font-size: 10.5px; letter-spacing: 0.04em; }

@media (max-width: 1000px) { .find { right: 0; } }
@media (max-width: 700px)  { .find { left: 0; right: 0; } }

/* ---- HELP OVERLAY ---- */
.help {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center;
}
.help[hidden] { display: none; }
.help-card {
  background: var(--bg-pane);
  color: var(--fg);
  border: 2px solid var(--fg);
  box-shadow: 6px 6px 0 0 var(--fg);
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  max-width: 440px;
  width: 90%;
}
.help-card h2 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.help-card dl {
  display: grid; grid-template-columns: 12ch 1fr;
  gap: 6px 12px;
  margin: 0 0 14px;
}
.help-card dt { color: var(--accent); font-weight: 700; }
.help-card dd { margin: 0; color: var(--fg); }
.help-card p { margin: 0; color: var(--fg-mute); font-size: 12px; }
.help-card b { color: var(--accent); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-mute); }
::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb { background: var(--main-rule); }

/* Responsive */
@media (max-width: 1000px) {
  .app { grid-template-columns: 30ch 1fr; grid-template-areas: "top top" "left main" "bot bot"; }
  .top { grid-template-columns: 30ch 1fr; }
  .right-pane, .top .right { display: none; }
}
@media (max-width: 700px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "top" "main" "bot"; }
  .left { display: none; }
}