/* ==========================================================================
   codeyoumightneed - THE sitewide stylesheet.

   Sitewide CSS structure, one file, all style. The rule for this project:
   no <style> blocks in views, no style="" attributes in markup, no second
   stylesheet. If a page needs something new, it gets a class here.

   Layers, in order:
     1. Tokens         design values as custom properties - change here only
     2. Reset + base   elements
     3. Layout         header, nav, omnibar, main, footer
     4. Components     cards, tables, forms, buttons, pills, flash, empty
     5. Pages          the few rules that belong to one screen
     6. Responsive     narrow-screen overrides, last so they win
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --bg:        #0d1117;
  --bg-sunk:   #0b0f14;
  --panel:     #161b22;
  --panel-2:   #1c2330;
  --line:      #21262d;
  --line-2:    #2d333b;
  --txt:       #e6edf3;
  --mut:       #8b949e;
  --acc:       #4c8dff;
  --acc-dim:   #173257;
  --good:      #3fb950;
  --warn:      #e3b341;
  --red:       #f85149;
  --violet:    #d2a8ff;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  --wrap: 1120px;
  --gap:  14px;

  --shadow: 0 12px 32px rgba(0, 0, 0, .55);
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

/* ── 2. RESET + BASE ───────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 18px; letter-spacing: .2px; }
h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--mut);
  margin: 26px 0 10px;
  font-weight: 500;
}
h3 { font-size: 15px; margin-bottom: 6px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

code, .mono { font-family: var(--mono); font-size: .92em; }
code {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }

.mut  { color: var(--mut); }
.small{ font-size: 12.5px; }
.right{ text-align: right; }
.nowrap { white-space: nowrap; }
.num  { font-variant-numeric: tabular-nums; }

/* ── 3. LAYOUT ─────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg));
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 15px;
  padding-bottom: 15px;
}

.brand { display: flex; align-items: baseline; gap: 9px; }
.brand .name { font-size: 17px; font-weight: 600; color: var(--txt); }
.brand .name:hover { text-decoration: none; }
.brand .dot { color: var(--acc); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .4px;
  border: 1px solid var(--line-2);
  color: var(--mut);
}
.badge.env-local      { color: var(--warn); border-color: #4a3f16; }
.badge.env-production { color: var(--good); border-color: #20402a; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-size: 14px;
  flex-wrap: wrap;
}
.site-nav a { color: var(--mut); }
.site-nav a:hover { color: var(--txt); text-decoration: none; }
.site-nav a.on { color: var(--txt); }
.site-nav a.on::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--acc);
}
.site-nav .who {
  font-size: 12px;
  color: var(--mut);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 11px;
}

main { min-height: 55vh; }
main.wrap { padding-top: 24px; padding-bottom: 40px; }

.site-footer {
  color: var(--mut);
  font-size: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.site-footer a { color: var(--mut); }

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head h1 { font-size: 20px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; }

/* ── OMNIBAR (sitewide search, sits under the header) ──────────────────── */
.omnibar { border-bottom: 1px solid var(--line); background: var(--bg-sunk); }
.omnibar .wrap { padding-top: 10px; padding-bottom: 10px; }

form.omni { display: flex; gap: 8px; position: relative; margin: 0; }
form.omni select { max-width: 190px; font-size: 13px; }
form.omni input[type=search] { flex: 1; min-width: 0; }

.omni-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 40;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
}
.omni-drop .g {
  padding: 7px 10px 3px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--mut);
}
.omni-drop a.r {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--txt);
}
.omni-drop a.r:hover,
.omni-drop a.r.sel { background: var(--panel-2); text-decoration: none; }
.omni-drop a.r .t { font-size: 13px; }
.omni-drop a.r .s { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.omni-drop .none { padding: 12px; color: var(--mut); font-size: 12.5px; text-align: center; }

/* ── 4. COMPONENTS ─────────────────────────────────────────────────────── */

/* Cards + stat grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  margin-bottom: 24px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.card.link:hover { border-color: var(--line-2); }
.card .n { font-size: 26px; font-weight: 600; }
.card .l {
  color: var(--mut);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 2px;
}
.card h3 a { color: var(--txt); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: top;
}
th {
  color: var(--mut);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .5px;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #12171f; }
.table-scroll { overflow-x: auto; }

/* Forms */
form.stack { max-width: 720px; }
.field { margin-bottom: 14px; }
label {
  display: block;
  font-size: 11px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 5px;
}
input, select, textarea {
  background: var(--bg-sunk);
  border: 1px solid var(--line-2);
  color: var(--txt);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, .15);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.hint { font-size: 11.5px; color: var(--mut); margin-top: 5px; text-transform: none; letter-spacing: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { margin-bottom: 0; }
.filters input, .filters select { width: auto; min-width: 150px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }

/* Buttons */
button, .btn {
  background: var(--acc);
  border: 1px solid var(--acc);
  color: #fff;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  width: auto;
}
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--txt); }
.btn.ghost:hover { border-color: var(--mut); }
.btn.danger { background: transparent; border-color: #4a1d1d; color: var(--red); }
.btn.sm { padding: 5px 11px; font-size: 12px; }

/* Pills */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  border: 1px solid var(--line-2);
  color: var(--mut);
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}
.pill.st-new       { color: var(--acc);    border-color: var(--acc-dim); }
.pill.st-reviewing { color: var(--warn);   border-color: #4a3f16; }
.pill.st-accepted  { color: var(--violet); border-color: #3a2a52; }
.pill.st-building  { color: var(--violet); border-color: #3a2a52; }
.pill.st-shipped   { color: var(--good);   border-color: #20402a; }
.pill.st-parked    { color: var(--mut); }
.pill.st-rejected  { color: var(--red);    border-color: #4a1d1d; }
.pill.p1 { color: var(--red);  border-color: #4a1d1d; }
.pill.p2 { color: var(--warn); border-color: #4a3f16; }
.pill.p5 { color: var(--mut); }

/* Flash */
.flash {
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 13.5px;
}
.flash.ok  { border-color: #20402a; color: var(--good); background: #0e1c13; }
.flash.err { border-color: #4a1d1d; color: var(--red);  background: #1c0e0e; }

/* Empty state */
.empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 34px 24px;
  text-align: center;
  color: var(--mut);
  font-size: 13.5px;
}
.empty .btn { margin-top: 14px; }

/* Notice - "this exists but is not built yet", labeled honestly */
.notice {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
  background: var(--panel);
  padding: 16px 18px;
  font-size: 13.5px;
}
.notice .tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--warn);
  border: 1px solid #4a3f16;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 9px;
}
.notice ul { margin: 8px 0 0; padding-left: 20px; }
.notice li { margin-bottom: 4px; }

/* Definition rows (detail screens) */
.dl { display: grid; grid-template-columns: 160px 1fr; gap: 9px 16px; font-size: 13.5px; }
.dl dt { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding-top: 3px; }
.dl dd { margin: 0; }

.prose { white-space: pre-wrap; line-height: 1.65; }

/* ── 5. PAGES ──────────────────────────────────────────────────────────── */

/* Login - the one screen with no header, nav or omnibar */
body.login-page { display: grid; place-items: center; padding: 24px; }
.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.login-box .brand { justify-content: center; margin-bottom: 4px; }
.login-box .sub { text-align: center; color: var(--mut); font-size: 12.5px; margin-bottom: 22px; }
.login-box button { width: 100%; padding: 11px; }
.login-box .row { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; }
.login-box .row input { width: auto; }
.login-box .row label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--txt); }

/* Search results */
.result { border-bottom: 1px solid var(--line); padding: 13px 0; }
.result:last-child { border-bottom: none; }
.result .t { font-size: 15px; }
.result .s { font-size: 12.5px; color: var(--mut); margin-top: 2px; }

/* Settings - the shared omnisearch module renders its own markup AND ships its
   own light-theme inline <style>. We do not edit the module (build once,
   distribute - a local fork is how drift starts), so the panel is re-themed
   from here instead. These selectors are deliberately one step MORE specific
   than the module's, which is what lets a linked stylesheet beat an inline
   <style> block that comes later in the document. */
.panel-host { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 18px 18px; }
.panel-host .omni-panel { font: 14px/1.5 var(--font); color: var(--txt); max-width: none; }
.panel-host .omni-panel h2 { color: var(--txt); font-size: 15px; text-transform: none; letter-spacing: 0; }
.panel-host .omni-panel h3 { color: var(--txt); }
.panel-host .omni-panel .card { background: var(--bg-sunk); border-color: var(--line-2); }
.panel-host .omni-panel th,
.panel-host .omni-panel td { border-bottom-color: var(--line); color: var(--txt); }
.panel-host .omni-panel th { color: var(--mut); }
.panel-host .omni-panel .muted { color: var(--mut); }
.panel-host .omni-panel input[type=text],
.panel-host .omni-panel input[type=number],
.panel-host .omni-panel select,
.panel-host .omni-panel textarea {
  background: var(--bg-sunk);
  border-color: var(--line-2);
  color: var(--txt);
  width: auto;
}
.panel-host .omni-panel button { background: var(--acc); border-color: var(--acc); }
.panel-host .omni-panel .notice { background: #0e1c13; border-color: #20402a; color: var(--good); }
.panel-host .omni-panel .maprow td { background: var(--panel-2); border-bottom-color: var(--line-2); }
.panel-host .omni-panel .mapgrid label { color: var(--mut); }
.panel-host .omni-panel .st-current      { background: #0e1c13; color: var(--good); }
.panel-host .omni-panel .st-needs_update { background: #1c0e0e; color: var(--red); }
.panel-host .omni-panel .st-config_drift { background: #1e1808; color: var(--warn); }
.panel-host .omni-panel .st-unreachable,
.panel-host .omni-panel .st-unknown      { background: var(--panel-2); color: var(--mut); }

/* A heading that opens a card should not push the card open */
.card > h2:first-child { margin-top: 0; }

/* ── 6. RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .cols, .cols-3 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { gap: 10px; }
  .site-nav { gap: 14px; font-size: 13.5px; width: 100%; margin-left: 0; }
  .page-head .actions { margin-left: 0; width: 100%; }
  form.omni select { max-width: 130px; }
}