/* ===== Lamplight (day) - sitewide =====
   landing-day.css styles the homepage and owns the design tokens.
   This file extends that language to the chrome (navbar, footer) and to the
   inner pages, so the site stops reading as two different products.
   Loaded on every page from base.html, after landing-day.css. */

body {
  font-family: var(--n-font-body);
  background: var(--n-paper);
  color: var(--n-ink);
}

h1, h2, h3 { font-family: var(--n-font-display); font-weight: 500; color: var(--n-ink); }
/* base.css sets h4-h6 to the system stack at weight 700, which reads as a
   different product next to the Fraunces headings above. Small headings stay in
   the body face - Fraunces is for display sizes - but at the body weight. */
h4, h5, h6 { font-family: var(--n-font-body); font-weight: 600; color: var(--n-ink); }
h1 em, h2 em { font-style: italic; color: var(--n-lamplight); }

/* base.css defines .main-container with a min-height and NOTHING else, so every
   page was full-bleed unless it happened to hand-roll its own .container.
   This is the sitewide gutter. The homepage opts out via landing-day.css's
   `body:has(.landing) .main-container` rule, which outranks this on specificity. */
.main-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Auth pages ===== */
.auth-page {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
  padding: 64px 0 88px;
  min-height: 0;
}
.auth-card {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  box-shadow: 0 14px 40px rgba(23, 27, 38, 0.06);
  padding: 40px;
}
.auth-header { text-align: left; margin-bottom: 30px; }
.auth-header h1 { font-size: 1.9rem; margin-bottom: 8px; }
.auth-header p { color: var(--n-dusk); margin: 0; }

.auth-form .form-group { margin-bottom: 20px; }
.auth-form .form-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 7px; }
.auth-form .form-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius-sm);
  font: inherit;
  font-size: 0.98rem;
  background: var(--n-paper);
  color: var(--n-ink);
}
.auth-form .form-input:focus {
  outline: none;
  border-color: var(--n-lamplight);
  box-shadow: 0 0 0 3px var(--n-lamplight-soft);
}
.auth-form .btn-primary,
.auth-form .btn-block {
  width: 100%;
  background: var(--n-lamplight);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.auth-form .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201, 122, 31, 0.28); }

.auth-footer { text-align: center; color: var(--n-dusk); font-size: 0.93rem; margin-top: 22px; }
.auth-footer p { margin: 0; }
.auth-link { color: var(--n-lamplight); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-aside { padding-left: 8px; }
.auth-aside h3 { font-size: 1.25rem; margin-bottom: 20px; }
.auth-aside ul { list-style: none; margin: 0; padding: 0; }
.auth-aside li {
  color: var(--n-dusk);
  padding: 11px 0 11px 26px;
  position: relative;
  line-height: 1.55;
  border-bottom: 1px solid var(--n-line);
}
.auth-aside li:last-child { border-bottom: none; }
.auth-aside li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--n-lamplight);
}

@media (max-width: 820px) {
  .auth-page { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 64px; }
  .auth-card { padding: 28px; }
  .auth-aside { padding-left: 0; }
}

/* ===== Navbar ===== */
.navbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--n-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.navbar-container { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.brand-link { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; }
.brand-text {
  font-family: var(--n-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--n-ink);
}
/* The lamp: the one dot of light in the wordmark. */
.brand-dot { color: var(--n-lamplight); }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-link {
  color: var(--n-dusk);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 150ms ease;
}
.nav-link:hover { color: var(--n-ink); }

.navbar .btn-primary,
.n-btn-primary {
  background: var(--n-lamplight);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.navbar .btn-primary:hover,
.n-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201, 122, 31, 0.28); }

.nav-user {
  background: var(--n-surface-2);
  border: 1px solid var(--n-line);
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--n-dusk);
  cursor: pointer;
}

/* ===== Inner page shell ===== */
.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.page-wide { max-width: 1100px; }

.page-head { margin-bottom: 48px; }
.page-head h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); margin-bottom: 16px; }
.page-head .n-lead { max-width: 38rem; font-size: 1.12rem; }
.page-meta { color: var(--n-dusk); font-size: 0.9rem; margin-top: 14px; }

/* ===== Prose (legal + long-form) ===== */
.prose { color: var(--n-ink); }
.prose h2 {
  font-size: 1.35rem;
  margin: 44px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--n-line);
}
.prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.prose h3 { font-size: 1.08rem; margin: 26px 0 10px; }
.prose p { color: var(--n-dusk); margin-bottom: 14px; line-height: 1.72; }
.prose ul { margin: 0 0 16px 0; padding-left: 22px; }
.prose li { color: var(--n-dusk); margin-bottom: 9px; line-height: 1.65; }
.prose strong { color: var(--n-ink); font-weight: 600; }
.prose a { color: var(--n-lamplight); }

/* A claim we want the reader to actually stop and read. */
.note {
  background: var(--n-lamplight-soft);
  border-left: 3px solid var(--n-lamplight);
  border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.note p { color: var(--n-ink); margin-bottom: 0; }
.note p + p { margin-top: 10px; }

.note-plain { background: var(--n-surface-2); border-left-color: var(--n-dusk); }

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.day-card {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  padding: 26px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
a.day-card { display: block; text-decoration: none; color: inherit; }
a.day-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(23, 27, 38, 0.07); }
.day-card h2, .day-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.day-card p { color: var(--n-dusk); font-size: 0.96rem; margin: 0; line-height: 1.62; }
.day-card .card-icon { font-size: 1.6rem; display: block; margin-bottom: 14px; }

/* ===== FAQ ===== */
.faq-item { border-bottom: 1px solid var(--n-line); padding: 22px 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.02rem; margin-bottom: 8px; }
.faq-item p { color: var(--n-dusk); margin: 0; line-height: 1.7; }

/* ===== Forms on marketing pages ===== */
.day-form { display: grid; gap: 18px; }
.day-form label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 7px; }
.day-form input,
.day-form select,
.day-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius-sm);
  font: inherit;
  font-size: 0.98rem;
  background: var(--n-paper);
  color: var(--n-ink);
}
.day-form textarea { min-height: 140px; resize: vertical; }
.day-form input:focus,
.day-form select:focus,
.day-form textarea:focus {
  outline: none;
  border-color: var(--n-lamplight);
  box-shadow: 0 0 0 3px var(--n-lamplight-soft);
}
.field-hint { color: var(--n-dusk); font-size: 0.85rem; margin-top: 6px; }

/* A single large glyph above a page title. The gallery and vertical landing
   pages lead with one, in place of a hero image we do not have. */
.page-glyph { font-size: 3rem; display: block; margin-bottom: 18px; line-height: 1; }

/* Section heading between blocks on a page that is not running prose. */
.section-label {
  font-family: var(--n-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-lamplight);
  margin: 52px 0 18px;
}

/* ===== Tick list ===== */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  color: var(--n-dusk);
  line-height: 1.62;
  border-bottom: 1px solid var(--n-line);
}
.tick-list li:last-child { border-bottom: none; }
.tick-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--n-leaf);
  font-weight: 700;
}
.tick-list strong { color: var(--n-ink); font-weight: 600; }

/* ===== Chips - a compact list of links to sibling pages ===== */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: 999px;
  padding: 9px 18px 9px 14px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--n-ink);
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}
.chip:hover { border-color: var(--n-lamplight); transform: translateY(-1px); color: var(--n-ink); }
.chip-glyph { font-size: 1.1rem; }

/* ===== Call to action block ===== */
.page-cta {
  margin: 56px 0 8px;
  padding: 34px 30px;
  background: var(--n-surface-2);
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  text-align: center;
}
.page-cta-top { margin-top: 0; }
.page-cta h3 { font-size: 1.25rem; margin-bottom: 10px; }
.page-cta p { color: var(--n-dusk); margin: 0 0 18px; }
.page-cta .cta-note { font-size: 0.88rem; margin: 14px 0 0; }
.page-cta .n-btn-primary { display: inline-block; }

/* ===== Post list ===== */
.post-list { display: flex; flex-direction: column; }
.post-row {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 26px 0;
  border-bottom: 1px solid var(--n-line);
  transition: padding-left 160ms ease;
}
.post-row:hover { padding-left: 10px; color: inherit; }
.post-row:hover h2, .post-row:hover h3 { color: var(--n-lamplight); }
.post-row h2, .post-row h3 { font-size: 1.24rem; margin: 0 0 8px; transition: color 160ms ease; }
.post-date { color: var(--n-dusk); font-size: 0.86rem; margin: 0 0 8px; }
.post-excerpt { color: var(--n-dusk); margin: 0; line-height: 1.62; }

/* Prose numbered lists - the journaling post is mostly these. */
.prose ol { margin: 0 0 18px 0; padding-left: 24px; }
.prose ol li { color: var(--n-dusk); margin-bottom: 10px; line-height: 1.65; }

/* Two fields side by side inside a .day-form. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-intro { color: var(--n-dusk); margin-bottom: 22px; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .page-cta { padding: 26px 20px; }
}

/* ===== Subscription page ===== */
.plan-state {
  background: var(--n-surface-2);
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  padding: 28px 30px;
}
.plan-name {
  font-family: var(--n-font-display);
  font-size: 1.7rem;
  color: var(--n-ink);
  margin: 0;
}
.plan-status {
  font-family: var(--n-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-dusk);
  margin-left: 10px;
  vertical-align: middle;
}
.plan-usage { display: flex; gap: 44px; margin: 22px 0 0; }
.plan-usage dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-dusk);
  margin-bottom: 6px;
}
.plan-usage dd { font-size: 1.15rem; color: var(--n-ink); margin: 0; }

.plan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.plan-option {
  background: var(--n-surface);
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  padding: 24px;
}
.plan-option-featured { border-color: var(--n-lamplight); }
.plan-option h4 { font-size: 1.05rem; margin-bottom: 16px; }
.plan-buttons { display: flex; flex-direction: column; gap: 10px; }
.plan-buttons .btn { width: 100%; }

.pack-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.checkout-error { color: #b91c1c; min-height: 1.4em; margin-top: 14px; }
.cancel-form { margin-top: 26px; }

.ref-row { display: flex; gap: 10px; }
.ref-row .form-input { flex: 1; min-width: 0; }

@media (max-width: 620px) {
  .plan-options { grid-template-columns: 1fr; }
  .plan-usage { gap: 28px; }
  .ref-row { flex-direction: column; }
}

/* ===== Footer ===== */
.footer {
  background: var(--n-paper);
  border-top: 1px solid var(--n-line);
  padding: 64px 0 28px;
  margin-top: 80px;
}
.footer-content {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer-brand .brand-text { font-size: 1.35rem; }
.footer-tagline { color: var(--n-dusk); font-size: 0.92rem; margin-top: 12px; max-width: 22rem; line-height: 1.6; }
.footer-section h2 {
  font-family: var(--n-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-lamplight);
  margin-bottom: 16px;
}
.footer-section ul { list-style: none; padding: 0; margin: 0; }
.footer-section li { margin-bottom: 10px; }
.footer-section a {
  color: var(--n-dusk);
  text-decoration: none;
  font-size: 0.93rem;
  transition: color 150ms ease;
}
.footer-section a:hover { color: var(--n-lamplight); }

.footer-bottom {
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 22px 24px 0;
  border-top: 1px solid var(--n-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p { color: var(--n-dusk); font-size: 0.87rem; margin: 0; }

@media (max-width: 860px) {
  .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; }
  .page { padding: 48px 20px 72px; }
}
@media (max-width: 560px) {
  .footer-content { grid-template-columns: 1fr; }
  .nav-links { gap: 16px; }
  .nav-links .nav-link { display: none; }
  .nav-links .btn-primary { display: inline-block; }
}

/* ===== Recovery code =====
   Shown once and transcribed by hand, so it is set large, monospaced and
   selectable, with generous letter-spacing to make characters unambiguous. */
.recovery-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  letter-spacing: 0.14em;
  text-align: center;
  padding: 28px 20px;
  background: var(--n-surface-2);
  border: 1px dashed var(--n-lamplight);
  border-radius: var(--n-radius);
  color: var(--n-ink);
  user-select: all;
  margin-bottom: 28px;
  overflow-wrap: anywhere;
}

/* Pricing and plan cards on inner pages reuse the landing components, which are
   scoped to .landing. These are the same rules, unscoped. */
.n-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.n-plan-tagline { color: var(--n-dusk); font-size: 0.9rem; margin: 0 0 18px; }

@media (max-width: 860px) { .n-pricing { grid-template-columns: 1fr; } }