/*
  RWM Pregnancy Loss — intake, dashboard, admin UI stylesheet
  Companion to rwm.css (which styles the assembled memorial page itself).

  Same design system: Cormorant Garamond for prose, Inter for utility.
  Warm neutral palette, rose accent (#8B332B).
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #F7F6F2;
  --surface: #FBFBF9;
  --surface-alt: #F0EDE5;
  --border: #D4D1CA;
  --text: #28251D;
  --muted: #6B6A64;
  --faint: #8C8B86;
  --rose: #8B332B;
  --rose-dark: #6E241D;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --shadow-sm: 0 1px 3px rgba(40, 37, 29, 0.06);
  --shadow-md: 0 4px 12px rgba(40, 37, 29, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Top bar --- */
.pl-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pl-topbar a {
  color: var(--text);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.pl-topbar .pl-brand {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.pl-topbar .pl-topbar-right { display: flex; gap: 20px; }

/* --- Page shell --- */
.pl-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.pl-page-wide {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}
.pl-page-narrow {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* --- Chapter progress --- */
.pl-progress {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}
.pl-progress-bar {
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin: 12px 0 32px;
  overflow: hidden;
}
.pl-progress-bar-fill {
  height: 100%;
  background: var(--rose);
  transition: width 400ms ease;
}

/* --- Headings & prose --- */
.pl-h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 12px;
}
.pl-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  margin: 32px 0 12px;
}
.pl-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 40px;
}
.pl-p { margin: 0 0 16px; }
.pl-muted { color: var(--muted); font-size: 16px; }
.pl-hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* --- Form primitives --- */
.pl-field {
  margin-bottom: 28px;
}
.pl-label {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 8px;
}
.pl-sublabel {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.5;
}
.pl-input, .pl-textarea, .pl-select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--text);
  line-height: 1.5;
  transition: border-color 200ms ease;
}
.pl-input:focus, .pl-textarea:focus, .pl-select:focus {
  outline: none;
  border-color: var(--rose);
}
.pl-textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--serif);
}
.pl-textarea.pl-textarea-tall { min-height: 240px; }
.pl-input::placeholder, .pl-textarea::placeholder {
  color: var(--faint);
  font-style: italic;
}

/* --- Radio & checkbox groups --- */
.pl-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.pl-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 150ms ease;
}
.pl-radio-option:hover { border-color: var(--muted); }
.pl-radio-option input[type="radio"], .pl-radio-option input[type="checkbox"] {
  margin-top: 6px;
  accent-color: var(--rose);
}
.pl-radio-option-label {
  flex: 1;
  font-family: var(--serif);
  font-size: 18px;
}
.pl-radio-option-hint {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* --- Buttons --- */
.pl-btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pl-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--rose);
  background: var(--rose);
  color: #fff;
  transition: all 150ms ease;
}
.pl-btn:hover { background: var(--rose-dark); border-color: var(--rose-dark); }
.pl-btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.pl-btn-secondary:hover { border-color: var(--muted); background: var(--surface); }
.pl-btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pl-btn-ghost:hover { color: var(--text); }
.pl-btn-large { padding: 16px 32px; font-size: 14px; }

/* --- Cards --- */
.pl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 20px;
}
.pl-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
}

/* --- Escape hatch strip (bottom of every intake page) --- */
.pl-escape {
  margin-top: 48px;
  padding: 24px 20px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}
.pl-escape-text {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 17px;
  margin: 0 0 12px;
}
.pl-escape-link {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid var(--rose);
  padding-bottom: 2px;
}

/* --- Cover screen (special first page of intake) --- */
.pl-cover {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 32px;
  text-align: center;
}
.pl-cover-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}
.pl-cover-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 24px;
}
.pl-cover-intro {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 40px;
}
.pl-cover-promise {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 32px;
  margin-top: 40px;
}

/* --- Uploads --- */
.pl-upload-zone {
  /* This is a <label>, which is inline by default. Without display:block the
     dashed border wraps the text runs instead of the box, and the whole zone
     collapses into a sliver that overlaps the text around it. */
  display: block;
  border: 2px dashed var(--border);
  border-radius: 4px;
  padding: 40px 20px;
  text-align: center;
  background: var(--surface);
  transition: border-color 200ms ease;
  cursor: pointer;
}
.pl-upload-zone:hover { border-color: var(--rose); }
.pl-upload-zone-label {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--text);
  margin: 0 0 8px;
}
.pl-upload-zone-hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}
.pl-upload-list { margin-top: 24px; }
.pl-upload-item {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.pl-upload-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--surface-alt);
  flex-shrink: 0;
}
.pl-upload-info { flex: 1; min-width: 0; }
.pl-upload-filename {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.pl-upload-caption {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  background: var(--bg);
}
.pl-upload-hero-toggle {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
}
.pl-upload-hero-toggle.is-hero { color: var(--rose); font-weight: 600; }

/* --- Invitation list (Chapter 4.5) --- */
.pl-invite-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 8px;
}
.pl-invite-status {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --- Days list (Chapter 7) --- */
.pl-day-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 8px;
}

/* --- Dashboard --- */
.pl-dash-header {
  padding: 40px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.pl-dash-baby-name {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  margin: 0 0 8px;
}
.pl-dash-status {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose);
}
.pl-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.pl-dash-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0;
}

/* --- Alerts --- */
.pl-alert {
  padding: 16px 20px;
  border-radius: 3px;
  margin-bottom: 24px;
  font-size: 16px;
}
.pl-alert-info {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.pl-alert-error {
  background: #FBF0EE;
  border: 1px solid var(--rose);
  color: var(--rose-dark);
}

/* --- Login pages (extra quiet) --- */
.pl-login-hero {
  text-align: center;
  padding: 32px 0 40px;
}
.pl-login-hero .pl-h1 { font-size: 36px; }

/* --- Tim's admin --- */
.pl-admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.pl-admin-table th, .pl-admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-family: var(--sans);
  font-size: 14px;
}
.pl-admin-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface-alt);
}
.pl-admin-table tr:last-child td { border-bottom: none; }
.pl-admin-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.pl-admin-badge-pending { background: #FDF3D6; color: #7A5C10; }
.pl-admin-badge-live { background: #E5F3E5; color: #2A5A2A; }
.pl-admin-badge-draft { background: var(--surface-alt); color: var(--muted); }

/* --- Preview shell --- */
.pl-preview-bar {
  position: sticky;
  top: 0;
  background: var(--rose);
  color: #fff;
  padding: 14px 24px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 14px;
}
.pl-preview-bar-text { color: rgba(255,255,255,0.9); }
.pl-preview-bar-btn {
  background: #fff;
  color: var(--rose-dark);
  padding: 8px 18px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .pl-page, .pl-page-wide, .pl-page-narrow { padding: 32px 20px 64px; }
  .pl-cover { padding: 64px 24px; }
  .pl-cover-title { font-size: 38px; }
  .pl-h1 { font-size: 32px; }
  .pl-h2 { font-size: 24px; }
  .pl-btn-row { flex-direction: column; align-items: stretch; }
  .pl-btn { width: 100%; text-align: center; }
  .pl-invite-row, .pl-day-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Accent picker (dashboard, Aug 2026).
   The sample inside each card deliberately uses the memorial page's own cream,
   ink and green literals rather than the dashboard tokens, so the parent is
   looking at a true miniature of her page and not a dashboard-tinted guess.
--------------------------------------------------------------------------- */
.pl-accent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  margin:16px 0 20px;
}
.pl-accent-option{
  position:relative;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.pl-accent-option:hover{border-color:var(--accent-deep)}
.pl-accent-option > input[type="radio"]{
  position:absolute;
  top:12px;
  right:12px;
  margin:0;
  z-index:2;
  accent-color:var(--accent-deep);
}
.pl-accent-option.is-selected{
  border-color:var(--accent-deep);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.pl-accent-option:has(> input[type="radio"]:checked){
  border-color:var(--accent-deep);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.pl-accent-swatches{
  display:flex;
  height:8px;
  width:100%;
}
.pl-accent-swatches > span{flex:1 1 0;display:block}
.pl-accent-sample{
  display:block;
  flex:1 1 auto;
  padding:22px 18px 20px;
  background:#F5F0E8;
  text-align:center;
}
.pl-accent-heart{
  display:block;
  color:var(--accent-deep);
  font-size:13px;
  line-height:1;
  margin-bottom:10px;
}
.pl-accent-eyebrow{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  line-height:1.2;
  color:var(--accent-deep);
  margin:0 0 6px;
}
.pl-accent-title{
  font-family:var(--serif);
  font-size:25px;
  line-height:1.15;
  color:#1a1a1a;
  margin:0;
}
.pl-accent-title em{color:#2C3E2D;font-style:italic}
.pl-accent-rule{
  display:block;
  width:34px;
  height:1px;
  background:var(--accent-deep);
  opacity:.6;
  margin:14px auto 0;
}
.pl-accent-name{
  display:block;
  margin-top:auto;
  padding:11px 14px 13px;
  background:var(--surface-alt);
  border-top:1px solid var(--border);
  font-family:var(--sans);
  font-size:13px;
  color:var(--text);
  text-align:center;
}
.pl-accent-default{
  display:block;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  margin-top:3px;
}

/* ---- Long-form pages (terms, privacy) ---------------------------------- */
.pl-prose { max-width: 68ch; margin: 0 auto; }
.pl-prose p,
.pl-prose li { font-size: 17px; line-height: 1.65; color: var(--text); }
.pl-prose h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 36px 0 10px;
}
.pl-prose ul { padding-left: 22px; margin: 10px 0 0; }
.pl-prose li { margin-bottom: 8px; }
.pl-prose a { color: var(--rose); }
.pl-prose-meta {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted);
}
@media (max-width: 600px) {
  .pl-prose p, .pl-prose li { font-size: 16px; }
  .pl-prose h2 { font-size: 20px; margin-top: 30px; }
}