/* site-wide background color --#cc3300-- new bkg-color: #9A4C3A/ plans-tiles #E3C49E */
/* Last synced Sep 30, 2025, 08:09 hours PST — site-wide base (no :root) */

/* ---------------- PAGE THEME ---------------- */
html, body {
  margin: 0;   /* site-wide background color --#cc3300-- new bkg-color: #9A4C3A / plans-tiles #E3C49E */
  padding: 0;
  min-height: 100%;
}

body {
  font-family: sans-serif;
  background-color: #9A4C3A;  /* site-wide background color */
  color: #222;
  position: relative;
  min-height: 100vh;
}

/* Ensure your main content area takes up remaining space */
main { flex: 1 0 auto; }

.method-container {
  max-width: 820px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Top bar — remove lighting overlay */
.page-topbar {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  /* overlay removed */
}

.auth-buttons { display: flex; gap: 1rem; }

/* Layout container */
.awen-container {
  min-height: calc(100vh - 60px); /* adjust if topbar height changes */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* ---------------- PURCHASE TILE & RELATED SURFACES ---------------- */
.plan-box,
.personal-info-box {
  background-color: #E3C49E;   /* unified tile background */
  color: #000;
  border: 1px solid #c9b88a;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

/* Plans feature comparison panel should match tiles */
.feature-comparison {
  background-color: #E3C49E;
  color: #000;
}

/* Inputs follow the unified surface */
input,
select,
textarea {
  background-color: #E3C49E;
  color: #000;
}



/* Meta lines at the top of the tile */
.purchase-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  font-size: 1rem;
  line-height: 1.35;
}

/* Tighten vertical spacing between plan meta lines */
 .purchase-meta p {
    margin: 0.15rem 0;
}
.meta-label {
  font-weight: 600;
  margin-right: 6px;
  color: #444;
  display: inline-block;
  min-width: 15ch; /* aligns values nicely without headings */
}
.meta-value {
  font-weight: 600;
  margin-left: 6px;
}

.purchase-divider {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.25);
  margin: 14px 0 12px;
}

/* ---------------- UNIFORM FEATURES LIST (vertical growth) ---------------- */
.plan-features-grid {
  display: inline-grid;                  /* grid shrinks to fit */
  grid-auto-flow: column;                /* fill rows first, then add columns */
  grid-template-rows: repeat(5, auto);   /* 5 rows per column */
  grid-auto-columns: max-content;        /* column width matches content */
  row-gap: 0.45rem;
  column-gap: 1.25rem;
  width: max-content;                    /* expand horizontally */
  max-width: 100%;
  overflow-x: auto;                      /* scroll if too wide */
}

.plan-feature {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  column-gap: 0.5rem;
  margin: 0;
}
.feature-check {
  width: 22px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  color: #2e7d32; /* green ✓ for included */
}
.feature-text { display: inline-block; }

/* ---------------- LONG VERTICAL BOX ---------------- */
.personal-info-box {
  background-color: #E3C49E;    /* default tile background (overridden for Method below) */
  border: 1px solid #c9b88a;
  border-radius: 8px;
  padding: 1.5rem;
}

.form-section { margin-bottom: 1.25rem; }

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Inputs are tan (global default) — overridden for Method below */
input,
select,
textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 0.25rem;
  background-color: #f5ecd9; /* tan inputs (global) */
  color: #222;
}

.input-note {
  font-size: 0.8rem;
  margin-top: 0.25rem;
  color: #555;
}

.input-tip {
  display: inline-block;
  font-size: 0.9rem;
  color: #555;
  margin-left: 0.5rem;
  cursor: help;
  position: relative; /* tooltip anchor */
}

/* Generic buttons (site-wide default) */
button {
  background-color: #3b3b3b;
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover { background-color: #2a2a2a; }

.hidden { display: none; }

/* ---------------- METHOD-SCOPED OVERRIDES & ADDITIONS ---------------- */

/* (A) Method tiles tan, fields white (applies on laptop + mobile) */
.method-container .plan-box,
.method-container .personal-info-box {
  background-color: #f5ecd9;  /* tan tiles */
}
.method-container input,
.method-container select,
.method-container textarea {
  background-color: #ffffff;  /* white interiors on Method only */
}

/* (B) Account box outline — proper red border around Username + Password */
.account-box {
  border: 2px solid #b33;     /* red border on all four sides */
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: #f5ecd9;        /* keep tan background */
}

.account-box-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #222;
}

/* (C) Tooltip that works on hover, focus (if focusable), and active */
.input-tip::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-in-out;
  z-index: 9999;
}
.input-tip:hover::after,
.input-tip:active::after,
.input-tip:focus::after,
.input-tip:focus-visible::after {
  opacity: 1;
}

/* Optional pointer “arrow” */
.input-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,0.9);
  opacity: 0;
  transition: opacity 120ms ease-in-out;
  z-index: 9998;
}
.input-tip:hover::before,
.input-tip:active::before,
.input-tip:focus::before,
.input-tip:focus-visible::before {
  opacity: 1;
}

/* (D) Confirmation select sized to widest option (no container stretch) */
#confirmation-method {
  display: inline-block;  /* shrink container to its contents */
  width: auto;
  max-width: 100%;
}
#confirm-method {
  display: inline-block;
  width: auto;            /* width by content */
  white-space: nowrap;    /* prevent wrapping */
  max-width: 100%;
}

/* (E) Keep Submit button as-is (blue already applied elsewhere) — no override */

/* (F) Header “site title” link white on Method page (this CSS file loads only here) */
.site-header,
.site-header a {
  color: #fff !important;
  text-decoration: underline;
}

/* (G) Payment field specific styles — Claude canonical */
#payment-fields input#cc_zip,
#payment-fields input#cc_exp,
#payment-fields input#cc_cvc {
  width: auto;                 /* override global 100% */
  box-sizing: border-box;
  font-family: monospace;      /* consistent ch widths */
  font-size: 14px;
  padding: 8px;
  height: 36px;
  flex: 0 0 auto;
}

#payment-fields input#cc_zip {
  width: 12ch;
  max-width: 12ch;
}

/* Expiry now 7ch, content-box so placeholder fits exactly */
#payment-fields input#cc_exp {
  box-sizing: content-box;   /* width applies to content, not padding/border */
  width: 7ch;
  max-width: 7ch;
}

#payment-fields input#cc_cvc {
  width: 4ch;
  max-width: 4ch;
}

/* ---------------- MOBILE-SPECIFIC TWEAKS ---------------- */
@media (max-width: 600px) {
  /* Ensure tiles remain tan on mobile too (explicit) */
  .method-container .plan-box,
  .method-container .personal-info-box {
    background-color: #f5ecd9;
  }
  /* Account group spacing a hair tighter on small screens */
  #payment-form > .form-section:nth-of-type(1)::before {
    margin-bottom: 0.4rem;
  }
}

/* === Topbar + Button normalization (Sep 30, 2025) === */

/* 1) Unified button look for both <a.poem-button> and <button.poem-button> */
.poem-button,
button.poem-button,
a.poem-button {
  background-color: #800020;
  color: #fff;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.1;
}
.poem-button:hover,
button.poem-button:hover,
a.poem-button:hover {
  background-color: #2a2a2a;
}

/* 2) Make anchors with .poem-button behave like buttons */
a.poem-button {
  text-decoration: none;
  display: inline-block;
}

/* 3) Lock topbar layout here (wins via higher specificity) */
.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

/* 4) Override overlay’s absolute auth-buttons without editing overlay_pill.css */
.page-topbar .auth-buttons {
  position: static;
  display: flex;
  gap: 0.75rem;
}

/* Bottom cache busting (do not modify this comment) */
/*# sourceMappingURL=method.css.map */