/* Map Your Month — wizard styles. Colour and type tokens match the PDF. */

:root {
  --paper: #F8F4ED;
  --bone: #EFE8DC;
  --ink: #1A1814;
  --ink-soft: #4A4640;
  --sage: #9CAA8E;
  --sage-deep: #6E7C61;
  --ember: #C66B3D;
  --hairline: #D9D1C0;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: "Lora", Georgia, "Times New Roman", serif;

  --container: 720px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Masthead */
.masthead {
  border-bottom: 1px solid var(--hairline);
  padding: 28px 24px 22px;
  text-align: center;
}

.wordmark {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.meta {
  margin-top: 6px;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ink-soft);
}

/* Frame */
.frame {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Steps */
.steps {
  margin-bottom: 36px;
}

.steps ol {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 16px;
}

.steps .step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.steps .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline);
  display: inline-block;
}

.steps .step.is-current .dot {
  background: var(--ember);
  border-color: var(--ember);
}

.steps .step.is-done .dot {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
}

.steps .step.is-current .label,
.steps .step.is-done .label {
  color: var(--ink);
}

/* Global: respect the HTML `hidden` attribute even when an element has an
   explicit `display` rule (otherwise `display: flex` etc. wins). */
[hidden] {
  display: none !important;
}

/* Panels */
.panel {
  display: none;
}

.panel.is-active {
  display: block;
}

.panel h1,
.panel h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: 0.3px;
}

.panel h1 { font-size: 42px; line-height: 1.1; }
.panel h2 { font-size: 32px; line-height: 1.15; }

.lede {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 18px;
  margin: 0 0 20px;
}

.placeholder {
  background: var(--bone);
  border: 1px dashed var(--hairline);
  padding: 20px;
  font-style: italic;
  color: var(--ink-soft);
  border-radius: 2px;
}

/* Actions */
.actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}

.btn {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn.primary:hover { opacity: 0.86; }

.btn.primary:disabled {
  background: var(--hairline);
  border-color: var(--hairline);
  color: var(--ink-soft);
  cursor: not-allowed;
  opacity: 0.7;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}

.btn.ghost:hover {
  background: var(--bone);
}

/* Form elements */
.form-group {
  margin: 28px 0 32px;
}

.field-label {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.field-meta {
  font-family: var(--body);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.field-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.field-row .input { flex: 1; }
.field-row #begin-year { max-width: 120px; }

.input {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 10px 12px;
  width: 100%;
  line-height: 1.5;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.input:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(198, 107, 61, 0.12);
}

.textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--body);
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234A4640' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Priorities list */
.priorities-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.priority-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.priority-num {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-soft);
  min-width: 24px;
  text-align: right;
}

.priority-input { flex: 1; }

.priority-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.priority-remove:hover {
  background: var(--bone);
  color: var(--ember);
}

.priority-remove:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.btn-link {
  background: transparent;
  border: none;
  color: var(--sage-deep);
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover { color: var(--ember); }

/* Save indicator */
.save-indicator {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--sage-deep);
  font-style: italic;
  height: 14px;
  opacity: 0;
  transition: opacity 200ms ease;
}

.save-indicator.is-visible { opacity: 1; }

/* Finish step status text under Draft It */
.finish-status {
  font-family: var(--body);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 18px 0 0;
  min-height: 1.4em;
}

/* Copyright notice (Begin panel only) */
.copyright-notice {
  font-family: var(--body);
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 36px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  text-align: left;
}

/* Colophon */
.colophon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  padding: 24px;
  border-top: 1px solid var(--hairline);
}

.colophon-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.colophon-mark {
  height: 14px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.colophon-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.colophon-link:hover { color: var(--ember); }

/* ---------- Prep ---------- */

/* Section dividers within the Prep panel */
.prep-section {
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.prep-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 12px;
}

.section-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: 0.2px;
}

.field-meta-strong {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
  font-style: normal;
}

/* ---------- Looking Ahead: month blocks ---------- */
.month-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

.month-block {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 20px 22px 22px;
}

.month-block-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}

.month-block-field {
  margin-top: 16px;
}

.month-block-field:first-of-type { margin-top: 0; }

.month-block-notes {
  min-height: 56px;
}

/* Holiday checklist */
.holiday-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.holiday-item label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  padding: 4px 0;
}

.holiday-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--sage-deep);
  transform: translateY(2px);
}

.holiday-date {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  min-width: 56px;
  flex-shrink: 0;
}

.holiday-label {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
}

/* Personal date entries */
.personal-dates-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.personal-date-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
}

.personal-date-row:last-child { border-bottom: none; }

.personal-date-display {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  min-width: 80px;
}

.personal-date-text {
  flex: 1;
  font-size: 15px;
  color: var(--ink);
}

.personal-date-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.personal-date-remove:hover {
  background: var(--bone);
  color: var(--ember);
}

.personal-date-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.personal-date-input {
  flex: 0 0 160px;
}

.personal-date-label {
  flex: 1;
}

.personal-date-add {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
}

.personal-date-enddate-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.personal-date-end-input {
  flex: 0 0 160px;
}

.personal-date-end-label {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

.personal-date-end-toggle {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.8px;
  padding: 2px 0;
}

/* ---------- Considering All the Things ---------- */
.things-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.thing-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.thing-num {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  min-width: 28px;
  text-align: right;
}

.thing-input { flex: 1; }

.thing-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.thing-remove:hover {
  background: var(--bone);
  color: var(--ember);
}

.thing-remove:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.lock-cta {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.evaluate-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 16px;
}

/* Evaluate instructions callout. Sits above the evaluation list once the
   user hits "Ready for the Next Step". Distinct cream background + sage
   left stripe so the instructions can't be missed. */
.evaluate-callout {
  background: var(--bone, #EFE8DC);
  border-left: 3px solid var(--sage-deep, #78876b);
  border-radius: 4px;
  padding: 18px 22px 16px;
  margin: 12px 0 20px;
}
.evaluate-callout p { margin: 0; }
.evaluate-callout-lede {
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #292d28);
  margin-bottom: 12px;
}
.evaluate-callout-line {
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #292d28);
  margin-bottom: 6px;
}
.evaluate-callout-line strong {
  font-weight: 600;
  color: var(--sage-deep, #78876b);
}
.evaluate-callout-note {
  font-family: 'Lora', serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft, #6a6a63);
  margin-top: 12px;
}

/* Evaluation list */
.evaluation-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 12px;
  border-top: 1px solid var(--hairline);
}

.evaluation-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.evaluation-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.evaluation-text {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.45;
}

.evaluation-question {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: center;
  padding-left: 12px;
}

.evaluation-question[hidden] {
  display: none;
}

.evaluation-question-label {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.evaluation-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.evaluation-pill {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.evaluation-pill:hover {
  border-color: var(--sage-deep);
  color: var(--sage-deep);
}

.evaluation-pill.is-selected {
  background: var(--sage-deep);
  color: #FFFFFF;
  border-color: var(--sage-deep);
}

.evaluation-bucket {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--sage-deep);
  white-space: nowrap;
  text-align: right;
}

/* Buckets */
.buckets {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bucket {
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 16px 18px;
}

.bucket[data-bucket="undecided"] {
  grid-column: 1 / -1;
  background: #FFFFFF;
}

.bucket-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}

.bucket-meta {
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.45;
}

.bucket-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bucket-item {
  font-size: 15px;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px dashed var(--hairline);
}

.bucket-item:last-child { border-bottom: none; }

.bucket-empty {
  color: var(--ink-soft);
  font-style: italic;
  padding: 6px 0;
  font-size: 14px;
}

/* Tending: practice infrastructure */
.tending-questions {
  list-style: none;
  padding: 0;
  margin: 12px 0 8px;
  border-top: 1px solid var(--hairline);
}

.tending-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.tending-question-text {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.45;
  flex: 1 1 auto;
  min-width: 0;
}

.tending-options {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.tending-pill {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tending-pill:hover {
  border-color: var(--sage-deep);
  color: var(--sage-deep);
}

.tending-pill.is-selected {
  background: var(--sage-deep);
  color: #FFFFFF;
  border-color: var(--sage-deep);
}

.tending-menus {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 16px;
}

.tending-card {
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 18px 20px;
}

.tending-card-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
}

.tending-card-desc {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 12px;
}

.tending-card-transition {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 10px;
}

.tending-option-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tending-option-row {
  padding: 8px 0;
}

.tending-option-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
}

.tending-option-check {
  margin: 0;
  accent-color: var(--sage-deep);
  flex-shrink: 0;
  margin-top: 5px;
}

.tending-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tending-option-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}

.tending-option-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.tending-empty {
  font-size: 15px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 12px 0 0;
}

.tending-custom-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}

.tending-custom-text {
  flex: 1;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}

.tending-custom-text::before {
  content: "·  ";
  color: var(--sage-deep);
  font-weight: 600;
}

.tending-custom-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.tending-custom-remove:hover {
  background: var(--bone);
  color: var(--ember);
}

.tending-custom-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tending-custom-input {
  flex: 1 1 280px;
  font-size: 14px;
}

.tending-custom-save {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
}

/* Save-for-later link below the Begin button */
.save-for-later {
  margin: 14px 0 0;
  text-align: right;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

.save-for-later a {
  color: var(--sage-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.save-for-later a:hover {
  color: var(--ember);
}

/* Mobile */
@media (max-width: 600px) {
  /* Tighter frame padding for more usable width on phones */
  .frame { padding: 24px 16px 48px; }

  .panel h1 { font-size: 34px; }
  .panel h2 { font-size: 26px; }

  /* Step indicator: hide labels except for the current step so users always
     know where they are without the row getting cramped. */
  .steps .label { display: none; }
  .steps .step.is-current .label,
  .steps .step.is-current.is-done .label { display: inline; }

  .actions { flex-direction: column-reverse; }
  .btn { width: 100%; }

  /* iOS auto-zoom prevention: every editable input must be ≥16px font on
     touch screens. Override the smaller sizes used for compact UIs. */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Touch targets: bump small × buttons to ~40px square on mobile so they
     hit the 44pt iOS guideline (close enough at 40 with hit-slop padding). */
  .priority-remove,
  .thing-remove {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .personal-date-remove,
  .tending-custom-remove {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  /* End-date toggle: bump from 10px → 12px so it's easier to read & tap. */
  .personal-date-end-toggle {
    font-size: 12px;
    padding: 6px 0;
  }

  .holiday-list { grid-template-columns: 1fr; }
  .personal-date-form { flex-wrap: wrap; }
  .personal-date-input { flex: 1 1 100%; }
  .personal-date-label { flex: 1 1 100%; }
  .personal-date-add { width: 100%; }
  .personal-date-end-input { flex: 1 1 100%; }

  .evaluation-row-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .evaluation-question {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 0;
  }
  .evaluation-bucket { text-align: left; }

  .buckets { grid-template-columns: 1fr; }
  .bucket[data-bucket="undecided"] { grid-column: 1; }

  .tending-question {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Tending option rows: more breathing room between items on small screens */
  .tending-option-row { padding: 12px 0; }

  /* Custom Tending add form: stack input + buttons full-width on mobile. */
  .tending-custom-input { flex: 1 1 100%; }
  .tending-custom-save { width: 100%; }
}

/* ---- Inline field help icon (question mark button) --------------- */
/* Small circle-shaped button placed inline with helper text. Opens a
   modal with more guidance. Kept subtle so it doesn't pull attention
   away from the primary form. */
.field-help-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--sage-deep, #78876b);
  background: transparent;
  color: var(--sage-deep, #78876b);
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.field-help-icon:hover,
.field-help-icon:focus-visible {
  background: var(--sage-deep, #78876b);
  color: var(--paper, #faf7f2);
  outline: none;
}

/* Custom tooltip on the help icon. Native `title` tooltips have a
   browser-controlled delay of 500ms+ that can't be shortened; this
   custom tooltip appears in ~50ms and is styled to match the brand. */
.field-help-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #292d28);
  color: var(--paper, #faf7f2);
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease 0s, visibility 0s linear 0.15s;
  pointer-events: none;
  z-index: 10;
}
.field-help-icon[data-tooltip]:hover::after,
.field-help-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease 0.05s, visibility 0s linear 0.05s;
}

/* ---- Draft version chooser modal ---------------------------------- */
/* Opens after the user clicks Draft It. Small centered dialog with two
   version options. Dismisses on X, Esc, backdrop click, or version pick. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(41, 45, 40, 0.35);
  z-index: 100;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  background: var(--paper, #faf7f2);
  border: 1px solid var(--hairline, rgba(41, 45, 40, 0.15));
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(41, 45, 40, 0.25);
  padding: 32px 28px 28px;
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft, #6a6a63);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
}
.modal-close:hover { color: var(--ink, #292d28); }
.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink, #292d28);
}
.modal-desc {
  font-family: 'Lora', serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft, #6a6a63);
  margin: 0 0 20px;
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.modal-actions .btn { min-width: 140px; }

/* Wider modal variant for popups with more copy (e.g. priorities help).
   Slightly smaller body font for better scan-ability at length. */
.modal-wide { max-width: 560px; }
.modal-wide .modal-desc {
  font-size: 13.5px;
  line-height: 1.55;
  text-align: left;
  margin: 0 0 10px;
}
.modal-wide .modal-desc:last-of-type { margin-bottom: 20px; }

/* Modal-embedded bulleted list (e.g. priorities help examples).
   Slightly indented, subtle sage bullet, comfortable line height. */
.modal-list {
  margin: 0 0 14px;
  padding: 0 0 0 20px;
  list-style: none;
  text-align: left;
}
.modal-list li {
  position: relative;
  font-family: 'Lora', serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink, #292d28);
  padding-left: 4px;
  margin: 0 0 4px;
}
.modal-list li::before {
  content: "·";
  position: absolute;
  left: -12px;
  color: var(--sage-deep, #78876b);
  font-weight: 700;
}

@media (max-width: 480px) {
  .modal { padding: 28px 20px 24px; }
  .modal-title { font-size: 22px; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }
}


/* =====================================================
   DESIGN REFRESH 2026-09 — new palette, typography, shell,
   ornaments, transitions, mobile drawer, wax seals, tints.
   ===================================================== */

:root {
  --blush:#F4DDE4; --blush-tint:#FBEEF2; --dusty:#D59AAE;
  --raspberry:#A83258; --rose:#7B1E3A; --gold:#C5A06A;
  --ink:#2B1F26; --ink-soft:#6E5D67; --ink-hair:rgba(43,31,38,0.12);
  --cream:#FBF7F5; --surface-1:#FFFFFF; --surface-2:#FBF7F5;
  --gold-tint:#FBF2E1; --gold-wash:#F7E8CB;
  --alamar-color: #A83258;
  /* Override key base.css palette variables so form controls, cards, and modals
     all reflect the new palette without editing base.css. */
  --paper:#FFFFFF; --cream:#FBF7F5; --ink:#2B1F26; --ink-soft:#6E5D67;
  --ember:#A83258; --sage-deep:#7B1E3A; --sage:#D59AAE;
  --hairline: rgba(43,31,38,0.12);
  --serif:'Fraunces',Georgia,serif;
  --body:'Onest',sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #EEE7E1; min-height: 100vh; font-family: var(--body); color: var(--ink); }
body { padding: 32px; -webkit-font-smoothing: antialiased; }

/* HIDE the base.css masthead + colophon since the new shell replaces them */
.masthead, .colophon { display: none !important; }

.preview-note { max-width: 1200px; margin: 0 auto 20px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size: 14px; color: var(--ink-soft); text-align: center; }

/* SHELL */
.app { max-width: 1200px; margin: 0 auto;
  background: var(--cream); border: 0.5px solid var(--ink-hair);
  border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 260px 1fr;
  box-shadow: 0 12px 40px rgba(43,31,38,0.06);
  transition: grid-template-columns 320ms cubic-bezier(.2,.7,.2,1); }
.collapse-btn svg { transition: transform 320ms ease; }
.sidebar { transition: padding 320ms ease; }

.sidebar { background: linear-gradient(180deg, var(--gold-tint) 0%, #FFFDF9 60%, #FFFFFF 100%);
  border-right: 0.5px solid var(--ink-hair); padding: 26px 22px 24px;
  display: flex; flex-direction: column; position: relative; }
.sidebar::after { content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background: linear-gradient(180deg, transparent 0%, rgba(197,160,106,0.25) 50%, transparent 100%); pointer-events:none; }
.brand { display:flex; align-items:center; gap:12px;
  padding-bottom:22px; border-bottom:0.5px solid var(--ink-hair); }
.alamar { display: inline-block; background-color: var(--alamar-color);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/png;base64,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"); mask-image: url("data:image/png;base64,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");
  transition: background-color 300ms ease; }
.brand-mark { width:34px; height:32px; opacity:0.95; }
.brand-title { font-family:'Fraunces',Georgia,serif; font-style: normal;
  font-weight:400; font-size:17px; line-height:1; color:var(--ink); letter-spacing:-0.2px; }
.brand-sub { font-size:8.5px; letter-spacing:1.55px; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; margin-top:5px; white-space: nowrap; }

.season-block { margin-top:22px; padding:14px 14px 16px; background:var(--surface-1);
  border:0.5px solid var(--ink-hair); border-radius:10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.season-glyph { color: var(--raspberry); }
.season-label { font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; }
.season-name { font-family:'Fraunces',serif; font-style: normal;
  font-size:22px; font-weight:400; line-height:1; color:var(--ink); letter-spacing:-0.3px; }
.season-month { font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:13px; color:var(--ink-soft); }
.season-desc { margin:0; font-family:'Onest',sans-serif; font-weight:300;
  font-size:11px; line-height:1.45; color:var(--ink-soft); letter-spacing:0.1px; }
.season-desc[hidden] { display:none; }
.draft-version.season-position { text-align:left; align-self:stretch; line-height:1.35; }
.season-position[hidden] { display:none; }
.season-position-line { display:block; }

/* STEP NAV — reshape base.css .steps into the sidebar list */
.steps { margin-top:22px; }
.steps ol { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; gap: 2px; border-bottom: 0 !important; }
.nav-kicker { font-family:'Fraunces',Georgia,serif; font-style: normal;
  font-size: 15px; letter-spacing: -0.1px; text-transform: none;
  color: var(--ink); font-weight: 400; padding: 0 0 14px 0; }
.step { cursor: pointer; display: grid; grid-template-columns: 22px 1fr;
  gap: 10px; align-items: center; padding: 9px 0; border-radius: 8px;
  position: relative; min-height: 34px; width: 100%; align-self: stretch; }
.step .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.is-current { padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; border-radius: 8px; }
.step .dot { display: none; } /* hide base.css bullet dots */
.step-num { font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:12px; font-weight:500; color:var(--ink-soft); text-align: left;
  padding-left: 1px; letter-spacing: 0.2px; }
.step .label { font-size:13px; font-weight:400; color:var(--ink); text-transform: none; letter-spacing: 0; padding: 0; }
.step.is-current { background:var(--blush); }
.step.is-current .step-num { color:var(--rose); font-weight:500; }
.step.is-current .label { color:var(--rose); font-weight:500; }
.step.is-done .label { color:var(--ink-soft); }
.step.is-done .step-num { display: none; }
.step.is-done { grid-template-columns: 22px 1fr; }
.step.is-done::before {
  content:""; width: 18px; height: 18px; border-radius: 999px;
  background: var(--gold);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'><path d='M5 9 L 8 12 L 13.5 6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
  grid-column: 1; justify-self: start;
  box-shadow: 0 0 0 3px rgba(197,160,106,0.15);
}
.step:not(.is-current):not(.is-done) .step-num { color: rgba(110,93,103,0.5); }
.step:not(.is-current):not(.is-done) .label { color: rgba(110,93,103,0.55); }

.spacer { flex: 1; }
.sig { padding-top:16px; border-top:0.5px solid var(--ink-hair);
  display:flex; align-items:center; gap:10px; }
.sig-mark { width:24px; height:22px; opacity:0.7; }
.sig-link { color:inherit; text-decoration:none; border-bottom:0.5px solid transparent;
  transition: color 180ms ease, border-color 180ms ease; }
.sig-link:hover, .sig-link:focus-visible { color:var(--season-tint); border-bottom-color:currentColor; outline:none; }
.sig-text { font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:12px; color:var(--ink-soft); line-height:1.2; }
#save-indicator { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 8px; }

/* MAIN CANVAS */
.main-wrap { background:var(--surface-1); padding:34px 48px 32px;
  display:flex; flex-direction:column; min-width: 0; }
.topbar { display:flex; justify-content:space-between; align-items:center;
  padding-bottom:22px; border-bottom:0.5px solid var(--ink-hair); }
.crumbs { font-size:10.5px; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; }
.crumbs .sep { color: rgba(110,93,103,0.4); margin: 0 8px; }
.crumbs .current { color: var(--rose); }
.progress-mini { display:flex; align-items:center; gap:8px; font-size:10.5px;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.progress-track { width:120px; height:3px; border-radius:999px; background:var(--blush); overflow:hidden; }
.progress-fill { height:100%; background:var(--raspberry); transition: width 300ms ease; width: 25%; }

/* Framing around the .frame from base.css: neutralize its own padding/borders */
.frame { border: 0 !important; background: transparent !important; padding: 0 !important;
  box-shadow: none !important; max-width: none !important; margin: 0 !important; }
.frame > .steps { display: none; } /* nav lives in sidebar, not inside frame */

.panel { display: none; padding: 42px 0 8px 0; position: relative; }
.panel.is-active { display: block; }

.hero { position:relative; padding:44px 0 26px; overflow:visible; }
.hero-watermark { position:absolute; top:34px; left:-90px;
  width:320px; height:298px;
  opacity:0.08; pointer-events:none; z-index:0; }
.hero-inner { position:relative; z-index:1; }
.kicker-badge { font-size:10px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--rose); font-weight:500; margin: 0 0 14px 0;
  display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1; }
.kicker-badge .roman { font-family:'Cormorant Garamond',serif; font-style:italic;
  font-weight:500; letter-spacing:1px; font-size:13px; color:var(--rose); }
.kicker-badge::before { content:""; width:22px; height:1px; background: var(--gold); opacity: 0.7; display:inline-block; }

/* Retitle base.css panel h1/h2 to new type stack */
.panel h1, .panel h2 { font-family:'Fraunces',Georgia,serif !important; font-style: normal !important;
  font-weight: 400 !important; font-size: 46px !important; line-height: 1.06 !important;
  color: var(--ink) !important; margin: 0 0 14px 0 !important; letter-spacing: -0.6px !important;
  position: relative; z-index: 1; }
.panel .lede { font-family:'Onest',sans-serif !important; font-style: normal !important;
  font-size: 15px !important; line-height: 1.7 !important; color: var(--ink) !important;
  max-width: 700px; font-weight: 300 !important; margin: 0 0 32px 0 !important;
  position: relative; z-index: 1; }

/* Cards, labels, meta text — retreat to new palette + typography */
.form-group { background: var(--surface-2); border: 0.5px solid var(--ink-hair);
  border-radius: 12px; padding: 24px 26px 26px; margin: 0 0 20px 0;
  position: relative; z-index: 1; }
.field-label { font-family:'Onest',sans-serif !important; font-size: 10.5px !important;
  letter-spacing: 1.8px !important; text-transform: uppercase !important;
  color: var(--ink-soft) !important; font-weight: 500 !important; display: block; margin-bottom: 6px; }
.field-meta { font-family:'Cormorant Garamond',serif !important; font-style: italic !important;
  font-size: 14.5px !important; color: var(--ink-soft) !important; line-height: 1.45 !important;
  margin: 8px 0 14px 0 !important; }

/* Section titles in Prep */
.section-title { font-family:'Fraunces',serif !important; font-style: normal !important;
  font-weight: 400 !important; font-size: 28px !important; color: var(--ink) !important;
  margin: 44px 0 10px 0 !important; letter-spacing: -0.3px !important;
  position: relative; z-index: 1; padding-top: 20px;
  display: flex; align-items: center; gap: 14px; }
.section-title::before { content:''; flex: 0 0 22px; height: 1px; background: var(--gold); opacity: 0.7; }
.prep-section:first-of-type .section-title { padding-top: 0; margin-top: 4px !important; }
.prep-section + .prep-section { margin-top: 12px; }

/* Inputs full-width in cards */
.input { width: 100% !important; padding: 12px 14px !important;
  border: 0.5px solid var(--ink-hair) !important; border-radius: 8px !important;
  font-family:'Onest',sans-serif !important; font-weight: 300 !important;
  font-size: 14.5px !important; color: var(--ink) !important; background: #FFF !important; }
.input:focus { outline: none !important; border-color: var(--dusty) !important;
  box-shadow: 0 0 0 3px rgba(213,154,174,0.2) !important; }
.textarea { min-height: 96px !important; resize: vertical !important;
  font-family:'Onest',sans-serif !important; line-height: 1.5 !important; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .input { flex: 1 1 220px; min-width: 200px; }
select.input { appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1 L6 6 L11 1' stroke='%236E5D67' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
  background-size: 10px 6px !important; padding-right: 36px !important; }

/* Priorities and things: keep numbered layout, full-width inputs */
.priorities-list, .things-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px; }
.priority-row, .thing-row { display: grid !important;
  grid-template-columns: 22px 1fr 28px !important; align-items: center; gap: 10px; }
.priority-num, .thing-num { font-family:'Cormorant Garamond',serif !important;
  font-style: italic !important; font-size: 15px !important; color: var(--ink-soft) !important;
  text-align: right; }
.priority-remove, .thing-remove { background: none !important; border: 0 !important;
  color: var(--ink-soft) !important; cursor: pointer;
  font-size: 18px !important; line-height: 1 !important; opacity: 0.5 !important; padding: 4px; }
.priority-remove:hover, .thing-remove:hover { opacity: 1 !important; color: var(--rose) !important; }

/* Buttons */
.btn { font-size: 11.5px !important; letter-spacing: 1.6px !important;
  text-transform: uppercase !important; padding: 12px 22px !important;
  border-radius: 999px !important; border: 0.5px solid var(--ink-hair) !important;
  background: transparent !important; color: var(--ink-soft) !important;
  font-weight: 500 !important; cursor: pointer !important;
  font-family:'Onest',sans-serif !important; display: inline-flex !important;
  align-items: center !important; gap: 8px !important; }
.btn.primary { background: var(--rose) !important; border-color: var(--rose) !important; color: #FFF !important; }
.btn.primary:hover { background: var(--raspberry) !important; border-color: var(--raspberry) !important; }
/* Save-for-later: pale champagne wash, burgundy text, quieter than Begin. */
.btn.inverse { background: var(--gold-tint) !important; color: #9A7740 !important;
  border: 1px solid rgba(197,160,106,0.45) !important; box-shadow: none !important; }
.btn.inverse:hover { background: var(--gold-wash) !important;
  border-color: rgba(197,160,106,0.70) !important; color: #8A6833 !important; }
/* Keep action buttons to a comfortable width instead of stretching. */
.actions .btn, .save-later-btn, .prep-stage-actions .btn, .lock-cta .btn {
  width: auto !important; min-width: 150px; max-width: 100%; }
/* Begin and the save-for-later button share one row: Begin left, save right.
   On phones they stack, Begin on top (2026-10-15). */
.actions .btn.primary:only-child { margin-left: 0 !important; margin-right: auto !important; }
.begin-actions { justify-content: space-between !important; align-items: center !important;
  gap: 16px !important; flex-wrap: wrap; }
@media (max-width: 767px) {
  /* Beats the generic one-row mobile .actions rule further down the file. */
  .panel .actions.begin-actions { flex-direction: column !important;
    align-items: flex-start !important; gap: 12px !important; flex-wrap: wrap !important; }
  .panel .actions.begin-actions .save-later-btn { white-space: normal !important;
    text-align: center; max-width: 100%; }
}
.save-later-btn { display: inline-block; text-decoration: none !important;
  text-transform: none !important; letter-spacing: 0.2px !important;
  font-family: 'Onest', sans-serif !important; font-size: 13px !important;
  font-style: normal !important; font-weight: 300 !important; }
.btn.ghost:hover { color: var(--ink) !important; border-color: var(--ink-soft) !important; }
.btn-link { color: var(--rose) !important; font-family:'Onest',sans-serif !important;
  font-size: 12px !important; letter-spacing: 1.4px !important; text-transform: uppercase !important;
  font-weight: 500 !important; background: none !important; border: 0 !important;
  padding: 10px 0 0 0 !important; cursor: pointer; }
.actions { margin-top: 36px !important; padding-top: 28px !important;
  border-top: 0.5px solid var(--ink-hair) !important;
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; position: relative; z-index: 1; }
.field-help-icon { background: none; border: 0.5px solid var(--ink-soft); color: var(--ink-soft);
  width: 16px; height: 16px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10px; cursor: pointer;
  font-family:'Cormorant Garamond',serif; font-style: italic; margin-left: 6px; }

.copyright-notice { font-size: 10.5px !important; line-height: 1.6 !important;
  color: var(--ink-soft) !important; max-width: 720px !important; font-weight: 300 !important; }
.copyright-notice a { color: var(--rose) !important; }
.save-for-later a { color: var(--rose) !important;
  font-family:'Cormorant Garamond',serif; font-style: italic; }
.finish-status { font-family:'Cormorant Garamond',serif; font-style: italic; color: var(--ink-soft); }

/* Softer holiday reference styling */
.holiday-list { gap: 6px 20px !important; }
.holiday-item { padding: 2px 0 !important; }
.holiday-date { font-family:'Cormorant Garamond',serif !important; font-style: italic !important;
  font-size: 14px !important; color: var(--ink) !important; font-weight: 500 !important;
  letter-spacing: 0.2px !important; min-width: 64px !important; }
.holiday-label { font-family:'Onest',sans-serif !important; font-size: 13px !important;
  color: rgba(43,31,38,0.75) !important; font-weight: 300 !important; }
.holiday-item input[type="checkbox"] { accent-color: var(--rose) !important;
  transform: translateY(1px) scale(0.9) !important; opacity: 0.85; }

/* Softer Tending-questions styling */
.tending-questions { border-top: 0.5px solid var(--ink-hair) !important; margin-top: 16px !important; }
.tending-question { padding: 12px 0 !important; border-bottom: 0.5px solid var(--ink-hair) !important; }
.tending-question-text { font-family:'Onest',sans-serif !important; font-size: 14px !important;
  color: var(--ink) !important; font-weight: 300 !important; line-height: 1.5 !important; }
.tending-pill { font-family:'Onest',sans-serif !important; font-size: 11px !important;
  letter-spacing: 1.2px !important; text-transform: uppercase !important; font-weight: 500 !important;
  padding: 6px 14px !important; border: 0.5px solid var(--ink-hair) !important;
  color: var(--ink-soft) !important; }
.tending-pill.is-selected { background: var(--rose) !important; color: #FFF !important;
  border-color: var(--rose) !important; }

/* Fleuron ornament divider between Prep sections */
.prep-section + .prep-section { margin-top: 36px; }

/* Loop-mark bullet under section titles for a bespoke touch */
.field-meta::before { content:""; }

/* Subtle background texture on the app */
.app { background-image:
  radial-gradient(ellipse at top left, rgba(197,160,106,0.05) 0%, transparent 40%),
  radial-gradient(ellipse at bottom right, rgba(168,50,88,0.03) 0%, transparent 45%);
  background-color: var(--cream);
}

/* Saving indicator: elegant */
#save-indicator { font-family:'Cormorant Garamond',serif !important; font-style: italic !important;
  font-size: 11px !important; letter-spacing: 0.4px !important; text-transform: none !important;
  color: var(--gold) !important; margin-top: 6px !important; opacity: 0.85; }

/* Custom loop-mark ornament for use in various spots */
.loop-mark { display: inline-block; width: 22px; height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none'><path d='M2 6 C 2 2.5, 5 2, 7 4 C 9 6, 9 8, 11 8 C 13 8, 13 6, 15 4 C 17 2, 20 2.5, 20 6' stroke='white' stroke-width='1.2' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none'><path d='M2 6 C 2 2.5, 5 2, 7 4 C 9 6, 9 8, 11 8 C 13 8, 13 6, 15 4 C 17 2, 20 2.5, 20 6' stroke='white' stroke-width='1.2' stroke-linecap='round' fill='none'/></svg>") center/contain no-repeat;
}

/* Panel bottom fleuron ornament between sections in Prep */
.prep-section + .prep-section::before {
  content:"\2766"; display: block; text-align: center; color: var(--gold);
  font-size: 14px; opacity: 0.6; margin: 0 0 12px 0;
}

/* Enhanced focus rings for elevated feel */
.input:focus, textarea:focus, select:focus, .btn:focus {
  outline: none !important;
}

/* Card hover lift — subtle */
.form-group { transition: box-shadow 240ms ease, border-color 240ms ease; }
.form-group:focus-within { box-shadow: 0 4px 24px rgba(43,31,38,0.06); border-color: rgba(197,160,106,0.35) !important; }

.sidebar-divider { display: flex; justify-content: center; margin: 22px 0 0 0; }
/* Roman numerals in kicker: soften */
.kicker-badge .roman { color: var(--gold) !important; font-size: 14px !important; }
.kicker-badge { color: var(--ink-soft) !important; letter-spacing: 2.6px !important; }


/* Tending menu content softened (opt-in card + option rows) */
.tending-card { background: var(--surface-2) !important; border: 0.5px solid var(--ink-hair) !important;
  border-radius: 12px !important; padding: 20px 22px !important; }
.tending-card-name { font-family:'Fraunces',serif !important; font-style: normal !important;
  font-weight: 400 !important; font-size: 20px !important; color: var(--ink) !important;
  letter-spacing: -0.2px !important; margin: 0 0 8px 0 !important; }
.tending-card-desc { font-family:'Onest',sans-serif !important; font-size: 14px !important;
  font-weight: 300 !important; color: var(--ink) !important; line-height: 1.55 !important; }
.tending-card-transition { font-family:'Cormorant Garamond',serif !important; font-style: italic !important;
  font-size: 14px !important; color: var(--ink-soft) !important; line-height: 1.5 !important; }
.tending-option-label { font-family:'Onest',sans-serif !important; font-size: 14px !important;
  font-weight: 300 !important; color: var(--ink) !important; }
.tending-option-title { font-family:'Fraunces',Georgia,serif !important; font-style: normal !important;
  font-weight: 400 !important; font-size: 17px !important; color: var(--ink) !important;
  letter-spacing: -0.1px !important; line-height: 1.3 !important; }
.tending-option-desc { font-family:'Onest',sans-serif !important; font-style: normal !important;
  font-size: 13.5px !important; font-weight: 300 !important; color: var(--ink-soft) !important;
  line-height: 1.55 !important; }
.tending-option-check { accent-color: var(--rose) !important; }

/* Tending menus: collapsible area cards + compact option tiles (2026-09-17) */
.tending-menus { gap: 12px !important; }
.tending-card.is-collapsible { padding: 0 !important; }
.tending-card-heading { margin: 0; }
.tending-card-head { all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; }
.tending-card-head:focus-visible { outline: 2px solid color-mix(in oklab, var(--season-tint) 60%, transparent); outline-offset: 2px; }
.tending-card-head .tending-card-name { margin: 0 !important; flex: 1 1 auto; }
.tending-card-count { font-family:'Onest',sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.6px; text-transform: uppercase; color: var(--season-tint); white-space: nowrap; }
.tending-card-chev { width: 8px; height: 8px; flex: 0 0 auto; margin-right: 2px;
  border-right: 1.2px solid var(--ink-soft); border-bottom: 1.2px solid var(--ink-soft);
  transform: rotate(45deg) translateY(-3px); transition: transform 220ms ease; }
.tending-card.is-open .tending-card-chev { transform: rotate(-135deg) translate(-2px, -1px); }
.tending-card-body { padding: 0 20px 18px; }
.tending-card-body[hidden] { display: none; }
.tending-card-body .tending-card-transition { margin: 0 0 12px !important; }
.tending-card-body .tending-option-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tending-card-body .tending-option-row { padding: 0 !important; border-radius: 10px;
  border: 0.5px solid var(--ink-hair); background: rgba(255,255,255,0.55);
  transition: background 160ms ease, border-color 160ms ease; }
.tending-card-body .tending-option-row:hover { border-color: color-mix(in oklab, var(--season-tint) 45%, transparent); }
.tending-card-body .tending-option-row.is-checked { background: color-mix(in oklab, var(--season-tint) 9%, #FFFFFF);
  border-color: color-mix(in oklab, var(--season-tint) 55%, transparent); }
.tending-card-body .tending-option-label { padding: 10px 12px; gap: 10px; height: 100%; box-sizing: border-box; }
.tending-card-body .tending-option-title { font-size: 15px !important; }
.tending-card-body .tending-option-desc { font-size: 12.5px !important; line-height: 1.45 !important; }
.tending-card-body .tending-custom-row { padding: 10px 12px !important; }
.tending-card-body .tending-custom-add { margin-top: 10px; }
.tending-custom-add [hidden] { display: none !important; }
@media (min-width: 1100px) {
  .tending-card-body .tending-option-list { grid-template-columns: 1fr 1fr; }
}
.tending-empty { font-family:'Cormorant Garamond',serif !important; font-style: italic !important;
  font-size: 14.5px !important; color: var(--ink-soft) !important; }

/* Prep sub-stage flow — Looking Ahead / Considering All the Things / Tending */
.prep-stage { display: none; }
.prep-stage.is-current { display: block; }
.prep-stage-actions { margin-top: 32px; padding-top: 26px;
  border-top: 0.5px solid var(--ink-hair);
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1; }
.prep-stage-actions:has(.prep-stage-next:only-child) { justify-content: flex-end; }
/* When the tending stage owns the panel actions, the main actions bar takes those roles;
   the third stage doesn't need its own actions block. */
.prep-stage[data-prep-stage="tending"] .prep-stage-actions { display: none; }

/* Tighter spacing between Prep lede and first section title */
.prep-stage .section-title { margin-top: 8px !important; padding-top: 0 !important; }
.prep-section { margin: 0 !important; }

/* Sidebar sub-progression under active step */
.sub-progression { list-style: none; padding: 0; margin: 6px 0 6px 32px;
  display: none; flex-direction: column; gap: 5px;
  border-left: 0.5px solid var(--ink-hair); padding-left: 14px; }
.sub-progression.is-visible { display: flex; }
.sub-item { font-family:'Onest',sans-serif; font-size: 11.5px; color: var(--ink-soft);
  font-weight: 300; display: none; align-items: center; gap: 8px; }
.sub-item::before { content:""; width: 6px; height: 6px; border-radius: 999px;
  border: 1px solid rgba(110,93,103,0.35); }
.sub-item.is-done { display: flex; }
.sub-item.is-done::before { background: var(--gold); border-color: var(--gold); }
/* Also hide the wrapper's left rule when nothing is done yet */
.sub-progression:not(:has(.sub-item.is-done)) { border-left: 0; padding-left: 0; margin-left: 32px; }

/* Prep panel: only reveal the main actions bar during the tending stage */
.panel[data-panel="prep"][data-prep-stage="ahead"] > .actions,
.panel[data-panel="prep"][data-prep-stage="things"] > .actions { display: none !important; }

/* Pale-gold shaded surfaces on the right, matching the sidebar tone.
   Uses rgba tints of the champagne gold so each retains its own softness. */
.form-group { background: rgba(197,160,106,0.10) !important;
  border-color: rgba(197,160,106,0.22) !important; }
.form-group:focus-within { background: rgba(197,160,106,0.14) !important;
  border-color: rgba(197,160,106,0.45) !important; }
.tending-card { background: rgba(197,160,106,0.08) !important;
  border-color: rgba(197,160,106,0.20) !important; }
.evaluate-callout { background: rgba(197,160,106,0.10) !important;
  border-color: rgba(197,160,106,0.22) !important; }
.bucket { background: rgba(197,160,106,0.08) !important;
  border-color: rgba(197,160,106,0.20) !important; }
.placeholder { background: rgba(197,160,106,0.12) !important;
  border-color: rgba(197,160,106,0.30) !important; }
.modal { background: #FFFDF9 !important; border-color: rgba(197,160,106,0.25) !important; }
/* Input backgrounds stay white so entered text has crisp contrast. */

/* -----------------------------------------------------------------------
   Bespoke elevation pass — copy-free, layout-safe.
   ----------------------------------------------------------------------- */

/* Custom text selection: warm rose */
::selection { background: rgba(168,50,88,0.20); color: var(--ink); }
::-moz-selection { background: rgba(168,50,88,0.20); color: var(--ink); }

/* Custom scrollbars — hair-thin, warm neutral (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(197,160,106,0.28); border-radius: 999px;
  border: 3px solid var(--surface-1); }
::-webkit-scrollbar-thumb:hover { background: rgba(197,160,106,0.5); }

/* Fraunces optical + refined feature settings */
.brand-title, .season-name, .panel h1, .panel h2, .section-title, .tending-card-name,
.tending-option-title, .mym-title {
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 60, "opsz" 40;
  font-feature-settings: "ss01","liga","calt","onum";
}

/* Panel transitions — directional page-turn swipe */
.panel.is-active[data-anim-dir="forward"] { animation: panel-swipe-forward 620ms cubic-bezier(.2,.7,.2,1) both; }
.panel.is-active[data-anim-dir="back"]    { animation: panel-swipe-back    620ms cubic-bezier(.2,.7,.2,1) both; }
.panel.is-active { animation: panel-swipe-forward 620ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes panel-swipe-forward {
  0%   { opacity: 0; transform: translateX(60px) rotateY(-3deg); transform-origin: left center; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) rotateY(0); }
}
@keyframes panel-swipe-back {
  0%   { opacity: 0; transform: translateX(-60px) rotateY(3deg); transform-origin: right center; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) rotateY(0); }
}
.main-wrap { perspective: 1600px; }

/* Prep sub-stage transitions — same page-turn feel, slightly shorter */
.prep-stage.is-current[data-anim-dir="forward"] { animation: stage-swipe-forward 500ms cubic-bezier(.2,.7,.2,1) both; }
.prep-stage.is-current[data-anim-dir="back"]    { animation: stage-swipe-back    500ms cubic-bezier(.2,.7,.2,1) both; }
.prep-stage.is-current { animation: stage-swipe-forward 500ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes stage-swipe-forward {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes stage-swipe-back {
  0%   { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Card hover lift — very subtle, editorial */
.form-group { transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease, background 260ms ease; }
.form-group:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(43,31,38,0.05); }

/* Corner fleuron in top-right of each card — bespoke tailored feel */
.form-group { position: relative; }
.form-group::after {
  content: "\2766";
  position: absolute; top: 14px; right: 18px;
  font-family: "Cormorant Garamond", serif; font-style: italic;
  color: var(--gold); opacity: 0.35; font-size: 14px; line-height: 1;
  pointer-events: none;
}

/* Underline anchor for the current sidebar step */
.step.is-current .label { position: relative; padding-bottom: 2px; }
.step.is-current .label::after {
  content:""; position: absolute; left: 0; bottom: -2px; width: 18px; height: 1px;
  background: var(--gold); opacity: 0.85;
}

/* Progress bar: small gold cursor riding the fill */
.progress-track { position: relative; overflow: visible; }
.progress-fill { position: relative; }
.progress-fill::after {
  content:""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(197,160,106,0.18);
}

/* Focus polish: soft warm ring rather than a hard border */
.input:focus, textarea.input:focus, select.input:focus {
  outline: none !important;
  border-color: rgba(197,160,106,0.5) !important;
  box-shadow: 0 0 0 3px rgba(197,160,106,0.18) !important;
}

/* Buttons: subtle press behavior */
.btn { transition: transform 120ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.btn:active { transform: translateY(1px); }
.hero-watermark { display: none !important; }
.btn.primary { box-shadow: 0 2px 12px rgba(123,30,58,0.18); }
.btn.primary:hover { box-shadow: 0 4px 20px rgba(168,50,88,0.28); }

/* Elegant hairline dividers throughout */
.topbar, .actions, .prep-stage-actions {
  border-image: linear-gradient(90deg, transparent 0%, rgba(43,31,38,0.14) 20%, rgba(43,31,38,0.14) 80%, transparent 100%) 1;
}

/* Panel h1/h2 — slight optical baseline nudge and a delicate first-line hang */
.panel h1, .panel h2 { text-wrap: balance; }
.panel .lede { text-wrap: pretty; }

/* Editorial hanging opening-quote for ledes (when present) */
.panel .lede::first-letter { }
/* Old-style figures for date labels in observed dates */
.holiday-date { font-variant-numeric: oldstyle-nums; font-feature-settings: "onum"; }

/* Sidebar: a hairline gold accent at the very bottom, above the signature */
.sig { position: relative; }
.sig::before {
  content:""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(197,160,106,0.4) 30%, rgba(197,160,106,0.4) 70%, transparent 100%);
}

/* Modal refinements */
.modal-title { font-family:'Fraunces',serif !important; font-style: normal !important;
  font-weight: 400 !important; letter-spacing: -0.3px !important; }

/* Sidebar step nav: gentle hover for reachable steps */
.step:not(.is-current):not(:is([aria-disabled="true"])) { transition: background 180ms ease; }
.step:not(.is-current):hover { background: rgba(197,160,106,0.10); }

/* Panel h1/h2 first character: elegant slight display size */
.panel h1::first-letter, .panel h2::first-letter { letter-spacing: -0.02em; }

/* Alamar peeking behind the sidebar — very faint watermark on the sidebar bottom quadrant */
.sidebar::before {
  content:""; position: absolute; left: -70px; bottom: 70px; width: 240px; height: 224px;
  background-color: rgba(197,160,106,0.15);
  -webkit-mask: url("data:image/png;base64,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") center/contain no-repeat;
          mask: url("data:image/png;base64,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") center/contain no-repeat;
  pointer-events: none; opacity: 0.6;
}

/* -----------------------------------------------------------------------
   Sidebar tools row: sound + collapse
   ----------------------------------------------------------------------- */
.brand { position: relative; align-items: flex-start; }
.brand-text { flex: 1; min-width: 0; }
.brand-tools { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.icon-btn { background: transparent; border: 0.5px solid transparent; color: var(--ink-soft);
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 180ms, background 180ms, border-color 180ms, transform 180ms; }
.icon-btn:hover { color: var(--rose); background: rgba(197,160,106,0.10);
  border-color: rgba(197,160,106,0.30); }
.icon-btn:active { transform: scale(0.94); }
.sound-toggle .sound-wave { transition: opacity 180ms; }
.sound-toggle[aria-pressed="false"] .sound-wave { opacity: 0; }

/* Collapsed sidebar */
.app.is-sidebar-collapsed { grid-template-columns: 68px 1fr; }
.app.is-sidebar-collapsed .sidebar { padding: 22px 12px 22px 12px; align-items: center; }
.app.is-sidebar-collapsed .brand { flex-direction: column; align-items: center; gap: 10px; border-bottom: 0; padding-bottom: 12px; }
.app.is-sidebar-collapsed .brand-text,
.app.is-sidebar-collapsed .brand-sub,
.app.is-sidebar-collapsed .season-name,
.app.is-sidebar-collapsed .season-month,
.app.is-sidebar-collapsed .season-label,
.app.is-sidebar-collapsed .draft-version,
.app.is-sidebar-collapsed .nav-kicker,
.app.is-sidebar-collapsed .sig-text,
.app.is-sidebar-collapsed .step .label,
.app.is-sidebar-collapsed .sub-progression { display: none !important; }
.app.is-sidebar-collapsed .season-block { padding: 8px; align-items: center; }
.app.is-sidebar-collapsed .season-block > div { display: block !important; }
@media (min-width: 768px) {
  .app.is-sidebar-collapsed .season-block > .season-desc,
  .app.is-sidebar-collapsed .season-block > .season-position { display: none !important; }
}
.app.is-sidebar-collapsed .step { grid-template-columns: 1fr; justify-items: center; padding: 8px 0; }
.app.is-sidebar-collapsed .step .step-num { text-align: center; }
.app.is-sidebar-collapsed .step .dot { display: none; }
.app.is-sidebar-collapsed .step.is-done::before { justify-self: center; }
.app.is-sidebar-collapsed .step.is-current .label::after { display: none; }
.app.is-sidebar-collapsed .sidebar-divider { margin: 12px 0; }
.app.is-sidebar-collapsed .sig { justify-content: center; }
.app.is-sidebar-collapsed .sidebar::before { display: none; } /* hide watermark when narrow */
.app.is-sidebar-collapsed .collapse-btn svg { transform: rotate(180deg); }
.app.is-sidebar-collapsed .brand-tools { flex-direction: column; margin-top: 0; }

/* -----------------------------------------------------------------------
   Draft version chip
   ----------------------------------------------------------------------- */
.draft-version { font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; color: var(--gold); margin-top: 12px; padding-top: 10px;
  border-top: 0.5px solid rgba(197,160,106,0.28);
  letter-spacing: 0.4px; text-align: right; }
.draft-version.is-bumped { animation: draft-bump 800ms ease; }
@keyframes draft-bump {
  0% { transform: scale(1); color: var(--gold); }
  30% { transform: scale(1.06); color: var(--rose); }
  100% { transform: scale(1); color: var(--gold); }
}

/* -----------------------------------------------------------------------
   Save-state ribbon (top of main canvas)
   ----------------------------------------------------------------------- */
.save-ribbon { font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 12px; color: var(--gold); text-align: right;
  margin: 14px 48px 0 48px; opacity: 0; height: 16px; line-height: 16px;
  transition: opacity 400ms ease; letter-spacing: 0.4px; }
.save-ribbon.is-visible { opacity: 0.9; }

/* Move the sidebar #save-indicator visually out of the way; the ribbon replaces it */
#save-indicator { display: none !important; }

/* -----------------------------------------------------------------------
   Wax seal — bottom of completed panels
   ----------------------------------------------------------------------- */
.wax-seal { display: none; margin: 40px auto 8px; position: relative; width: 92px; height: 92px;
  align-items: center; justify-content: center; opacity: 0; transition: opacity 500ms ease; }
.wax-seal.is-visible { display: flex; opacity: 1; animation: seal-in 700ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes seal-in { from { opacity: 0; transform: scale(0.9) rotate(-6deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
.wax-seal-mark { position: absolute; width: 76px; height: 70px;
  background-color: var(--gold);
  -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABACAYAAACjgtGkAAAK90lEQVR42s2be7BVVR3HP3ufwytUCBBRTBOTRARBRFMxy0czSmk1GT01K+1h9nAqq5maLBUnezk5ZS/UpkmYxlEpRUSCIg2SBAQDElI0FLAUELjcyz3n9Aff1f2y3Ofcc/Y59972zJp9ztl7rfVbv/V7fn/rQL4rURsELAR2A+/TswK9d4W5LhUN84ABRl+vXanu44CK2mz9VuwDhtwnGkrAmIjGXAujCUnp1OdKdO/Nq6T7XqDcip3Oe+0zBhxE312DdO8A2prZmGYZ0iYiAIb0gYSUo83YI1vS6xISFr1LRAAMkwqVe5EhFc05VN939BVDMIbsMIYMNtvS01eYY7DmBtgmJqW9rTIVM6hbjSGH9gFDDjWG/KvZjW5GQoLL26T7AOB1fcCQo4GB+ryxVfFEM8HZevvt+D5gyDj7bX2zcxcbmDzVPQRAnfq80t47SZLj7/ZkcFgAJpkaP2n0xTSXW0FPUoNpr5FBO0EBUQV4JIPhhRZJTKKxYnoe09ybgddKffrVEIAkr4QUTBJS4HTgrcApwOvl6vrpediFicAVwKPAOotiw1ylHLsUGNFpEWkq9XwzMF5jDgX+Kpr2yfttAlYAi4GlRk/BxmrIYA4GrpZaVBpo+4A1wA+BsyNbVa/EJFGimABnAd8HnrAo2dWhVlsDfNECyLroSIz4i7XLWYP/G9ggnV0PvGSEZRG3ErgGGFmH+MaMGKW+KzLGLdl824C1wCrR9bzZOW//BGZEjqGm1wD4bsbEC4CrgCnAcIlmqvZGhfEVYCfwMLA9g5gtwA3A4RnSGH8+GrjZgi1v24CHFCWH76OM/gQ4BDhRKjzP1DW0W83oJtV2JQXuMrGvAPcCU+twf4v0fjswFjhCxCzMIGYr8BUZZmxuZBivB16O+rQDvwc+BIwATpMElIE5dYQRU4HfRWu7W3O/Sn3CzszSix1qH4vcXDGDq/30+Soj/uaImFOAnyvU90U+CVxk710KPBO9swP4kXbbr1/ZO++NPGJi6l+MGPVpMaRdfW+PpTN8uNp2oh24wHQ9rSO4Oxx4RWM8o92P+44FbjNiQpul3Yol4lbgmMjuFBWuv2zqMqSOgDC1tU63dVaATzgvEqFMbWaEZtjuN+KV5tiCLokY6vZhisR3d2T49sku3A+cHI2fmgR8zvrc1mCQ2V/396t/p+zeaGfo7ZGxaYQZzpCzzds8mqHXqXKeMP5K2Zc2tRLwZ3t/QGQoUy3oKc1RMsY1guWGtf3M1n1LeHiURL0sLzDE7ESjoXQCLDNXeH5EbNHyjxVVXHRJhvjIqE+4X2ZMfzhnTha84zCpXFmhxEiALxgx1zcBFIc+7zKClxpDwvPzNbmryaeAj1oKUFGUeYbtaEESs8EYeW4O6YjpnWlzXgnwgInf5IzAKA/nlxvRH7Tnl1kIXtHizrDnp+q3QGAbXeUNgC/bs0VNZuzB1Z5sAd69AE9rgucMV0iamATgPBP/LQqSPmMuvQI8aIBS0XZspFTG371Ccc0uI/7UJqTD1zhQaw9R7P9c5V9ahGUEAt2NrjWLXgF+YvNkRapF4M6ozyaTul82yYyYKcs07i5Mb/8Q5TLN4BSJjPVmU4+wsOsi9arWH+AHJmnhvlGSlbaQ1j+aPWOnvixrIdoV3NotxnmPYPt3M09iY4ToebfuN+YIC7qTkL9p7D2YEdtsuUUzTAm24B2aoNMkZI2Stu48WXg2XnrtY+wG3tYClQlrPNgSyGcB5lrafkqTXib0mxjlLdsjezK6BlPCb8fKboR+L0fjHd8iL3OmhQkPAHzWJrqxiTgk2J8hiiTDmPcrNfDfnjJwuBgligATImasEUr3UJQYDm4CoixGal1RSsBRsiNlgSoH54xUwwSzzUA9L5wCJWkbI5BpegYwNV2AU9kk6kgDi16w9P2OnBsYDPII4D+aa6eVUfi1EXpTE7nMhy1TrciOeEJ1FLA68hw32AZ8K/JIyw1MCmO8PYpRLmkil7nN1n27i/p4ERGiyPMiIurh9mHitoMvvnuB4OFC35wpS4XY+29zFdBl5UK/NcZt0Zj1uuGwpnfbGB2CJhKfbKZxfjswzYgp1CEdd5iqtNsEaZSphutreq/DdqlDcdHnowWk0VjH6b19FuhRB53h+bnygEGSvx7jISH5WhzhEldWqbOkkTeaKj0ME8y29L2QMcY5wC+0qJghbYpSLzCowBc1ILJVHdrliUZTYhhMDGZ/PJp3XtTvAMhtmPTWcccF8vtpDemYH+n16dF7A5R7XFelpLFJcVD8+1rgO8JZBkdjTovs1X3dGNhpwmR9bUvkRDKB5rDgoXSd2YpLCTO1c8fQdUjlzMgQbpZNOk/Qwm8il+ttI3CtbMVw4BuRu42ZdjfwJYn8CfI4FQObT7aEbbTe+6blKt7uskA07Q4fRdnpC1WI26MMcZWMmheL9lpJIqvtkph+IGPXEXM+ooy3vcY4uy0PKxvTlonRO6v0exq4vMqau63PjAS+qsCo0kR7FrgH+CRdpwTjglVWHXmcilTzgRebmL9D2fxVBkin1eoxtaxyyT5PVS11CvAGBTXD2X/gzXHP51Rq3KCYY5UqgLsyssysinwwiPGzEYpgJ6skcYwYdhgHnoB8RZK9RVXF5cJ3/15lbQ2H49WM1EFRqTPYkGtrMLhIY7lH2k2fb0dzV4TVFmqsJeluwlpXmMxdc3+rsYzV5x0BS1A0WpBh88JWyYxfvVfZ+jgNAzXuEXqvg66zbhMlOSHuCTQ443IzxBlTioi7yLj9U2WjSJxLFh+05KBKREO7xh2vZ9tUGQxrutCMbaObkAtlwlCmvTKUj9NV7D6shWBTtflHG8SwRHYtSMD8vNBAmsOmlGVMJ+i3pwTiLDPA5Z0twjxr0Xyxue1HZMSf1vdJct9levi8W1yhqygET4C3mJiupkpVvQWQXwjJV1v5JABbnrWflmdT8khIMFzhWmpi+5jZkctEbKHFG1IWzHCi6Flk6cYye3dCD6rtq0CgH9tOeKHpQjN+LxqWkbZIVRIFi1sNJphm75xjdH2vCfSvYZWZZ2F4XIOda0QtNDFPm2RGmPtBG//OCPA51sL5e3rQjr3qWmEh+aAItD1C0tEZEZ2XuELk3oOdeob9p42cWYdY/rW0p1UmsVQ+lD9XVZGg8zPwkUEmSWmdUuGV/1mWurfRdcwrPm4Rouf19izpSYYMlQ4HQxoTVYzw1YA9PA68KSOULkQtZtgE9p8ZqVjANz1D4gJ94SDvcy2qM3XLkEPpOoa5oIrRDEyZwYFHHDoVUU6qY77jZBj3WP+X6DpzUqziMZfQdbBvSKMMyVt/SSzXyLo6NfYc6fosAToFQXiXKx1frMx4qwV84xTnnBXhJY+y/xDgOo3dWSP/iUsbPWpDQi0jFMhrudWCZcYza4A2tdrzwkQK3RjmxKLWcCb2kN5QmYPNktdzhMKZNUaMWd8NE/YqyLpGG9BIILnC0LOGz7skDTKkInFdq2RqnTLOMrX/DhLEt2SlhUlqY2SoS8pa/6FFrWsA0Alz91O/MQKETqSH/xQZHzDZ0qDhShu0W0Xq/6NAUOdg8P+UJ0rOUxMtSa9R2WKkwJl6/jBUNmmqVT8uG5bRiPSOsg3y/9+VG1lgHgnZYCHzmBzq52BPVivn2CikxqnBErmxhUavNbawyb2RVdZ5TTYpfbI3GBJ2bqUxYeL/ASMCE06yjXmim1ippYa1v2KQ7XQdeSj0IUPC3O9RrDOvAYN8wPVfm0ki2g5sAZkAAAAASUVORK5CYII=") center/contain no-repeat;
          mask: url("data:image/png;base64,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") center/contain no-repeat;
  opacity: 0.55; }
.wax-seal-ring { position: absolute; inset: 0; border-radius: 999px;
  border: 1px solid rgba(197,160,106,0.55);
  box-shadow: 0 0 0 4px rgba(197,160,106,0.10), inset 0 0 12px rgba(197,160,106,0.25); }
.wax-seal-roman { position: relative; font-family:'Cormorant Garamond',serif; font-style: italic;
  font-weight: 500; color: var(--gold); font-size: 22px; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,253,249,0.8); }

/* -----------------------------------------------------------------------
   Progressive polish: completed sidebar step labels turn italic Cormorant
   ----------------------------------------------------------------------- */
.step.is-done .label { font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important; font-size: 14px !important; color: var(--ink-soft) !important;
  letter-spacing: 0.2px !important; }

/* -----------------------------------------------------------------------
   Season-tinted overtones — accent ornaments key to the active season
   ----------------------------------------------------------------------- */
:root { --season-tint: #C5A06A; /* defaults to gold; JS updates per season */ }
.kicker-badge .roman { color: var(--season-tint) !important; }
.kicker-badge::before { background: var(--season-tint) !important; }
.section-title::before { background: var(--season-tint) !important; }
.form-group::after { color: var(--season-tint) !important; }
.step.is-current .label::after { background: var(--season-tint) !important; }
.wax-seal-mark { background-color: var(--season-tint) !important; }
.wax-seal-ring { border-color: color-mix(in oklab, var(--season-tint) 60%, rgba(43,31,38,0.12)) !important; }
.progress-fill::after { background: var(--season-tint) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--season-tint) 18%, transparent) !important; }
.draft-version { color: var(--season-tint) !important;
  border-top-color: color-mix(in oklab, var(--season-tint) 28%, transparent) !important; }
.save-ribbon { color: var(--season-tint) !important; }
.sidebar::after { background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--season-tint) 25%, transparent) 50%, transparent 100%) !important; }
.sig::before { background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--season-tint) 40%, transparent) 30%, color-mix(in oklab, var(--season-tint) 40%, transparent) 70%, transparent 100%) !important; }
.loop-mark { color: var(--season-tint); }

/* -----------------------------------------------------------------------
   Print-quality gutter — wider outer margins on wide viewports
   ----------------------------------------------------------------------- */
@media (min-width: 900px) {
  .main-wrap { padding: 40px 72px 36px; }
  .save-ribbon { margin: 14px 72px 0 72px; }
}
@media (min-width: 1200px) {
  .main-wrap { padding: 44px 88px 40px; }
  .save-ribbon { margin: 14px 88px 0 88px; }
}

/* -----------------------------------------------------------------------
   MOBILE — full mobile-optimized experience below 768px.
   Preserves all desktop styling above the breakpoint.
   ----------------------------------------------------------------------- */
.mobile-topbar { display: none; }
.drawer-backdrop { display: none; position: fixed; inset: 0;
  background: rgba(43,31,38,0.42); z-index: 90; opacity: 0;
  transition: opacity 260ms ease; }
.drawer-backdrop.is-visible { display: block; opacity: 1; }


/* Desktop step-label typography — unified body font, light weight */
.step .label, .step.is-current .label, .step.is-done .label {
  font-family: 'Onest', sans-serif !important;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  text-transform: none !important;
}
.step.is-done .label { color: var(--ink-soft) !important; }
.step.is-current .label { color: var(--rose) !important; font-weight: 400 !important; }

@media (max-width: 767px) {
  body { padding: 0; background: var(--cream); }

  /* Mobile topbar */
  .mobile-topbar { display: flex; align-items: center; gap: 12px;
    padding: 11px 14px 9px; background: linear-gradient(180deg, #FBF2E1 0%, #FFFDF9 100%);
    border-bottom: 0.5px solid var(--ink-hair); position: sticky; top: 0; z-index: 40; }
  .mobile-menu-btn { background: transparent; border: 0; padding: 6px; color: var(--ink);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; }
  .mobile-menu-btn:hover { background: rgba(197,160,106,0.14); }
  .mobile-brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
  .mobile-brand-mark { width: 22px; height: 20px; flex-shrink: 0; }
  .mobile-brand-text { min-width: 0; }
  .mobile-brand-title { font-family:'Fraunces',Georgia,serif; font-size: 13.5px; font-weight: 400;
    color: var(--ink); line-height: 1; letter-spacing: -0.2px; }
  .mobile-brand-sub { font-size: 7px; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(197,160,106,0.15); }
  .mobile-progress-track { position: absolute; inset: 0; }
  .mobile-progress-fill { height: 100%; background: var(--rose); width: 25%;
    transition: width 320ms ease; }

  /* App: single column, sidebar becomes drawer */
  .app { display: block !important; grid-template-columns: none !important;
    max-width: none; margin: 0; border: 0; border-radius: 0;
    box-shadow: none; background: var(--surface-1); background-image: none; }

  /* Sidebar as drawer */
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 320px;
    z-index: 100; padding: 20px 20px 20px;
    border-right: 0.5px solid var(--ink-hair);
    box-shadow: 8px 0 32px rgba(43,31,38,0.14);
    transform: translateX(-100%); transition: transform 320ms cubic-bezier(.2,.7,.2,1);
    overflow-y: auto; }
  .app.is-drawer-open .sidebar { transform: translateX(0); }
  .sidebar::after { display: none; }
  .sidebar::before { left: -70px; bottom: 40px; width: 200px; height: 186px; opacity: 0.5; }
  
  /* Mobile drawer must never inherit is-sidebar-collapsed styles */
  .app.is-sidebar-collapsed { grid-template-columns: none !important; }
  .app.is-sidebar-collapsed .brand-text,
  .app.is-sidebar-collapsed .brand-sub,
  .app.is-sidebar-collapsed .season-name,
  .app.is-sidebar-collapsed .season-month,
  .app.is-sidebar-collapsed .season-label,
  .app.is-sidebar-collapsed .draft-version,
  .app.is-sidebar-collapsed .nav-kicker,
  .app.is-sidebar-collapsed .sig-text,
  .app.is-sidebar-collapsed .step .label,
  .app.is-sidebar-collapsed .sub-progression { display: revert !important; }
  .app.is-sidebar-collapsed .step { grid-template-columns: 22px 1fr !important; justify-items: initial !important; }
  .app.is-sidebar-collapsed .sig { justify-content: flex-start !important; }

  /* Drawer contents: smaller, more editorial */
  .brand-title { font-size: 15px !important; }
  .brand-sub { font-size: 7.5px !important; letter-spacing: 1.3px !important; margin-top: 3px !important; }
  .brand-mark { width: 26px !important; height: 24px !important; }
  .season-label { font-size: 8px !important; letter-spacing: 1.4px !important; }
  .season-name { font-size: 17px !important; }
  .season-month { font-size: 11.5px !important; }
  .draft-version { font-size: 10.5px !important; padding-top: 8px !important; margin-top: 12px !important; }
  .nav-kicker { font-family:'Fraunces',Georgia,serif !important; font-style: normal !important;
    font-size: 14px !important; letter-spacing: -0.1px !important; text-transform: none !important;
    color: var(--ink) !important; padding-bottom: 12px !important; }
  /* Force all step labels visible on mobile (base.css hides them ≤600px) */
  .steps .step .label { display: inline !important; }
  /* All step labels on mobile: body font, light weight, a bit larger, uniform */
  .step .label,
  .step.is-current .label,
  .step.is-done .label {
    font-family: 'Onest', sans-serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    color: var(--ink) !important;
  }
  .step.is-done .label { color: var(--ink-soft) !important; }
  .step.is-current .label { color: var(--rose) !important; font-weight: 400 !important; }
  .step { padding: 7px 0 !important; min-height: 30px !important; }
  .step .label { font-size: 12.5px !important; }
  .step.is-done .label { font-size: 12.5px !important; }
  .step .step-num { font-size: 11px !important; }
  .step.is-done::before { width: 15px !important; height: 15px !important; background-size: 10px 10px !important; }
  .sub-progression { margin-left: 26px !important; padding-left: 12px !important; }
  .sub-item { font-size: 10.5px !important; }
  .sig-text { font-size: 10.5px !important; }
  .sig-mark { width: 20px !important; height: 18px !important; }
  .sidebar-divider { margin: 14px 0 4px 0 !important; }

  .brand-tools .collapse-btn { display: none; }
  .brand-tools .sound-toggle { display: none; }

  /* Main content */
  .main-wrap { padding: 18px 16px 24px !important; }
  .save-ribbon { margin: 6px 16px 0 !important; font-size: 10.5px; height: 14px; line-height: 14px; }
  .topbar { display: none; }

  /* Panels + typography — tightened for elegance */
  .panel { padding: 18px 0 8px 0; }
  .panel h1, .panel h2 { font-size: 24px !important; line-height: 1.1 !important;
    letter-spacing: -0.2px !important; margin: 0 0 8px 0 !important; }
  .panel .lede { font-size: 13px !important; line-height: 1.6 !important;
    margin: 0 0 18px 0 !important; }
  .kicker-badge { font-size: 8.5px !important; letter-spacing: 1.8px !important;
    margin-bottom: 8px !important; gap: 6px !important; }
  .kicker-badge::before { width: 16px !important; }
  .kicker-badge .roman { font-size: 11px !important; }
  .section-title { font-size: 19px !important; margin: 20px 0 6px 0 !important;
    padding-top: 10px !important; gap: 10px !important; letter-spacing: -0.15px !important; }
  .section-title::before { flex-basis: 16px !important; }

  /* Cards */
  .form-group { padding: 14px 14px 16px !important; margin-bottom: 12px !important;
    border-radius: 10px !important; }
  .form-group::after { top: 9px; right: 11px; font-size: 11px; opacity: 0.30; }
  .field-label { font-size: 9.5px !important; letter-spacing: 1.4px !important;
    margin-bottom: 4px !important; }
  .field-meta { font-size: 12.5px !important; margin: 6px 0 10px 0 !important;
    line-height: 1.5 !important; }

  /* Inputs — proper widths + heights */
  .input, textarea.input, select.input {
    width: 100% !important;
    font-size: 15px !important;  /* just below iOS zoom threshold when combined w/ meta viewport */
    padding: 10px 12px !important;
    border-radius: 6px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  /* Force full width for inputs nested inside grid rows too */
  .priority-row .input, .thing-row .input { width: 100% !important; min-width: 0 !important; }
  .textarea, textarea.input { min-height: 88px !important; resize: vertical !important; }
  .field-row { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .field-row .input { flex: 0 0 auto !important; }
  select.input { padding-right: 34px !important; background-size: 9px 5px !important; }

  /* Priorities/things rows: tighter grid */
  .priority-row, .thing-row { grid-template-columns: 18px 1fr 22px !important; gap: 8px !important; }
  .priority-num, .thing-num { font-size: 13px !important; }
  .priority-remove, .thing-remove { font-size: 16px !important; padding: 2px !important; }

  /* Actions bar — always one row, buttons shrink to fit */
  .actions, .prep-stage-actions {
    padding-top: 18px !important; margin-top: 20px !important;
    display: flex !important;
    flex-direction: row !important; flex-wrap: nowrap !important;
    justify-content: space-between !important; align-items: center !important;
    gap: 8px !important;
  }
  .actions .btn, .prep-stage-actions .btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 9px 12px !important;
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
    gap: 6px !important;
  }
  .actions .btn svg, .prep-stage-actions .btn svg { width: 9px !important; height: 9px !important; flex-shrink: 0; }
  /* When there's only a primary button (e.g. Begin), push it to the right */
  .prep-stage-actions .btn.primary:only-child { margin-left: auto !important; }
  /* Begin stays on the left on phones too (2026-10-14). */
  .actions .btn.primary:only-child { margin-left: 0 !important; margin-right: auto !important; }
  .actions .step-of { display: none !important; }

  /* Watermark: minimal peek */
  .hero-watermark { width: 180px !important; height: 168px !important; left: -55px !important;
    top: 12px !important; opacity: 0.05 !important; }

  /* Wax seal: smaller */
  .wax-seal { width: 72px !important; height: 72px !important; margin: 24px auto 6px !important; }
  .wax-seal-mark { width: 58px !important; height: 54px !important; }
  .wax-seal-roman { font-size: 16px !important; }

  /* Panel & sub-stage swipe: no rotate, shorter distances */
  .prep-stage.is-current[data-anim-dir="forward"],
  .prep-stage.is-current[data-anim-dir="back"],
  .prep-stage.is-current { animation-duration: 380ms !important; }
  @keyframes panel-swipe-forward { 0% { opacity:0; transform: translateX(24px); } 100% { opacity:1; transform: translateX(0); } }
  @keyframes panel-swipe-back    { 0% { opacity:0; transform: translateX(-24px); } 100% { opacity:1; transform: translateX(0); } }
  @keyframes stage-swipe-forward { 0% { opacity:0; transform: translateX(16px); } 100% { opacity:1; transform: translateX(0); } }
  @keyframes stage-swipe-back    { 0% { opacity:0; transform: translateX(-16px); } 100% { opacity:1; transform: translateX(0); } }

  /* Tending: pills wrap under question */
  .tending-question { flex-wrap: wrap; padding: 10px 0 !important; }
  .tending-question-text { font-size: 13.5px !important; line-height: 1.5 !important; flex: 1 1 100% !important; }
  .tending-options { width: 100%; margin-top: 6px; }
  .tending-pill { padding: 5px 12px !important; font-size: 10px !important; }
  .tending-card { padding: 14px 16px !important; }
  .tending-card.is-collapsible { padding: 0 !important; }
  .tending-card-head { padding: 14px 16px; }
  .tending-card-body { padding: 0 14px 14px; }
  .tending-card-name { font-size: 17px !important; }
  .tending-card-desc { font-size: 13px !important; }
  .tending-option-title { font-size: 14px !important; }
  .tending-option-desc { font-size: 12.5px !important; }

  /* Buckets stack */
  .buckets { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .bucket { padding: 12px 14px !important; }
  .bucket-label { font-size: 14px !important; }
  .bucket-meta { font-size: 12px !important; }

  /* Holiday list stacks */
  .holiday-list { grid-template-columns: 1fr !important; gap: 6px 0 !important; }
  .holiday-date { font-size: 13px !important; min-width: 58px !important; }
  .holiday-label { font-size: 12.5px !important; }

  /* Month blocks */
  .month-block { padding: 14px 14px !important; }
  .month-block-title { font-size: 16px !important; }

  /* Evaluate callout */
  .evaluate-callout { padding: 14px 16px !important; }
  .evaluate-callout-lede { font-size: 13.5px !important; }
  .evaluate-callout-line { font-size: 13px !important; }
  .evaluate-callout-note { font-size: 12px !important; }

  /* Draft version + season name */
  .draft-version { text-align: left; margin-top: 14px; padding-top: 10px; font-size: 11px; }
  .season-block { padding: 14px !important; }
  .season-name { font-size: 19px !important; }
  .season-month { font-size: 12px !important; }

  /* Sidebar step list inside drawer */
  .steps ol { gap: 0; }
  .step { padding: 8px 0 !important; }
  .step .label { font-size: 13px !important; }

  /* Copyright */
  .copyright-notice { font-size: 9.5px !important; line-height: 1.6 !important; }

  /* Save-for-later link */
  .save-for-later { font-size: 12.5px !important; }

  /* Preview note off */
  .preview-note { display: none; }

  /* Modals */
  .modal { max-width: calc(100vw - 32px) !important; padding: 24px 22px !important; }
  .modal-title { font-size: 22px !important; }
  .modal-desc { font-size: 13.5px !important; }
}

@media (max-width: 380px) {
  .panel h1, .panel h2 { font-size: 22px !important; }
  .panel .lede { font-size: 12.5px !important; }
  .section-title { font-size: 17px !important; }
  .mobile-brand-title { font-size: 12.5px !important; }
  .mobile-brand-sub { font-size: 6.5px !important; letter-spacing: 1.1px !important; }
  .btn { font-size: 10px !important; padding: 9px 14px !important; }
  .form-group { padding: 12px !important; }
}

/* Modals: keep the original layout, retint edges */
.modal { border: 0.5px solid var(--ink-hair) !important; }
.modal .btn.primary { color: #FFF !important; }


/* -----------------------------------------------------------------------
   Sidebar tools moved to bottom, in line with the signature
   ----------------------------------------------------------------------- */
.sig { display: flex; align-items: center; gap: 10px; }
.sig-text { flex: 1; min-width: 0; }
.sidebar-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Mobile drawer: hide the sidebar-tools (mobile has its own topbar toggle) */
@media (max-width: 767px) {
  .sidebar-tools { display: none !important; }
}

/* =====================================================
   ELEVATED SHELL 2026-10 — slim burgundy rail, step nav
   in the top bar, season band across the foot.
   ===================================================== */
:root{ --plum:#3A1322; --rail-w:98px; }

/* --- Shell --- */
.app{ grid-template-columns: var(--rail-w) 1fr !important; border-radius:0 !important;
  box-shadow:none !important; border:0 !important; background:#FFFFFF !important; max-width:1380px !important; min-height:100vh !important; }
body{ background:#FFFFFF !important; padding:0 !important; }

@media (min-width: 768px){
  /* --- Rail (was the sidebar) --- */
  .sidebar{ background:var(--plum) !important; padding:24px 0 22px !important;
    align-items:center !important; border-right:0 !important; overflow:hidden; }
  .sidebar::before, .sidebar::after{ display:none !important; }
  .sidebar .brand{ flex-direction:column !important; gap:0 !important; border-bottom:0 !important;
    padding:0 !important; margin:0 !important; }
  .sidebar .brand-text, .sidebar .nav-kicker, .sidebar .sub-progression,
  .sidebar .season-label, .sidebar .season-desc, .sidebar .season-position,
  .sidebar .step .label, .sidebar .step .step-num, .sidebar .sidebar-divider,
  .sidebar .sidebar-tools, .sidebar .save-indicator{ display:none !important; }
  .sidebar .brand-mark{ background-color:var(--gold) !important; width:26px !important; height:24px !important; opacity:1 !important; }
  .season-block{ background:transparent !important; border:0 !important; padding:0 !important;
    margin-top:24px !important; gap:0 !important; align-items:center !important; }
  .season-head{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .sidebar .season-glyph{ color:var(--gold) !important; }
  .sidebar .season-name{ writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:'Onest',sans-serif !important; font-size:9.5px !important; letter-spacing:3.2px !important;
    text-transform:uppercase; color:rgba(243,231,234,.62) !important; margin-top:6px !important; }
  .sidebar .steps{ margin-top:auto !important; border:0 !important; }
  .sidebar .steps ol{ gap:15px !important; align-items:center !important; }
  .sidebar .step{ grid-template-columns:1fr !important; justify-items:center !important;
    padding:0 !important; background:none !important; border:0 !important; cursor:pointer; }
  .sidebar .step .dot{ display:block !important; width:7px; height:7px; border-radius:50%;
    border:1px solid rgba(197,160,106,.6); background:transparent; }
  .sidebar .step.is-current .dot, .sidebar .step.is-done .dot{ background:var(--gold); border-color:var(--gold); }
  .sidebar .sig{ margin-top:26px !important; padding-top:0 !important; border-top:0 !important;
    flex-direction:column !important; justify-content:center !important; }
  .sidebar .sig::before{ display:none !important; }
  .sidebar .sig-mark{ display:none !important; }
  .sidebar .sig-text{ writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:'Onest',sans-serif !important; font-style:normal !important;
    font-size:8.5px !important; letter-spacing:2.6px !important; text-transform:uppercase;
    color:rgba(243,231,234,.45) !important; }
  .sidebar .sig-text{ white-space:nowrap; }
  .sidebar .sig-link{ color:rgba(243,231,234,.45) !important; border:0 !important; }

  /* Rail carries the season and the signature only; progress lives in the
     top-bar step nav, so the rail's step dots come out. */
  .sidebar .season-block{ order:1; margin-top:4px !important; }
  .sidebar .steps{ display:none !important; }
  .sidebar .spacer{ display:none !important; }
  .sidebar .brand{ order:3; margin-top:auto !important; }
  .sidebar .sig{ order:4; margin-top:14px !important; }
}

/* --- Top bar: brand lockup + step nav --- */
.topbar{ border-bottom:1px solid var(--ink-hair) !important; padding:0 48px !important;
  display:flex !important; align-items:stretch !important; justify-content:space-between !important;
  background:#FFFFFF !important; }
.topbar-brand{ display:flex; align-items:center; gap:13px; padding:18px 0; }
.topbar-mark{ width:22px; height:20px; background-color:var(--rose); }
.topbar-title{ display:block; font-family:'Fraunces',Georgia,serif; font-size:15px; color:var(--ink); }
.topbar-sub{ display:block; font-size:8.5px; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--gold-deep,#9A7740); margin-top:3px; }
.topnav{ display:flex; gap:0; }
.topnav-item{ all:unset; cursor:pointer; display:flex; align-items:center; padding:0 18px;
  font-family:'Onest',sans-serif; font-size:10px; letter-spacing:2.2px; text-transform:uppercase;
  color:#A4989E; border-bottom:2px solid transparent; }
.topnav-item i{ font-family:'Fraunces',Georgia,serif; font-style:normal; color:var(--gold); margin-right:8px; }
.topnav-item.is-done{ color:var(--ink-soft); }
.topnav-item.is-current{ color:var(--ink); border-bottom-color:var(--rose); }
/* Gold marker fills in as each step is completed */
.topnav-item::after{ content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  margin-left:9px; background:transparent; border:1px solid transparent; }
.topnav-item.is-done::after{ background:var(--gold); border-color:var(--gold); }
.topbar .crumbs, .topbar .progress-mini{ display:none !important; }

/* --- Frame --- */
.frame{ padding:48px 48px 10px !important; }
.panel{ max-width:1180px; }

/* --- Season band --- */
.season-band{ display:grid; grid-template-columns:repeat(5,1fr); background:var(--plum);
  margin-top:40px; }
.season-cell{ display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:center;
  padding:20px 18px; border-right:1px solid rgba(255,255,255,.12); }
.season-cell:last-child{ border-right:0; }
.season-cell-glyph{ color:rgba(197,160,106,.72); }
.season-cell-name{ display:block; font-family:'Fraunces',Georgia,serif; font-size:18px;
  color:rgba(255,255,255,.8); margin-bottom:4px; }
.season-cell-months{ display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(243,231,234,.45); }
.season-cell.is-current{ background:rgba(255,255,255,.08); }
.season-cell.is-current .season-cell-glyph{ color:var(--gold); }
.season-cell.is-current .season-cell-name{ color:#fff; }
.season-cell.is-current .season-cell-months{ color:var(--gold); }

/* --- Season panel in the hero (description + position, with the glyph) --- */
.season-panel{ display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start;
  max-width:620px; margin:30px 0 34px; padding-top:24px; border-top:1px solid var(--ink-hair); }
.season-panel[hidden]{ display:none; }
.season-panel-name{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:23px;
  color:var(--ink); margin:-4px 0 8px; letter-spacing:-.2px; }
.season-panel .season-desc{ font-family:'Onest',sans-serif; font-size:13px; font-weight:300;
  line-height:1.65; color:var(--ink-soft); margin:0; }
.season-panel .season-position{ margin-top:10px; border:0 !important; padding:0 !important;
  font-family:'Onest',sans-serif !important; font-style:normal !important; font-size:9px !important;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--gold-deep,#9A7740) !important;
  line-height:1.8; text-align:left !important; }
.season-panel .season-position[hidden]{ display:none; }
.season-panel .season-position-line{ display:block; }

/* --- Sharper panels, fields and buttons --- */
h1, .panel h1{ font-family:'Fraunces',Georgia,serif !important; font-weight:300 !important;
  font-size:62px !important; line-height:1.0 !important; letter-spacing:-1.6px !important; }
.panel h2{ font-size:46px !important; font-weight:300 !important; letter-spacing:-1.1px !important; }
.lede{ font-size:15px !important; line-height:1.7 !important; max-width:860px !important; }
.form-group{ border-radius:0 !important; border:1px solid var(--ink-hair) !important;
  background:var(--surface-2) !important; padding:26px 28px 28px !important; }
.input, select.input, textarea.input{ border-radius:0 !important; border:1px solid rgba(36,26,32,.16) !important;
  background:#FFFFFF !important; }
.btn{ border-radius:0 !important; box-shadow:none !important;
  justify-content:center !important; align-items:center !important;
  text-align:center !important; }
.btn.primary{ box-shadow:none !important; }
.btn.primary:hover{ box-shadow:none !important; }
.btn.inverse{ border-radius:0 !important; }
.bucket, .tending-card, .evaluate-callout, .modal, .week-card{ border-radius:0 !important; }
.tending-card.is-collapsible .tending-card-head{ border-radius:0 !important; }
.wax-seal{ display:none !important; }
.kicker-badge{ letter-spacing:2.6px !important; }

/* --- Shell tidy-up: full-bleed band, no ornaments, no empty season line --- */
.main-wrap{ padding:0 0 0 0 !important; display:flex; flex-direction:column; }
.topbar{ padding:0 48px !important; }
.frame{ padding:44px 48px 40px !important; flex:1; }
.save-ribbon{ margin:0 48px !important; }
.season-band{ margin-top:auto !important; }
#begin-season-display{ display:none !important; }
.form-group::before, .form-group::after{ display:none !important; }
.panel::before, .panel::after{ display:none !important; }
.corner-fleuron{ display:none !important; }
@media (min-width: 1200px){ .main-wrap{ padding:0 !important; } }
@media (min-width: 900px){ .main-wrap{ padding:0 !important; } }

/* =====================================================
   ELEVATED SHELL — MOBILE
   The rail lies flat as a burgundy strip, the step nav
   becomes a four-across bar, the season band swipes.
   ===================================================== */
@media (max-width: 767px){
  /* --- Burgundy strip --- */
  .mobile-topbar{ background:var(--plum) !important; background-image:none !important;
    border-bottom:0 !important; padding:11px 14px 10px !important; gap:10px !important; }
  .mobile-menu-btn{ color:rgba(243,231,234,.75) !important; }
  .mobile-menu-btn:hover{ background:rgba(197,160,106,.18) !important; }
  .mobile-brand{ gap:10px !important; }
  .mobile-brand-mark{ background-color:var(--gold) !important; opacity:1 !important; }
  .mobile-season-glyph{ display:block !important; color:var(--gold); flex:0 0 auto; }
  .mobile-brand-title{ color:#FFFFFF !important; }
  .mobile-brand-sub{ color:var(--gold) !important; font-size:7.5px !important;
    letter-spacing:2.2px !important; }
  .mobile-sound-toggle{ color:rgba(243,231,234,.6) !important;
    border-color:rgba(197,160,106,.35) !important; }
  .mobile-progress{ background:rgba(197,160,106,.22) !important; }
  .mobile-progress-fill{ background:var(--gold) !important; }

  /* Drawer keeps the sharper geometry of the new shell */
  .sidebar .season-block{ border-radius:0 !important; }
  .sidebar .step{ border-radius:0 !important; }
  .save-ribbon{ margin:0 18px !important; }

  /* Shell fills the viewport so the band sits at the foot on short steps */
  .app{ display:flex !important; flex-direction:column !important;
    min-height:calc(100vh - 52px) !important; }
  .main-wrap{ flex:1 1 auto; min-width:0; }

  /* --- Step bar --- */
  .topbar{ display:block !important; padding:0 !important; background:#FFFFFF !important;
    border-bottom:1px solid var(--ink-hair) !important; }
  .topbar-brand{ display:none !important; }
  .topnav{ display:flex !important; gap:0 !important; padding:0 6px; }
  .topnav-item{ flex:1 1 0; min-width:0; flex-direction:column; align-items:center;
    justify-content:flex-start; text-align:center; padding:10px 3px 9px !important;
    font-size:8px !important; letter-spacing:1.2px !important; line-height:1.45; }
  .topnav-item i{ margin:0 0 4px 0 !important; font-size:11px; }
  .topnav-item::after{ margin:5px 0 0 0 !important; }

  /* --- Hero --- */
  .frame{ padding:24px 18px 30px !important; }
  h1, .panel h1{ font-size:38px !important; line-height:1.02 !important;
    letter-spacing:-.9px !important; }
  .panel h2{ font-size:30px !important; letter-spacing:-.6px !important; }
  .lede{ font-size:13.5px !important; line-height:1.65 !important; }
  .form-group{ padding:20px 18px 22px !important; }

  /* --- Season panel --- */
  .season-panel{ grid-template-columns:34px 1fr !important; gap:13px !important;
    margin:22px 0 26px !important; padding-top:18px !important; }
  .season-panel-glyph{ width:30px !important; height:42px !important; }
  .season-panel-name{ font-size:19px !important; margin:-2px 0 6px !important; }
  .season-panel .season-desc{ font-size:12px !important; }
  .season-panel .season-position{ font-size:8.5px !important; letter-spacing:1.5px; }

  /* --- Season band: swipeable row --- */
  .season-band{ display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    margin-top:24px !important; scrollbar-width:none; }
  .season-band::-webkit-scrollbar{ display:none; }
  .season-cell{ flex:0 0 58% !important; scroll-snap-align:start;
    grid-template-columns:24px 1fr !important; gap:10px !important;
    padding:16px 16px !important; border-right:1px solid rgba(255,255,255,.12) !important; }
  .season-cell-glyph{ width:22px; height:30px; }
  .season-cell-name{ font-size:16px !important; margin-bottom:3px !important; }
  .season-cell-months{ font-size:8px !important; }
}
@media (max-width: 400px){
  h1, .panel h1{ font-size:32px !important; }
  .panel h2{ font-size:26px !important; }
  .topnav-item{ font-size:7.5px !important; letter-spacing:1px !important; }
  .season-cell{ flex:0 0 66% !important; }
}

/* --- Tablet: the shell is still two-column, but the top bar needs room --- */
@media (min-width: 768px) and (max-width: 1023px){
  .topbar{ padding:0 28px !important; }
  .topbar-sub{ display:none !important; }
  .topbar-brand{ gap:11px; }
  .topnav-item{ padding:0 11px !important; font-size:9px !important;
    letter-spacing:1.6px !important; white-space:nowrap; }
  .topnav-item i{ margin-right:6px !important; }
  .frame{ padding:34px 28px 34px !important; }
  .save-ribbon{ margin:0 28px !important; }
  h1, .panel h1{ font-size:48px !important; letter-spacing:-1.2px !important; }
  .panel h2{ font-size:38px !important; }
  .season-cell{ grid-template-columns:1fr !important; gap:8px !important;
    align-items:start !important; padding:16px 12px !important; }
  .season-cell-name{ font-size:15px !important; }
  .season-cell-months{ font-size:8px !important; letter-spacing:1.4px !important;
    white-space:nowrap; }
}

/* --- Save-for-later modal --- */
.save-later-form .field-label{ display:block; margin-bottom:8px; }
.save-later-form .input{ width:100%; }
.save-later-hp{ position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; }
.save-later-note{ font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:12px 0 0; }
.save-later-error{ font-family:'Onest',sans-serif; font-size:12.5px;
  color:var(--rose); margin:12px 0 0; font-weight:400; }
.save-later-error[hidden]{ display:none; }
.save-later-fine{ font-family:'Onest',sans-serif; font-size:11px;
  line-height:1.6; color:var(--ink-soft); font-weight:300; margin:16px 0 0; }
.save-later-form .modal-actions{ margin-top:20px; }

/* =====================================================
   FULL-BLEED SHELL — the plum rail and the season band
   stay anchored to the window edges at any width. The
   reading column stays capped and centred, so the text
   measure does not stretch on a large monitor.
   ===================================================== */
.app{ max-width:none !important; }

@media (min-width: 1024px){
  /* Pad to a centred 1180px column while borders and
     backgrounds still span the full width. */
  .topbar{ padding-left:max(48px, (100% - 1180px) / 2) !important;
           padding-right:max(48px, (100% - 1180px) / 2) !important; }
  .frame{ padding-left:max(48px, (100% - 1180px) / 2) !important;
          padding-right:max(48px, (100% - 1180px) / 2) !important; }
  .save-ribbon{ margin-left:max(48px, (100% - 1180px) / 2) !important;
                margin-right:max(48px, (100% - 1180px) / 2) !important; }
}