:root{
  --paper:#F2EEE4;
  --ink:#26241F;
  --ink-soft:#5C5847;
  --berry:#8C3B4E;      /* participant A accent */
  --berry-soft:#F3DCE1;
  --teal:#2F6B63;        /* participant B accent */
  --teal-soft:#DCEAE6;
  --gold:#B8862F;
  --line:#DAD3C2;
  --card-bg:#FBF9F3;
  --radius:14px;
  --shadow: 0 1px 2px rgba(38,36,31,0.06), 0 8px 24px rgba(38,36,31,0.06);
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.hidden{display:none !important;}

/* --- signature thread motif: fills as the couple progresses --- */
.thread{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:50;
  background:var(--line);
}
.thread-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--berry), var(--gold), var(--teal));
  transition: width .6s ease;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px 10px;
  max-width:920px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:1.15rem;}
.brand-mark{color:var(--berry); font-size:1.3rem;}
.topbar-right{display:flex; align-items:center; gap:14px;}
.topbar-meta{font-size:.85rem; color:var(--ink-soft); letter-spacing:.02em;}

.lang-switch{display:flex; align-items:center; gap:2px; font-size:.78rem;}
.lang-switch .lang-link{
  color:var(--ink-soft); text-decoration:none; padding:2px 6px; border-radius:6px;
  font-weight:600; letter-spacing:.02em;
}
.lang-switch .lang-link:hover{background:var(--berry-soft); color:var(--ink);}
.lang-switch .lang-link.active{color:var(--berry); background:var(--berry-soft);}
.lang-switch .lang-link + .lang-link{margin-left:0;}

main{max-width:920px; margin:0 auto; padding:16px 32px 80px;}

.screen{animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.hero{padding:36px 0 28px; text-align:left;}
.hero.small{padding:20px 0 22px;}
.eyebrow{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--berry); font-weight:600; margin:0 0 10px;
}
h1{
  font-family:var(--font-display); font-weight:600; font-size:2.3rem;
  line-height:1.15; margin:0 0 12px; letter-spacing:-.01em;
}
.hero.small h1{font-size:1.7rem;}
.lede{color:var(--ink-soft); font-size:1.05rem; max-width:600px; margin:0;}
.muted{color:var(--ink-soft); font-size:.92rem; margin:4px 0 16px;}

.card-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px;}
@media (max-width:720px){.card-pair{grid-template-columns:1fr;}}

.panel{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow);
}
.panel h2{font-family:var(--font-display); font-size:1.25rem; margin:0 0 4px; font-weight:600;}

.field{display:block; margin-bottom:14px;}
.field span{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; font-weight:600;}
.field input, textarea{
  width:100%; font-family:var(--font-body); font-size:1rem;
  padding:11px 13px; border:1px solid var(--line); border-radius:9px;
  background:#fff; color:var(--ink);
}
.field input:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}

.btn{
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  border:none; border-radius:9px; padding:12px 20px; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--berry); color:#fff;}
.btn-secondary{background:var(--teal); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn-wide{width:100%; margin-top:18px; padding:14px;}
.btn-small{padding:8px 14px; font-size:.85rem;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}

.error{color:var(--berry); font-weight:600; min-height:1.2em; margin-top:10px;}
.hint{color:var(--ink-soft); font-size:.88rem; text-align:center; margin-top:8px;}

/* invite */
.invite-panel{max-width:520px;}
.invite-code{
  font-family:var(--font-display); font-size:2.2rem; letter-spacing:.08em;
  color:var(--berry); font-weight:600; margin-bottom:18px;
}
.copy-row{display:flex; gap:8px;}
.copy-row input{flex:1;}
.invite-qr-wrap{display:flex; flex-direction:column; align-items:center; gap:8px; margin:20px 0;}
.invite-qr{
  width:220px; height:220px; padding:10px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
}

/* dashboard */
.track-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:10px 0 22px;}
@media (max-width:720px){.track-grid{grid-template-columns:1fr;}}
.track-card{
  text-align:left; background:var(--card-bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; cursor:pointer; box-shadow:var(--shadow);
  font-family:var(--font-body); display:flex; flex-direction:column; gap:4px;
}
.track-card:hover{transform:translateY(-2px); transition:transform .15s ease;}
.track-head{display:flex; align-items:center; gap:10px; margin-bottom:2px;}
.track-head h3{font-family:var(--font-display); margin:0; font-size:1.15rem;}
.track-tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding:3px 8px; border-radius:6px;}
.track-tag.me{background:var(--berry-soft); color:var(--berry);}
.track-tag.them{background:var(--teal-soft); color:var(--teal);}
.progress{height:6px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:10px;}
.progress-bar{height:100%; width:0%; background:var(--gold); transition:width .4s ease;}
.track-status{font-size:.82rem; color:var(--ink-soft); margin-top:6px;}

.other-panel{margin-bottom:6px;}
.other-panel h2{font-size:1.05rem;}
.other-progress-row{display:flex; gap:24px; font-size:.9rem; color:var(--ink-soft); flex-wrap:wrap;}
.other-panel #dashInviteRow{margin-top:14px;}

/* history */
.history-empty{color:var(--ink-soft); font-size:.95rem;}
.history-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:12px; box-shadow:var(--shadow);
}
.history-card.unavailable{opacity:.6;}
.history-card-main h3{font-family:var(--font-display); margin:0 0 4px; font-size:1.05rem;}
.history-card-main p{margin:0; font-size:.85rem; color:var(--ink-soft);}
.history-card-status{font-size:.85rem; color:var(--ink-soft); text-align:right;}

/* step flow */
.step-header{display:flex; align-items:center; justify-content:space-between; margin:14px 0 18px; flex-wrap:wrap; gap:10px;}
.steps-nav{display:flex; gap:6px;}
.step-dot{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; background:var(--line); color:var(--ink-soft);
}
.step-dot.active{background:var(--gold); color:#fff;}
.step-dot.done{background:var(--teal); color:#fff;}

.step-body h2{font-family:var(--font-display); font-size:1.4rem; margin:0 0 6px;}
.step-instructions{color:var(--ink-soft); margin-bottom:18px; max-width:640px;}

/* TEMP DEV TOOL — remove together with DEV_TOOLS in app.js */
.dev-fill-btn{
  display:block; margin:0 0 16px; padding:6px 12px; font-size:.78rem; font-weight:700;
  background:#fff3d6; color:#8a5a00; border:1px dashed #c98f00; border-radius:7px; cursor:pointer;
}
.dev-fill-btn:hover{background:#ffe9b8;}

.custom-values{margin-bottom:16px;}
.custom-values-title{font-size:.9rem; margin-bottom:8px;}
.custom-fields{display:flex; flex-direction:column; gap:8px; max-width:420px;}
.custom-fields:not(:empty){margin-bottom:10px;}
.custom-field-row{display:flex; gap:8px;}
.custom-field-row input{
  flex:1; font-family:var(--font-body); font-size:.95rem;
  padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
.custom-field-row input:focus{outline:2px solid var(--gold); outline-offset:1px;}
.custom-field-added{
  display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:600;
  padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:#f3f9f3; color:#2f7a3d;
}

.value-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:12px; margin-bottom:22px;}
.value-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:11px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
}
.value-card h4{margin:0; font-size:.98rem; font-family:var(--font-display); font-weight:600;}
.value-card p{margin:0; font-size:.8rem; color:var(--ink-soft);}
.choice-row{display:flex; gap:6px; margin-top:auto; flex-wrap:wrap;}
.choice-btn{
  flex:1; min-width:70px; font-size:.78rem; font-weight:700; padding:7px 8px; border-radius:7px;
  border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink-soft);
}
.choice-btn.selected{background:var(--gold); color:#fff; border-color:var(--gold);}

.pick-card{
  background:var(--card-bg); border:2px solid var(--line); border-radius:11px; padding:14px;
  cursor:pointer; transition:border-color .12s ease;
}
.pick-card.selected{border-color:var(--berry); background:var(--berry-soft);}
.pick-card h4{margin:0 0 4px; font-family:var(--font-display); font-size:.98rem;}
.pick-card p{margin:0; font-size:.8rem; color:var(--ink-soft);}

.pick-counter{position:sticky; top:0; background:var(--paper); padding:8px 0; font-weight:700; color:var(--berry);}

.rank-list{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:8px; max-width:560px;}
.rank-item{
  display:flex; align-items:center; gap:12px; background:var(--card-bg); border:1px solid var(--line);
  border-radius:10px; padding:10px 14px;
}
.rank-item.dragging{opacity:.4;}
.rank-handle{
  cursor:grab; color:var(--ink-soft); font-size:1.1rem; line-height:1; flex-shrink:0;
  touch-action:none; user-select:none; padding:4px;
}
.rank-handle:active{cursor:grabbing;}
.rank-num{
  width:28px; height:28px; border-radius:50%; background:var(--berry); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0;
}
.rank-title{flex:1; font-weight:600;}
.rank-arrows{display:flex; flex-direction:column; gap:2px;}
.rank-arrows button{background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:.85rem; line-height:1;}
.rank-arrows button:hover{color:var(--berry);}

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

/* comparison */
.compare-block{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px; box-shadow:var(--shadow);}
.compare-block h3{font-family:var(--font-display); margin-top:0;}
.compare-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:720px){.compare-cols{grid-template-columns:1fr;}}
.compare-list{list-style:none; margin:0; padding:0;}
.compare-list li{padding:6px 0; border-bottom:1px solid var(--line); font-size:.92rem; display:flex; gap:8px;}
.compare-list li .n{color:var(--ink-soft); font-weight:700; width:20px;}
.match-pill{display:inline-block; background:var(--teal-soft); color:var(--teal); font-size:.75rem; font-weight:700; padding:2px 7px; border-radius:6px; margin-left:6px;}
.why-text{font-style:italic; color:var(--ink-soft); margin-top:10px; border-left:3px solid var(--gold); padding-left:12px;}

/* footer */
.site-footer{max-width:920px; margin:0 auto; padding:8px 32px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;}
.dev-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:.82rem; text-decoration:none;}
.dev-link:hover{color:var(--berry);}
.dev-link-icon{flex-shrink:0;}
.footer-terms-link{color:var(--ink-soft); font-size:.78rem; text-decoration:underline;}
.footer-terms-link:hover{color:var(--berry);}

/* cookie / localStorage notice */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:70; max-width:720px; margin:0 auto;
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:16px 18px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:var(--shadow);
}
.cookie-banner p{margin:0; font-size:.85rem; line-height:1.5; flex:1; min-width:220px;}
.cookie-banner a{color:#fff; text-decoration:underline;}
.cookie-banner .btn-primary{flex-shrink:0;}

/* presence */
.presence-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#C7C0AC; vertical-align:middle; margin-left:4px;
}
.presence-dot.online{background:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);}

/* toasts */
.toast-stack{position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:80;}
.toast{
  background:var(--ink); color:#fff; padding:11px 16px; border-radius:9px; font-size:.88rem;
  box-shadow:var(--shadow); animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* full comparison dashboard */
.summary-strip{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.summary-pill{
  flex:1; min-width:150px; background:var(--card-bg); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; text-align:center; box-shadow:var(--shadow);
}
.summary-pill .num{font-family:var(--font-display); font-size:1.9rem; font-weight:600; display:block;}
.summary-pill .lbl{font-size:.8rem; color:var(--ink-soft);}
.summary-pill.match .num{color:var(--teal);}
.summary-pill.divergence .num{color:var(--gold);}
.summary-pill.critical .num{color:var(--berry);}

.tabs{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.tab-btn{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:7px 16px;
  font-size:.85rem; font-weight:600; cursor:pointer; color:var(--ink-soft);
}
.tab-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}

#dashTableWrap{overflow-x:auto;}
.diff-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.diff-table th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:6px 10px; border-bottom:1px solid var(--line);}
.diff-table td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.diff-table tr.row-critical{background:var(--berry-soft);}
.diff-table tr.row-divergence{background:#FBF3E1;}
.tier-pill{display:inline-block; font-size:.8rem; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap;}
.tier-pill.a{background:var(--berry-soft); color:var(--berry);}
.tier-pill.b{background:var(--teal-soft); color:var(--teal);}
.tier-pill.top10{outline:2px solid var(--gold); outline-offset:-2px;}
.empty-note{color:var(--ink-soft); font-size:.9rem; padding:14px 0;}

/* PDF-only: all three dashboard tabs stacked (see buildAllTabsHtml in app.js) */
.pdf-tab-section{margin-top:22px;}
.pdf-tab-section:first-child{margin-top:0;}
.pdf-tab-section h4{font-family:var(--font-display); margin:0 0 10px; font-size:1.05rem;}

/* share panel + public share view */
.share-panel{margin-top:8px;}
.share-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.share-panel .copy-row{margin-top:14px;}
.share-social{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px;}
.share-social a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.88rem;
  border:1px solid var(--line); border-radius:20px; padding:6px 14px;
}
.share-social a:hover{background:var(--berry-soft); color:var(--berry); border-color:var(--berry-soft);}

.share-actions{margin:20px 0 10px;}
.share-cta{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-top:14px; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:14px; box-shadow:var(--shadow);
}
.share-cta p{margin:0; color:var(--ink-soft);}

/* swipe deck (Step 1) */
.swipe-progress{font-weight:700; color:var(--ink-soft); font-size:.85rem; margin-bottom:10px; text-align:center;}
.swipe-deck{position:relative; width:100%; max-width:420px; height:280px; margin:0 auto 18px;}
.swipe-card{
  position:absolute; inset:0; background:var(--card-bg); border:1px solid var(--line); border-radius:18px;
  padding:26px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  box-shadow:var(--shadow); cursor:grab; touch-action:pan-y; user-select:none;
}
.swipe-card:active{cursor:grabbing;}
.swipe-card.back{transform:scale(.94) translateY(10px); opacity:.6; z-index:0; pointer-events:none;}
.swipe-card.top{z-index:1;}
.swipe-card h4{font-family:var(--font-display); font-size:1.3rem; margin:0 0 10px;}
.swipe-card p{margin:0; color:var(--ink-soft); font-size:.92rem;}
.swipe-label{position:absolute; top:18px; padding:6px 14px; border:3px solid; border-radius:8px; font-weight:800; text-transform:uppercase; font-size:.85rem; opacity:0; pointer-events:none;}
.swipe-label.right{right:18px; color:var(--teal); border-color:var(--teal); transform:rotate(8deg);}
.swipe-label.left{left:18px; color:var(--berry); border-color:var(--berry); transform:rotate(-8deg);}
.swipe-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; gap:6px; color:var(--ink-soft);}
.swipe-empty h4{font-family:var(--font-display); color:var(--ink); margin:0;}

.swipe-controls{display:flex; justify-content:center; align-items:center; gap:22px; margin-bottom:18px;}
.swipe-btn{
  width:56px; height:56px; border-radius:50%; border:none; font-size:1.4rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.swipe-btn.no{background:var(--berry-soft); color:var(--berry);}
.swipe-btn.yes{background:var(--teal-soft); color:var(--teal);}
.swipe-btn.undo{width:42px; height:42px; font-size:1.1rem; background:#fff; border:1px solid var(--line); color:var(--ink-soft);}
.swipe-btn:disabled{opacity:.4; cursor:not-allowed;}