/* ==========================================================================
   stacksai.css — the components only this product has.
   --------------------------------------------------------------------------
   world.css owns the design system. This file adds the three things Stacks AI
   needs that the marketing site has no use for: the install snippet, the buy
   counter on pricing.html, and the sign-in panel that stands in front of it.

   Everything here is built from world.css's tokens. No new colour, no radius,
   no shadow: if something needs to mean more it gets more ink or a heavier
   rule, exactly as DESIGN.md says.
   ========================================================================== */

/* The hidden attribute has to beat a class that sets display. Every panel on
   the buy counter is flex or grid, and a class selector outranks the UA sheet's
   [hidden] rule, so without this the signed-in and signed-out states render on
   top of each other. */
[hidden] { display: none !important; }

/* ---------- the install snippet -----------------------------------------
   A tag you copy is machine text, so it is set in the code face on the shaded
   column stock, inside the column rules rather than in a floating card. */
.snippet { margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 16px; }
.snippet__label {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  font-size: .74rem; letter-spacing: .16em; color: var(--ink-faint); margin-bottom: 10px;
}
.snippet__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; line-height: 1.6; color: var(--ink);
  background: var(--stock-2);
  /* A 2px rule reads as a printed rule; at 4px it reads as the accent
     tab every generator sticks on the side of a card. */
  border-left: 2px solid var(--ink);
  padding: 14px 16px; overflow-x: auto; white-space: pre;
}
.snippet__note { margin-top: 10px; font-size: .88rem; color: var(--ink-faint); }

/* ---------- the buy counter ---------------------------------------------
   Two rates side by side, each with its own action. The struck state is the
   world's, driven from site.js.

   Quieted 2026-09-23 with the rest of the world. These two carried a press
   rule each, a hairline between them and a local --rule-ink, which is how they
   were built before the press rule was rationed to one per page - and since
   --rule-ink no longer exists, the retint on the struck plan was pointing at
   an undefined token on the page where the product is actually bought. Space
   between them, no rule on either, and the struck one carries a tint and a
   spot edge, exactly as the three plans do on the marketing site. */
.buy { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
.buy__plan {
  padding: 0 0 4px;
  position: relative; transition: background-color .12s linear;
}
.buy__plan.is-struck { background-color: rgba(var(--spot-rgb), .07); }
.buy__plan.is-struck::after {
  content: ""; position: absolute; inset: 0 auto 0 -14px; width: 3px; background: var(--spot);
}
.buy__plan.is-struck .buy__name,
.buy__plan.is-struck .buy__amount,
.buy__plan.is-struck .buy__currency { color: var(--accent-bright); }

.buy__name { font-size: 1.4rem; }
.buy__for { color: var(--ink-faint); font-size: .88rem; margin-top: 4px; }
.buy__price { display: flex; align-items: baseline; gap: 2px; margin: 16px 0 2px; font-variant-numeric: tabular-nums; }
.buy__currency { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-soft); }
.buy__amount { font-family: var(--font-display); font-weight: 700; font-size: 2.9rem; letter-spacing: -0.03em; line-height: 1; }
.buy__per { color: var(--ink-faint); font-size: .95rem; }
.buy__cta { width: 100%; margin: 16px 0; }
.buy__list { list-style: none; display: grid; gap: 8px; }
.buy__list li { display: flex; gap: 9px; color: var(--ink-soft); font-size: .97rem; }

/* ---------- the counter you sign in at ----------------------------------
   Buying needs an account, so the sign-in sits in the coupon's own clothes:
   a dashed box with ruled fill-in lines, not a modal. */
.till { border: 2px dashed var(--ink); background: var(--paper-white); padding: 20px 20px 22px; }
.till__head { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; letter-spacing: .02em; }
.till__note { margin-top: 6px; font-size: .92rem; color: var(--ink-soft); }
.till__fields { display: grid; gap: 2px; margin-top: 14px; }
.till__fields label {
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  color: var(--ink-faint); margin-top: 8px;
}
.till__fields input {
  border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  font: inherit; font-size: .97rem; color: var(--ink); padding: 4px 0 5px;
  border-radius: var(--radius); width: 100%;
}
.till__fields input:focus { outline: 2px solid var(--spot); outline-offset: 2px; }
.till__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.till__hint { margin-top: 8px; font-size: .86rem; color: var(--ink-faint); }
.till__switch {
  margin-top: 14px; font-size: .9rem; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 12px;
}
.till__switch button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent-bright);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* The signed-in state: who you are, and a way out. */
.till__who { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.till__who b { font-variant-numeric: tabular-nums; }

/* Notices re-mixed for the dark ground on 2026-09-23. They were a pale blue
   wash with --spot-deep text, which is dark-blue-on-near-black here: an error
   message nobody can read. Hue tells the states apart, not lightness. */
.notice { margin-top: 14px; padding: 12px 14px; font-size: .92rem; border-radius: var(--radius); }
.notice--error { background: rgba(255, 92, 92, .12); border: 1px solid rgba(255, 92, 92, .34); color: #FFB4B4; }
.notice--ok { background: var(--paper-white); border: 1px solid var(--ink); color: var(--ink); }
.notice--working { background: var(--stock-2); border: 1px solid var(--rule); color: var(--ink-soft); }

@media (max-width: 760px) {
  .buy { grid-template-columns: 1fr; }
  /* Nothing to undo: the plans carry no side border or side padding now. The
     struck plan's edge moves back against the text. */
  .buy__plan.is-struck::after { inset: 0 auto 0 -10px; }
}