/* Theme tokens. Dark is the default (Factorio heritage); light is opt-in. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1b1b;
  --bg-2: #242424;
  --bg-3: #303030;
  --fg: #e6e2d8;
  --fg-muted: #9a958a;
  --line: #3c3c3c;
  --accent: #ffb04a;      /* Factorio orange */
  --accent-2: #62b0ff;
  --warn: #ff7b6b;
  --ok: #9be36f;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f4ee;
  --bg-2: #ffffff;
  --bg-3: #ebe8e0;
  --fg: #1f1e1b;
  --fg-muted: #6b675e;
  --line: #d8d4ca;
  --accent: #b85c00;
  --accent-2: #1a66c2;
  --warn: #b3261e;
  --ok: #2f7a1a;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-size: 0.9em; color: var(--fg-muted); }
h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .25rem; }
.count { color: var(--fg-muted); font-weight: normal; font-size: .9em; }
.muted { color: var(--fg-muted); }
.warn { color: var(--warn); }
main { max-width: 1100px; margin: 0 auto; padding: 0 12px 3rem; }
footer { max-width: 1100px; margin: 0 auto; padding: 1rem 12px; color: var(--fg-muted); font-size: .85rem; border-top: 1px solid var(--line); }

/* Header with search */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--accent); white-space: nowrap; }
.search { position: relative; flex: 1 1 240px; }
.search input {
  width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 16px;
}
.results {
  position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0;
  list-style: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px;
  max-height: 60vh; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.results li a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: var(--fg); }
.results li a:hover, .results li.active a { background: var(--bg-3); text-decoration: none; }
.results .kind { margin-left: auto; color: var(--fg-muted); font-size: .8em; }
.tiers-nav { display: flex; gap: 2px; }
.tiers-nav a { display: inline-flex; padding: 2px; border-radius: 4px; }
.tiers-nav a:hover { background: var(--bg-3); }
.theme { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 16px; }

/* Icons: real PNG or placeholder tile. Same box either way. */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 4px; vertical-align: middle;
  image-rendering: pixelated;
}
.ph {
  background: var(--c, #666); color: #111; font-weight: 700; font-size: 11px; letter-spacing: .02em;
  font-family: ui-monospace, Menlo, Consolas, monospace; text-shadow: 0 0 2px rgba(255,255,255,.35);
}
.ph-light { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.6); }
.tiers-nav .ico, .results .ico, .techlist .ico, .grid .ico, .tierlist .ico { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }

/* Entity / tech page header */
.entity-head { display: flex; gap: 12px; align-items: flex-start; margin: 1rem 0; }
.entity-head .ico { width: 48px; height: 48px; flex-basis: 48px; font-size: 15px; }
.entity-head .sub { margin: 0; color: var(--fg-muted); }

/* Recipe rows */
.recipe { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; padding: 8px 10px; }
.recipe-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.recipe-head .ico { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }
.recipe-title { font-weight: 600; }
.recipe-meta { color: var(--fg-muted); font-size: .85em; margin-left: auto; }
.recipe-body { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.side { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 40%; }
.arrow { color: var(--fg-muted); font-size: 1.2em; padding: 0 4px; }
.slot {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px;
  border-radius: 6px; background: var(--bg-3); color: var(--fg); max-width: 100%;
}
.slot:hover { text-decoration: none; outline: 1px solid var(--accent); }
.slot .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.slot .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12em; }
.slot .note { color: var(--fg-muted); font-size: .8em; }
.recipe-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--fg-muted); font-size: .85em; }
.chip { display: inline-block; padding: 0 6px; border-radius: 10px; background: var(--bg-3); color: var(--fg); }
.chip.more { color: var(--fg-muted); }

/* Lists */
.grid, .techlist, .tierlist { list-style: none; padding: 0; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.grid a, .techlist a, .tierlist a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; color: var(--fg); }
.grid a:hover, .techlist a:hover, .tierlist a:hover { background: var(--bg-3); text-decoration: none; }
.tree { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tierlist li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cost p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lede { font-size: 1.05rem; }

/* Phone */
@media (max-width: 640px) {
  .tiers-nav { display: none; }
  .recipe-body { flex-direction: column; align-items: stretch; }
  .arrow { transform: rotate(90deg); text-align: center; }
  .tree { grid-template-columns: 1fr; }
  .slot .nm { max-width: 9em; }
  .recipe-meta { margin-left: 0; }
}

/* Pins */
.pin { background: none; border: 0; color: var(--fg-muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 14px; }
.pin:hover { color: var(--accent); background: var(--bg-3); }
.pin.pinned { color: var(--accent); }
.pins { position: relative; }
.pins > button { position: relative; }
.pins .badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent); color: #111; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 4px; }
.pins .badge:empty { display: none; }
.pins-menu { position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 260px; max-width: 90vw; max-height: 60vh; overflow: auto; list-style: none; padding: 4px 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 20; }
.pins-menu li { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.pins-menu li a { flex: 1; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pins-menu li .kind { color: var(--fg-muted); font-size: .8em; }
.pins-menu .empty { color: var(--fg-muted); padding: 8px 10px; }
.top .icon-btn { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 15px; }
.top .icon-btn:hover { background: var(--bg-3); }
.entity-head .pin { align-self: center; font-size: 18px; }
kbd { font: .8em ui-monospace, monospace; padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--fg-muted); }

/* Layout fixes from first screenshot pass */
.search { min-width: 0; }
.entity-head .pin { margin-left: auto; }
.recipe, .side, .slot { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .top { gap: 6px; }
  .brand { order: 1; }
  .pins { order: 2; margin-left: auto; }
  #theme { order: 3; }
  .search { order: 4; flex: 1 1 100%; }
  .entity-head .ico { width: 40px; height: 40px; flex-basis: 40px; }
}

/* Kind pills in search results and pin menu */
.kind { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: .75em; line-height: 1.5; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.kind.item  { background: #5b6b8a; color: #fff; }
.kind.fluid { background: #2e8b8b; color: #fff; }
.kind.tech  { background: #8a5bb0; color: #fff; }
.kind.recipe { background: #b0762b; color: #fff; }
[data-theme="light"] .kind.item  { background: #d5deef; color: #2f3f5f; }
[data-theme="light"] .kind.fluid { background: #cdeeee; color: #155f5f; }
[data-theme="light"] .kind.tech  { background: #e6d5f2; color: #4e2a70; }
[data-theme="light"] .kind.recipe { background: #f3e2c9; color: #6b4310; }
.results .kind { margin-left: auto; }

/* Science level: recipes beyond the chosen tier are kept but dimmed */
.level { position: relative; }
.level-menu { position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 240px; max-height: 60vh; overflow: auto; list-style: none; padding: 4px 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 20; }
.level-menu li { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; color: var(--fg); }
.level-menu li:hover { background: var(--bg-3); }
.level-menu li.active { color: var(--accent); font-weight: 600; }
.level-menu li .ico { width: 20px; height: 20px; flex-basis: 20px; font-size: 8px; }
.level-menu li.none { color: var(--fg-muted); }
.recipe.future { opacity: .5; }
.recipe.future:hover { opacity: .9; }
.recipe.future .recipe-title::after { content: " · future"; color: var(--warn); font-weight: normal; font-size: .85em; }
.recipe.future[data-ahead="1"] .recipe-title::after { content: " · next tier"; color: var(--accent); }
.recipe.now .recipe-title::after { content: ""; }
@media (max-width: 640px) { .level { order: 2; margin-left: auto; } .pins { margin-left: 0; } }
.recipe.unknown { opacity: .6; }
.recipe.unknown:hover { opacity: .9; }
.recipe.unknown .recipe-title::after { content: " · upgrade choice"; color: var(--fg-muted); font-weight: normal; font-size: .85em; }

/* Thematic listings */
.theme-jump { display: flex; gap: 4px; flex-wrap: wrap; margin: .5rem 0 1rem; }
.theme-jump a { display: inline-block; min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--bg-3); color: var(--fg); font-weight: 600; }
.theme-tier h3 { font-size: .95rem; color: var(--fg-muted); margin: .8rem 0 .3rem; font-weight: 600; }
.theme-rows { list-style: none; padding: 0; margin: 0; }
.theme-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 8px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 6px; }
.theme-name { display: flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 600; min-width: 220px; }
.theme-row .stats { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.theme-row .stat { white-space: nowrap; }
.theme-row .stat .lbl { color: var(--fg-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .03em; margin-right: 2px; }
.theme-row .desc { flex-basis: 100%; color: var(--fg-muted); font-size: .85em; }
.theme-tier.future { opacity: .5; }
.theme-tier.future:hover { opacity: .9; }
.theme-tier.future h2::after { content: " · future"; color: var(--warn); font-size: .85em; font-weight: normal; }
@media (max-width: 640px) { .theme-name { min-width: 0; flex-basis: 100%; } }
.theme-row .fuels { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .9em; }
.theme-row .fuels .lbl { color: var(--fg-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .03em; }
.theme-row .fuel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; background: var(--bg-3); }
.theme-row .fuel a { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); }
.theme-row .fuel .ico { width: 20px; height: 20px; flex-basis: 20px; font-size: 8px; }
.theme-row .fuel .arrow { color: var(--fg-muted); padding: 0 2px; font-size: 1em; }
.theme-row .fuel .loops { color: var(--fg-muted); font-size: .9em; }

/* Recipe preview popover (reusable: any [data-preview-recipe]) */
[data-preview-recipe] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.popover { position: fixed; z-index: 50; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: 6px; max-height: 70vh; overflow: auto; }
.popover .recipe { margin: 0 0 6px; border: 0; background: var(--bg); }
.popover .recipe:last-child { margin-bottom: 0; }
.popover .recipe-foot { font-size: .8em; }

/* Theme extras: kind badges, group links, child navigation */
.theme-row .kind { margin-left: 2px; }
.kind.ore { background: #6b5b3e; color: #fff; }
.kind.alloy { background: #3f6b6b; color: #fff; }
[data-theme="light"] .kind.ore { background: #e6dcc6; color: #4a3a1e; }
[data-theme="light"] .kind.alloy { background: #cfe6e6; color: #1f4a4a; }
.theme-tier h3 a { color: var(--accent-2); font-weight: normal; margin-left: 6px; font-size: .9em; }
.theme-children { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0 1rem; }
.theme-children a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--bg-3); color: var(--fg); }
.theme-children a:hover { background: var(--bg-2); text-decoration: none; outline: 1px solid var(--accent); }
.theme-tier .recipes { margin-top: .6rem; }
.crumb { color: var(--fg-muted); font-size: .9em; margin: .4rem 0 0; }
.theme-row .stat { white-space: normal; }
.theme-row .stats { min-width: 0; flex: 1 1 300px; }

/* Table themes (charts) */
.tbl-wrap { overflow-x: auto; margin: .5rem 0 1.5rem; border: 1px solid var(--line); border-radius: 8px; }
.tbl { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tbl th, .tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: middle; }
.tbl th { position: sticky; top: 0; background: var(--bg-2); font-weight: 600; color: var(--fg-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .03em; }
.tbl th a, .tbl th .ico { vertical-align: middle; }
.tbl th .ico { width: 20px; height: 20px; flex-basis: 20px; font-size: 8px; display: inline-flex; margin-right: 4px; }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.zero { color: var(--line); }
.tbl td.name a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.tbl td.name .ico { width: 22px; height: 22px; flex-basis: 22px; font-size: 8px; }
.tbl td.name .sub { display: block; color: var(--fg-muted); font-size: .8em; margin-left: 28px; }
.tbl tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.tbl tr.unknown td { opacity: .6; }
.tbl tr.unknown td.name::after { content: " upgrade choice"; color: var(--fg-muted); font-size: .8em; }
.tbl tr.future td { opacity: .5; }
.tbl tr.future td.name::after { content: " future"; color: var(--warn); font-size: .8em; }
.tbl-controls { display: flex; gap: 12px; align-items: center; margin: .5rem 0; color: var(--fg-muted); font-size: .9em; }
.tbl-controls label { cursor: pointer; }
body:not(.show-unknown) .tbl tr.unknown { display: none; }
/* Charts on phones: keep the name column in view while the numbers scroll */
.tbl td.name { position: sticky; left: 0; background: var(--bg); z-index: 1; max-width: 190px; white-space: normal; }
.tbl th:first-child { position: sticky; left: 0; z-index: 2; }
.tbl tr:nth-child(even) td.name { background: var(--bg-2); }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]:hover { color: var(--fg); }
.tbl th[data-sort]::after { content: " ↕"; opacity: .35; }
.tbl th[data-sort].asc::after { content: " ↑"; opacity: 1; color: var(--accent); }
.tbl th[data-sort].desc::after { content: " ↓"; opacity: 1; color: var(--accent); }
.tbl td.list { white-space: normal; min-width: 220px; max-width: 420px; font-size: .9em; color: var(--fg-muted); }
.tbl td.list a { color: var(--fg); }
.tbl td .none { color: var(--fg-muted); opacity: .6; }
.tbl td .cell-ico { display: inline-flex; align-items: center; gap: 6px; }
.tbl td .cell-ico .ico { width: 20px; height: 20px; flex-basis: 20px; font-size: 8px; }