/* editor.css — the invitation editor (/invite/) and its replies page. The same look as the
   wedding card editor (/wedding-card/), so the two feel like one product. */
:root{
  --cream:#faf5ec; --paper:#fffdf8; --ink:#221a12; --inksoft:#6f6152;
  --maroon:#7c2433; --gold:#c6912e; --golddeep:#a5741c; --line:#e8ddc9;
  --emerald:#1f5f4e; --radius:16px;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; overscroll-behavior-x:none; }
body{ font-family:"Hanken Grotesk",system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; }
body.previewing{ overflow:hidden; }
[hidden]{ display:none !important; }

.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:20px 16px calc(28px + env(safe-area-inset-bottom)); }
header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 20px; flex-wrap:wrap; }
header .brand{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--maroon); text-decoration:none; }
header .brand span{ color:var(--gold); }
.who{ display:flex; align-items:center; gap:10px; font-size:14px; min-width:0; }
.who img{ width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); }
.who-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
@media (max-width:520px){ .who-name{ display:none; } }

h1.title{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:30px; letter-spacing:-.02em; text-align:center; margin-bottom:4px; }
.sub{ text-align:center; color:var(--inksoft); font-size:15px; margin-bottom:22px; }
.crumbs{ font-size:14px; margin-bottom:6px; }
.crumbs a{ color:var(--maroon); font-weight:700; text-decoration:none; }
.muted{ color:var(--inksoft); }
.center{ text-align:center; }

.card{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.step-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--golddeep); margin:2px 0 14px; }
.optl{ font-weight:400; color:var(--inksoft); }
.optl-caps{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--inksoft); }

label{ display:block; font-weight:700; font-size:13px; margin:12px 0 6px; }
input, textarea, select{ width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--gold); }
input[type="checkbox"], input[type="radio"]{ width:auto; }
textarea{ resize:vertical; min-height:80px; }
/* minmax(0,…): a long time-zone name must not stretch a column past the screen. */
.row{ display:grid; gap:0 12px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.row3{ display:grid; gap:0 12px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); }
@media (max-width:520px){ .row{ grid-template-columns:minmax(0,1fr); } .row3{ grid-template-columns:repeat(2, minmax(0,1fr)); } .row3 > :first-child{ grid-column:1 / -1; } }
.hint{ font-size:12.5px; color:var(--inksoft); margin-top:5px; }
.warn-text{ color:var(--maroon); font-weight:600; }
.check{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.check label{ margin:0; font-weight:600; }
.check-cell{ display:flex; align-items:flex-end; padding-bottom:12px; }

button{ font:inherit; cursor:pointer; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; font-weight:700; font-size:16px; min-height:52px;
  padding:14px 20px; border:none; border-radius:12px; background:var(--maroon); color:var(--cream); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.gold{ background:var(--golddeep); }
.btn.ghost{ background:transparent; color:var(--maroon); border:1.5px solid var(--line); min-height:auto; padding:8px 14px; font-size:14px; width:auto; }
.btn.ghost.wide{ width:100%; margin-top:4px; padding:10px 14px; }
.btn.danger{ color:#a3162b; border-color:#e9c2c8; }

/* ---------- landing (signed out) ---------- */
.lp-hero{ text-align:center; padding:26px 4px 8px; }
.lp-eyebrow{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--golddeep); background:#fbf3e3; border:1.5px solid var(--line); border-radius:999px; padding:6px 14px; }
.lp-h1{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:clamp(28px,7.5vw,44px); line-height:1.12;
  letter-spacing:-.02em; color:var(--maroon); margin:16px auto 0; max-width:20ch; }
.lp-sub{ color:var(--inksoft); font-size:16.5px; max-width:40ch; margin:12px auto 0; }
.lp-note{ font-size:12.5px; color:var(--inksoft); margin-top:10px; }
.lp-samples-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; margin-top:16px; }
.lp-samples{ display:inline-block; font-weight:700; color:var(--emerald); text-decoration:none; }
.lp-hero .gbtn{ max-width:340px; margin:20px auto 0; }
.lp-section{ padding:36px 0 8px; }
.lp-features{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:720px){ .lp-features{ grid-template-columns:1fr 1fr; gap:14px; } }
.feat{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:0 8px 24px -20px rgba(34,26,18,.5); }
.feat .fi{ font-size:26px; line-height:1; }
.feat h3{ font-family:"Fraunces",Georgia,serif; font-size:18px; margin:10px 0 4px; color:var(--maroon); }
.feat p{ font-size:14.5px; color:var(--inksoft); }
.lp-footer{ text-align:center; padding:28px 0 8px; }
.lp-footer a{ color:var(--maroon); font-weight:700; font-size:14px; text-decoration:none; }
.gate{ max-width:420px; margin:6vh auto 0; text-align:center; }
.gbtn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; border:1.5px solid var(--line); border-radius:12px; background:#fff; font-weight:700; font-size:15px; color:var(--ink); }
.gbtn img{ width:20px; height:20px; }
.err{ color:var(--maroon); font-size:14px; text-align:center; margin-top:12px; min-height:18px; }

/* ---------- my cards ---------- */
.new-row{ display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-bottom:22px; }
@media (max-width:860px){ .new-row{ grid-template-columns:minmax(0, 1fr); } }
.new-btn{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center;
  padding:16px 18px; border-radius:var(--radius); background:var(--maroon); color:var(--cream); text-decoration:none;
  box-shadow:0 12px 26px -16px rgba(124,36,51,.8); }
.new-btn.nb-birthday{ background:#8c5a12; box-shadow:0 12px 26px -16px rgba(140,90,18,.8); }
.new-btn.nb-home{ background:var(--emerald); box-shadow:0 12px 26px -16px rgba(31,95,78,.8); }
.new-btn .ni{ grid-row:1 / 3; font-size:30px; line-height:1; }
.new-btn b{ font-size:16.5px; }
.new-btn small{ font-size:13px; opacity:.85; }
.invite-list{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); }
.inv{ display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.inv-top{ display:flex; gap:12px; align-items:center; padding:14px; text-decoration:none; color:inherit; }
.inv-swatch{ flex:none; width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:26px;
  background:var(--sbg); box-shadow:inset 0 0 0 2px var(--sac); }
.inv-meta{ min-width:0; flex:1; }
.inv-title{ display:block; font-weight:800; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-sub{ display:block; font-size:13px; color:var(--inksoft); }
.inv-stats{ display:flex; gap:10px; flex-wrap:wrap; padding:0 14px 12px; font-size:12.5px; color:var(--inksoft); }
.inv-stats .st-unlock{ font-weight:700; color:var(--emerald); }
.inv-stats .st-unlock.warn{ color:var(--maroon); }
.inv-actions{ display:flex; border-top:1.5px solid var(--line); margin-top:auto; }
.inv-actions > *{ flex:1; text-align:center; padding:10px 6px; font-size:13.5px; font-weight:700; color:var(--maroon);
  text-decoration:none; background:none; border:none; border-right:1.5px solid var(--line); }
.inv-actions > :last-child{ border-right:none; }
.inv-actions > :hover{ background:#fbf3e3; }
.empty{ text-align:center; padding:40px 20px; color:var(--inksoft); grid-column:1 / -1; }
.empty .ic{ font-size:40px; }

/* ---------- style tiles ---------- */
.style-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.style-tile{ position:relative; display:block; margin:0; cursor:pointer; }
.style-tile input{ position:absolute; opacity:0; pointer-events:none; }
.style-tile .st{ display:flex; flex-direction:column; gap:3px; height:100%; padding:12px; border-radius:14px; background:var(--sbg); color:var(--sink);
  border:2px solid transparent; box-shadow:0 0 0 1.5px var(--line); transition:box-shadow .12s, transform .12s; }
.style-tile .st-ic{ font-size:24px; line-height:1.1; }
.style-tile .st-name{ font-weight:800; font-size:14.5px; color:var(--spr); }
.style-tile .st-blurb{ font-size:12px; line-height:1.35; opacity:.85; font-weight:500; }
.style-tile input:checked + .st{ border-color:var(--spr); box-shadow:0 0 0 3px var(--golddeep); }
.style-tile input:focus-visible + .st{ outline:3px solid var(--gold); outline-offset:2px; }
.style-tile .st-tag{ position:absolute; top:8px; right:8px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--golddeep); color:#fff; padding:2px 7px; border-radius:999px; }

/* pills */
.fonts{ display:flex; flex-wrap:wrap; gap:8px; }
.fontpill{ display:block; margin:0; }
.fontpill input{ position:absolute; opacity:0; pointer-events:none; }
.fontpill span{ display:block; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:600; font-size:14px; cursor:pointer; }
.fontpill input:checked + span{ background:var(--maroon); color:var(--cream); border-color:var(--maroon); }
.fontpill input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---------- editor layout ---------- */
.layout{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:880px){ .layout{ grid-template-columns:minmax(0,1fr) 360px; align-items:start; } .preview-col{ position:sticky; top:88px; } }
#startForm > .btn{ margin-bottom:6px; }

.action-bar{ position:sticky; top:8px; z-index:30; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px;
  box-shadow:0 10px 26px -14px rgba(34,26,18,.55); }
.action-bar .spacer{ flex:1; min-width:8px; }
.action-bar .btn{ width:auto; min-height:42px; padding:9px 16px; font-size:15px; }
.saved-msg{ font-size:13.5px; color:var(--inksoft); font-weight:600; }
.saved-msg.ok{ color:var(--emerald); }
.saved-msg.bad{ color:var(--maroon); }
.pub-badge{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pub-badge.draft{ background:#f0e7d6; color:var(--golddeep); }
.pub-badge.live{ background:#e2f0ea; color:var(--emerald); }

.link-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:16px;
  background:linear-gradient(135deg,#eef8f2,#dff0e8); border:1.5px solid #9fd2bf; box-shadow:0 12px 30px -18px rgba(31,95,78,.5); }
.link-info{ flex:1; min-width:0; }
.link-label{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); margin-bottom:3px; }
.link-label::before{ content:"●"; color:#2faf80; font-size:9px; margin-right:6px; vertical-align:middle; animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
#pubLink{ display:block; font-weight:700; font-size:14px; color:var(--emerald); word-break:break-all; text-decoration:none; }
.link-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.btn.link-copy{ width:auto; min-height:auto; padding:9px 18px; font-size:14px; background:var(--emerald); color:#fff; }

/* Free views and the unlock, shown only while guests are turned away at the limit. */
.unlock-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:16px; }
.unlock-info{ flex:1 1 260px; min-width:0; }
.unlock-label{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--golddeep); margin-bottom:3px; }
#unlockStatus{ margin:0; font-size:13.5px; }
#unlockStatus.warn{ color:var(--maroon); font-weight:700; }
.unlock-row .btn{ width:auto; min-height:42px; padding:9px 16px; font-size:15px; }
#payCurrency{ width:auto; padding:9px 10px; font-size:14px; }
.pub-check{ max-width:600px; margin:0 auto 14px; background:#fffdf5; border:1.5px solid var(--gold); border-radius:var(--radius); padding:14px 18px; }
.pc-title{ font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--golddeep); margin-bottom:9px; }
.pub-check ul{ list-style:none; display:grid; gap:8px; }
.pub-check li{ font-size:14px; line-height:1.45; display:flex; gap:9px; align-items:baseline; }
.pub-check .stop .ic{ color:var(--maroon); }
.pub-check .warn{ color:var(--inksoft); }
.pub-check li button{ font:inherit; font-weight:600; background:none; border:none; padding:0; color:var(--maroon); text-decoration:underline; text-align:left; }
#pubHint{ margin:-2px 0 16px; }

/* wording */
details.more{ margin-top:14px; border-top:1.5px dashed var(--line); padding-top:12px; }
details.more summary{ font-weight:700; font-size:14px; color:var(--maroon); cursor:pointer; }
.sacred{ margin-top:4px; }
.sacred .check{ margin-top:6px; }

/* repeatable rows */
.rows-item{ display:grid; gap:8px; align-items:center; margin-bottom:8px; }
.rm-row{ flex:none; width:36px; height:36px; border-radius:9px; border:1.5px solid var(--line); background:#fff; color:var(--maroon); font-size:13px; }
.ev-row{ border:1.5px solid var(--line); border-radius:12px; padding:10px; margin-bottom:10px; background:#fffdfa; }
.ev-top{ display:grid; grid-template-columns:118px 64px 1fr 40px 36px; gap:8px; align-items:center; }
.ev-top .ev-icon{ text-align:center; padding:12px 6px; }
.ev-row .ev-desc{ margin-top:8px; }
.ev-key{ position:relative; display:grid; place-items:center; margin:0; width:40px; height:44px; border-radius:10px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-size:18px; color:#c9bfae; }
.ev-key input{ position:absolute; opacity:0; pointer-events:none; }
.ev-key:has(input:checked){ color:var(--golddeep); border-color:var(--gold); background:#fff7e6; }
@media (max-width:560px){ .ev-top{ grid-template-columns:104px 56px 1fr 36px; } .ev-top .ev-title{ grid-column:1 / 4; grid-row:2; } .ev-top .rm-row{ grid-row:2; grid-column:4; } }
.ev-day{ font-size:11.5px; color:var(--golddeep); font-weight:700; margin-top:4px; }
.pair{ grid-template-columns:1fr 1fr 36px; }
.trio{ grid-template-columns:64px 1fr 36px; }
.trio-wide{ grid-template-columns:64px minmax(0,1fr) 36px; }
.detail-row{ border:1.5px solid var(--line); border-radius:12px; padding:10px; margin-bottom:10px; background:#fffdfa; }
.detail-row textarea{ min-height:56px; margin-top:8px; }
@media (max-width:520px){ .pair{ grid-template-columns:1fr 36px; } .pair > input:nth-child(2){ grid-column:1; } }

/* uploads (as on the wedding editor) */
.uploader{ margin-bottom:8px; }
.photo-upload{ display:flex; align-items:center; gap:14px; }
.photo-actions{ flex:1; min-width:0; }
.up-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
  min-height:54px; padding:12px 16px; border:1.5px dashed var(--line); border-radius:12px;
  background:#fffdf7; color:var(--golddeep); font:inherit; font-weight:700; font-size:15px; }
.up-btn:hover{ border-color:var(--gold); background:#fbf3e3; }
.thumb{ position:relative; display:inline-block; }
.thumb img{ width:104px; height:104px; object-fit:cover; border-radius:14px; border:2px solid var(--paper);
  box-shadow:0 8px 20px -12px rgba(34,26,18,.55), 0 0 0 1.5px var(--line); display:block; }
.thumb .rm{ position:absolute; top:-9px; right:-9px; width:26px; height:26px; border-radius:50%; border:2px solid var(--paper);
  background:var(--maroon); color:#fff; font-size:13px; line-height:1; display:grid; place-items:center; }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:12px; margin-top:14px; }
.gallery-grid .thumb img{ width:100%; height:96px; }
.up-status{ font-size:12.5px; color:var(--inksoft); margin-top:6px; min-height:16px; }
.up-status.err{ color:var(--maroon); }

/* music library */
.tracklist{ max-height:280px; overflow-y:auto; border:1.5px solid var(--line); border-radius:12px; background:#fff; }
.trk{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; margin:0; }
.trk:last-child{ border-bottom:none; }
.trk.on{ background:#fbf0e4; }
.trk input{ position:absolute; opacity:0; pointer-events:none; }
.trk .tplay{ width:38px; height:38px; flex:none; border-radius:50%; border:1.5px solid var(--gold); background:#fff; color:var(--golddeep); font-size:14px; line-height:1; }
.trk .tmeta{ flex:1; min-width:0; }
.trk .tt{ font-weight:700; font-size:14.5px; }
.trk .tc{ font-size:12px; color:var(--inksoft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trk .tpick{ flex:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--inksoft); border:1.5px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.trk.on .tpick{ background:var(--maroon); color:var(--cream); border-color:var(--maroon); }

.danger-zone{ border-color:#f0d3d7; }
.push-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 2px; padding:12px 14px;
  border:1.5px dashed var(--line); border-radius:12px; background:#fffdf7; font-size:14.5px; }
.push-row .hint{ margin-top:2px; }
.push-row .btn{ flex:none; }
#timeZone.needs-pick{ border-color:var(--gold); background:#fffaf0; }

/* ---------- live preview ---------- */
.phone{ width:100%; max-width:340px; margin:0 auto; aspect-ratio:9/17.5; background:#1c130d;
  border-radius:34px; padding:10px; box-shadow:0 20px 44px -20px rgba(34,26,18,.6); }
.phone iframe{ width:100%; height:100%; border:0; border-radius:26px; background:var(--cream); display:block; }
.preview-topbar{ display:none; }
.preview-fab{ display:none; }
@media (max-width:879px){
  .preview-fab{ display:inline-flex; align-items:center; gap:7px; position:fixed; z-index:150;
    right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); border:none; border-radius:999px;
    background:var(--maroon); color:var(--cream); font-weight:700; font-size:15px; padding:14px 22px;
    box-shadow:0 12px 28px -8px rgba(124,29,43,.65); }
  body.previewing .preview-fab{ display:none; }
  .preview-col{ position:fixed; inset:0; z-index:200; background:var(--cream); transform:translateY(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1); overflow-y:auto; overflow-x:hidden; }
  .preview-col.open{ transform:none; }
  .preview-col .desktop-only{ display:none; }
  .preview-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:2;
    padding:12px 14px; background:var(--paper); border-bottom:1.5px solid var(--line); }
  .preview-topbar .t{ font-weight:800; font-size:14px; }
  .phone{ max-width:none; aspect-ratio:auto; margin:0; padding:0; background:none; border-radius:0; box-shadow:none; }
  .phone iframe{ border-radius:0; height:calc(100dvh - 64px); }
}

/* ---------- dialogs ---------- */
.dlg{ border:none; border-radius:20px; padding:0; width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 24px);
  background:var(--paper); color:var(--ink); box-shadow:0 30px 70px -20px rgba(0,0,0,.45); margin:auto; }
.dlg::backdrop{ background:rgba(34,26,18,.45); }
.dlg-body{ position:relative; padding:22px 20px 20px; }
.dlg h2{ font-family:"Fraunces",Georgia,serif; font-size:22px; margin:0 30px 12px 0; }
.dlg-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--inksoft); }
.share-link{ display:flex; gap:8px; align-items:center; padding:10px 10px 10px 14px; border:1.5px solid #9fd2bf; border-radius:12px; background:#eef8f2; }
.share-link a{ flex:1; min-width:0; font-weight:700; color:var(--emerald); word-break:break-all; text-decoration:none; font-size:14px; }
.share-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.share-btns .btn{ width:auto; flex:1; min-height:46px; padding:10px 14px; font-size:15px; }
.btn.wa{ background:#1f8f4e; color:#fff; }
.qr-box{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; margin-top:16px; padding-top:16px; border-top:1.5px dashed var(--line); }
.qr-box canvas{ width:116px; height:116px; image-rendering:pixelated; border-radius:8px; background:#fff; box-shadow:0 0 0 1.5px var(--line); }
.qr-box p{ margin:2px 0 8px; }
.slug-row{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.slug-row span{ padding:0 0 0 14px; color:var(--inksoft); font-size:15px; white-space:nowrap; }
.slug-row input{ border:none; padding-left:2px; min-width:0; }
.slug-row:focus-within{ border-color:var(--gold); }
#linkForm .btn{ margin-top:14px; }

/* ---------- replies page ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
@media(min-width:640px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:16px; text-align:center; }
.stat .n{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:30px; color:var(--maroon); line-height:1; }
.stat .l{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--inksoft); margin-top:6px; }
.stat.green .n{ color:var(--emerald); }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 14px; flex-wrap:wrap; }
.toolbar .btn{ width:auto; min-height:44px; padding:10px 18px; font-size:15px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:13px; font-weight:600; background:#fff7e9; border:1.5px solid var(--gold); color:var(--golddeep); padding:6px 12px; border-radius:999px; }
.table-wrap{ overflow-x:auto; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--paper); }
table{ width:100%; border-collapse:collapse; min-width:680px; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--golddeep); font-weight:800; background:#fbf5e8; }
tr:last-child td{ border-bottom:none; }
.pill{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pill.yes{ background:#e2f0ea; color:var(--emerald); }
.pill.no{ background:#f6e6e8; color:var(--maroon); }
td .msg{ color:var(--inksoft); max-width:300px; white-space:pre-line; }
td .edited{ font-size:11.5px; color:var(--golddeep); }
.rm{ background:none; border:none; color:var(--maroon); font-size:16px; padding:4px 8px; border-radius:8px; }
.rm:hover{ background:#f6e6e8; }
.picker{ max-width:420px; margin:0 auto 18px; }