/* App Garden — support, legal and checkout pages.
   Shared by both add-ins: copied to copilot-readiness/site.css and
   hardcoded-value-detector/site.css. Styles the existing markup only; no HTML
   change is required to adopt it, which keeps the Paddle checkout on the buy
   page and the key handover on the claim page untouched.

   Webfonts are progressive enhancement. Every family has a system fallback of
   similar proportion, so these pages still render correctly with no network
   fetch — a reviewer's machine, an offline check, or a blocked font CDN all get
   a complete page. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400;12..96,75..100,700;12..96,75..100,800&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

:root {
  color-scheme: light dark;

  --soil: #16241e;
  --glass: #e7eae1;
  --card: #f4f6ef;
  --stake: #b9c0b0;
  --rule: #ccd2c4;
  --muted: #566257;
  --flag: #c41e5c;
  --flag-ink: #ffffff;
  --flag-wash: #f7dde6;
  --wheat: #9c6f1b;
  /* Not derived from --soil: that inverts in dark mode and would turn the
     scrim into a pale veil. A scrim always darkens. */
  --scrim: rgba(22, 36, 30, 0.55);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --soil: #e4e7de;
    --glass: #131a17;
    --card: #1a221e;
    --stake: #3c4a42;
    --rule: #2c3832;
    --muted: #97a398;
    --flag: #ff7ba4;
    --flag-ink: #16241e;
    --flag-wash: #38202a;
    --wheat: #d3a44e;
    --scrim: rgba(0, 0, 0, 0.7);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--glass);
  color: var(--soil);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

/* ---- headings -------------------------------------------------------- */

h1 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  line-height: 1.05;
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 {
  margin: 3rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--soil);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  font-variation-settings: "wdth" 78;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  font-variation-settings: "wdth" 78;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* The standfirst under the page title. */
/* No bottom rule: an h2 always follows, and its own top rule would stack
   against it. */
.lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1.5;
}

p {
  margin: 0 0 1.1rem;
}

strong {
  font-weight: 500;
  color: var(--soil);
}

em {
  font-style: italic;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--flag);
}

:focus-visible {
  outline: 2px solid var(--flag);
  outline-offset: 2px;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 0.05em 0.3em;
}

/* ---- lists ------------------------------------------------------------ */

ul {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}

li {
  margin-bottom: 0.7rem;
}

li::marker {
  color: var(--stake);
}

/* ---- buy page: billing cycle switch ----------------------------------- */

.cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.75rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.cycle label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.cycle input {
  accent-color: var(--flag);
}

/* ---- buy page: plans --------------------------------------------------- */

.plans {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 1.75rem;
}

@media (min-width: 44rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--soil);
  padding: 1.5rem;
}

.plan ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.plan li {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}

.price {
  margin: 0 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.price strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.4rem;
  font-variation-settings: "wdth" 82;
  line-height: 1;
}

/* ---- controls ---------------------------------------------------------- */

button {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flag-ink);
  background: var(--flag);
  border: 1px solid var(--flag);
  padding: 0.65rem 1.1rem;
  cursor: pointer;
}

button:hover {
  background: var(--soil);
  border-color: var(--soil);
  color: var(--glass);
}

input[type="number"] {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: inherit;
  background: var(--glass);
  border: 1px solid var(--rule);
  padding: 0.5rem 0.6rem;
  width: 4.5rem;
}

.plan label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.75rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ---- notes and errors --------------------------------------------------- */

.status {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
}

.error {
  color: var(--flag);
  background: var(--flag-wash);
  border-left: 3px solid var(--flag);
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* The buy page toggles #failed with the hidden attribute; never let a
   display rule above outrank it. */
[hidden] {
  display: none !important;
}

/* ---- claim page --------------------------------------------------------- */

#claim {
  margin-bottom: 1.5rem;
}

/* The key itself, once claim.js writes it in. Unscoped as well as scoped: the
   script sets className="key" on an element it appends to #claim, but the class
   is the contract, not its position.

   user-select: all is carried over from the original stylesheet deliberately —
   one click takes the whole key, which is how it gets typed into the pane on a
   second machine without dropping a character. */
.key,
#claim code,
#claim .key {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  word-break: break-all;
  user-select: all;
  background: var(--card);
  border: 1px solid var(--soil);
  border-left: 4px solid var(--flag);
}

/* ---- footer -------------------------------------------------------------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--soil);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

footer p {
  margin: 0;
}

footer a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

footer a:hover {
  border-bottom-color: var(--flag);
}

/* ---- masthead ribbon and index drawer ----------------------------------- */

/* Carried over from the homepage so every page wears the same ribbon. The
   homepage keeps its own inline copy: it is deliberately self-contained and
   loads no stylesheet. Sizes differ in one place only — the ribbon here is
   capped to the 46rem text measure rather than the homepage's 68rem, so the
   logo sits over the left edge of the prose instead of floating out past it. */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.75rem clamp(1.25rem, 5vw, 2rem) 1.25rem;
  border-bottom: 2px solid var(--soil);
}

.masthead-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  display: block;
  line-height: 0;
}

.logo img {
  display: block;
  height: clamp(26px, 4.4vw, 36px);
  width: auto;
}

.masthead-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Without JS the drawer is a plain list in the flow, so the toggle would
   control nothing. Only reveal it once we know scripting is on. */
.nav-toggle {
  display: none;
}

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--rule);
  color: inherit;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
}

.js .nav-toggle:hover {
  border-color: var(--soil);
}

/* Three stacked worksheet rows, not a hamburger. */
.rows {
  display: grid;
  gap: 2px;
  width: 0.95rem;
}

.rows span {
  height: 2px;
  background: currentColor;
}

.rows span:nth-child(2) {
  background: var(--flag);
}

.drawer {
  background: var(--card);
}

.js .drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: min(21rem, 86vw);
  overflow-y: auto;
  border-right: 2px solid var(--soil);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}

.js .drawer[data-open="true"] {
  transform: none;
}

.drawer-inner {
  padding: 1.5rem 1.5rem 3rem;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--soil);
}

/* The drawer's own heading is a label, not a section rule: the h2 styling
   above would give it a top border that doubles the head's own. */
.drawer-title {
  margin: 0;
  padding-top: 0;
  border-top: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-close {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.js .drawer-close {
  display: block;
}

.drawer-close:hover {
  background: none;
  border: 0;
  color: var(--flag);
}

.drawer-group {
  margin-top: 1.75rem;
}

.drawer-group h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9rem;
  font-variation-settings: "wdth" 78;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.drawer-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-group li {
  margin: 0;
}

.drawer-group a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 2px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
}

.drawer-group a:hover,
.drawer-group a:focus-visible {
  border-left-color: var(--flag);
  color: var(--flag);
}

.drawer-group a[aria-current="page"] {
  border-left-color: var(--soil);
  font-weight: 600;
}

.drawer-backdrop {
  display: none;
}

.js .drawer-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.js .drawer-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .js .drawer,
  .js .drawer-backdrop {
    transition: none;
  }
}