/* ef-components.css, shared component styles for preview cards & UI kits
   Updated to Cold Lab (v4): 4–8px radii, cyan focus ring, brand chips, code blocks. */

/* ========== BUTTONS ========== */
.ef-btn {
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ef-btn-lg { font-size: 14px; padding: 12px 20px; border-radius: var(--r-sm); }
.ef-btn-md { font-size: 13px; padding: 9px 16px; border-radius: var(--r-sm); }
.ef-btn-sm { font-size: 12px; padding: 7px 12px; border-radius: var(--r-sm); }
.ef-btn-xs { font-size: 11px; padding: 4px 10px; border-radius: var(--r-sm); }

.ef-btn-primary   { background: var(--fg1); color: #fff; border-color: var(--fg1); }
.ef-btn-primary:hover { background: #1c1f24; border-color: #1c1f24; }

.ef-btn-outline   { background: var(--surface); color: var(--fg1); border-color: var(--border-hover); }
.ef-btn-outline:hover { background: var(--fg1); color: var(--surface); border-color: var(--fg1); }

.ef-btn-secondary { background: var(--elevated); color: var(--fg1); border-color: var(--border); }
.ef-btn-secondary:hover { background: var(--sunken); border-color: var(--border-hover); }

.ef-btn-ghost     { background: transparent; color: var(--fg2); border-color: transparent; }
.ef-btn-ghost:hover { color: var(--fg1); background: var(--elevated); }

.ef-btn-accent    { background: var(--accent); color: #fff; border-color: var(--accent); }
.ef-btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.ef-btn-danger    { background: var(--surface); color: var(--error); border-color: var(--error-border); }
.ef-btn-danger:hover { background: var(--error); color: #fff; border-color: var(--error); }

.ef-btn-disabled, .ef-btn:disabled { background: var(--elevated); color: var(--fg4); border-color: var(--border); cursor: not-allowed; opacity: .7; }

/* Button with a brand "dot" marker on the left. */
.ef-btn-dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 100px;
  background: var(--dot, var(--cyan));
  display: inline-block;
}

/* ========== BADGES / CHIPS ========== */
.ef-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ef-badge .dot { width: 6px; height: 6px; border-radius: 100px; display: inline-block; }

/* Brand chips · cyan / green / magenta (toned text on tinted bg) */
.bdg-cyan    { background: var(--cyan-bg);    color: var(--cyan-fn);    }
.bdg-green   { background: var(--green-bg);   color: var(--green-fn);   }
.bdg-magenta { background: var(--magenta-bg); color: var(--magenta-fn); }

/* Semantic */
.bdg-ok      { background: var(--success-bg); color: var(--success);    border-color: var(--success-border); }
.bdg-warn    { background: var(--warn-bg);    color: var(--warn);       border-color: var(--warn-border); }
.bdg-err     { background: var(--error-bg);   color: var(--error);      border-color: var(--error-border); }
.bdg-neutral { background: var(--elevated);   color: var(--fg2);        border-color: var(--border); }
.bdg-dark    { background: var(--fg1);        color: var(--surface);    }

/* Solid (rare; "marker" labels like NEW / 0-DAY). */
.bdg-solid-cyan    { background: var(--cyan);    color: var(--dark-bg); font-weight: 600; }
.bdg-solid-green   { background: var(--green);   color: var(--dark-bg); font-weight: 600; }
.bdg-solid-magenta { background: var(--magenta); color: var(--surface); font-weight: 600; }

/* ========== EDITORIAL CARDS ========== */
.ef-ed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ef-ed-card {
  background: var(--surface);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background var(--t-fast);
}
.ef-ed-card:hover { background: var(--bg); }
.ef-ed-idx {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg1);
  margin-bottom: 12px;
}
/* Brand-color variants for the index (categorical). */
.ef-ed-card.idx-cyan    .ef-ed-idx { color: var(--cyan-fn); }
.ef-ed-card.idx-green   .ef-ed-idx { color: var(--green-fn); }
.ef-ed-card.idx-magenta .ef-ed-idx { color: var(--magenta-fn); }

.ef-ed-title { font-size: 17px; font-weight: 600; color: var(--fg1); line-height: 1.3; letter-spacing: -0.015em; }
.ef-ed-body  { font-size: 13px; color: var(--fg2); line-height: 1.55; flex: 1; }
.ef-ed-link  { font-size: 13px; font-weight: 500; color: var(--fg1); }
.ef-ed-link.accent { color: var(--accent); }

/* ========== INPUTS ========== */
.ef-label-form { font-family: var(--mono); font-size: 11px; color: var(--fg2); letter-spacing: 0.04em; display: block; margin-bottom: 6px; }
.ef-input, .ef-textarea, .ef-select {
  font-family: var(--font); font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border-hover);
  border-radius: var(--r-sm);
  color: var(--fg1);
  background: var(--surface);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.ef-input:focus, .ef-textarea:focus, .ef-select:focus {
  border-color: var(--cyan-fn);
  box-shadow: 0 0 0 3px var(--cyan-bg);
}
.ef-input::placeholder, .ef-textarea::placeholder { color: var(--fg4); }
.ef-input.state-error { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg); }
.ef-input.state-ok    { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.ef-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.ef-select {
  padding: 9px 32px 9px 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a838f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ef-hint { font-size: 11px; color: var(--fg3); margin-top: 4px; }
.ef-hint.err { color: var(--error); }
.ef-hint.ok  { color: var(--success); }

/* ========== SELECTION ========== */
.ef-toggle-track { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--border); border: 1px solid var(--border-hover); position: relative; transition: all .2s; flex-shrink: 0; }
.ef-toggle-track.on { background: var(--fg1); border-color: var(--fg1); }
.ef-toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); position: absolute; top: 2px; left: 2px; transition: transform .2s; box-shadow: 0 1px 3px rgba(10,12,16,0.15); }
.ef-toggle-track.on .ef-toggle-thumb { transform: translateX(16px); }

.ef-checkbox { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border-hover); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--t-fast); }
.ef-checkbox.on { background: var(--fg1); border-color: var(--fg1); }
.ef-checkbox.on::after { content: ''; width: 9px; height: 5px; border-left: 1.6px solid var(--surface); border-bottom: 1.6px solid var(--surface); transform: rotate(-45deg) translateY(-1px); }

.ef-radio { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-hover); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--t-fast); }
.ef-radio.on { border-color: var(--fg1); border-width: 1.5px; }
.ef-radio.on::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fg1); }

/* ========== ALERTS ========== */
.ef-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; line-height: 1.5; border: 1px solid; }
.ef-alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ef-alert .alert-title { font-weight: 600; margin-bottom: 2px; font-size: 13px; }
.ef-al-info  { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.ef-al-ok    { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.ef-al-warn  { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-border); }
.ef-al-error { background: var(--error-bg);   color: var(--error);   border-color: var(--error-border); }

/* ========== TABS ========== */
.ef-tab-bar { display: flex; border-bottom: 1px solid var(--border); }
.ef-tab { font-size: 13px; font-weight: 500; padding: 9px 14px; color: var(--fg3); cursor: pointer; border-bottom: 1.5px solid transparent; margin-bottom: -1px; transition: all var(--t-fast); background: none; border-left: 0; border-right: 0; border-top: 0; font-family: var(--font); }
.ef-tab:hover { color: var(--fg1); }
.ef-tab.active { color: var(--fg1); border-bottom-color: var(--fg1); }

/* ========== TABLE ========== */
.ef-table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.ef-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ef-table th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg3); padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ef-table td { padding: 11px 14px; border-bottom: 1px solid var(--bg); color: var(--fg1); vertical-align: middle; }
.ef-table tr:last-child td { border-bottom: none; }
.ef-table tr:hover td { background: var(--bg); }
.ef-mono-cell { font-family: var(--mono); font-size: 12px; color: var(--fg1); }

/* ========== CODE BLOCKS ========== */
/* Inline code, light bg, sits in body copy */
code.ef-code-inline,
.ef-code-inline {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 1px 6px;
  background: var(--elevated);
  color: var(--fg1);
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* Fenced block, always dark, with chrome header and gutter */
.ef-code-block {
  background: #0c0e12;
  border: 1px solid #1f232a;
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: #e7e9ec;
}
.ef-code-block .head,
.ef-code-block .foot {
  padding: 8px 12px;
  background: #0a0c10;
  border-bottom: 1px solid #1f232a;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #6c727a;
}
.ef-code-block .foot { border-bottom: 0; border-top: 1px solid #1f232a; }
.ef-code-block .lang {
  font-size: 10px; padding: 1px 6px; background: #13161b;
  color: #e7e9ec; border-radius: 3px;
}
.ef-code-block .copy {
  background: transparent; border: 1px solid #1f232a;
  color: #6c727a; font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 3px; cursor: pointer;
}
.ef-code-block .body { padding: 10px 0; }
.ef-code-block .line {
  display: grid; grid-template-columns: 32px 1fr;
  border-left: 2px solid transparent;
}
.ef-code-block .line.hl {
  background: rgba(92, 255, 226, 0.04);
  border-left-color: #5cffe2;
}
.ef-code-block .line .n {
  color: #6c727a; text-align: right;
  padding-right: 10px; user-select: none;
}
.ef-code-block .line .l { padding-right: 8px; }

/* Syntax tokens · brand-tinted */
.tok-kw   { color: #5cffe2; }  /* keyword, toned cyan */
.tok-str  { color: #5ee895; }  /* string, toned green */
.tok-num  { color: #ffb454; }  /* number, orange */
.tok-com  { color: #5a606a; }  /* comment */
.tok-fn   { color: #e7e9ec; }
.tok-mark { color: #ff86dd; }  /* rare highlight (CVE ids, etc.) */

/* Terminal output variant */
.ef-terminal {
  background: #0c0e12;
  border: 1px solid #1f232a;
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: #e7e9ec;
}
.ef-terminal .head {
  padding: 6px 12px;
  background: #0a0c10;
  border-bottom: 1px solid #1f232a;
  color: #6c727a; font-size: 10px;
  display: flex; align-items: center; gap: 8px;
}
.ef-terminal .head .pip {
  width: 7px; height: 7px; border-radius: 100px; background: #3a3f48;
}
.ef-terminal .body { padding: 10px 14px; }
.ef-terminal .prompt { color: #5cffe2; }
.ef-terminal .muted  { color: #6c727a; }