whetstone-cli 2.5.0

/* ============================================================
   WHETSTONE — COMPONENT STYLESHEET
   ------------------------------------------------------------
   Imports colors_and_type.css for tokens, then layers component
   classes on top. Single drop-in for marketing/docs surfaces.
   ============================================================ */

@import url("colors_and_type.css");

/* ============================================================
   HELPERS / LAYOUT
   ============================================================ */
.ws-wrap   { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-7); }
.ws-eyebrow {
  font: var(--t-tag);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.ws-eyebrow .slash { color: var(--accent-hot); }
.ws-grid { background-image:
  linear-gradient(rgba(167,139,250,0.08) 1px, transparent 1px),
  linear-gradient(90deg, rgba(167,139,250,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ============================================================
   IDENTITY — wordmark
   ============================================================ */
.ws-wordmark {
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  color: var(--fg);
  font-size: 48px;
}
.ws-wordmark .s1  { color: var(--accent); }
.ws-wordmark .dot { color: var(--accent-hot); margin: 0 1px; }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.ws-sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: end;
  padding: var(--s-8) 0 var(--s-5);
  border-bottom: var(--b-med) solid var(--rule);
  margin-bottom: var(--s-7);
}
.ws-sec-head .ws-sec-tag {
  font: var(--t-tag);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-elevated);
  padding: 6px 10px;
  border: var(--b-thin) solid var(--accent);
  box-shadow: 4px 4px 0 0 var(--accent);
}
.ws-sec-head h2 {
  font: var(--t-h1);
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.ws-sec-head .ws-sec-meta {
  font: var(--t-tag);
  font-size: 11px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* ============================================================
   BUTTONS — primary / ghost / magenta / sm + states
   ============================================================ */
.ws-btn {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 22px;
  border: var(--b-med) solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  box-shadow: var(--sh-md);
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 80ms linear, box-shadow 80ms linear;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.ws-btn:hover  { transform: translate(-2px,-2px); box-shadow: 12px 12px 0 0 var(--accent); }
.ws-btn:active { transform: translate(4px,4px);  box-shadow: 2px 2px 0 0 var(--accent); }

.ws-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--c-ink); }
.ws-btn--primary:hover { box-shadow: 12px 12px 0 0 var(--accent-hot); }

.ws-btn--mag { background: var(--accent-hot); border-color: var(--accent-hot); color: var(--c-bone); box-shadow: 8px 8px 0 0 var(--accent); }
.ws-btn--mag:hover { box-shadow: 12px 12px 0 0 var(--fg); }

.ws-btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); box-shadow: 8px 8px 0 0 var(--brand); }
.ws-btn--ghost:hover { background: var(--brand); color: var(--c-bone); box-shadow: 12px 12px 0 0 var(--accent-hot); }

.ws-btn--sm { font-size: 12px; padding: 8px 14px; box-shadow: 4px 4px 0 0 var(--accent); }
.ws-btn--sm:hover { box-shadow: 6px 6px 0 0 var(--accent-hot); }

.ws-btn--disabled, .ws-btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.ws-btn .glyph { font-family: var(--f-mono); font-weight: 700; }

/* ============================================================
   BADGES / CHIPS / CODECHIP
   ============================================================ */
.ws-badge {
  font: var(--t-tag);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: var(--b-thin) solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
}
.ws-badge .pulse { width: 6px; height: 6px; background: currentColor; }
.ws-badge--acid    { color: var(--c-acid); background: rgba(214,255,46,0.08); }
.ws-badge--mag     { color: var(--c-magenta); background: rgba(255,46,147,0.08); }
.ws-badge--royal   { color: var(--c-lilac); background: rgba(107,47,224,0.18); border-color: var(--c-royal); }
.ws-badge--bone    { color: var(--c-ink); background: var(--c-bone); border-color: var(--c-bone); }
.ws-badge--ghost   { color: var(--fg-dim); border-color: var(--rule); }

.ws-codechip {
  font-family: var(--f-mono);
  font-size: 13px;
  background: var(--c-void);
  color: var(--c-acid);
  border: var(--b-thin) solid var(--rule-hot);
  padding: 6px 10px;
  box-shadow: 3px 3px 0 0 var(--c-magenta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-codechip .prompt { color: var(--c-magenta); }

/* ============================================================
   CARDS
   ============================================================ */
.ws-card {
  background: var(--bg-card);
  border: var(--b-med) solid var(--fg);
  padding: var(--s-5);
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ws-card--mag    { box-shadow: var(--sh-mag); }
.ws-card--royal  { box-shadow: var(--sh-royal); }
.ws-card--stack  { box-shadow: var(--sh-stack); }
.ws-card .eyebrow {
  font: var(--t-tag);
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-card .title {
  font: var(--t-h3);
  color: var(--fg);
  letter-spacing: -0.02em;
}
.ws-card .body { font-size: 14px; color: var(--fg-muted); line-height: 1.45; }
.ws-card .stat {
  font: var(--t-h1);
  color: var(--accent);
  letter-spacing: -0.03em;
}
.ws-card .stat .unit { color: var(--fg-muted); font-size: 0.4em; margin-left: 6px; }

/* ============================================================
   INPUTS / TOGGLES
   ============================================================ */
.ws-input {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--fg);
  background: var(--c-void);
  border: var(--b-med) solid var(--fg);
  padding: 12px 14px;
  box-shadow: 4px 4px 0 0 var(--brand);
  outline: none;
  width: 100%;
}
.surface-bone .ws-input { background: var(--c-bone); }
.ws-input:focus { box-shadow: 4px 4px 0 0 var(--accent); border-color: var(--accent); }
.ws-input::placeholder { color: var(--fg-dim); opacity: 0.7; }

.ws-toggle {
  width: 56px; height: 28px;
  background: var(--bg-elevated);
  border: var(--b-med) solid var(--fg);
  position: relative;
  box-shadow: 3px 3px 0 0 var(--brand);
  cursor: pointer;
  flex-shrink: 0;
}
.ws-toggle::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px; bottom: 2px;
  width: 20px;
  background: var(--accent-hot);
}
.ws-toggle.is-on { background: var(--accent); }
.ws-toggle.is-on::after { background: var(--c-ink); right: auto; left: 2px; }

/* ============================================================
   CALLOUTS — note / tip / warn / danger
   ============================================================ */
.ws-callout {
  border: var(--b-med) solid var(--rule);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-elevated);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-4);
  box-shadow: 4px 4px 0 0 var(--rule-hot);
  position: relative;
}
.ws-callout .ws-callout-mark {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  line-height: 1;
}
.ws-callout .ws-callout-body { color: var(--fg-muted); }
.ws-callout .ws-callout-body h4 {
  font: var(--t-tag);
  margin: 0 0 6px;
  color: var(--accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ws-callout .ws-callout-body p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-muted); }
.ws-callout .ws-callout-body code { font-family: var(--f-mono); color: var(--accent); }
.ws-callout--note { border-color: var(--c-lilac); box-shadow: 4px 4px 0 0 var(--c-royal); }
.ws-callout--note .ws-callout-mark, .ws-callout--note .ws-callout-body h4 { color: var(--c-lilac); }
.ws-callout--tip { border-color: var(--c-acid); box-shadow: 4px 4px 0 0 var(--c-acid); }
.ws-callout--tip .ws-callout-mark, .ws-callout--tip .ws-callout-body h4 { color: var(--c-acid); }
.ws-callout--warn { border-color: var(--c-magenta); box-shadow: 4px 4px 0 0 var(--c-magenta); background: rgba(255,46,147,0.06); }
.ws-callout--warn .ws-callout-mark, .ws-callout--warn .ws-callout-body h4 { color: var(--c-magenta); }
.ws-callout--danger { border-color: var(--c-magenta); box-shadow: 4px 4px 0 0 var(--c-acid); background: rgba(255,46,147,0.12); }
.ws-callout--danger .ws-callout-mark, .ws-callout--danger .ws-callout-body h4 { color: var(--c-magenta); }

/* ============================================================
   CODE BLOCKS + TERMINAL
   ============================================================ */
.ws-code {
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-mist);
  background: var(--c-void);
  border: var(--b-med) solid var(--c-bone);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.ws-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: var(--b-med) solid var(--c-bone);
  background: var(--c-obsidian);
  font: var(--t-tag);
  color: var(--c-acid);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-code-head .ws-dots { display: flex; gap: 6px; }
.ws-code-head .ws-dot { width: 10px; height: 10px; background: var(--c-magenta); }
.ws-code-head .ws-dot:nth-child(2) { background: var(--c-acid); }
.ws-code-head .ws-dot:nth-child(3) { background: var(--c-bone); }
.ws-code-body {
  padding: var(--s-4) var(--s-5);
  white-space: pre;
  overflow-x: auto;
}
.ws-code-body .k  { color: var(--c-magenta); }   /* keyword */
.ws-code-body .s  { color: var(--c-acid); }      /* string */
.ws-code-body .c  { color: var(--c-lilac); opacity: 0.7; font-style: italic; } /* comment */
.ws-code-body .n  { color: var(--c-acid); }      /* number */
.ws-code-body .fn { color: var(--c-bone); }      /* fn name */
.ws-code-body .p  { color: var(--c-magenta); }   /* prompt */
.ws-code-body .ok { color: var(--c-acid); }
.ws-code-body .err{ color: var(--c-magenta); font-weight: 700; }

:not(pre) > code, .ws-icode {
  font-family: var(--f-mono);
  font-size: 0.92em;
  background: rgba(214,255,46,0.08);
  color: var(--accent);
  border: var(--b-thin) solid var(--accent);
  padding: 1px 6px;
}

/* ============================================================
   COMPRESSION / DIFF BLOCK
   ============================================================ */
.ws-diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: var(--b-med) solid var(--fg);
  box-shadow: var(--sh-stack);
  background: var(--bg-card);
}
.ws-diff-cell { padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; }
.ws-diff-cell .label { font: var(--t-tag); text-transform: uppercase; color: var(--fg-dim); letter-spacing: 0.12em; }
.ws-diff-cell .value {
  font: var(--t-h1);
  font-size: 64px;
  letter-spacing: -0.04em;
  color: var(--fg);
  line-height: 1;
}
.ws-diff-cell.is-in  .value { color: var(--c-lilac); }
.ws-diff-cell.is-out .value { color: var(--c-acid); }
.ws-diff-cell .unit { font-family: var(--f-mono); font-size: 12px; color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.ws-diff-arrow {
  background: var(--c-magenta);
  color: var(--c-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-4);
  font: var(--t-h2);
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: -0.04em;
  min-width: 80px;
  position: relative;
}
.ws-diff-arrow .savings {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-acid);
  color: var(--c-ink);
  font: var(--t-tag);
  padding: 2px 8px;
  white-space: nowrap;
}

/* ============================================================
   STAT RAIL
   ============================================================ */
.ws-stat-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: var(--b-med) solid var(--fg);
  background: var(--bg-card);
  box-shadow: var(--sh-stack);
}
.ws-stat { padding: var(--s-5); border-right: var(--b-med) solid var(--fg); }
.ws-stat:last-child { border-right: 0; }
.ws-stat .num { font: var(--t-h1); letter-spacing: -0.03em; color: var(--fg); line-height: 1; }
.ws-stat .num .pct { color: var(--accent); }
.ws-stat .num .neg { color: var(--accent-hot); }
.ws-stat .lbl { font: var(--t-tag); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); margin-top: var(--s-3); }

/* ============================================================
   RELEASE BANNER + MARQUEE
   ============================================================ */
.ws-release-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  border: var(--b-med) solid var(--fg);
  background: var(--bg-card);
  box-shadow: var(--sh-md);
  padding: var(--s-4) var(--s-5);
}
.ws-release-banner .ver {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--accent);
  background: var(--c-ink);
  padding: 8px 14px;
  border: var(--b-med) solid var(--accent);
}
.surface-bone .ws-release-banner .ver { background: var(--accent-hot); color: var(--c-bone); border-color: var(--accent-hot); }
.ws-release-banner .title { font-family: var(--f-sans); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--fg); }
.ws-release-banner .title .acid { color: var(--accent); }
.ws-release-banner .sub { font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase; }

.ws-marquee {
  background: var(--accent);
  color: var(--c-ink);
  border-top: var(--b-med) solid var(--c-ink);
  border-bottom: var(--b-med) solid var(--c-ink);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ws-marquee span { display: inline-block; padding: 0 var(--s-5); }
.ws-marquee .sep { color: var(--c-magenta); }

/* ============================================================
   KV LIST
   ============================================================ */
.ws-kv {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 0;
  border-top: var(--b-med) solid var(--rule);
}
.ws-kv-row { display: contents; }
.ws-kv-row > div {
  padding: 10px var(--s-4);
  border-bottom: var(--b-med) solid var(--rule);
  font-family: var(--f-mono);
  font-size: 13px;
}
.ws-kv-row .k { color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; }
.ws-kv-row .v { color: var(--fg); }
.ws-kv-row .s { color: var(--fg-dim); text-align: right; letter-spacing: 0.1em; text-transform: uppercase; }
.ws-kv-row .s.ok  { color: var(--c-acid); }
.ws-kv-row .s.err { color: var(--c-magenta); }

/* ============================================================
   FOOTER GENERIC
   ============================================================ */
.ws-foot { border-top: var(--b-med) solid var(--rule); padding: var(--s-7) 0 var(--s-8); margin-top: var(--s-9); }
.ws-foot .row {
  display: flex; justify-content: space-between; align-items: center;
  font: var(--t-tag); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim);
}