/* committoclose.com - "The Repo" - terminal design system
   Tokens + ch-grid discipline per committoclose/_config/constraints.md */

:root {
  --bg: #0B0F0E;
  --bg-raised: #121917;
  --border: #233029;
  --phosphor: #41FF7A;
  --amber: #FFB454;
  --red-diff: #FF5C57;
  --branch-blue: #58A6FF;
  --text: #C9D8CE;
  --text-dim: #7E948A;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Chakra Petch", var(--mono);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
}

::selection { background: var(--phosphor); color: var(--bg); }

main { max-width: 84ch; margin: 0 auto; padding: 0 2ch 6rem; }

a { color: var(--branch-blue); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
}

h1, h2 { font-family: var(--display); letter-spacing: 0.01em; line-height: 1.15; }
h1 { font-size: clamp(28px, 5.4vw, 44px); }
h2 { font-size: clamp(22px, 4vw, 32px); }

section { padding-top: 4.5rem; }

.dim { color: var(--text-dim); }
.phosphor { color: var(--phosphor); }
.amber { color: var(--amber); }

/* ---- dividers + section labels ---- */
.divider {
  display: block;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.seclabel { color: var(--text-dim); display: block; margin: 1.4rem 0 0.4rem; }
.intro { margin: 0.8rem 0 1.6rem; max-width: 70ch; }

/* ---- terminal window ---- */
.term {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 1ch 0.5rem 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin: 1.2rem 0;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: 0.5rem 1.5ch;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}
.term-bar .dots { letter-spacing: 0.3ch; color: var(--border); }
.term-body {
  padding: 1rem 2ch;
  overflow-x: auto;
  white-space: pre;
  font-size: 14.5px;
  line-height: 1.55;
  tab-size: 4;
}
.term-body .out { color: var(--text-dim); }

.cursor { display: inline-block; width: 1ch; background: var(--phosphor); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ---- hero ---- */
#hero { padding-top: 3rem; }
#hero .sub { margin-top: 1rem; max-width: 68ch; }
html.no-js .live-hint { display: none; }

/* copy chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 1.5ch;
  margin-top: 1.4rem;
  padding: 0.75rem 2ch;
  min-height: 44px;
  background: var(--bg-raised);
  border: 1px solid var(--phosphor);
  border-radius: 6px;
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
  transition: background 200ms ease-out, transform 200ms ease-out;
}
.chip:hover { background: #17251d; transform: translateY(-1px); }
.chip .flash { color: var(--phosphor); font-weight: 700; }
.chip-help { display: block; margin-top: 0.5rem; font-size: 13.5px; }

/* ---- receipts bars ---- */
.bar-row { margin: 1.4rem 0; }
.bar-line { white-space: pre; overflow-x: auto; font-size: 15px; }
.bar-line .fill { color: var(--phosphor); }
.bar-caption { margin-top: 0.35rem; max-width: 66ch; }
.closer { margin-top: 2rem; color: var(--text); }
.closer-dim { margin-top: 2rem; }

/* ---- log cards ---- */
.logcard {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 2ch;
  margin: 0.9rem 0;
  white-space: pre-wrap;
  font-size: 14.5px;
}
.logcard .hash { color: var(--amber); }
.logcard .when { color: var(--text-dim); }

/* ---- framework graph ---- */
#graph-wrap { display: flex; gap: 3ch; align-items: flex-start; margin-top: 1.5rem; }
#graph-svg { flex-shrink: 0; }
#graph-svg .lane { stroke: var(--branch-blue); stroke-width: 2; fill: none; }
#graph-svg .lane.hotfix { stroke: var(--amber); stroke-dasharray: 4 4; }
#graph-svg .node { fill: var(--bg); stroke: var(--phosphor); stroke-width: 2; cursor: pointer; }
#graph-svg .node.commitment { stroke: var(--amber); }
#graph-svg .node:hover { fill: #17251d; }
#graph-svg text { font-family: var(--mono); font-size: 13px; fill: var(--text); }
#graph-svg .nodelabel.commitment { fill: var(--amber); font-weight: 700; }
#graph-svg .hash { fill: var(--text-dim); font-size: 11px; }

.stagecards { flex: 1; min-width: 0; }
.stagecards details {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-raised);
  margin: 0.5rem 0;
}
.stagecards summary {
  cursor: pointer;
  padding: 0.65rem 1.5ch;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.5ch;
  list-style: none;
}
.stagecards summary::-webkit-details-marker { display: none; }
.stagecards summary .stage-id { color: var(--phosphor); }
.stagecards details.commitment summary .stage-id { color: var(--amber); font-weight: 700; }
.stagecards summary .comment { color: var(--text-dim); font-size: 13.5px; }
.stagecards .card-body { padding: 0 1.5ch 1rem; max-width: 62ch; }
.stagecards .card-foot { padding: 0 1.5ch 0.8rem; color: var(--text-dim); font-size: 13.5px; }

.runrow { display: flex; flex-wrap: wrap; gap: 1.5ch; margin-top: 1.6rem; }
.runbtn {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 1.5ch;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 200ms ease-out, background 200ms ease-out;
}
.runbtn:hover { border-color: var(--phosphor); background: #17251d; }
.runbtn[data-run="conflict"]:hover { border-color: var(--amber); background: #241d12; }
#run-output { margin-top: 1rem; }
#run-output .ok { color: var(--phosphor); }
#run-output .bad { color: var(--red-diff); }
#run-output .hint { color: var(--amber); }

/* ---- diff tabs ---- */
.tabs { display: flex; gap: 1ch; margin: 1.2rem 0 0; flex-wrap: wrap; }
.tab {
  font-family: var(--mono);
  font-size: 14px;
  background: none;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 0.6rem 2ch;
  min-height: 44px;
  cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--phosphor); background: var(--bg-raised); }
.tabpanels .term { margin-top: 0; border-top-left-radius: 0; }
.tabpanel[hidden] { display: none; }
html.no-js .tabpanel[hidden] { display: block; }
.diff .add { color: var(--phosphor); }
.diff .del { color: var(--red-diff); }
.diff .ctx { color: var(--text-dim); }
.diff .fhead { color: var(--branch-blue); }

/* ---- capture form ---- */
#capture .body { max-width: 70ch; margin-top: 0.8rem; }
.push-form { margin-top: 1.6rem; max-width: 62ch; }
.push-form .frow { display: flex; align-items: center; gap: 1ch; margin: 0.7rem 0; }
.push-form label { color: var(--text-dim); min-width: 15ch; }
.push-form input {
  flex: 1;
  min-height: 44px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  padding: 0.5rem 1.5ch;
}
.push-form input::placeholder { color: #4d5f56; }
.push-form input:focus { border-color: var(--phosphor); outline: none; }
.push-btn {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--bg);
  background: var(--phosphor);
  border: none;
  border-radius: 6px;
  padding: 0.85rem 3ch;
  min-height: 44px;
  cursor: pointer;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.push-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(65, 255, 122, 0.25); }
.push-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
#form-output { margin-top: 1rem; }
#form-output .ok { color: var(--phosphor); }
#form-output .err { color: var(--red-diff); }
.kit-direct { margin-top: 1rem; font-size: 13.5px; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--border); margin-top: 5rem; padding: 2rem 2ch 3rem; }
footer .inner { max-width: 84ch; margin: 0 auto; }
footer p { margin: 0.4rem 0; font-size: 14.5px; }

/* ---- konami overlay ---- */
#sudo-overlay {
  position: fixed; inset: 0; z-index: 99;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(11, 15, 14, 0.96);
  color: var(--amber);
  font-family: var(--mono);
  font-size: clamp(16px, 3vw, 24px);
  text-align: center;
  padding: 2ch;
  cursor: pointer;
}
#sudo-overlay.on { display: flex; }

/* ---- no-js ---- */
.nojs-note { display: none; }
html.no-js .nojs-note { display: block; margin: 1rem 0; color: var(--text-dim); }
html.no-js .runrow { display: none; }

/* ---- reveal helpers (JS adds .anim; without it everything is visible) ---- */
html.js .reveal { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---- mobile ---- */
@media (max-width: 640px) {
  main { padding: 0 1.5ch 4rem; }
  #graph-wrap { flex-direction: column; }
  .push-form .frow { flex-direction: column; align-items: stretch; }
  .push-form label { min-width: 0; }
  .term-body { font-size: 13px; }
  .divider { font-size: 13px; }
}