/* Traffic Integrity Platform — design tokens
 * Light theme, high contrast, optimized for long-session scanning.
 * Inspired by Linear / GitHub: white canvas, layered grays, saturated
 * semantic colors. Tabular numerals throughout for column alignment.
 */
:root{
  /* Background layers */
  --bg:#f6f8fa;            /* page canvas */
  --panel:#ffffff;         /* card surface */
  --panel-2:#f0f3f6;       /* nested surface (table headers, chat inset) */
  --panel-3:#e6ebf1;       /* deepest inset (chat box) */
  --line:#d0d7de;          /* default border */
  --line-strong:#afb8c1;   /* prominent border */

  /* Text — strong contrast on white */
  --ink:#1f2328;           /* primary — near-black */
  --ink-dim:#424a53;       /* secondary */
  --ink-faint:#6e7681;     /* tertiary — still readable */

  /* Semantic — saturated, readable on light surfaces */
  --allow:#1a7f37;         /* approved / healthy */
  --monitor:#0969da;       /* informational */
  --warn:#9a6700;          /* watch / challenge */
  --block:#cf222e;         /* block / critical */
  --review:#8250df;        /* ambiguous / in review */

  /* Badge backgrounds — pale tints that contrast against the foreground color */
  --allow-bg:#dafbe1;
  --monitor-bg:#ddf4ff;
  --warn-bg:#fff8c5;
  --block-bg:#ffebe9;
  --review-bg:#fbefff;

  --r:10px;
  --sp:20px;
  --mono:'SF Mono',ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;

  --shadow-sm: 0 1px 2px rgba(31,35,40,.06);
  --shadow-md: 0 8px 24px rgba(31,35,40,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:#fff8c5;color:var(--ink)}

.wrap{max-width:1320px;margin:0 auto;padding:var(--sp)}

/* Header */
header{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px var(--sp);
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  box-shadow:var(--shadow-sm);
}
.logo{
  font-weight:700;letter-spacing:.4px;
  font-size:17px;color:var(--ink);
}
.logo span{color:var(--allow)}
.pill{
  font-family:var(--mono);font-size:12px;
  color:var(--ink-dim);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 12px;font-weight:500;
}
.grow{flex:1}
.upd{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

/* Tabs */
nav.tabs{
  display:flex;gap:4px;
  padding:0 var(--sp);
  background:var(--panel);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
nav.tabs a{
  display:inline-block;
  background:none;border:0;color:var(--ink-dim);
  padding:14px 18px;
  font-size:14.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;
  text-decoration:none;
  transition:color 120ms, border-color 120ms;
}
nav.tabs a.on{
  color:var(--ink);
  border-bottom-color:var(--monitor);
  font-weight:600;
}
nav.tabs a:hover{color:var(--ink)}

/* Cards */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px;
  margin-bottom:var(--sp);
  box-shadow:var(--shadow-sm);
}
.card h3{
  font-size:14px;font-weight:700;
  color:var(--ink);
  text-transform:uppercase;letter-spacing:.7px;
  margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;
}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;color:var(--ink-dim);
  font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
tr:hover td{background:var(--panel-2)}
td.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
td.num{text-align:right}

/* Badges */
.badge{
  font-family:var(--mono);font-size:11.5px;
  padding:3px 10px;border-radius:6px;
  font-weight:700;display:inline-block;
  letter-spacing:.3px;
  border:1px solid transparent;
}
.b-allow{background:var(--allow-bg);color:var(--allow);border-color:#aceebb}
.b-monitor{background:var(--monitor-bg);color:var(--monitor);border-color:#b6e3ff}
.b-warn{background:var(--warn-bg);color:var(--warn);border-color:#eac54f}
.b-block{background:var(--block-bg);color:var(--block);border-color:#ffcecb}
.b-review{
  color:var(--review);background:var(--review-bg);
  border-color:#e5cdff;
}

/* Inputs */
input[type=text],input[type=email],input[type=password],input[type=search],
select,textarea{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:7px;padding:9px 12px;
  font-family:var(--mono);font-size:13.5px;
  transition:border-color 120ms, box-shadow 120ms;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--monitor);
  box-shadow:0 0 0 3px rgba(9,105,218,.15);
}
input::placeholder{color:var(--ink-faint)}

/* Buttons */
button,.btn{
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  border-radius:7px;padding:8px 16px;cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel);color:var(--ink);
  transition:all 120ms;
}
.btn:hover,button:hover{
  border-color:var(--line-strong);
  background:var(--panel-2);
}
.btn-primary{
  background:var(--allow);color:#ffffff;border:0;
  font-weight:700;
}
.btn-primary:hover{
  filter:brightness(1.05);
  color:#ffffff;background:var(--allow);
}
.btn-danger{
  background:var(--panel);color:var(--block);
  border:1px solid var(--block);font-weight:600;
}
.btn-danger:hover{
  background:var(--block-bg);color:var(--block);
}

.kv{color:var(--ink-faint)}
.ok{color:var(--allow);font-weight:600}
.foot{
  color:var(--ink-faint);
  font-size:12px;text-align:center;
  padding:24px;font-family:var(--mono);
}
.scroll{overflow-x:auto}
code{
  font-family:var(--mono);font-size:12.5px;
  color:var(--monitor);
  background:var(--monitor-bg);
  padding:2px 6px;border-radius:4px;
  border:1px solid #cae8ff;
}

/* Proposal card */
.qcard{
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;margin-bottom:16px;
  background:var(--panel);
  box-shadow:var(--shadow-sm);
}
.qhead{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12.5px;
  margin-bottom:14px;gap:8px;flex-wrap:wrap;
  color:var(--ink-dim);
}
.feat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px 18px;font-size:13px;font-family:var(--mono);
  color:var(--ink-dim);margin:12px 0;
}
.feat b{color:var(--ink);font-weight:700}
.ai{
  font-size:14px;color:var(--ink);
  border-left:3px solid var(--review);
  padding:12px 16px;margin:12px 0;
  background:var(--review-bg);
  border-radius:0 6px 6px 0;
  line-height:1.65;
}
.qbtns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.qbtns button{
  font-family:var(--sans);font-size:13px;
  border-radius:6px;padding:7px 14px;
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel);color:var(--ink);
  font-weight:600;
}
.qbtns button:hover{
  border-color:var(--line-strong);background:var(--panel-2);
}
.qbtns button[disabled]{opacity:.5;cursor:not-allowed}
.diff{
  font-family:var(--mono);font-size:13.5px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:7px;padding:14px 16px;
  margin:6px 0;color:var(--ink);
  line-height:1.85;
}
.diff b{
  color:var(--warn);font-weight:700;
  display:inline-block;min-width:70px;
}

/* Chat panel */
.chat-box{
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:8px;padding:16px;
  min-height:300px;max-height:580px;
  overflow-y:auto;
  font-size:14px;line-height:1.65;
  color:var(--ink);
}
.chat-msg{margin:14px 0}
.chat-msg .meta{
  font-size:11.5px;font-family:var(--mono);
  margin-bottom:6px;
  font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;
}
.chat-msg.user .meta{color:var(--monitor)}
.chat-msg.assistant .meta{color:var(--allow)}
.chat-msg.tool{
  font-family:var(--mono);font-size:11.5px;
  color:var(--ink-faint);
  margin:10px 0;padding-left:10px;
  border-left:2px solid var(--line);
}
.chat-msg .body{color:var(--ink)}
/* Markdown rendering inside chat bubbles — scoped so it doesn't leak.
   Compact sizing so headers don't overwhelm the conversation thread. */
.chat-msg .body p{margin:0 0 8px 0}
.chat-msg .body p:last-child{margin-bottom:0}
.chat-msg .body h1,
.chat-msg .body h2,
.chat-msg .body h3,
.chat-msg .body h4{
  font-weight:700;color:var(--ink);
  margin:14px 0 6px;line-height:1.3;
}
.chat-msg .body h1{font-size:17px}
.chat-msg .body h2{font-size:15.5px;letter-spacing:0;text-transform:none}
.chat-msg .body h3{font-size:14.5px;letter-spacing:0;text-transform:none}
.chat-msg .body h4{font-size:13.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px}
.chat-msg .body ul,
.chat-msg .body ol{margin:6px 0 10px 22px;padding:0}
.chat-msg .body li{margin:3px 0}
.chat-msg .body code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--panel-2);color:var(--monitor);
  padding:1px 5px;border-radius:4px;
  border:1px solid var(--line);
}
.chat-msg .body pre{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 12px;margin:8px 0;
  overflow-x:auto;
  font-size:12.5px;line-height:1.5;
}
.chat-msg .body pre code{
  background:transparent;border:0;padding:0;
  color:var(--ink);font-size:inherit;
}
.chat-msg .body blockquote{
  border-left:3px solid var(--line-strong);
  margin:8px 0;padding:4px 12px;
  color:var(--ink-dim);
  background:var(--panel-2);
  border-radius:0 6px 6px 0;
}
.chat-msg .body hr{
  border:0;border-top:1px solid var(--line);
  margin:12px 0;
}
.chat-msg .body a{color:var(--monitor);text-decoration:underline;text-decoration-color:rgba(9,105,218,.4)}
.chat-msg .body a:hover{text-decoration-color:var(--monitor)}
.chat-msg .body strong{color:var(--ink);font-weight:700}
.chat-msg .body em{font-style:italic}
.chat-msg .body table.md{
  border-collapse:collapse;
  margin:8px 0;
  font-size:12.5px;
}
.chat-msg .body table.md th,
.chat-msg .body table.md td{
  border:1px solid var(--line);
  padding:6px 10px;
  text-align:left;
}
.chat-msg .body table.md th{
  background:var(--panel-2);
  font-weight:700;color:var(--ink);
  text-transform:none;letter-spacing:0;
  font-size:12.5px;
}
.chat-input{display:flex;gap:8px;margin-top:14px}
.chat-input input{flex:1}

/* Scroll bars */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:6px;
  border:2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}