/* Blueprint pages. Three surfaces, each scoped so nothing leaks into the site:
     body.bp-editor  the live editor (local, and the site's admin editor)
     body.bp-sheet   the public page for one design
     .bp-grid        the gallery cards inside the site's normal layout          */

.bp-editor, .bp-sheet {
  --bg: #1d2127; --panel: #252a31; --panel-2: #2c323a; --line: #3a414b;
  --text: #e6e2d8; --muted: #9aa3ad; --accent: #e0b25c;
  --err: #ef7d6b; --warn: #e5c15d; --ok: #8cc08a;
  --table: #33302b; --lh: 20px;
  --mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --sans: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
}
.bp-editor *, .bp-sheet * { box-sizing: border-box; }
html:has(> .bp-editor), html:has(> .bp-sheet) { background: #1d2127; }
.bp-editor, .bp-sheet { margin: 0; background: var(--bg); color: var(--text); font: 14px var(--sans); }
.bp-editor a, .bp-sheet a { color: var(--accent); text-decoration: none; }
.bp-editor a:hover, .bp-sheet a:hover { text-decoration: underline; }

/* Header bar shared by both */
.bp-bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.bp-mark { font-weight: 700; letter-spacing: 4px; font-size: 15px; white-space: nowrap; color: var(--text); }
.bp-mark span { color: var(--accent); }
.bp-bar select, .bp-bar button, .bp-bar input[type=text] {
  font: inherit; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; height: 32px; padding: 0 10px; letter-spacing: 0.5px;
}
.bp-bar select, .bp-bar button { cursor: pointer; }
.bp-bar button:hover, .bp-bar select:hover { border-color: var(--muted); }
.bp-bar button.primary { background: var(--accent); border-color: var(--accent); color: #1d2127; font-weight: 700; }
.bp-bar button:disabled { opacity: 0.6; cursor: default; }
.bp-bar button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.bp-bar label { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.bp-bar .spacer { flex: 1; }
.bp-bar .crumbs { display: flex; gap: 8px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; }
.bp-bar .crumbs b { color: var(--text); overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px; }
.bp-bar .crumbs .sep { color: var(--muted); }
.bp-seg { display: flex; }
.bp-seg button { border-radius: 0; margin-left: -1px; }
.bp-seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.bp-seg button:last-child { border-radius: 0 6px 6px 0; }

.status { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.5px; white-space: nowrap; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.status.warn .dot { background: var(--warn); }
.status.err .dot { background: var(--err); }
.draft { color: var(--accent); font-size: 12px; display: none; white-space: nowrap; }
.draft.on { display: inline; }
.save-state { color: var(--ok); font-size: 12px; min-width: 44px; }

/* Drawing view shared by both */
.bp-view { position: relative; overflow: hidden; background: var(--table); cursor: grab; touch-action: none;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 18px 18px; }
.bp-view.drag { cursor: grabbing; }
.bp-view.failed::after { content: 'This design could not be drawn.'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.bp-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 10px 40px rgba(0,0,0,0.45); }
.bp-stage svg { display: block; }
.bp-stage.stale { opacity: 0.55; transition: opacity .2s; }
.bp-zoom { position: absolute; right: 14px; bottom: 14px; font-size: 12px; color: var(--muted); background: rgba(0,0,0,0.35); padding: 4px 8px; border-radius: 4px; letter-spacing: 1px; pointer-events: none; }

/* ---------------------------------------------------------------- editor */
.bp-editor { height: 100vh; height: 100dvh; display: grid; grid-template-rows: 52px 1fr; overflow: hidden; }
.bp-editor main { display: grid; grid-template-columns: var(--left, 460px) 6px 1fr; min-height: 0; }
.bp-editor .left { display: grid; grid-template-rows: 1fr auto; min-height: 0; min-width: 0; background: var(--panel); }
.bp-editor .editor { position: relative; display: grid; grid-template-columns: 48px 1fr; min-height: 0; overflow: hidden; }
.bp-editor .gutter { font: 12.5px/var(--lh) var(--mono); color: #5d6672; text-align: right; padding: 12px 10px 12px 0; overflow: hidden; user-select: none; white-space: pre; background: #22272d; }
.bp-editor textarea {
  font: 12.5px/var(--lh) var(--mono); color: var(--text); background: transparent; border: 0; outline: 0; resize: none;
  padding: 12px 14px; white-space: pre; overflow: auto; tab-size: 2; caret-color: var(--accent); position: relative; z-index: 1;
}
.bp-editor .hl { position: absolute; left: 48px; right: 0; height: var(--lh); background: rgba(224, 178, 92, 0.16); border-left: 2px solid var(--accent); pointer-events: none; display: none; }
.bp-editor .issues { border-top: 1px solid var(--line); max-height: 34vh; overflow: auto; font-size: 13px; }
.bp-editor .issues h2 { margin: 0; padding: 9px 14px; font-size: 11px; letter-spacing: 2px; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
.bp-editor .issue { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 7px 14px; border-top: 1px solid #2f353d; cursor: pointer; line-height: 1.35; }
.bp-editor .issue:hover { background: var(--panel-2); }
.bp-editor .issue i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--warn); }
.bp-editor .issue.error i { background: var(--err); }
.bp-editor .issue small { display: block; color: var(--muted); font-family: var(--mono); font-size: 11px; margin-top: 2px; word-break: break-all; }
.bp-editor .empty { padding: 4px 14px 14px; color: var(--muted); }
.bp-editor .divider { cursor: col-resize; background: var(--line); }
.bp-editor .divider:hover { background: var(--accent); }
.bp-editor .slug { width: 220px; font-family: var(--mono) !important; font-size: 12px !important; }

@media (max-width: 800px) {
  .bp-editor { height: auto; overflow: auto; grid-template-rows: auto auto; }
  .bp-editor .bp-bar { flex-wrap: wrap; height: auto; padding: 8px 16px; }
  .bp-editor main { grid-template-columns: 1fr; grid-template-rows: 55vh 70vh; }
  .bp-editor .divider { display: none; }
  .bp-editor .slug { width: 160px; }
}

/* ---------------------------------------------------------------- sheet page */
.bp-sheet .bp-view { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
.bp-sheet .about { max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; line-height: 1.55; }
.bp-sheet .about h1 { font-size: 26px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 4px; }
.bp-sheet .about .sub { color: var(--muted); font-style: italic; margin: 0 0 18px; }
.bp-sheet .about p { color: #cfcabd; }
.bp-sheet details { margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.bp-sheet summary { cursor: pointer; padding: 10px 14px; letter-spacing: 1px; font-size: 13px; color: var(--muted); }
.bp-sheet pre { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line); font: 12.5px/1.5 var(--mono); overflow: auto; max-height: 70vh; color: var(--text); }

@media (max-width: 800px) {
  .bp-sheet .bp-bar { flex-wrap: wrap; height: auto; padding: 8px 16px; row-gap: 8px; }
  .bp-sheet .bp-view { height: 70vh; }
}

/* ---------------------------------------------------------------- gallery */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 20px; }
.bp-card { display: block; color: var(--ink); }
.bp-card:hover { text-decoration: none; }
.bp-card:hover .bp-thumb { border-color: var(--accent); }
.bp-thumb { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius, 12px); overflow: hidden; background: #33302b; border: 1px solid var(--line); padding: 10px; }
.bp-thumb svg { width: 100%; height: 100%; display: block; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.bp-thumb.failed::after { content: 'Could not be drawn'; color: #9aa3ad; font-size: 13px; display: grid; place-items: center; height: 100%; }
.bp-card h3 { margin: 10px 0 2px; font-size: 16px; }
.bp-card p { margin: 0; color: var(--muted); font-size: 13.5px; font-style: italic; }