/* ==========================================================================
   CMS AI Agent
   Hand-written, no framework, no build step.

   The palette is Rafael's and there is deliberately no blue in this file —
   not in links, not in focus rings, not in form controls. Browsers default to
   blue for focus outlines and for accent-color, so both are overridden
   explicitly rather than left alone.
   ========================================================================== */

:root {
  /* Brand palette */
  --green:        #0CA30C;
  --green-dark:   #0A8309;
  --green-light:  #E8F7E8;
  --yellow:       #FAB219;
  --yellow-light: #FEF4E0;
  --orange:       #F07D1A;
  --orange-light: #FDEEE0;
  --red:          #D03B3B;
  --red-light:    #FBEAEA;
  --grey:         #8A919C;
  --black:        #1A1D23;

  /* Neutrals derived from the brand black, so greys never look cold or blue */
  --ink:          #1A1D23;
  --ink-soft:     #4A505A;
  --ink-faint:    #8A919C;
  --rule:         #E4E6EA;
  --rule-soft:    #EFF1F3;
  --paper:        #FFFFFF;
  --paper-soft:   #F7F8F9;

  --radius:       10px;
  --radius-lg:    14px;
  --shadow:       0 1px 2px rgba(26, 29, 35, .06), 0 4px 14px rgba(26, 29, 35, .05);
  --shadow-lift:  0 2px 6px rgba(26, 29, 35, .08), 0 12px 28px rgba(26, 29, 35, .08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;     /* comfortable reading width for body copy */
  --page:    72rem;     /* page container */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---- typography --------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 650; letter-spacing: -.011em; }
h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1rem; }
p.lead { font-size: 1.125rem; color: var(--ink-soft); max-width: var(--measure); }
small, .small { font-size: .875rem; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--green); }

code, kbd { font-family: var(--mono); font-size: .9em; background: var(--paper-soft);
  padding: .1em .35em; border-radius: 4px; }

/* ---- focus: green, never the browser's blue ----------------------------- */

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--green-light); color: var(--ink); }

/* ---- layout ------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.25rem; }
.narrow { max-width: 30rem; }
main { display: block; min-height: 60vh; padding-block: 2.5rem 4rem; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--black); color: #fff; padding: .75rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---- header and underline tabs ------------------------------------------ */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; flex-wrap: wrap; }

.logo {
  font-weight: 750; font-size: 1.0625rem; letter-spacing: .06em;
  color: var(--ink); text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.logo:hover { color: var(--ink); }
.logo .dot { color: var(--green); }

/* Underline tabs, as Rafael likes them: the active tab is underlined, not boxed. */
.tabs { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.tabs a {
  display: block; padding: .35rem 0; color: var(--ink-soft); text-decoration: none;
  border-bottom: 3px solid transparent; font-weight: 500;
}
.tabs a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); font-weight: 600; }

.header-end { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

.lang-switch { display: flex; gap: .35rem; align-items: center; font-size: .8125rem; }
.lang-switch a { color: var(--ink-faint); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.lang-switch span { color: var(--rule); }

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: .7rem 1.15rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.btn-secondary:hover { background: var(--paper-soft); color: var(--ink); border-color: var(--grey); }
.btn-ghost { background: transparent; color: var(--ink-soft); padding-inline: .5rem; }
.btn-ghost:hover { color: var(--ink); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--rule-soft); color: var(--ink-faint); border-color: var(--rule);
  cursor: not-allowed; pointer-events: none;
}
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* ---- hero --------------------------------------------------------------- */

.hero { padding-block: 3.5rem 3rem; border-bottom: 1px solid var(--rule); background:
  linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%); }
.hero h1 { max-width: 24ch; }
.hero .tagline {
  font-size: clamp(1.1rem, .95rem + .7vw, 1.4rem); font-weight: 600;
  color: var(--green-dark); margin: 0 0 1rem;
}

/* ---- equal-size tiles --------------------------------------------------- */

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.25rem; box-shadow: var(--shadow); height: 100%;
}
.tile h3 { margin: 0; }
.tile p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }
.tile-link { text-decoration: none; color: inherit; }
.tile-link:hover { box-shadow: var(--shadow-lift); border-color: var(--grey); color: inherit; }

/* ---- platform marks on a product tile -------------------------------------- */
/* The mark and the status pill share the top line, pushed apart, so the logo is the
   first thing the eye lands on and the status is still where it was. */
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

/* A neutral chip around other companies' logos. It keeps twenty brand colours from
   fighting the page, and it visually quotes the mark rather than adopting it. */
.cms-chip {
  display: grid; place-items: center; flex: none;
  width: calc(var(--mark-size, 40px) + 1.1rem);
  height: calc(var(--mark-size, 40px) + 1.1rem);
  border-radius: var(--radius-lg);
  background: var(--paper-soft); border: 1px solid var(--rule-soft);
}
.cms-chip svg { display: block; }
/* The stand-in where a platform publishes no mark we can use. Grey, and obviously
   lettering rather than a logo, so it is never mistaken for one. */
.cms-initials {
  font-weight: 700; color: var(--grey); letter-spacing: .02em;
  font-size: calc(var(--mark-size, 40px) * 0.42);
}
/* A hovered tile lifts its mark very slightly — enough to feel alive, not enough to
   distract on a page showing twenty of them. */
.tile-link:hover .cms-chip { border-color: var(--rule); background: var(--paper); }

/* Numbered "do these next 1-2-3" steps */
.steps { counter-reset: step; }
.steps .tile { position: relative; padding-top: 2.75rem; }
.steps .tile::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 1.1rem; left: 1.25rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: .875rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ---- stat tiles --------------------------------------------------------- */

.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
.stat .label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 600; }
.stat .value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; margin-top: .25rem; }
.stat .value.none { color: var(--ink-faint); font-size: 1.125rem; font-weight: 600; }

/* ---- status pills ------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px; white-space: nowrap;
}
.pill-ready       { background: var(--green-light);  color: var(--green-dark); }
.pill-development { background: var(--orange-light); color: #B2560C; }
.pill-testing     { background: var(--yellow-light); color: #96670A; }
.pill-planned     { background: var(--rule-soft);    color: var(--ink-soft); }
.pill-unavailable { background: var(--red-light);    color: var(--red); }

/* ---- forms -------------------------------------------------------------- */

form { margin: 0; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; }
.field .hint { display: block; font-size: .8125rem; color: var(--ink-soft); margin-top: .35rem; }
.field .optional { font-weight: 400; color: var(--ink-faint); }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: .65rem .75rem;
  background: var(--paper);
  border: 1px solid var(--grey); border-radius: var(--radius);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--green); outline: none;
  box-shadow: 0 0 0 3px var(--green-light);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* Checkboxes and radios: accent-color defaults to blue, so set it. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); width: auto; }

.field-error input, .field-error select, .field-error textarea { border-color: var(--red); }
.field-error input:focus-visible { box-shadow: 0 0 0 3px var(--red-light); }
.field .error { display: block; color: var(--red); font-size: .8125rem; font-weight: 500; margin-top: .35rem; }

.form-card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow);
}
.form-footer { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-soft);
  font-size: .9375rem; color: var(--ink-soft); }

/* ---- notices ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--rule); border-left-width: 4px;
  border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.5rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice-ok      { background: var(--green-light);  border-color: var(--green);  border-left-color: var(--green); }
.notice-warning { background: var(--yellow-light); border-color: var(--yellow); border-left-color: var(--yellow); }
.notice-error   { background: var(--red-light);    border-color: var(--red);    border-left-color: var(--red); }
.notice-info    { background: var(--paper-soft);   border-color: var(--rule);   border-left-color: var(--grey); }
.notice ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.notice strong { font-weight: 650; }

/* ---- account layout ----------------------------------------------------- */

.account { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .account { grid-template-columns: 14rem 1fr; }
}
.account-nav ul { list-style: none; margin: 0; padding: 0; }
.account-nav a {
  display: block; padding: .5rem .75rem; margin-bottom: .15rem;
  color: var(--ink-soft); text-decoration: none; border-radius: var(--radius);
  border-left: 3px solid transparent; font-size: .9375rem;
}
.account-nav a:hover { background: var(--paper-soft); color: var(--ink); }
.account-nav a[aria-current="page"] {
  background: var(--green-light); color: var(--green-dark);
  border-left-color: var(--green); font-weight: 650;
}
.account-nav a[aria-disabled="true"] { color: var(--ink-faint); pointer-events: none; }
/* "Being built now" badge. Scoped to nothing in particular, because it appears in the
   account navigation, the admin navigation, and anywhere else honesty requires it. */
.soon {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); margin-left: .4rem; font-weight: 600; white-space: nowrap;
}

.empty-state {
  text-align: center; padding: 3rem 1.5rem;
  background: var(--paper-soft); border: 1px dashed var(--rule); border-radius: var(--radius-lg);
}
.empty-state h2 { margin-bottom: .35rem; }
.empty-state p { color: var(--ink-soft); max-width: 36ch; margin-inline: auto; }

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

.site-footer {
  border-top: 1px solid var(--rule); background: var(--black); color: #C9CDD4;
  padding-block: 2rem; font-size: .875rem; margin-top: 4rem;
}
.site-footer a { color: #fff; }
.site-footer .wrap { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.site-footer p { margin: 0; }

/* ---- error pages -------------------------------------------------------- */

.error-page { text-align: center; padding-block: 5rem; }
.error-page .code { font-size: 4rem; font-weight: 750; color: var(--grey); line-height: 1; }

/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Administration
   Visibly a different place from the public site: a dark bar, a tighter grid.
   Same palette, no blue.
   ========================================================================== */

.admin-bar { background: var(--black); color: #C9CDD4; }
.admin-bar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; }
.admin-bar .logo { color: #fff; }
.admin-bar .logo:hover { color: #fff; }
.admin-badge {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--green); color: #fff; padding: .2rem .5rem; border-radius: 4px;
}
.admin-bar .header-end { gap: 1rem; }
.admin-link { color: #C9CDD4; text-decoration: none; font-size: .875rem; }
.admin-link:hover { color: #fff; text-decoration: underline; }
.as-button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }

.admin-nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
.admin-nav .wrap { display: flex; }
.admin-nav .tabs a { padding: .75rem 0; }

body.admin main { padding-block: 2rem 4rem; }

.panel {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.panel > h2 { margin-top: 0; }

/* Checkbox rows read as one line, with the box and its label aligned. */
label.checkbox {
  display: flex; align-items: flex-start; gap: .55rem;
  font-weight: 500; margin-bottom: .5rem; cursor: pointer;
}
label.checkbox input { margin-top: .25rem; flex: none; }

/* The three tiers side by side: equal columns, so they can be compared. */
.plan-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 52rem) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-column {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.1rem; background: var(--paper-soft);
}
.plan-column h3 { margin-bottom: .1rem; }
.plan-column .field { margin-bottom: .75rem; }
.plan-column .field label { font-size: .8125rem; font-weight: 600; margin-bottom: .2rem; }
.plan-column input, .plan-column select { padding: .45rem .55rem; font-size: .9375rem; }

.stripe-details { margin-top: .5rem; border-top: 1px solid var(--rule); padding-top: .65rem; }
.stripe-details summary {
  cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
}
.stripe-details summary::marker { color: var(--grey); }
.stripe-details[open] summary { margin-bottom: .5rem; }

.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.table th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); border-bottom-color: var(--rule); font-weight: 700;
}
.table tbody tr:hover { background: var(--paper-soft); }
.table td:last-child { text-align: right; white-space: nowrap; }
/* The rule above is for a last cell holding actions. A last cell holding prose — what a
   scheduled command printed, for instance — needs the opposite of both. */
.table td.cell-prose { text-align: left; white-space: normal; }

/* ---- content: a list with filters, one item, and a draft form -------------- */
/* A row of controls that belong together on one line, and stack on a phone. */
.form-inline { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.form-inline .field { margin-bottom: 0; }
/* A text input and a select do not end up the same height on their own, which leaves the
   labels above them at different heights. Pin them, and the row reads as one row. */
.form-inline input, .form-inline select, .form-inline .btn { height: 2.75rem; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* A website's own HTML, shown as text rather than rendered. Wraps, because a post body has
   no reason to fit and a horizontal scrollbar across the page is worse than a tall block. */
.code-block {
  font-family: var(--mono); font-size: .8125rem; line-height: 1.5;
  background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .9rem 1rem; margin: 0; max-height: 28rem; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li { padding: .6rem 0; border-bottom: 1px solid var(--rule-soft);
                   display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.list-plain > li:last-child { border-bottom: 0; }

/* A checkbox sits beside its label, not above it. */
.field-check label { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.field-check input { width: auto; margin: 0; }

.panel dl { margin: 0; }
.panel dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
            color: var(--ink-faint); font-weight: 600; }
.panel dd { margin: .2rem 0 1rem; }
.panel dd:last-child { margin-bottom: 0; }

@media (max-width: 40rem) {
  .form-inline { align-items: stretch; }
  .form-inline .btn { width: 100%; }
}

/* ---- a table that does not fit ------------------------------------------- */
/* The account pages put a table in a column beside the navigation, which is narrower than
   the page. Rather than let every cell wrap to three lines, the table scrolls sideways and
   the columns that read as one thing — a timestamp, a short label — are kept whole. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table { min-width: 44rem; }
.table .nowrap { white-space: nowrap; }

/* A label that only a screen reader needs, where the column header already says it on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- documentation -------------------------------------------------------- */
.doc-steps, .doc-list { padding-left: 1.25rem; max-width: var(--measure); }
.doc-steps > li, .doc-list > li { margin-bottom: .6rem; }
.doc-steps > li::marker { color: var(--green); font-weight: 700; }
.narrow .notice { max-width: none; }

/* The two-step QR. Centred, with room around it: scanners need the quiet zone, and the SVG
   carries its own, so nothing here may crop it. */
.qr { margin: 0 0 1.25rem; text-align: center; }
.qr svg { max-width: 100%; height: auto; border-radius: var(--radius); }
.qr figcaption { margin-top: .5rem; }

/* Moving between tiers, on the billing page. */
.plan-move { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--rule-soft); }
.plan-move .hint { display: block; margin-top: .35rem; font-size: .8125rem; color: var(--ink-soft); }