/* compw00ter spec viewer — project palette */
:root {
  --orange: #FF7F4F; --orange-dark: #FF5722; --orange-light: #FFC299;
  --blue: #4A9FCC; --blue-dark: #2980B9; --blue-light: #87CEEB;
  --bg: #1d2127; --panel: #272c34; --panel-2: #2f353f;
  --text: #e7e9ee; --muted: #9aa3b2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
a { color: var(--blue-light); }

.topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.4rem; background: linear-gradient(90deg, var(--orange-dark), var(--orange));
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); position: sticky; top: 0; z-index: 10; }
.brand { font-size: 1.4rem; font-weight: 700; color: #1d2127; letter-spacing: -0.5px; }
.brand .logo { color: #fff; }
.brand .sub { font-size: 0.9rem; font-weight: 600; opacity: 0.85; margin-left: 0.4rem; }
.mainnav a { color: #1d2127; text-decoration: none; font-weight: 600; margin-left: 1.1rem;
  padding: 0.3rem 0.2rem; border-bottom: 2px solid transparent; }
.mainnav a.active, .mainnav a:hover { border-bottom-color: #1d2127; }

.wrap { max-width: 880px; margin: 0 auto; padding: 1.8rem 1.4rem 4rem; }
.lede { color: var(--muted); font-size: 1.05rem; }
.empty { color: var(--muted); padding: 2rem; text-align: center; }
.crumb { font-size: 0.9rem; }
.crumb .file { color: var(--muted); font-family: ui-monospace, monospace; }

/* Index cards */
.spec-list { display: grid; gap: 1rem; margin-top: 1.4rem; }
.spec-card { display: block; background: var(--panel); border-radius: 10px; padding: 1.1rem 1.3rem;
  border-left: 6px solid var(--orange); text-decoration: none; color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform .08s ease, border-color .08s ease; }
.spec-card:hover { transform: translateY(-2px); border-left-color: var(--blue); }
.spec-card h2 { margin: 0 0 0.4rem; font-size: 1.3rem; color: var(--orange-light); border: 0; padding: 0; }
.spec-card .meta { margin: 0 0 0.3rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.spec-card .meta span { font-size: 0.78rem; padding: 0.15rem 0.55rem; border-radius: 999px; }
.spec-card .meta .date { background: var(--panel-2); color: var(--blue-light); }
.spec-card .meta .status { background: var(--blue-dark); color: #fff; }
.spec-card .file { margin: 0; color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.8rem; }

/* Rendered markdown */
.doc { background: var(--panel); border-radius: 12px; padding: 1.6rem 2rem 2rem;
  margin: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.doc h1 { font-size: 1.9rem; margin: 0.2rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--orange); }
.doc h2 { font-size: 1.4rem; color: var(--orange-light); margin: 2rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--panel-2); }
.doc h3 { font-size: 1.12rem; color: var(--blue-light); margin: 1.4rem 0 0.4rem; }
.doc p, .doc li { color: var(--text); }
.doc a { color: var(--blue-light); }
.doc strong { color: #fff; }
.doc code { background: #11141a; padding: 0.12rem 0.4rem; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.9em; color: var(--orange-light); }
.doc pre { background: #11141a; padding: 1rem 1.1rem; border-radius: 8px; overflow-x: auto;
  border-left: 4px solid var(--blue); }
.doc pre code { background: none; padding: 0; color: #cfe6f2; font-size: 0.86rem; line-height: 1.45; }
.doc blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 4px solid var(--orange);
  background: var(--panel-2); border-radius: 0 6px 6px 0; color: var(--muted); }
.doc hr { border: 0; border-top: 1px solid var(--panel-2); margin: 1.8rem 0; }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li { margin: 0.25rem 0; }

.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.doc th, .doc td { border: 1px solid var(--panel-2); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.doc thead th { background: var(--panel-2); color: var(--orange-light); }
.doc tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

.sitefoot { max-width: 880px; margin: 0 auto; padding: 1rem 1.4rem 3rem; color: var(--muted); font-size: 0.85rem; }
.sitefoot code { font-family: ui-monospace, monospace; }

/* ===== Workbench layout (sidebar + content) ===== */
.app{display:flex;align-items:flex-start}
.sidebar{flex:0 0 250px;background:#13161d;border-right:1px solid var(--panel-2);
  padding:1.1rem .85rem 3rem;position:sticky;top:3.3rem;align-self:flex-start;max-height:calc(100vh - 3.3rem);overflow:auto}
.side-sec{margin-bottom:1.3rem}
.side-sec h3{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:.2rem .4rem .5rem}
.side-link{display:block;padding:.45rem .6rem;border-radius:7px;color:var(--text);text-decoration:none;
  font-size:.85rem;line-height:1.25;margin-bottom:.12rem;border:1px solid transparent}
.side-link:hover{background:var(--panel-2)}
.side-link.active{background:rgba(255,127,79,.14);border-color:rgba(255,127,79,.4);color:#fff}
.side-link.map{color:var(--blue-light)}
.side-link.new{color:var(--muted);font-style:italic}
.content{flex:1;min-width:0;max-width:940px;padding:1.6rem 2rem 4rem}

/* doc toolbar + editor */
.doc-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.dt-meta{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font-size:.72rem;padding:.2rem .55rem;border-radius:999px;background:var(--panel-2);color:var(--blue-light)}
.chip.file{color:var(--muted);font-family:ui-monospace,monospace}
.btn{cursor:pointer;border:1px solid var(--panel-2);background:var(--panel-2);color:var(--text);
  border-radius:7px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;font-family:inherit;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--blue)}
.btn.primary{background:var(--orange);color:#1d2127;border-color:var(--orange)}
.btn.primary:hover{background:var(--orange-light)}
.btn.ghost{background:transparent}
.ed-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.ed-bar .spacer{flex:1}
.ed-hint{color:var(--muted);font-size:.82rem}
#doc-source{width:100%;min-height:65vh;background:#0e1118;color:#dfe6ef;border:1px solid var(--panel-2);
  border-radius:10px;padding:1rem 1.1rem;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.86rem;line-height:1.6;resize:vertical;box-sizing:border-box}
.flash{background:var(--blue-dark);color:#fff;padding:.5rem .9rem;border-radius:7px;margin:0 0 1rem}
.errors{background:#5a2222;border:1px solid #b5462f;color:#ffd9d0;padding:.5rem .9rem;border-radius:7px}
.errors ul{margin:.2rem 0 0;padding-left:1.1rem}
.newform{max-width:560px}
.newform label{display:block;font-size:.85rem;color:var(--muted);margin:.4rem 0 .3rem}
.newform input[type=text]{width:100%;padding:.55rem .7rem;border-radius:7px;border:1px solid var(--panel-2);
  background:var(--panel-2);color:#fff;font-size:.95rem;font-family:inherit;box-sizing:border-box;margin-bottom:.6rem}

/* map grid */
.map-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:.6rem 0 1rem}
.seg{display:inline-flex;border:1px solid var(--panel-2);border-radius:8px;overflow:hidden}
.seg-label{padding:.4rem .6rem;color:var(--muted);font-size:.78rem;border-right:1px solid var(--panel-2)}
.seg-btn{padding:.4rem .8rem;color:var(--text);text-decoration:none;font-size:.82rem}
.seg-btn:hover{background:var(--panel-2)}
.seg-btn.on{background:var(--orange);color:#1d2127;font-weight:700}
.readout{margin-left:auto;font-family:ui-monospace,monospace;font-size:.9rem;color:var(--orange-light);
  background:var(--panel);border:1px solid var(--panel-2);border-radius:8px;padding:.4rem .8rem;min-width:170px;text-align:center}
.mapgrid{position:relative;display:block;line-height:0;background:#fff;border:1px solid var(--panel-2);border-radius:10px;overflow:hidden}
.mapgrid img{width:100%;display:block}
.mapgrid canvas{position:absolute;top:0;left:0;cursor:crosshair}
.pins-hint{margin-top:.7rem}
#pins{font-family:ui-monospace,monospace;color:var(--blue-light)}