/* Dashboard-specific styles — extends archive.css */

.app-dashboard {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px 1fr;
}

.canvas {
  padding: 20px 40px 60px;
  background: var(--parchment-0);
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* Page intro */
.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  border-bottom: 1px solid var(--stone-2);
  padding-bottom: 32px;
}
.page-intro__eye {
  display: block;
  margin-bottom: 8px;
}
.page-intro h1 {
  margin: 0;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.page-intro__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}
.page-intro__meta .v {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}

/* Section headers */
.dash-section { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dash-section > .section__head h2 { /* font-size governed by .section-title class */ }

/* Instrument row: Souldar (2fr) + Compass (3fr) */
.row-instruments {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.row-instruments > * { min-height: 620px; }
.row-instruments .souldar { min-height: 620px; padding: 40px; }
.row-instruments .souldar__chart svg { max-width: 480px !important; }

/* See more tasks button */
.see-more {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--stone-3);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-sans-tight);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color var(--duration-hover) var(--ease-quiet),
              color var(--duration-hover) var(--ease-quiet);
}
.see-more:hover { border-color: var(--gold-1); color: var(--gold-1); }

/* Bigger Momentum icons + no gradation on luminous days */
.mlog__node { width: 38px; height: 38px; }
.mlog__node-ico { width: 22px; height: 22px; }
.mlog__day.is-luminous {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--gold-1);
}

/* === Alignment Compass card === */
.compass-card {
  background: #fff;
  border: 1px solid var(--stone-3);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.compass-card__head h3 {
  margin: 6px 0 4px;
  font-family: var(--font-serif-display);
  font-size: 24px;
  color: var(--ink-1);
}
.compass-card__sub { margin: 0; color: var(--ink-3); }

.compass-grid {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: 1fr 18px;
  gap: 8px;
  flex: 1;
}
.compass-grid__y-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--stone-2);
}
.compass-grid__matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-top: 1px solid var(--stone-3);
  border-left: 1px solid var(--stone-3);
}
.compass-grid__corner { }
.compass-grid__x-label {
  grid-column: 2;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--stone-2);
  padding-top: 4px;
}

.quad {
  border-right: 1px solid var(--stone-3);
  border-bottom: 1px solid var(--stone-3);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  position: relative;
}
.quad--trueNorth { background: linear-gradient(180deg, rgba(187,152,99,0.06), transparent 60%); }
.quad--compass   { background: linear-gradient(180deg, rgba(214,167,255,0.07), transparent 60%); }
.quad--maintenance { background: var(--parchment-1); }
.quad--drift { background: transparent; }

.quad__eye {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}
.quad--trueNorth .quad__eye { color: var(--gold-2); }
.quad--compass .quad__eye   { color: var(--axis-interpersonal); }
.quad--drift .quad__eye     { color: var(--ink-4); }

.quad__title {
  margin: 2px 0 0;
  font-family: var(--font-serif-display);
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-1);
  font-weight: 500;
}
.quad__prompt {
  margin: 0;
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
}
.quad__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.quad__item {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--font-serif-display);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-2);
}
.quad__text { min-width: 0; }
.quad__conf {
  font-style: italic; color: var(--ink-4); font-size: 11px;
}

.compass-card__foot {
  border-top: 1px solid var(--stone-2);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.vectors {
  list-style: decimal; padding-left: 20px; margin: 0;
  font-family: var(--font-serif-display);
  font-size: 13px; line-height: 22px; color: var(--ink-1);
}
.vectors li::marker { color: var(--gold-1); }

/* === Identity Transit Stream === */
.transit-stream {
  background: #fff;
  border: 1px solid var(--stone-3);
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.transit-stream__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.transit-stream__title {
  margin: 6px 0 4px;
  font-family: var(--font-serif-display);
  font-size: 24px; color: var(--ink-1);
}
.transit-stream__sub { margin: 0; color: var(--ink-3); }
.transit-stream__legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
}
.transit-stream__legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.transit-stream__legend .tnode { width: 10px; height: 10px; }

.transit-grid {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--stone-2);
}
.transit-grid__col-labels {
  display: grid;
  grid-template-columns: 180px repeat(7, 1fr) 130px;
  padding: 12px 0;
  border-bottom: 1px solid var(--stone-2);
}
.transit-grid__col-labels span {
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.18em;
}
.transit-grid__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--stone-1);
  min-height: 52px;
}
.transit-grid__row-label {
  display: flex; align-items: center; gap: 12px;
  padding-right: 16px;
}
.transit-grid__swatch {
  width: 4px; height: 18px; flex-shrink: 0;
}
.transit-grid__row-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr) 130px;
  align-items: center;
}
.transit-grid__line {
  position: absolute; left: 0; right: 130px; top: 50%;
  height: 1px; background: var(--stone-2);
  transform: translateY(-0.5px);
}
.transit-grid__cell {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.transit-grid__unresolved {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
  padding-right: 8px;
  color: var(--friction-pink);
}
.transit-grid__arrow {
  font-family: var(--font-mono); font-size: 14px; color: var(--friction-pink);
}

/* nodes */
.tnode {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 9999px;
}
.tnode--ha\+      { background: var(--waypoint-yellow); box-shadow: 0 0 6px rgba(242,251,48,0.6); }
.tnode--la\+      { background: rgb(162,217,206); }
.tnode--ha-       { background: var(--friction-pink); box-shadow: 0 0 6px rgba(236,72,153,0.55); }
.tnode--la-       { background: var(--drift-teal); }
.tnode--resonance {
  background: var(--gold-1);
  box-shadow: 0 0 0 2px rgba(187,152,99,0.18), 0 0 10px rgba(147,255,0,0.7);
}
.tnode--uncharted {
  background: transparent;
  border: 1px dashed var(--stone-3);
  width: 8px; height: 8px;
}
.tnode--interference {
  background: rgb(93,109,126);
  width: 24px; height: 4px;
  border-radius: 0;
  opacity: 0.5;
}

/* === Action Stream === */
.action-stream { display: flex; flex-direction: column; gap: 24px; }
.action-stream__head {
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--stone-2);
  padding-bottom: 16px;
}
.action-stream__head h2 {
  font-size: 36px; margin: 0; line-height: 42px;
}
.action-stream__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 88px;
  gap: 32px;
  align-items: stretch;
}
.action-active { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.action-active .section__head h2 { font-size: 24px; }

/* Drag hint above the active list */
.active-list__hint {
  margin: -4px 0 0;
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.active-list__empty {
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--stone-3);
  color: var(--ink-3);
}
.active-list { display: flex; flex-direction: column; gap: 16px; }

/* Draggable card — clear affordance */
.active-card { position: relative; padding-left: 56px; }
.active-card.draggable { cursor: grab; transition: box-shadow var(--duration-hover) var(--ease-quiet), border-color var(--duration-hover) var(--ease-quiet), transform var(--duration-hover) var(--ease-quiet); }
.active-card.draggable:hover {
  border-color: var(--gold-1);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 24px -16px rgba(0,0,0,0.20);
  transform: translateY(-1px);
}
.active-card.draggable:active { cursor: grabbing; }
.active-card.is-dragging {
  opacity: 0.45;
  border-style: dashed;
}

/* Drag handle */
.drag-handle {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--parchment-2);
  border-right: 1px solid var(--stone-2);
  color: var(--ink-3);
  cursor: grab;
  transition: background var(--duration-hover) var(--ease-quiet), color var(--duration-hover) var(--ease-quiet);
}
.active-card.draggable:hover .drag-handle {
  background: var(--gold-soft);
  color: var(--gold-2);
}
.drag-handle__grid {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  gap: 3px;
}
.drag-handle__grid i {
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: 9999px;
  display: block;
}
.drag-handle__lbl {
  font-family: var(--font-sans-tight);
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: currentColor;
}

.active-card .card__head { align-items: center; }
.active-card__lead {
  display: inline-flex; align-items: center; gap: 12px;
}
.glyph {
  width: 18px; height: 18px;
  mask: var(--ico) center/contain no-repeat;
  -webkit-mask: var(--ico) center/contain no-repeat;
  background: var(--gold-1);
}
.active-list__divider {
  margin-top: 8px; color: var(--ink-4);
}

.action-horizon { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.action-horizon .section__head { padding: 0 8px; }
.action-horizon .section__head h2 { font-size: 24px; }
.action-horizon .horizon { padding: 0 8px; gap: 24px; }

.hold-rail {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 16px;
  align-self: stretch;
  height: 100%;
  min-height: 520px;
}
.hold-rail .hold {
  flex: 1 1 auto;
  align-self: stretch;
  border: 1px solid var(--stone-2);
  background: var(--void-3);
  padding: 16px 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  min-height: 480px;
  position: relative;
  transition: background var(--duration-hover) var(--ease-quiet),
              box-shadow var(--duration-hover) var(--ease-quiet),
              border-color var(--duration-hover) var(--ease-quiet);
}
.hold-rail .hold.is-drag-over {
  background: var(--void-0);
  border-color: var(--gold-1);
  box-shadow: 0 0 0 2px var(--gold-soft), 0 0 24px rgba(187,152,99,0.35);
}

/* Chevron — expand affordance */
.hold__expand {
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--duration-hover) var(--ease-quiet);
}
.hold__expand:hover {
  border-color: var(--gold-1);
  color: var(--gold-1);
  background: rgba(187,152,99,0.08);
}

/* Count of vaulted items */
.hold__count {
  font-family: var(--font-serif-display);
  font-size: 22px;
  line-height: 1;
  color: var(--gold-1);
  padding: 4px 0;
}

/* Vertical title */
.hold__title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-serif-display);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #fff;
}

/* Empty drop area takes the rest of the rail */
.hold__drop-area {
  flex: 1 1 auto;
  align-self: stretch;
  margin: 0 12px 16px;
  border: 1px dashed rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
  transition: border-color var(--duration-hover) var(--ease-quiet),
              background var(--duration-hover) var(--ease-quiet);
}
.hold.is-drag-over .hold__drop-area {
  border-color: var(--gold-1);
  background: rgba(187,152,99,0.10);
}
.hold__drop-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.hold.is-drag-over .hold__drop-label { color: var(--gold-1); }

/* Hold Drawer — slides in from the right when chevron clicked */
.hold-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 96vw);
  background: var(--void-0);
  color: #fff;
  border-left: 1px solid var(--void-stone-2);
  box-shadow: -20px 0 40px -10px rgba(0,0,0,0.32);
  z-index: 90;
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: auto;
  animation: holdDrawerIn 240ms var(--ease-instrument);
}
@keyframes holdDrawerIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.hold-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--void-stone-2);
}
.hold-drawer .label-caps { color: var(--gold-1); }
.hold-drawer__title {
  margin: 4px 0 0;
  font-family: var(--font-serif-display);
  font-size: 24px;
  color: #fff;
}
.hold-drawer__close {
  background: transparent;
  border: 1px solid var(--void-stone-2);
  width: 32px; height: 32px;
  cursor: pointer;
  font-family: var(--font-serif-display);
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  transition: border-color var(--duration-hover), color var(--duration-hover);
}
.hold-drawer__close:hover { border-color: var(--gold-1); color: var(--gold-1); }
.hold-drawer__sub {
  margin: 0;
  font-family: var(--font-serif-italic);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-wrap: pretty;
}
.hold-drawer__list {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--void-stone-2);
}
.hold-drawer__empty {
  padding: 24px;
  text-align: center;
  font-family: var(--font-serif-italic);
  color: rgba(255,255,255,0.55);
}

.hold-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--void-stone-2);
}
.hold-row__node {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--void-stone-1);
  border: 1px solid var(--void-stone-2);
  position: relative;
}
.hold-row__node.is-pattern { border-color: var(--friction-violet); }
.hold-row__node.is-attention { border-color: var(--attention-amber); }
.hold-row__ico {
  width: 16px; height: 16px;
  mask: var(--ico) center/contain no-repeat;
  -webkit-mask: var(--ico) center/contain no-repeat;
}
.hold-row__body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.hold-row__reason {
  font-family: var(--font-serif-display);
  font-size: 14px;
  color: #fff;
}
.hold-row__meta {
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hold-row__actions { display: flex; gap: 8px; }
.hold-row__btn {
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--void-stone-2);
  padding: 8px 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: all var(--duration-hover) var(--ease-quiet);
}
.hold-row__btn:hover { border-color: var(--gold-1); color: var(--gold-1); }
.hold-row__btn--quiet { color: rgba(255,255,255,0.45); }
.hold-row__btn--quiet:hover { color: var(--friction-pink); border-color: var(--friction-pink); }

/* === Action Stream — drop targets & anchor slots === */
.action-active.is-drop-target {
  outline: 2px dashed var(--gold-1);
  outline-offset: 8px;
  background: var(--gold-soft);
}
.action-active.is-drop-target::before {
  content: "← drop to promote to today";
  display: block;
  font-family: var(--font-sans-tight);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 8px;
}

/* Anchor flag (top-right) on anchored cards */
.anchor-flag {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 14px;
  color: var(--gold-1);
  font-family: var(--font-serif-display);
  pointer-events: none;
}
.active-card.is-anchored {
  border-color: var(--gold-1);
  box-shadow: inset 3px 0 0 var(--gold-1);
}

/* Anchor toggle button */
.anchor-btn {
  font-family: var(--font-serif-display);
  background: transparent;
  border: 1px solid var(--stone-3);
  width: 28px; height: 28px;
  cursor: pointer;
  color: var(--ink-3);
  transition: all var(--duration-hover) var(--ease-quiet);
  display: inline-flex; align-items: center; justify-content: center;
}
.anchor-btn:hover { border-color: var(--gold-1); color: var(--gold-1); }
.anchor-btn.is-on {
  background: var(--gold-soft);
  border-color: var(--gold-1);
  color: var(--gold-2);
}

/* Sort button — active state */
.section__sort.is-on {
  border-color: var(--gold-1);
  color: var(--gold-2);
  background: var(--gold-soft);
}

/* === Horizon drag affordance === */
.horizon__hint {
  margin: -4px 0 8px;
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-3);
  padding: 0 8px;
}
.horizon__card.draggable {
  display: grid;
  grid-template-columns: 16px 18px 1fr;
  gap: 10px;
  align-items: center;
  cursor: grab;
  padding: 10px 14px 10px 8px;
  transition: border-color var(--duration-hover), box-shadow var(--duration-hover), transform var(--duration-hover), background var(--duration-hover);
}
.horizon__card.draggable:hover {
  border-color: var(--gold-1);
  box-shadow: 0 6px 14px -10px rgba(0,0,0,0.18);
  transform: translateX(-1px);
}
.horizon__card.draggable:active { cursor: grabbing; }
.horizon__card.is-dragging { opacity: 0.45; border-style: dashed; }
.horizon__card-grip {
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}
.horizon__card.draggable:hover .horizon__card-grip { color: var(--gold-1); }
.horizon__card-body { min-width: 0; }
.horizon__card.draggable h5 { margin: 0; }
.horizon__card.draggable p  { margin: 0; }

/* Gentle Off-Ramp classification toast */
.offramp {
  background: var(--void-0);
  color: #fff;
  border: 1px solid var(--gold-1);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.offramp__eye {
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-1);
}
.offramp__title {
  margin: 0;
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255,255,255,0.88);
  text-wrap: pretty;
}
.offramp__reasons {
  display: flex; flex-direction: column; gap: 6px;
}
.offramp__reason {
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: 1px solid var(--void-stone-2);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-hover), color var(--duration-hover), background var(--duration-hover);
}
.offramp__reason:hover {
  border-color: var(--gold-1);
  color: var(--gold-1);
  background: rgba(187,152,99,0.08);
}
.offramp__undo {
  align-self: flex-start;
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--friction-pink);
  background: transparent; border: 0;
  cursor: pointer;
  padding: 0; margin-top: 4px;
}
.offramp__undo:hover { color: #fff; }

/* === Momentum Log === */
.mlog {
  background: var(--parchment-1);
  border: 1px solid var(--stone-2);
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.mlog__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.mlog__title {
  margin: 6px 0 4px;
  font-family: var(--font-serif-display);
  font-size: 24px;
  color: var(--ink-1);
}
.mlog__sub { margin: 0; color: var(--ink-3); }
.mlog__expand {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--stone-2);
  padding: 8px 14px; cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-quiet);
}
.mlog__expand:hover { border-color: var(--gold-1); }
.mlog__chev { transition: transform var(--duration-hover); }
.mlog__chev.is-open { transform: rotate(180deg); }

.mlog__strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--stone-2);
  border: 1px solid var(--stone-2);
}
.mlog__day {
  background: #fff;
  padding: 18px 12px 16px;
  min-height: 140px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.mlog__day.is-luminous {
  background: linear-gradient(180deg, rgba(187,152,99,0.08), #fff);
  box-shadow: inset 0 0 0 1px var(--gold-1);
}
.mlog__day.is-today {
  background: linear-gradient(180deg, var(--cream-tint), #fff);
  box-shadow: inset 0 0 0 2px var(--gold-1);
}
.mlog__day.is-uncharted {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 6px,
      rgba(168,162,158,0.08) 6px 7px
    ),
    #fff;
}
.mlog__day-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.mlog__date {
  font-family: var(--font-serif-display); font-size: 18px; color: var(--ink-2);
}
.mlog__day-cluster {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1; align-items: flex-start;
}
.mlog__node {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--parchment-2);
  border: 1px solid var(--stone-2);
  position: relative;
}
.mlog__node-ico {
  width: 14px; height: 14px;
  background: var(--ink-2);
  mask: var(--ico) center/contain no-repeat;
  -webkit-mask: var(--ico) center/contain no-repeat;
}
.mlog__node.is-resonance {
  border: 1px solid var(--gold-1);
  background: rgba(187,152,99,0.12);
  box-shadow: 0 0 8px rgba(187,152,99,0.35);
}
.mlog__node.is-resonance .mlog__node-ico { background: var(--gold-2); }
.mlog__verified {
  position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; background: var(--axis-interpersonal);
  border-radius: 9999px;
}
.mlog__plus {
  font-family: var(--font-sans);
  font-size: 18px; color: var(--ink-4); opacity: 0.4;
  cursor: pointer;
}
.mlog__plus:hover { opacity: 0.9; color: var(--gold-1); }
.mlog__today-flag, .mlog__uncharted-flag {
  font-size: 9px; color: var(--ink-4);
}
.mlog__today-flag { color: var(--gold-2); }

.mlog__month { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mlog__month-eye { color: var(--ink-3); }
.mlog__month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--stone-2);
  border: 1px solid var(--stone-2);
}
.mlog__cell {
  background: #fff;
  aspect-ratio: 2 / 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.mlog__cell--d0 .mlog__cell-plus {
  font-family: var(--font-sans); color: var(--ink-5); font-size: 14px; opacity: 0.4;
}
.mlog__cell-density {
  display: inline-block;
  width: 10px; height: 10px; background: var(--gold-1);
}
.mlog__cell--d1 .mlog__cell-density { width: 6px; height: 6px; }
.mlog__cell--d2 .mlog__cell-density { width: 10px; height: 10px; }
.mlog__cell--d3 .mlog__cell-density { width: 14px; height: 14px; box-shadow: 0 0 8px rgba(187,152,99,0.55); }
.mlog__cell.is-resonance { background: rgba(187,152,99,0.06); }
.mlog__cell.is-resonance .mlog__cell-density {
  box-shadow: 0 0 8px rgba(147,255,0,0.5), 0 0 0 1px var(--gold-1);
}
.mlog__cell.is-interference { background: rgba(93,109,126,0.18); }
.mlog__cell.is-interference .mlog__cell-density {
  background: var(--drift-teal); opacity: 0.5;
}
.mlog__cell.is-verified .mlog__cell-density {
  background: var(--axis-interpersonal);
}
.mlog__month-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--font-sans-tight);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.mlog__month-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mlog__month-legend .mlog__cell {
  width: 18px; height: 10px; aspect-ratio: auto;
  border: 1px solid var(--stone-2);
}

/* === Waypoints === */
.wp-section { display: flex; flex-direction: column; gap: 24px; }
.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.wp {
  background: #fff;
  border: 1px solid var(--stone-3);
  border-left: 4px solid var(--domain-color, var(--stone-3));
  padding: 28px 28px 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-top-color var(--duration-hover) var(--ease-quiet),
              border-right-color var(--duration-hover) var(--ease-quiet),
              border-bottom-color var(--duration-hover) var(--ease-quiet);
}
.wp:hover {
  border-top-color: var(--gold-1);
  border-right-color: var(--gold-1);
  border-bottom-color: var(--gold-1);
}
.wp__head { display: flex; align-items: center; gap: 12px; }
.wp__domain-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wp__glyph {
  width: 22px; height: 22px;
  mask: var(--ico) center/contain no-repeat;
  -webkit-mask: var(--ico) center/contain no-repeat;
}
.wp__mag {
  margin-left: auto;
  display: inline-flex; gap: 3px; align-items: center;
}
.wp__mag-bar {
  width: 4px; height: 12px; background: var(--stone-2);
}
.wp__mag-bar.is-on { background: var(--gold-1); }

.wp__quote {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 18px;
  line-height: 28px;
  color: var(--ink-1);
}
.wp__coords {
  margin: 0;
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-4);
}
.wp__coords-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 1px dotted var(--stone-3);
  transition: color var(--duration-hover) var(--ease-quiet), border-color var(--duration-hover) var(--ease-quiet);
}
.wp__coords-link:hover { color: var(--gold-2); border-color: var(--gold-1); }

/* Journal Entry modal — opens from "Logged from your coordinates:" */
.wp-entry-panel {
  width: min(640px, 100%);
  padding: 36px 40px;
}
.wp-entry__head {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--stone-2);
}
.wp-entry__title {
  margin: 4px 0 0;
  font-family: var(--font-serif-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink-1);
  letter-spacing: -0.005em;
}
.wp-entry__body {
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-serif-display);
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-2);
  max-height: 50vh;
  overflow: auto;
  padding-right: 4px;
}
.wp-entry__p { margin: 0; text-wrap: pretty; }
.wp-entry__mark {
  background: var(--gold-soft);
  color: var(--ink-1);
  padding: 2px 4px;
  box-shadow: inset 3px 0 0 var(--gold-1);
  font-style: italic;
}
.wp__cta { align-self: flex-start; }

/* Calibrate modal */
.wp-modal {
  position: fixed; inset: 0; background: rgba(13,27,47,0.68);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000; padding: 32px; backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wp-modal__panel {
  background: var(--parchment-0);
  border: 1px solid var(--stone-3);
  padding: 40px;
  width: min(560px, 100%);
  display: flex; flex-direction: column; gap: 20px;
  max-height: 90vh; overflow: auto;
}
.wp-modal__pinned {
  border: 1px solid var(--stone-2);
  padding: 20px;
  background: var(--parchment-1);
  display: flex; flex-direction: column; gap: 10px;
}
.wp-modal__input {
  font-family: var(--font-serif-display);
  font-size: 16px; line-height: 26px;
  border: 1px solid var(--stone-2); padding: 16px;
  background: #fff; color: var(--ink-1);
  resize: vertical;
  outline: none;
}
.wp-modal__input:focus { border-color: var(--gold-1); }
.wp-modal__voice { display: flex; align-items: center; gap: 10px; }
.wp-modal__mic {
  width: 14px; height: 14px; border-radius: 9999px;
  background: var(--ink-5);
}
.wp-modal__lock { display: flex; flex-direction: column; gap: 12px; }
.wp-modal__values { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-modal__value {
  font-family: var(--font-serif-display);
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--stone-3);
  padding: 8px 14px;
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color var(--duration-hover);
}
.wp-modal__value:hover, .wp-modal__value.is-locked {
  border-color: var(--gold-1); background: var(--gold-soft);
}
.wp-modal__actions {
  display: flex; justify-content: flex-end; gap: 12px;
  padding-top: 8px; border-top: 1px solid var(--stone-2);
}

/* Tweaks-driven density variants */
.app-dashboard.density-tight .canvas { gap: 40px; padding: 24px 40px 96px; }
.app-dashboard.density-tight .card { padding: 24px; }
.app-dashboard.density-tight .mlog { padding: 24px; }
.app-dashboard.density-airy .canvas { gap: 96px; }

.app-dashboard.glow-off .tnode--resonance,
.app-dashboard.glow-off .mlog__day.is-luminous,
.app-dashboard.glow-off .souldar__resonance,
.app-dashboard.glow-off .mlog__cell.is-resonance .mlog__cell-density {
  box-shadow: none !important;
}

/* Waypoint pagination nav */
.wp-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 4px;
}
.wp-nav__btn {
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--stone-3);
  padding: 10px 22px;
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-quiet),
              color var(--duration-hover) var(--ease-quiet);
}
.wp-nav__btn:hover:not(:disabled) {
  border-color: var(--gold-1);
  color: var(--ink-1);
}
.wp-nav__btn:disabled {
  opacity: 0.28;
  cursor: default;
}

/* Waypoint pip pagination */
.wp-pips {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wp-pip {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--stone-3);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background var(--duration-hover) var(--ease-quiet),
              border-color var(--duration-hover) var(--ease-quiet);
}
.wp-pip::after {
  content: '';
  position: absolute;
  inset: -17px;
}
.wp-pip.is-active {
  background: var(--gold-1);
  border-color: var(--gold-1);
}
.wp-pip:hover:not(.is-active) {
  border-color: var(--gold-2);
  background: var(--gold-soft);
}

/* ============================================================================
   WAYPOINTS v2 — Plotting state, Ghost Multiplier, Temporal Grain,
                  Evidence Modal
   ============================================================================ */

/* Ghost Multiplier — hollow gold-dim ✧ */
.wp__ghost {
  font-size: 15px;
  color: rgba(187, 152, 99, 0.55);
  letter-spacing: 0.06em;
  margin-left: 2px;
  line-height: 1;
}

/* Temporal Grain — cards older than 36h dissolve slightly */
@keyframes wp-grain {
  0%, 100% { transform: translate(0,    0   ); }
  20%       { transform: translate(-1%, -1%  ); }
  40%       { transform: translate( 1%,  1%  ); }
  60%       { transform: translate(-1%,  1%  ); }
  80%       { transform: translate( 1%, -1%  ); }
}

.wp--aged {
  position: relative;
  overflow: hidden;
}
.wp--aged::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.045;
  animation: wp-grain 0.9s steps(1) infinite;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Plotting skeleton card */
@keyframes wp-radar {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0;   }
}

.wp--plotting {
  background: var(--parchment-1);
  border-color: var(--stone-2);
  border-left-color: var(--stone-3);
  opacity: 0.65;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  gap: 20px;
}

.wp__plotting-pulse {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.wp__plotting-pulse::before,
.wp__plotting-pulse::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--gold-1);
  width: 100%; height: 100%;
  animation: wp-radar 2.2s ease-out infinite;
}
.wp__plotting-pulse::after {
  animation-delay: 1.1s;
}
.wp__plotting-center {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-1);
  position: relative; z-index: 1;
}

.wp__plotting-label {
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

/* Evidence Modal panel */
.wp-evidence-panel {
  width: min(620px, 100%);
}

.wp-evidence {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wp-evidence__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-evidence__tier {
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.wp-evidence__item {
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
  padding: 10px 14px;
  background: var(--parchment-1);
  border-left: 2px solid var(--stone-3);
}

.wp-evidence__item--empty {
  color: var(--ink-4);
  font-style: italic;
  border-left-color: var(--stone-2);
}

.wp-evidence__item--meta {
  font-size: 12px;
  color: var(--ink-3);
  background: transparent;
  border-left-color: var(--stone-2);
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Mirror of Dissonance note */
.wp-evidence__dissonance {
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-4);
  margin: 4px 0 0;
  padding: 6px 14px;
  border-left: 1px solid var(--stone-2);
  opacity: 0.7;
}

/* Waypoint pip active state (missing from original) */
.wp-pip.is-active {
  background: var(--gold-1);
  border-color: var(--gold-1);
}

/* Value label — gold uppercase title on each waypoint card */
.wp__value-label {
  display: block;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-1);
  font-weight: 600;
  margin-bottom: -4px;
}
.wp__value-label--modal {
  font-size: 11px;
  margin-bottom: 4px;
}

/* Waypoints v2 — headline/description card layout */
.wp--clickable {
  cursor: pointer;
}
.wp--clickable:hover {
  border-top-color: var(--gold-1);
  border-right-color: var(--gold-1);
  border-bottom-color: var(--gold-1);
}
.wp--uncharted {
  opacity: 0.5;
  border-left-color: var(--stone-3);
}

.wp__headline {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 20px;
  line-height: 28px;
  color: var(--ink-1);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.wp__headline--modal {
  font-size: 18px;
  margin-bottom: 4px;
}

.wp__description {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-3);
}

.wp__multiplier {
  align-self: flex-start;
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(187, 152, 99, 0.55);
  margin-top: -4px;
}

/* Evidence segment display in modal */
.wp-evidence__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wp-evidence__seg-text {
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
}
.wp-evidence__seg-meta {
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}


/* Waypoints drawer: production detail surface */
.wp-modal.wp-modal--drawer {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.wp-modal__panel.wp-modal__panel--drawer {
  width: min(520px, 100vw);
  height: 100vh;
  max-height: none;
  border: 0;
  border-left: 1px solid var(--stone-2);
  border-radius: 0;
  box-shadow: -28px 0 60px -24px rgba(13, 27, 47, 0.42);
  padding: 28px 28px 24px;
  background:
    radial-gradient(circle at top right, rgba(187, 152, 99, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 252, 245, 0.99), rgba(250, 244, 234, 0.98));
  position: relative;
  z-index: 5001;
  animation: captureIn 220ms var(--ease-instrument);
}

.wp-drawer__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid var(--stone-2);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.wp-drawer__close:hover {
  border-color: var(--gold-1);
  color: var(--gold-2);
}

.wp-drawer__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 46px 18px 16px;
  margin: 0;
  border-bottom: 1px solid var(--stone-2);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}

.wp-drawer__kicker {
  margin: 0;
}

.wp-drawer__title {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.1;
  color: var(--ink-1);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.wp-drawer__value {
  margin: 0;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.wp-drawer__description {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-2);
}

.wp-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wp-drawer__meta span {
  padding: 5px 9px;
  border: 1px solid var(--stone-2);
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink-3);
}

.wp-drawer__tabs {
  display: flex;
  gap: 8px;
  padding: 14px 0 10px;
}

.wp-drawer__tab {
  padding: 8px 12px;
  border: 1px solid var(--stone-2);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink-2);
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.wp-drawer__tab.is-active,
.wp-drawer__tab:hover {
  border-color: var(--gold-1);
  color: var(--gold-2);
  background: var(--gold-soft);
}

.wp-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  padding-right: 6px;
  margin-right: -6px;
  min-height: 0;
}

.wp-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--stone-2);
  background: rgba(255, 255, 255, 0.7);
}

.wp-drawer__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--stone-2);
}

.wp-drawer__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold-2);
}

.wp-drawer__section--shadow {
  min-height: 0;
}

.wp-drawer__items,
.wp-segments,
.wp-drawer__shadow-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wp-drawer__item {
  border: 1px solid var(--stone-2);
  background: rgba(250, 244, 234, 0.78);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wp-drawer__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wp-drawer__item-label {
  font-family: var(--font-serif-display);
  font-size: 14px;
  color: var(--ink-1);
  font-weight: 400;
}

.wp-drawer__item-meta {
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.wp-drawer__item-detail {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
}

.wp-drawer__empty {
  margin: 0;
  padding: 4px 0;
  font-family: var(--font-serif-italic);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-3);
}

.wp-segment {
  border: 1px solid var(--stone-2);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 14px;
}

.wp-segment__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.wp-segment__summary::-webkit-details-marker {
  display: none;
}

.wp-segment__quote {
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-1);
}

.wp-segment__meta {
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wp-segment__body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stone-2);
}

.wp-segment__full {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
}

.wp__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.wp__hint {
  font-family: var(--font-sans-tight);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}


.wp-drawer__reflect {
  background: rgba(255, 252, 245, 0.9);
}

.wp-drawer__textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--stone-2);
  background: #fff;
  color: var(--ink-1);
  font-family: var(--font-serif-display);
  font-size: 15px;
  line-height: 22px;
  padding: 12px;
}

.wp-drawer__textarea:focus {
  outline: 2px solid var(--gold-soft);
  border-color: var(--gold-1);
}

.wp-drawer__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.wp-drawer__primary {
  border: 1px solid var(--ink-1);
  background: var(--ink-1);
  color: #fff;
  font-family: var(--font-sans-tight);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 14px;
  cursor: pointer;
}

.wp-drawer__primary:hover,
.wp-drawer__primary:focus-visible {
  background: var(--gold-1);
  border-color: var(--gold-1);
  color: var(--gold-3);
}

.wp-drawer__link {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-serif-italic);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 0;
}

.wp-drawer__link:hover,
.wp-drawer__link:focus-visible {
  color: var(--gold-2);
  text-decoration: underline;
}

.wp-drawer__optional {
  display: block;
}

.wp-drawer__optional-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.wp-drawer__optional-summary::-webkit-details-marker {
  display: none;
}

.wp-drawer__optional[open] .wp-drawer__optional-summary {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--stone-2);
}

@media (max-width: 960px) {
  .wp-modal__panel.wp-modal__panel--drawer {
    width: min(100vw, 100%);
  }
}

@media (max-width: 640px) {
  .wp-modal.wp-modal--drawer {
    padding: 0;
  }

  .wp-modal__panel.wp-modal__panel--drawer {
    width: 100vw;
    height: 100dvh;
    padding: 22px 18px 20px;
  }

  .wp-drawer__head {
    padding-right: 38px;
  }

  .wp-drawer__section {
    padding: 14px;
  }

  .wp-drawer__item-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .wp__actions {
    flex-direction: column;
    align-items: flex-start;
  }
}