/* ============================================================
   moltsets design system — components
   Requires: colors_and_type.css
   ============================================================ */

/* ── HEADER ── */
.mh {
  height: 48px; flex-shrink: 0;
  background: var(--elevated);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  position: relative;
}
.mh-logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-type { font: 700 18px/1 var(--font-mono); color: var(--brand); display: flex; align-items: center; }
.logo-typed { color: var(--brand); }
.logo-mark { display: flex; align-items: center; margin-left: 3px; }
.logo-mark svg { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }
.mh-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 32px;
}
.mh-right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.mh-right a,
.mh-nav a { text-decoration: none; }
.mh-nav a:hover { border-bottom: 1px dashed var(--brand); }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 0; cursor: pointer; font-family: var(--font-mono); font-weight: 400; white-space: nowrap; transition: background 60ms steps(1), color 60ms steps(1); }
.btn-sm { padding: 5px 14px; font-size: 12px; line-height: 1; }
.btn-md { padding: 8px 18px; font-size: 14px; line-height: 1; }
.btn-text { background: transparent; color: var(--fg-primary); padding-left: 2px; padding-right: 2px; }
.btn-text:hover { color: var(--brand); }
.btn-text:active { color: var(--brand); }
.btn-primary { background: var(--orange-400); color: var(--bg-base); }
.btn-primary:hover { background: var(--orange-tint); }
.btn-primary:active { background: var(--orange-600); }
.btn-yellow { background: var(--white); color: var(--bg-base); }
.btn-yellow:hover { background: var(--slate-100); }
.btn-yellow:active { background: var(--slate-200); }
.btn-icon { display: block; flex-shrink: 0; width: 12px; height: 12px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.btn-ghost { background: var(--bg-button-ghost); border: 1px solid var(--orange-500); color: var(--fg-primary); }
.btn-ghost:hover { border-color: var(--orange-tint); color: var(--fg-bright); }
.btn-ghost:active { background: rgba(244,128,93,0.15); border-color: var(--orange-400); color: var(--fg-bright); }

.start-free { font: 400 12px/1 var(--font-mono); color: var(--slate-400); cursor: default; background: none; border: none; padding: 0; }

/* ── FOOTER ── */
.mf {
  background: var(--elevated);
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 32px 12px;
  font-size: 12px;
  margin-top: auto;
  border-top: 1px dashed var(--orange-ash);
  color: var(--slate-200);
}
.mf a { color: var(--slate-200); text-decoration: none; cursor: pointer; }
.mf a:hover { color: var(--brand); }

/* ── APP-BOX ── */
.app-box {
  position: relative;
  width: 320px; max-width: 100%;
  border: 1px dashed var(--brand);
  background: var(--bg-base);
  display: flex; flex-direction: column;
  transition: width 160ms steps(8, end), height 220ms steps(11, end);
}
.app-box.wide { width: 1002px; }
.cm { position: absolute; width: 8px; height: 8px; border: 2px solid var(--brand); pointer-events: none; }
.cm.tl { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.cm.tr { top:-1px; right:-1px; border-left:0; border-bottom:0; }
.cm.bl { bottom:-1px; left:-1px; border-right:0; border-top:0; }
.cm.br { bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* titlebar */
.ab-top {
  height: 28px;
  min-height: 28px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--brand);
  padding: 0 16px;
  display: flex; align-items: center; gap: 16px;
  background: transparent;
}
.ab-title { color: var(--slate-500); font: 400 14px/1 var(--font-mono); white-space: nowrap; flex: 1; }

/* traffic lights */
.traffic { display: flex; gap: 6px; flex-shrink: 0; }
.dot {
  display: block; width: 12px; height: 12px;
  -webkit-mask: url('icons/circle-filled.svg') center/contain no-repeat;
  mask: url('icons/circle-filled.svg') center/contain no-repeat;
  image-rendering: pixelated;
}
.dot.r { background: var(--dot-red); }
.dot.y { background: var(--dot-yellow); }
.dot.g { background: var(--dot-green); }

/* body panels */
.ab-body {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* prompt bar */
.ab-prompt { border-top: 1px solid var(--brand); flex-shrink: 0; }
.prompt-line { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 28px; min-height: 28px; flex-shrink: 0; }
.prompt-line .p { color: var(--brand); font: 400 14px/1 var(--font-mono); }
.prompt-line .pinp {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg-primary); font: 400 14px/1 var(--font-mono);
  caret-color: var(--brand);
}
.prompt-line .pinp::placeholder { color: var(--fg-muted); }

/* ── CHAT PANE ── */
.chat-pane {
  background: var(--chat-content-bg);
  padding: 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 14px; color: var(--fg-secondary);
  flex: 60;
  min-width: 0;
  border-right: 1px solid var(--brand);
}

/* ── HELP PANEL ── */
.helpp {
  background: var(--elevated);
  padding: 24px; display: flex; flex-direction: column; gap: 20px;
  flex: 40;
  min-width: 0;
  overflow-y: auto;
}
.helpp-title { font: 700 18px/1 var(--font-mono); color: var(--brand); letter-spacing: 0.6px; }
.helpp-item { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--fg-secondary); padding: 6px 0; }
.icon {
  display: block; width: 14px; height: 14px; flex-shrink: 0;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  image-rendering: pixelated;
}
.icon-on {
  background: var(--green-bright);
  -webkit-mask-image: url('icons/checkbox-on.svg');
  mask-image: url('icons/checkbox-on.svg');
}
.helpp-chev {
  display: block; width: 14px; height: 14px; flex-shrink: 0;
  background: var(--hint);
  -webkit-mask-image: url('icons/chevron-right.svg');
  mask-image: url('icons/chevron-right.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  image-rendering: pixelated;
}
.helpp-cmd { color: var(--brand); }
.helpp-desc { color: var(--fg-muted); }
.helpp-feat { border: 1px dashed rgba(206,206,206,0.5); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.helpp-featttl { font: 700 16px/1 var(--font-mono); color: var(--hint); letter-spacing: 0.6px; }
.cb { display: flex; align-items: center; gap: 10px; color: var(--fg-secondary); font-size: 13px; padding: 4px 0; }

/* ── STATS TABLE ── */
.stats-table {
  border: 1px dashed var(--divider-dim);
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
}
.stats-table .thead-title {
  font: 400 14px/1 var(--font-mono);
  color: var(--brand);
  text-align: center;
  padding: 8px 16px;
  border-bottom: 1px dashed var(--divider-dim);
  letter-spacing: 0;
}
.stats-table tbody tr { border-bottom: 1px dashed var(--divider-dim); }
.stats-table tbody tr:last-child { border-bottom: none; }
.stats-table td {
  padding: 8px 16px; text-align: center;
  border-left: 1px dashed var(--divider-dim); vertical-align: middle;
  width: 184px;
}
.stats-table td:first-child { border-left: none; }
.stats-table td.highlight { background: var(--green-emerald); }
.stats-table td.highlight .cell-value { color: var(--hint); }
.cell-label { display: block; font: 400 12px/16px var(--font-mono); color: var(--slate-200); }
.cell-value { display: block; font: 700 16px/1 var(--font-mono); color: var(--slate-100); margin-top: 2px; }

/* ── INDENT ROW ── */
.indent-list { display: flex; flex-direction: column; gap: 8px; }
.indent-row { display: flex; gap: 8px; align-items: flex-start; }
.indent-icon {
  display: block; width: 16px; height: 16px; flex-shrink: 0;
  background: var(--fg-secondary);
  -webkit-mask-image: url('icons/corner-down-right-sharp.svg');
  mask-image: url('icons/corner-down-right-sharp.svg');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  margin-top: 1px;
}
.indent-text { font: 400 14px/1.4 var(--font-mono); color: var(--fg-primary); }

/* ── PRIMITIVES ── */
.reveal { opacity: 0; }
.reveal.shown { opacity: 1; }

.think { display: flex; align-items: center; gap: 10px; color: var(--brand); font: 400 14px/1 var(--font-mono); padding: 4px 0; }
.think-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.think-icon .frame { position: absolute; inset: 0; opacity: 0; }
.think-icon .frame.active { opacity: 1; }
.think-icon .frame img { width: 14px; height: 14px; image-rendering: pixelated; display: block; }

/* ── RESPONSIVE ── */

/* Mobile burger */
.mh-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 6px; gap: 4px; flex-direction: column; justify-content: center;
  color: var(--fg-primary);
}
.mh-burger span {
  display: block; width: 18px; height: 2px;
  background: var(--fg-primary);
  transition: opacity 60ms steps(1);
}
.mh-burger:hover span { background: var(--brand); }

/* Mobile dropdown nav */
.mh-mobile-menu {
  display: none;
  position: absolute; top: 57px; left: 0; right: 0;
  background: var(--elevated);
  border-bottom: 1px solid var(--brand);
  flex-direction: column;
  z-index: 200;
  padding: 8px 0;
}
.mh-mobile-menu.open { display: flex; }
.mh-mobile-menu a,
.mh-mobile-menu button {
  background: none; border: none; cursor: pointer;
  color: var(--fg-primary); font: 400 14px/1 var(--font-mono);
  text-decoration: none; text-align: left;
  padding: 12px 24px; width: 100%;
  transition: color 60ms steps(1), background 60ms steps(1);
  text-decoration: none;
}
.mh-mobile-menu a:hover,
.mh-mobile-menu button:hover { color: var(--brand); background: rgba(244,128,93,0.06); }

@media (max-width: 1040px) {
  .mh-nav { display: none; }
  .mh-burger { display: flex; }
}

@media (max-width: 600px) {
  .mh { padding: 0 16px; }
  .mh-right .start-free { display: none; }
}

@keyframes moltCaret { 0%,49%{opacity:1}50%,100%{opacity:0} }
.caret { display:inline-block; width:8px; height:14px; background:var(--brand); animation:moltCaret 1s steps(1) infinite; vertical-align:-2px; }