/* Control center frame for the MSG Intelligence pages.
   Tokens, sidebar and vocabulary copied from templates/control.html so the
   analysis pages read as one app with the control center. Loaded after
   style.css; the page logic and its own classes are untouched. */
:root{
  --bg:#f6f7f9; --surf:#ffffff; --soft:#eef0f3;
  --ink:#141414; --dim:#3d3d3d; --lbl:#5a5a5a;
  --line:#e2e2e2; --line2:#d4d4d4;
  --accent:#2f6fd0; --accent-soft:rgba(59,130,246,0.08); --accent-nav:rgba(59,130,246,0.07); --accent-line:#3b82f6;
  --purple:#7048d8; --purple-bg:rgba(139,92,246,0.10); --purple-line:#8b5cf6;
  --amber:#8a5f00; --amber-bg:rgba(234,160,0,0.13); --amber-line:#d97706;
  --amber-note-bg:rgba(234,160,0,0.06); --amber-note-line:rgba(234,160,0,0.22);
  --btn-bg:#1a1a1a; --btn-ink:#ffffff; --btn-gold:#f5b642; --btn-line:transparent;
  --pill-dark-bg:#1a1a1a; --pill-dark-ink:#ffffff;
  --shadow:0 4px 14px rgba(0,0,0,0.14); --shadow-lg:0 8px 30px rgba(0,0,0,0.12);
  --dash:#c6c6c6;
  --surface:#ffffff; --surface-2:#f6f7f9; --border:#e2e2e2; --border-2:#e2e2e2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d0d0f; --surf:#191a1d; --soft:#232428;
    --ink:#f4f4f5; --dim:#d2d2d6; --lbl:#9a9aa1;
    --line:#303035; --line2:#3d3d44;
    --accent:#7fb0ff; --accent-soft:rgba(127,176,255,0.11); --accent-nav:rgba(127,176,255,0.13); --accent-line:#7fb0ff;
    --purple:#b79bff; --purple-bg:rgba(183,155,255,0.13); --purple-line:#b79bff;
    --amber:#ffc44d; --amber-bg:rgba(255,196,77,0.13); --amber-line:#ffc44d;
    --amber-note-bg:rgba(255,196,77,0.06); --amber-note-line:rgba(255,196,77,0.28);
    --btn-bg:#2a2b30; --btn-ink:#f4f4f5; --btn-gold:#ffc44d; --btn-line:#3d3d44;
    --pill-dark-bg:#f4f4f5; --pill-dark-ink:#0d0d0f;
    --shadow:0 4px 14px rgba(0,0,0,0.5); --shadow-lg:0 8px 30px rgba(0,0,0,0.55);
    --dash:#4a4a52;
    --surface:#191a1d; --surface-2:#232428; --border:#303035; --border-2:#303035;
  }
}
:root[data-theme="dark"]{
  --bg:#0d0d0f; --surf:#191a1d; --soft:#232428;
  --ink:#f4f4f5; --dim:#d2d2d6; --lbl:#9a9aa1;
  --line:#303035; --line2:#3d3d44;
  --accent:#7fb0ff; --accent-soft:rgba(127,176,255,0.11); --accent-nav:rgba(127,176,255,0.13); --accent-line:#7fb0ff;
  --purple:#b79bff; --purple-bg:rgba(183,155,255,0.13); --purple-line:#b79bff;
  --amber:#ffc44d; --amber-bg:rgba(255,196,77,0.13); --amber-line:#ffc44d;
  --amber-note-bg:rgba(255,196,77,0.06); --amber-note-line:rgba(255,196,77,0.28);
  --btn-bg:#2a2b30; --btn-ink:#f4f4f5; --btn-gold:#ffc44d; --btn-line:#3d3d44;
  --pill-dark-bg:#f4f4f5; --pill-dark-ink:#0d0d0f;
  --shadow:0 4px 14px rgba(0,0,0,0.5); --shadow-lg:0 8px 30px rgba(0,0,0,0.55);
  --dash:#4a4a52;
  --surface:#191a1d; --surface-2:#232428; --border:#303035; --border-2:#303035;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;text-align:left}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- frame ---------- */
.app{display:flex;min-height:100vh;align-items:stretch}
.side{
  width:260px;flex:0 0 260px;background:var(--surf);
  border-right:0.5px solid var(--line);
  padding:24px 0 20px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{padding:0 20px 18px;border-bottom:0.5px solid var(--line);margin-bottom:6px}
.brand-n{font-size:16px;font-weight:500}
.brand-s{font-size:12px;color:var(--lbl);margin-top:2px}
.navwrap{padding:8px 20px 0}
.navgroup{padding:0 20px}
.navrule{height:0.5px;background:var(--line);margin:12px 20px}
.navlist{display:flex;flex-direction:column;gap:1px}
.nav{
  display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;
  font-size:13px;cursor:pointer;color:var(--ink);background:transparent;width:100%;
  text-decoration:none;
}
.nav:hover{background:var(--soft)}
.nav[aria-current="page"]{color:var(--accent);background:var(--accent-nav);font-weight:500}
.nav i{font-style:normal;font-size:15px;width:18px;text-align:center;flex-shrink:0}
.sidefoot{margin-top:auto;padding:16px 20px 0;border-top:0.5px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sfline{font-size:11px;line-height:1.5;color:var(--lbl)}
.sfline b{color:var(--ink);font-weight:500}
.sfline a{color:var(--lbl)}

.main{flex:1;min-width:0;padding:32px 40px 120px}
.col{max-width:860px;display:flex;flex-direction:column}
h1{font-size:22px;font-weight:500;margin:0 0 4px;letter-spacing:-0.005em;text-wrap:balance}
.sub{font-size:14px;color:var(--ink);margin:0 0 28px;line-height:1.5;max-width:66ch}
.topbar{display:none}

/* ---------- vocabulary ---------- */
.lbl{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--lbl);margin:0 0 12px}
.card{background:var(--surf);border:0.5px solid var(--line);border-radius:12px;padding:20px}
.card-sm{background:var(--surf);border:0.5px solid var(--line);border-radius:12px;padding:16px}
.soft{background:var(--soft);border-color:var(--line)}
.note{font-size:13px;line-height:1.7}
.note-sm{font-size:12px;line-height:1.6}
.pill{display:inline-block;font-size:10px;font-weight:500;padding:2px 8px;border-radius:99px;white-space:nowrap}
.p-blue{background:var(--accent-soft);color:var(--accent)}
.p-purple{background:var(--purple-bg);color:var(--purple)}
.p-orange,.p-amber{background:var(--amber-bg);color:var(--amber)}
.p-grey{background:var(--soft);color:var(--dim)}
.p-dark{background:var(--pill-dark-bg);color:var(--pill-dark-ink)}
.phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.phead h1{margin:0}
.runbtn{
  background:var(--btn-bg);color:var(--btn-gold);border:0.5px solid var(--btn-line);
  border-radius:8px;padding:13px 20px;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;
}
.runinput{
  flex:1;min-width:0;background:var(--bg);border:0.5px solid var(--line);border-radius:8px;
  padding:13px 16px;font-size:14px;color:var(--ink);font-family:inherit;
}
.runinput::placeholder{color:var(--lbl)}

/* ---------- the legacy page sits inside the column as one card ---------- */
.app-outer{padding:0;max-width:none;margin:0}
.screen-wrap{border:0.5px solid var(--line);border-radius:12px;box-shadow:none;background:var(--surf)}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .app{flex-direction:column}
  .side{
    position:static;width:100%;flex:none;height:auto;
    border-right:none;border-bottom:0.5px solid var(--line);padding:16px 0;
  }
  .side[data-open="false"] .navwrap,
  .side[data-open="false"] .navgroup,
  .side[data-open="false"] .navrule,
  .side[data-open="false"] .sidefoot{display:none}
  .brand{border-bottom:none;margin-bottom:0;padding-bottom:0;display:flex;align-items:center;gap:12px}
  .brand div{flex:1;min-width:0}
  .topbar{display:block}
  .menu{border:0.5px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;white-space:nowrap}
  .sidefoot{margin-top:14px}
  .main{padding:24px 16px 110px}
}