/* =========================================================
   LEDGERLINE — design tokens
   Everything brand-specific lives here. Swap these values
   (and the wordmark in index.html / profile.html) to reskin
   the whole site later — nothing else needs to change.
   ========================================================= */
:root{
  /* --- New Scetis palette (from logo: sand / gold / black / white) --- */
  --paper:        #F6F0E5;   /* page background — warm ivory */
  --paper-raised: #FFFFFF;   /* cards / raised surfaces — true white */
  --sand:         #C8A881;   /* logo sand — used for the hero band */
  --sand-deep:    #B08F65;
  --ink:          #2E2013;   /* primary text — near-black, from logo wordmark */
  --ink-soft:     #6B5842;   /* secondary text */
  --ink-faint:    #A2907A;   /* tertiary / placeholder text */
  --line:         #E1D4BE;   /* hairline rules */
  --copper:       #B8862F;   /* accent: pending / draft / action — logo gold */
  --copper-deep:  #93691F;
  --seal:         #2E2013;   /* accent: sealed / confirmed on-chain — ink/black */
  --seal-deep:    #1B120A;
  --danger:       #9C3B2C;

  /* --- extra tints (so Desert dark can restyle them) --- */
  --on-ink:        #FFFFFF;   /* text on an --ink background */
  --tint-gold:#FBF3E1; --tint-gold-line:#E1CFA6; --tint-gold-line2:#D9C7A0; --tint-stack-ink:#5B3F10;
  --tint-btc:#FBEBDF; --tint-btc-line:#E6C9B8; --tint-btc-ink:#A0501F;
  --tint-ltc:#F1EADE; --tint-ltc-line:#D9CDBB;
  --tint-warn:#FBF0EC; --tint-warn-line:#E6C3B4; --tint-info:#F3ECDC;
  --tint-ok:#F1F8F2; --tint-amber:#FFF4E0; --tint-amber-line:#E8B860;
  --hover-card:#FCF9F3; --hover-04:rgba(0,0,0,.035); --hover-07:rgba(46,32,19,.07); --hover-09:rgba(46,32,19,.09); --hover-10:rgba(46,32,19,.1);
  --glass-88:rgba(246,240,229,.88); --glass-92:rgba(246,240,229,.92); --line-soft:rgba(225,212,190,.55);

  /* --- type --- */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- layout --- */
  --max-w: 1120px;
  --radius: 3px;
  --radius-lg: 6px;
}

/* =========================================================
   DESERT DARK  (set by js/theme.js: <html data-theme="dark">)
   Page = dark gray, cards/drafts = black, text = warm white. Orange stays orange.
   ========================================================= */
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:        #262422;
  --paper-raised: #0E0D0C;
  --sand:         #6B5A45;
  --sand-deep:    #8A7357;
  --ink:          #F3EDE3;
  --ink-soft:     #C9BFAF;
  --ink-faint:    #8F8678;
  --line:         #3B3733;
  --copper:       #D9A441;
  --copper-deep:  #E6B558;
  --seal:         #F3EDE3;
  --seal-deep:    #FFFFFF;
  --danger:       #E8806B;

  --on-ink:        #0E0D0C;
  --tint-gold:#2D2619; --tint-gold-line:#5A4A28; --tint-gold-line2:#5A4A28; --tint-stack-ink:#E6C887;
  --tint-btc:#33231A; --tint-btc-line:#6A4A38; --tint-btc-ink:#F0A878;
  --tint-ltc:#2B2926; --tint-ltc-line:#4A4540;
  --tint-warn:#341F1B; --tint-warn-line:#6A3A30; --tint-info:#2B2926;
  --tint-ok:#17261B; --tint-amber:#33280F; --tint-amber-line:#7A5E1C;
  --hover-card:#171514; --hover-04:rgba(255,255,255,.05); --hover-07:rgba(255,255,255,.08); --hover-09:rgba(255,255,255,.1); --hover-10:rgba(255,255,255,.12);
  --glass-88:rgba(38,36,34,.88); --glass-92:rgba(38,36,34,.92); --line-soft:rgba(255,255,255,.08);
}
:root[data-theme="dark"] .side-post.draft-cta,
:root[data-theme="dark"] .side-post.create-cta,
:root[data-theme="dark"] #draft-dropdown-btn,
:root[data-theme="dark"] .btn-seal{ background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
:root[data-theme="dark"] .side-post.draft-cta:hover,
:root[data-theme="dark"] .side-post.create-cta:hover,
:root[data-theme="dark"] #draft-dropdown-btn:hover,
:root[data-theme="dark"] .btn-seal:hover{ background: var(--seal-deep); border-color: var(--seal-deep); }
:root[data-theme="dark"] .link-btn[onclick^="downloadProof"],
:root[data-theme="dark"] .link-btn[onclick^="openNostrShare"],
:root[data-theme="dark"] .link-btn[onclick^="openXShare"]{ color: var(--ink); }
:root[data-theme="dark"] .link-btn[onclick^="downloadProof"]:hover,
:root[data-theme="dark"] .link-btn[onclick^="openNostrShare"]:hover,
:root[data-theme="dark"] .link-btn[onclick^="openXShare"]:hover{ color: var(--seal-deep); }
:root[data-theme="dark"] ::selection{ color:#0E0D0C; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{ color-scheme: dark; }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; }
img{ max-width: 100%; display: block; }

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

::selection{ background: var(--copper); color: var(--paper-raised); }

:focus-visible{
  outline: 2px solid var(--copper-deep);
  outline-offset: 2px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand{
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.brand-logo{
  height: 30px;
  width: auto;
  flex: none;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a{
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: color .15s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a.active{ color: var(--ink); font-weight: 600; }

.btn{
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper-raised);
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover{ border-color: var(--ink); }
.btn-copper{
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}
.btn-copper:hover{ background: var(--copper-deep); border-color: var(--copper-deep); }
#login-nav-btn{
  background: #F7931A;
  border-color: #F7931A;
  color: var(--ink);
}
#login-nav-btn:hover{
  background: #DA8217;
  border-color: #DA8217;
}
.btn-orange,
#draft-dropdown-btn{
  background: #F7931A;
  border-color: #F7931A;
  color: var(--ink);
}
.btn-orange:hover,
#draft-dropdown-btn:hover{
  background: #DA8217;
  border-color: #DA8217;
}
.btn-block{ width: 100%; justify-content: center; }
.btn[disabled]{
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}
.btn-sm{ padding: 7px 12px; font-size: 13px; }
.btn-icon{
  padding: 0;
  width: 40px;
  height: 40px;
  justify-content: center;
}
.btn-icon svg{ width: 18px; height: 18px; }

/* =========================================================
   HERO — just the mark + illustration, centered
   ========================================================= */
.hero{
  padding: 56px 0 40px;
  background: var(--paper-raised);
}
.hero .wrap{
  text-align: center;
}
.hero-logo{
  width: 100%;
  max-width: 220px;
  margin: 0 auto 22px;
  display: block;
}
.hero-frame{
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.hero-frame img{
  width: 100%;
  display: block;
}

/* =========================================================
   SAVE BAND — composer (left) + pitch copy (right), its own
   section below the hero. Stacks to one column on mobile in
   source order, so the composer lands on top when stacked.
   ========================================================= */
.save-band{
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
  background: var(--sand);
}
.save-band .wrap{
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 48px;
  align-items: center;
}

/* =========================================================
   Z.CASH-STYLE HERO (homepage only)
   ========================================================= */
.zhero-nav{
  background: var(--paper);
  border-bottom: none;
  position: relative;
}
.zhero-nav .wrap{
  justify-content: flex-start;
  gap: 36px;
  height: 84px;
}
.archive-nav{
  background: var(--paper);
  border-bottom: none;
}
.archive-nav .wrap{
  height: 84px;
}
.zhero-nav .brand-logo-icon,
.archive-nav .brand-logo-icon{
  height: 54px;
  width: auto;
  display: block;
}
.archive-brand-logo{
  height: 44px;
  width: auto;
  display: block;
}
.nav-learn-wrap{
  position: static;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.nav-learn-btn{
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
}
.learn-menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 44px -20px rgba(27,18,10,.35);
  padding: 32px 0;
  z-index: 60;
}
.learn-menu-inner{
  padding: 0 28px;
  max-width: 1280px;
  display: grid;
  grid-template-columns: auto repeat(6, 1fr);
  gap: 36px;
  align-items: start;
}
.learn-mascot{
  width: 108px;
  height: auto;
  align-self: start;
}
.nav-learn-wrap:hover .learn-menu,
.nav-learn-wrap:focus-within .learn-menu{
  display: block;
}
.learn-col-title{
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.learn-col a{
  display: block;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.learn-col a:first-of-type{ border-top: none; }
.learn-col a:hover{ color: var(--copper-deep); }
.learn-col-item{
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 6px 0;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.learn-col-item:first-of-type{ border-top: none; }

.zhero{
  background: var(--paper);
  padding: 64px 0;
}
.zhero .wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.zhero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 6.5vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}
.zhero-sub{
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--ink);
  opacity: .82;
  max-width: 46ch;
  margin: 0 0 30px;
}
.zhero-torus{
  position: relative;
  width: 100%;
  max-width: 600px;
  justify-self: center;
}
.zhero-torus img{ width: 100%; display: block; }
.torus-star{
  position: absolute;
  top: 0;
  left: 0;
  animation: torus-pulse 2.6s ease infinite;
}
@keyframes torus-pulse{
  0%, 100% { opacity: .6; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.7); }
}

@media (max-width: 860px){
  .zhero .wrap{ grid-template-columns: 1fr; text-align: center; }
  .zhero-sub{ margin-left: auto; margin-right: auto; }
  .zhero-torus{ max-width: 320px; order: -1; }
  .learn-menu-inner{ grid-template-columns: 1fr; max-width: 100%; }
}
h1.hero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: #000000;
}
.hero-sub{
  font-size: 15.5px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 42ch;
}

/* composer — one field, one action, nothing else */
.composer{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  text-align: left;
}
.composer-tabs{
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.composer-tab{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 8px 4px 12px;
  margin-right: 18px;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.composer-tab.active{
  color: var(--ink);
  border-bottom-color: var(--copper);
}
.composer input[type="text"],
.composer textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  resize: vertical;
}
.composer textarea{ min-height: 110px; }
.composer-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.hint{ font-size: 12.5px; color: var(--ink-faint); }

/* =========================================================
   SEAL / STATUS badges — the signature device.
   Draft = dashed outline, pending = copper ring,
   sealed = solid verdigris ring with a checkmark notch.
   ========================================================= */
.seal{
  --sz: 34px;
  width: var(--sz); height: var(--sz);
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seal svg{ width: 100%; height: 100%; display: block; }
.seal.is-draft{ }
.status-row{ display: flex; align-items: center; gap: 10px; }
.status-label{ font-size: 13px; font-weight: 600; }
.status-label.draft{ color: var(--ink-faint); }
.status-label.pending{ color: var(--copper-deep); }
.status-label.sealed{ color: var(--seal-deep); }
.status-sub{ font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }

/* =========================================================
   LEDGER STRIP (example rows on homepage)
   ========================================================= */
.ledger{
  border-top: 1px solid var(--line);
}
.ledger-row{
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.ledger-title{ font-weight: 600; font-size: 15px; }
.ledger-url{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.chip{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip-seal-icon{
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: none;
}
.post-card-row{
  display: flex;
  align-items: center;
  gap: 14px;
}
.post-content{
  flex: 1;
  min-width: 0;
}
.post-stamp{
  flex: none;
}
.post-stamp img{
  width: 52px;
  height: 52px;
  display: block;
}
.chip.btc{ border-color: var(--tint-btc-line); color: var(--tint-btc-ink); background: var(--tint-btc); }
.chip.ltc{ border-color: var(--tint-ltc-line); color: var(--ink); background: var(--tint-ltc); }
.chip.bsv{ border-color: var(--tint-gold-line); color: var(--copper-deep); background: var(--tint-gold); }

section{ padding: 52px 0; border-top: 1px solid var(--line); }
section:first-of-type{ border-top: none; }
.section-white{ background: var(--paper-raised); }
.section-head{ max-width: 60ch; margin-bottom: 40px; }
.section-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.section-sub{ color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* =========================================================
   HOW IT WORKS — a quiet, inline sequence, not a boxed grid
   ========================================================= */
.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.step{ padding: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.step-num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--copper-deep);
  margin-bottom: 10px;
}
.step h3{
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}
.step p{ color: var(--ink-soft); font-size: 14px; margin: 0; }

/* =========================================================
   CHAINS & WALLETS — a single quiet row of chips, not cards
   ========================================================= */
.wallet-flank{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  max-width: 700px;
  margin: 0 auto;
}
.wallet-seal{
  width: 100px;
  height: auto;
  flex: none;
}
.chain-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
}
.wallet-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 100px;
  padding: 8px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.wallet-chip:hover{
  border-color: var(--ink-faint);
  transform: translateY(-1px);
}
.wallet-chip .chain-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chain-dot.btc{ background: var(--copper); }
.chain-dot.ltc{ background: var(--ink); }
.wallet-chip .wallet-name{ font-weight: 600; }
.wallet-chip .wallet-chain{ color: var(--ink-faint); }

/* =========================================================
   MODAL (wallet connect / save-on-chain)
   ========================================================= */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(28,36,48,.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-overlay.open{ display: flex; }
.modal{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px;
}
.modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}
.modal-head h3{
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}
.modal-close{
  background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 20px; line-height: 1;
  padding: 4px;
}
.modal-sub{ color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }

.field{ margin-bottom: 16px; }
.field label{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"]{
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

/* Username field: fixed "@" prefix, styled as one seamless box */
.field .username-group{
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.field .username-group .prefix{
  display: flex;
  align-items: center;
  padding: 10px 0 10px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-faint);
}
.field .username-group input[type="text"]{
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding-left: 2px;
}
.field .username-group input[type="text"]:focus{ outline: none; }
.field .username-group:focus-within{ border-color: var(--ink-faint); }

.mode-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mode-tab{
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
.mode-tab.active{
  border-color: var(--copper);
  background: var(--tint-gold);
}
.mode-tab .mode-name{ font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.mode-tab .mode-desc{ font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

.fee-row{
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.fee-opt{
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 9px 6px;
  text-align: center;
  cursor: pointer;
  font-size: 12.5px;
}
.fee-opt.active{ border-color: var(--ink); background: var(--paper-raised); font-weight: 700; }
.fee-opt .fee-rate{ font-family: var(--font-mono); display: block; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }

.cost-line{
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
}
.cost-line.total{
  font-weight: 700;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
}
.cost-line .val{ font-family: var(--font-mono); }

.wallet-choice{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
}
.wallet-choice:hover{ border-color: var(--ink-faint); }
.wallet-choice .wc-name{ font-weight: 600; font-size: 14.5px; }
.wallet-choice .wc-note{ font-size: 12px; color: var(--ink-faint); }

.notice{
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-top: 14px;
  border: 1px solid var(--line);
}
.notice.warn{ background: var(--tint-warn); border-color: var(--tint-warn-line); color: var(--danger); }
.notice.info{ background: var(--tint-info); border-color: var(--line); color: var(--ink); }

/* =========================================================
   PROFILE PAGE
   ========================================================= */
.profile-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 16px;
}
.entry{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 20px 22px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.entry-title{ font-weight: 600; font-size: 15.5px; margin: 0 0 4px; }
.entry-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.empty-state{
  text-align: center;
  padding: 70px 20px;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.empty-state h3{
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 20px;
  margin: 0 0 8px;
}

/* =========================================================
   LEGAL PAGES (privacy policy, terms, etc.)
   ========================================================= */
.legal{
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 28px 64px;
}
.legal .updated{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.legal h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 0 0 28px;
  color: var(--ink);
}
.legal h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 40px 0 14px;
  color: var(--ink);
}
.legal h2:first-of-type{ margin-top: 0; }
.legal p{
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.legal ul{
  margin: 0 0 16px;
  padding-left: 20px;
}
.legal li{
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.legal strong{ color: var(--ink); }
.legal a{ color: var(--copper-deep); text-decoration: underline; }
.legal code{
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}
.legal .callout{
  background: var(--tint-gold);
  border: 1px solid var(--tint-gold-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 24px;
}
.legal .callout p{ margin: 0; color: var(--ink); font-size: 14.5px; }
.legal .placeholder{
  background: var(--tint-info);
  border-radius: 2px;
  padding: 0 4px;
}

/* FAQ / comparison table */
.legal .table-scroll{
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.legal table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 620px;
}
.legal th, .legal td{
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal thead th{
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-faint);
  background: var(--paper);
  white-space: nowrap;
}
.legal tbody th{
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.legal td{ font-family: var(--font-mono); color: var(--ink-soft); }
.legal tbody tr:last-child th, .legal tbody tr:last-child td{ border-bottom: none; }
.legal .faq-q{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
}
.legal .chain-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  margin-left: 6px;
  vertical-align: middle;
}

/* =========================================================
   LOGIN / PROFILE
   ========================================================= */
.auth-link{
  background: none;
  border: none;
  color: var(--copper-deep);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.auth-link.auth-link-lg{ font-size: 16px; font-weight: 700; }
.auth-switch{
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 16px;
}

.profile-section{
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.profile-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Profile dropdown (post-login nav) */
.profile-dropdown-wrap{
  position: relative;
  display: inline-block;
}
.profile-dropdown{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 18px 36px -16px rgba(28,20,10,.28);
  text-align: left;
  z-index: 50;
}
.profile-dropdown.open{ display: block; }

/* Search dropdown */
.search-input{
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.search-results{
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
}
.search-result{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 9px 8px;
  cursor: pointer;
}
.search-result:hover{ background: var(--paper); }
.search-result .sr-title{ font-size: 13.5px; font-weight: 600; color: var(--ink); }
.search-result .sr-meta{ font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.search-hint{
  font-size: 13px;
  color: var(--ink-faint);
  padding: 10px 4px 2px;
}

/* Archive page: the viewed user's info (handle, joined date, bio) */
.archive-profile-info{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  padding: 20px 22px;
  margin-bottom: 32px;
}
.archive-profile-info .handle{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 4px;
}
.archive-profile-info .joined{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.archive-profile-info .bio{
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.post-author-link{
  color: inherit;
  text-decoration: none;
}
.post-author-link:hover{ text-decoration: underline; }
.profile-dropdown textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.bio-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.profile-section h4{
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.profile-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.profile-row input{
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.profile-row .username-group{
  flex: 1;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.profile-row .username-group .prefix{
  display: flex;
  align-items: center;
  padding: 9px 0 9px 11px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-faint);
}
.profile-row .username-group input{
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding-left: 2px;
}
.profile-row .username-group input:focus{ outline: none; }
.profile-row .username-group:focus-within{ border-color: var(--ink-faint); }
.wallet-status{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--paper);
  font-size: 13.5px;
}
.wallet-status .wc-addr{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

/* Archive filter tabs (Personal / All / Favorite) */
.archive-tabs{
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.archive-tab{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
}
.archive-tab.active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-raised);
}

/* Post card (ark.page-style: date, block #, block hash, star) */
.post-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 14px 40px 14px 14px;
  margin-bottom: 10px;
}
.post-card .post-title{ font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.post-card .post-meta{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
}
.post-card .post-meta a{ color: var(--copper-deep); text-decoration: underline; }
.post-card .post-author{ font-size: 12px; color: var(--ink-soft); }
.star-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  color: var(--ink-faint);
}
.star-btn.active{ color: var(--copper); }
.star-btn svg{ width: 18px; height: 18px; display: block; }
.empty-inline{
  text-align: center;
  padding: 30px 10px;
  color: var(--ink-faint);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

footer{
  padding: 24px 0;
  margin-top: 40px;
  background: var(--paper);
}
.zhero-footer{
  background: var(--paper);
  padding: 0;
}
.zhero-body{
  background: var(--paper);
}
.zhero-footer .foot-note{
  color: var(--ink);
  opacity: .85;
}
footer.zhero-footer .zhero-footer-wrap{
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 84px;
  gap: 24px;
  padding: 0;
}
.zhero-copyright{
  position: absolute;
  right: 0;
  bottom: 6px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.zhero-footer-logo{
  height: 48px;
  width: auto;
  margin-top: 19px;
}
.zhero-footer-links{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}
.zhero-footer-links a{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink);
  text-decoration: none;
}
.zhero-footer-links a:hover{ text-decoration: underline; }
footer .wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
footer .foot-note{ font-size: 13px; color: var(--ink-faint); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px){
  .save-band .wrap{ grid-template-columns: 1fr; text-align: left; }
  .wallet-flank{ grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .wallet-flank .wallet-seal{ width: 64px; }
  .composer{ text-align: left; }
  .steps{ grid-template-columns: 1fr; gap: 22px; }
  .nav-links{ display: none; }
  .entry{ grid-template-columns: auto 1fr; }
  .entry > .btn{ grid-column: 1 / -1; }
}

@media (max-width: 520px){
  .hero{ padding: 40px 0 28px; }
  .save-band{ padding: 4px 0 40px; }
  section{ padding: 40px 0; }
  .hero-logo{ max-width: 170px; }
  .chain-row{ flex-wrap: wrap; }
  footer .zhero-footer-wrap{ flex-direction: column; gap: 24px; height: auto; padding: 24px 0; }
  .zhero-footer-links{ align-items: center; }
  .zhero-footer-logo{ margin-top: 0; }
  .zhero-copyright{ order: 3; text-align: center; margin-top: 4px; }
  .zhero-footer-nav{ order: 2; justify-content: center; }
  .zhero-footer-logo-link{ order: 1; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}


/* ---------------------------------------------------------
 * Combined record (BitcoinSV content + Bitcoin timestamp)
 * --------------------------------------------------------- */
.chip.stack{ border-color: var(--tint-gold-line2); color: var(--tint-stack-ink); background: linear-gradient(90deg, var(--tint-btc) 0%, var(--tint-gold) 100%); }

/* Combined records: the two seals sit one above the other, fully separate.
   Gold (BitcoinSV, the content) on top, orange (Bitcoin, the timestamp) below. */
.post-stamp-stack{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-stamp-stack img{
  width: 52px;
  height: 52px;
}
.post-stamp-stack .stamp-btc.is-pending{ opacity: .35; filter: grayscale(.6); }

/* Step tracker */
.stack-steps{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.stack-steps li{ display: inline-flex; align-items: center; gap: 6px; }
.stack-steps .step-dot{
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; font-weight: 700;
  border: 1px solid var(--line); color: var(--ink-faint); background: var(--paper);
}
.stack-steps .done .step-dot{ background: #F7931A; border-color: #F7931A; color: #fff; }
/* The BitcoinSV step uses the BitcoinSV seal's yellow; the Bitcoin timestamp step stays orange. */
.stack-steps .done.bsv .step-dot{ background: #EAB300; border-color: #EAB300; }
.stack-steps .pending{ color: var(--copper-deep); }
.stack-steps .pending .step-dot{ border-color: var(--copper); color: var(--copper); }

/* Save modal: three record types and the explainer */
.mode-tabs.mode-tabs-3{ grid-template-columns: 1fr; }
.rec-badge{
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: #F7931A;
  border-radius: 100px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 1px;
}
.stack-hint{
  border: 1px solid var(--tint-gold-line);
  background: var(--tint-gold);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.stack-hint-title{ margin: 0 0 6px; font-weight: 700; color: var(--ink); font-size: 13px; }
.stack-hint ol{ margin: 0; padding-left: 18px; }
.stack-hint li{ margin-bottom: 4px; }

/* Archive: "Combined only" toggle sits at the end of the tab row */
.archive-filter{ margin-left: 0; }

/* Proof page: combined record panel */
.stack-panel{
  border: 1px solid var(--tint-gold-line);
  background: var(--tint-gold);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.stack-panel h2{ font-size: 15px; margin: 0 0 10px; }
.stack-panel .stack-steps{ flex-direction: column; gap: 8px; font-size: 13.5px; }
.stack-panel .stack-note{ margin: 12px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }


/* Encrypt toggle, proof download, Nostr share */
.encrypt-row{
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 11px 14px; margin-bottom: 16px;
  cursor: pointer; font-size: 13px; color: var(--ink);
}
.encrypt-row input{ margin-top: 3px; accent-color: #F7931A; }
.encrypt-row small{ display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; font-weight: 400; }
.enc-tag{ color: var(--copper-deep); }
.post-actions{ display: flex; gap: 16px; margin-top: 8px; }
.link-btn{
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--copper-deep); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover{ color: var(--ink); }
.stack-steps .optional{ color: var(--ink-faint); }
#nostr-note{
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.nostr-fine{ font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.45; }
#nostr-publish:disabled{ opacity: .5; cursor: not-allowed; }


/* Homepage tagline under the hero sub */
.zhero-stack{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--copper-deep);
  margin: -6px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
@media (max-width: 860px){ .zhero-stack{ justify-content: center; } }
.legal h2[id]{ scroll-margin-top: 24px; }


/* Personal mode, visibility, archive export/import */
[data-mode="personal"] .side [data-archive-scope="all"]{ display: none; }
.field select{
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.field-hint{ margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.vis-tag{ color: var(--copper-deep); }
.archive-io{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 14px; }
.archive-io a.link-btn{ text-decoration: underline; }
.archive-io-msg{ font-size: 12.5px; color: var(--ink-soft); }


/* Draft view / edit / delete */
.field textarea{
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.draft-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btn-danger{ background: #B3412B; border-color: #B3412B; color: #fff; }
.btn-danger:hover{ background: #9A3622; border-color: #9A3622; }
.btn-delete{ color: #B3412B; }
.btn-delete:hover{ border-color: #B3412B; }
.post-card.is-draft{ cursor: pointer; }
.post-card.is-draft:hover{ border-color: var(--sand); }
.post-title-link{
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.post-title-link:hover{ text-decoration: underline; text-underline-offset: 3px; }
.draft-view-title{ font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 12px; word-break: break-word; }
.draft-content{
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised);
  padding: 12px 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow: auto;
}
.draft-content a{ color: var(--copper-deep); text-decoration: underline; }
.draft-empty{ color: var(--ink-faint); font-size: 14px; margin: 0; }
.draft-view-meta{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 12px 0 0; }
.draft-delete-text{ font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0 0 4px; word-break: break-word; }
.draft-modal-actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Draft attachments */
.btn-plus{ width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-plus span{ display: block; font-size: 24px; line-height: 1; font-weight: 400; transform: translateY(-1px); }
.draft-actions-split{ justify-content: space-between; align-items: center; }
.draft-actions-right{ display: flex; gap: 8px; }
.editor{
  width: 100%; box-sizing: border-box; min-height: 180px; max-height: 50vh; overflow: auto;
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; outline: none;
}
.editor:focus{ border-color: var(--ink); }
.editor:empty::before{ content: attr(data-placeholder); color: var(--ink-faint); pointer-events: none; }
.draft-inline-img{ display: block; max-width: 100%; max-height: 320px; margin: 8px 0; border-radius: 6px; cursor: zoom-in; }
.editor .draft-inline-img{ cursor: default; }
.attach-open{ font-family: inherit; cursor: pointer; text-align: left; }
.attach-open:hover{ border-color: var(--ink); }
.attach-list{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.attach-list:empty{ display: none; }
.attach-view{ margin-top: 12px; }
.attach-chip{ display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); font-size: 13px; }
.attach-thumb{ width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.attach-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.attach-size{ color: var(--ink-faint); font-size: 12px; }
.attach-x{ border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-soft); padding: 0 2px; }
.attach-x:hover{ color: var(--ink); }
.editor .draft-inline-img{ cursor: pointer; }
.editor .draft-inline-img.selected{ outline: 3px solid var(--copper-deep, #b8651b); outline-offset: 2px; }
.draft-hint{ font-size: 12px; color: var(--ink-faint); margin: 6px 0 0; }

/* New draft full page */
/* (draft pages now hide #feed-view instead) */
.draft-page{ padding: 40px 0 72px; border-top: none; }
.draft-page-wrap{ max-width: 860px; }
.draft-page-back{ margin-bottom: 14px; }
.draft-page-title{ margin: 0 0 4px; font-size: 32px; }
.draft-page-sub{ margin: 0 0 24px; color: var(--ink-soft); font-size: 14.5px; }
.draft-page .editor{ min-height: 55vh; max-height: none; font-size: 16px; padding: 14px 16px; }
.draft-page .editor .draft-inline-img{ max-height: 520px; }
.draft-page .field input[type=text]{ font-size: 16px; }

.draft-actions-left{ display: flex; gap: 8px; align-items: center; }
.capture-panel{ margin: 4px 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg, 10px); background: var(--paper-raised, #fff); }
.capture-panel > label:first-child{ display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.capture-panel input[type=text]{ width: 100%; box-sizing: border-box; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.capture-opt{ display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.capture-opt input{ margin-top: 3px; }
.capture-row{ margin-top: 14px; }
.capture-status{ margin: 12px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.capture-status.warn{ color: var(--copper-deep, #8a4b12); }

.draft-content-page{ max-height: none; font-size: 16px; padding: 18px 20px; }
.draft-content-page .draft-inline-img{ max-height: 560px; }

/* Photos in the editor: resize, move, wrap */
.editor{ display: flow-root; }
.draft-content{ display: flow-root; }
.img-wrap{ position: relative; display: block; width: fit-content; max-width: 100%; margin: 8px 0; line-height: 0; user-select: none; cursor: grab; }
.img-wrap img{ display: block; max-width: 100%; max-height: 320px; margin: 0; border-radius: 6px; cursor: grab; }
.draft-page .img-wrap img{ max-height: 520px; }
.img-wrap[data-w]{ max-width: none; }
.img-wrap[data-w] img{ width: 100%; max-height: none; }
.img-wrap.a-l, .img-view.a-l{ float: left; margin: 4px 16px 8px 0; }
.img-wrap.a-r, .img-view.a-r{ float: right; margin: 4px 0 8px 16px; }
.img-view{ display: block; line-height: 0; margin: 8px 0; }
.img-view img{ display: block; width: 100%; max-height: none; margin: 0; }
.img-handle{ display: none; position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; background: var(--copper-deep, #b8651b); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; touch-action: none; }
.img-bar{ display: none; position: absolute; left: 6px; top: 6px; gap: 4px; line-height: 1; z-index: 2; }
.img-bar button{ font: 600 12px var(--font-body); padding: 5px 8px; border: 0; border-radius: 6px; background: rgba(30,20,10,.82); color: #fff; cursor: pointer; }
.img-bar button:hover{ background: #000; }
.img-wrap.selected{ outline: 3px solid var(--copper-deep, #b8651b); outline-offset: 2px; }
.img-wrap.selected .img-handle, .img-wrap.selected .img-bar{ display: flex; }
.img-wrap.selected .img-handle{ display: block; }
@media (max-width: 560px){ .img-wrap.a-l, .img-wrap.a-r, .img-view.a-l, .img-view.a-r{ float: none; margin: 8px 0; } }
.editor .img-wrap img.draft-inline-img{ margin: 0; cursor: grab; }
.editor .img-wrap[data-w] img.draft-inline-img{ width: 100%; max-height: none; }
.draft-page .editor .img-wrap:not([data-w]) img.draft-inline-img{ max-height: 520px; }
.draft-content .img-view img.draft-inline-img{ width: 100%; max-height: none; margin: 0; }
/* White title and content boxes on the New and Edit draft pages */
.draft-page .field input[type="text"],
.draft-page .editor,
.draft-page .capture-panel input[type="text"]{ background: var(--paper-raised); }

/* One row: tabs on the left, archive tools on the right */
.archive-tabs{ align-items: center; flex-wrap: wrap; }
.archive-tabs .archive-io{ margin: 0 0 0 auto; justify-content: flex-end; }
@media (max-width: 720px){ .archive-tabs .archive-io{ margin-left: 0; width: 100%; } }

/* =========================================================
   X-STYLE ARCHIVE LAYOUT (profile.html)
   Thin left sidebar + one centered feed column.
   ========================================================= */
.app-shell{
  --side-w: 244px; --feed-w: 640px;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, var(--feed-w));
  justify-content: center;
  column-gap: 12px;
  min-height: 100vh;
  padding: 0 12px;
}
body.drafting .app-shell{ --feed-w: 840px; }

.side{
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overflow-x: visible;
  padding: 10px 6px 18px;
  display: flex; flex-direction: column;
}
.side-logo{ display: block; padding: 8px 12px 14px; width: fit-content; }
.side-logo .logo-full{ height: 34px; width: auto; }
.side-logo .logo-mark{ display: none; height: 44px; width: auto; }
.side-nav{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; }
.side-btn{
  display: flex; align-items: center; gap: 16px;
  padding: 11px 16px; border: 0; background: none; cursor: pointer;
  border-radius: 100px; width: fit-content; max-width: 100%;
  font: 500 17px/1.2 var(--font-body); color: var(--ink); text-decoration: none;
}
.side-btn:hover{ background: var(--hover-07); }
.side-btn.active{ font-weight: 700; }
.side-btn.active .side-ic{ stroke-width: 2.6; }
/* Left menu: the current page is shown with a soft highlight only, so every item keeps the same weight and icon size. */
.side .side-btn.active{ font-weight: 500; background: var(--hover-07); }
.side .side-btn.active .side-ic{ stroke-width: 2; }
/* Wide layout: every item in the left list is the same size. The word is centred; the icon sits at the left. */
@media (min-width: 1021px){
  .side .side-nav > .side-btn{ width: 180px; max-width: 100%; box-sizing: border-box; position: relative; justify-content: center; padding-left: 16px; padding-right: 16px; }
  .side .side-nav > .side-btn .side-ic{ position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
}
.side-ic{ width: 24px; height: 24px; flex: none; }
.side-search-wrap{ display: block; width: 100%; }
.side-search-wrap .side-btn{ width: fit-content; }
/* Right column: Search is exactly as wide and tall as the Login button under it. */
.rside .side-search-wrap .side-btn{ width: calc(100% - 20px); margin: 4px 10px 0; height: 45px; padding: 0 20px; box-sizing: border-box; justify-content: center; position: relative; }
/* The word "Search" is centred exactly (like "Login" below it); the icon sits at the left. */
.rside .side-search-wrap .side-btn .side-ic{ position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
#search-dropdown.search-attached{ padding: 10px; border-radius: 16px; }
#search-dropdown.search-attached .search-input{ width: 100%; box-sizing: border-box; }
#search-dropdown.search-attached.search-wide .search-result{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
#search-dropdown.search-attached.search-wide .sr-title{ flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#search-dropdown.search-attached.search-wide .sr-meta{ flex: none; margin-top: 0; white-space: nowrap; }
.side-post{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: calc(100% - 20px); margin: 14px 10px 6px;
  padding: 14px 20px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--ink); color: var(--paper-raised);
  font: 700 17px/1 var(--font-body);
}
.side-post:hover{ background: var(--seal-deep); }
.side-post .side-ic{ display: none; }
.side-logout{ margin-top: 4px; color: var(--ink-soft); }
.side-logout + .side-logout + .side-post, .side-logout ~ .side-post{ margin-top: 10px; }
.side-nav .profile-dropdown{ left: calc(100% - 8px); right: auto; top: 0; width: 320px; }

.feed{
  min-width: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--paper);
  min-height: 100vh;
}
.feed-head{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--glass-88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.feed-head h1{ margin: 0; font: 600 20px/1.2 var(--font-display); }
.feed-head .archive-io-msg{ font-size: 12.5px; color: var(--ink-soft); }

.profile-card{ position: relative; padding: 20px 20px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }
.profile-card-edit{ position: absolute; top: 16px; right: 16px; z-index: 5; }
.profile-card .archive-profile-info{ border: 0; padding: 0; margin: 0; background: none; border-radius: 0; padding-right: 110px; }

#entries-list .post-card{
  margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--paper-raised); padding: 14px 20px 10px;
}
#entries-list .post-card.is-clickable{ cursor: pointer; }
#entries-list .post-card.is-clickable:hover{ background: var(--hover-card); }
#entries-list .post-card.is-draft:hover{ border-color: var(--line); }
.pc-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.pc-who{ display: flex; align-items: baseline; gap: 6px; font-size: 14.5px; min-width: 0; flex-wrap: wrap; }
.pc-who .post-author-link{ font-weight: 700; color: var(--ink); }
.pc-dot, .pc-date{ color: var(--ink-faint); font-size: 13.5px; }
.pc-seals{ display: inline-flex; gap: 4px; flex: none; }
.pc-seals img{ width: 36px; height: 36px; }
.pc-seals img.is-pending{ opacity: .35; filter: grayscale(.6); }
.pc-label{
  flex: none; font: 600 12px/1 var(--font-body); color: var(--copper-deep);
  border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: 6px 10px;
}
.pc-label.pending{ color: var(--ink-soft); }
#entries-list .post-card .post-title{ font: 600 19px/1.3 var(--font-display); margin: 4px 0 6px; word-break: break-word; }
.post-title-link{ color: var(--ink); text-decoration: none; }
a.post-title-link:hover{ text-decoration: underline; }
.pc-preview{
  margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#entries-list .stack-steps{ margin: 8px 0 4px; }
.pc-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.pc-info{ min-width: 0; flex: 1; }
#entries-list .pc-info .post-meta{ margin: 0 0 6px; }
.pc-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pc-foot .star-btn{ position: static; flex: none; padding: 6px; }
.pc-foot .star-btn svg{ width: 20px; height: 20px; }
#entries-list .empty-inline{ padding: 48px 20px; }

body.drafting #feed-view{ display: none; }
.feed .draft-page{ padding: 24px 0 64px; }
.feed .draft-page .wrap{ max-width: none; padding: 0 22px; }
.feed .draft-page .draft-page-wrap{ max-width: none; }

/* Medium screens: icon-only sidebar */
@media (max-width: 1020px){
  .app-shell{ --side-w: 76px; }
  .side-logo{ padding: 8px 10px 14px; }
  .side-logo .logo-full{ display: none; }
  .side-logo .logo-mark{ display: block; }
  .side-btn{ padding: 12px; }
  .side-btn span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-post{ width: 52px; height: 52px; padding: 0; margin: 12px 0 6px 4px; }
  .side-post .side-ic{ display: block; width: 24px; height: 24px; }
  .side-post span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .side-nav .profile-dropdown{ left: 56px; }
}
/* Phones: sidebar becomes a bottom bar */
@media (max-width: 700px){
  .app-shell{ display: block; padding: 0 0 70px; }
  .side{
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; height: auto;
    padding: 6px 8px; background: var(--paper); border-top: 1px solid var(--line);
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
  }
  .side-logo{ display: none; }
  .side-nav{ flex-direction: row; align-items: center; gap: 2px; width: max-content; }
  .side-search-wrap{ width: auto; position: static; }
  .side-post{ margin: 0 4px; flex: none; width: 48px; height: 48px; }
  .side-logout{ margin: 0; order: 20; }
  .side-nav .profile-dropdown{ position: fixed; left: 12px; right: 12px; top: auto; bottom: 74px; width: auto; max-width: none; }
  .feed{ border: 0; }
  .feed-head{ padding: 12px 16px; }
  .profile-card .archive-profile-info{ padding-right: 0; }
  .profile-card{ padding-top: 56px; }
  .profile-card-edit{ top: 12px; }
  #entries-list .post-card{ padding: 12px 16px 8px; }
}

/* layout fixes: dropdowns must not be clipped by the sidebar; profile rows fit */
.side{ overflow: visible; }
@media (max-height: 620px) and (min-width: 701px){ .side{ overflow-y: auto; } }
.profile-row input{ min-width: 0; }
.profile-row .btn{ flex: none; }
.profile-card-edit .profile-dropdown{ width: 360px; }

/* Sidebar pop-ups (Search) must sit in front of the feed */
.side{ z-index: 50; }

/* Emoji picker */
.emoji-pop{
  position: fixed; z-index: 300; width: 340px; max-width: calc(100vw - 16px);
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 18px 36px -16px rgba(28,20,10,.35); padding: 10px;
}
.emoji-search{
  width: 100%; font: 14px var(--font-body); padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.emoji-search:focus{ outline: none; border-color: var(--copper-deep); }
.emoji-tabs{ display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 4px; }
.emoji-tab{ flex: 1; border: 0; background: none; cursor: pointer; font-size: 17px; padding: 5px 0; border-radius: 6px; opacity: .6; }
.emoji-tab:hover{ background: var(--hover-07); opacity: 1; }
.emoji-tab.active{ background: var(--hover-10); opacity: 1; }
.emoji-title{ font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 4px 6px; min-height: 22px; }
.emoji-grid{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; height: 232px; overflow-y: auto; align-content: start; }
.emoji-item{ border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 6px; }
.emoji-item:hover{ background: var(--hover-09); }
.emoji-empty{ grid-column: 1 / -1; margin: 18px 6px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.emoji-tones{ display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; font-size: 12px; color: var(--ink-soft); }
.emoji-tones span{ margin-right: auto; }
.tone-dot{ width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.tone-dot.active{ border-color: var(--ink); }
.bio-foot .emoji-btn{ padding: 4px 10px; font-size: 16px; }
.bio-foot .hint{ margin-right: auto; margin-left: 10px; }

/* =========================================================
   ONE HOME PAGE: left menu, centre feed, right menu
   ========================================================= */
.app-shell{ --rside-w: 244px; grid-template-columns: var(--side-w) minmax(0, var(--feed-w)) var(--rside-w); }
.rside{
  position: sticky; top: 0; align-self: start; height: 100vh; z-index: 50;
  padding: 10px 6px 18px; display: flex; flex-direction: column; justify-content: flex-start;
}
.rside .side-nav{ padding-top: 8px; }
.rside .side-btn.active{ font-weight: 700; background: var(--hover-07); }
.rside-cta{ text-decoration: none; }
.side-post{ text-decoration: none; }
a.side-post span{ display: inline; }
.shell-center{ min-width: 0; }

/* Visitors vs. logged-in people */
body:not(.is-auth) .when-in{ display: none !important; }
body.is-auth .when-out{ display: none !important; }
body.hide-login-cta .when-login{ display: none !important; }
body:not([data-auth-ready]) .when-in, body:not([data-auth-ready]) .when-out{ visibility: hidden; }

.welcome-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.profile-card .archive-profile-info .handle{ font-size: 24px; }
.info-page{ padding: 0; }
.info-page .legal, .info-page .info-embed{ padding-top: 36px; }
.info-loading{ padding: 40px 24px; color: var(--ink-faint); }
body.infopage #feed-view, body.infopage #draft-page{ display: none; }
body.drafting #info-page{ display: none; }
.info-page .info-back{ margin: 18px 22px 0; }

/* Standalone pages (About, FAQ, Verify, ...) share the same frame */
.app-shell.shell-wide{ --feed-w: 760px; }
.shell-center.feed{ border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.shell-center .legal, .shell-center .verify-wrap, .shell-center .sh-wrap, .shell-center .bsv-viewer-wrap{ padding-left: 24px; padding-right: 24px; }

.side-post.draft-cta, .side-post.create-cta{ background: #F7931A; color: var(--ink); }
.side-post.draft-cta:hover, .side-post.create-cta:hover{ background: #DA8217; }
.side-post.create-cta{ margin-top: 6px; }

/* Narrower windows: the right menu becomes a strip above the feed */
@media (max-width: 1179px){
  .rside .side-search-wrap .side-btn{ width: auto; margin: 0; height: auto; padding: 8px 9px; box-sizing: content-box; justify-content: flex-start; position: static; }
  .rside .side-search-wrap .side-btn .side-ic{ position: static; transform: none; }
  .app-shell{ grid-template-columns: var(--side-w) minmax(0, var(--feed-w)); grid-template-rows: auto 1fr; }
  .side{ grid-row: 1 / span 2; }
  .rside{
    grid-column: 2; grid-row: 1; position: static; height: auto; padding: 8px 12px; z-index: auto;
    border: 1px solid var(--line); border-bottom: 0; background: var(--paper-raised);
  }
  .feed, .shell-center{ grid-column: 2; grid-row: 2; }
  .rside .side-nav{ flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding-top: 0; }
  .rside .side-btn{ padding: 8px 9px; font-size: 14.5px; gap: 8px; }
  .rside .side-btn .side-ic{ width: 20px; height: 20px; }
  .rside .side-post{ width: auto; margin: 0 0 0 auto; padding: 9px 18px; font-size: 15px; }
  .rside .side-post .side-ic{ display: none; }
  .rside .side-post span, .rside .side-btn span{ position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
}
@media (max-width: 700px){
  .app-shell{ display: flex; flex-direction: column; padding-left: 0; padding-right: 0; }
  .rside{ order: -1; border-left: 0; border-right: 0; position: static; width: 100%; }
  .rside .side-nav{ width: 100%; }
  .rside .side-btn span{ position: static; width: auto; height: auto; clip: auto; }
  .rside .side-btn{ padding: 8px 10px; font-size: 14px; }
  .rside .side-btn .side-ic{ display: none; }
  .rside .side-post{ margin: 0 0 0 auto; width: auto; height: auto; padding: 9px 16px; }
}

/* Wallets found in this browser are highlighted */
.wallet-choice.detected{ border-color: #4C9A5F; background: var(--tint-ok); }
.wallet-choice.detected .wc-note{ color: #2F6B40; font-weight: 600; }
.wallet-choice.selected{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

/* ---- Wallet help (Seal pop-up) ---- */
.wallet-choice .wc-chain{ font-size:11px; font-weight:600; color:var(--ink-faint); border:1px solid var(--line,#ddd); border-radius:999px; padding:0 6px; margin-left:4px; }
.wallet-choice.detected > span:last-child{ font-size:12.5px; font-weight:700; color:#2F6B40; }
.wallet-help{ margin-top:8px; font-size:13px; }
.wallet-help summary{ cursor:pointer; font-weight:600; }
.wallet-help .wh-steps{ margin:8px 0 8px 18px; padding:0; line-height:1.5; }
.wallet-help .wh-small{ margin:8px 0 2px; color:var(--ink-faint); font-size:12px; }
.wallet-help .wh-list{ margin:0 0 8px 18px; padding:0; font-size:12px; }
.wallet-help .ok{ color:#2F6B40; }
.wallet-help .wh-warn{ background:var(--tint-amber); border:1px solid var(--tint-amber-line); border-radius:8px; padding:8px 10px; margin:0 0 8px; }

.wallet-choice .wc-btn{ font-size:13px; font-weight:700; padding:6px 14px; border-radius:999px; background:var(--ink,#222); color:var(--on-ink); white-space:nowrap; }
.wallet-choice.connected{ border-color:#4C9A5F; background:var(--tint-ok); box-shadow:0 0 0 1px #4C9A5F; }
.wallet-choice.connected .wc-note{ color:#2F6B40; font-weight:600; }
.wallet-choice.connected .wc-btn{ background:#4C9A5F; }

.wallet-choice .wc-dl{ display:inline-block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--copper,#B5651D); text-decoration:underline; }

/* ---- Wallet guide ---- */
.wallet-guide-btn{ margin-top:6px; }
.flow{ list-style:none; margin:8px 0 0; padding:0; }
.flow-step{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line,#ddd); border-radius:12px; padding:12px 14px; background:var(--paper,#fff); }
.flow-step.done{ border-color:#4C9A5F; background:var(--tint-ok); }
.flow-num{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--ink,#222); color:var(--on-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.flow-step.done .flow-num{ background:#4C9A5F; }
.flow-step p{ margin:4px 0 0; font-size:13.5px; line-height:1.45; }
.flow-links a{ font-weight:600; }
.flow-warn{ background:var(--tint-amber); border:1px solid var(--tint-amber-line); border-radius:8px; padding:6px 9px; }
.flow-arrow{ text-align:center; font-size:20px; line-height:22px; color:var(--ink-faint,#888); }
.flow-note{ font-size:12.5px; color:var(--ink-faint,#888); margin:12px 0 0; }
#wallet-guide-overlay .modal{ max-height:90vh; overflow-y:auto; }

.flow-step p a{ font-weight:600; text-decoration:underline; }

/* ---- Verification row in feed cards ---- */
.post-card .post-meta .vchk{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body,inherit); font-size:12.5px; color:var(--ink); }
.post-card .post-meta .vchk i{ font-style:normal; width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex:none; }
.vchk.btc i{ background:#F7931A; }
.vchk.bsv i{ background:#EAB300; }
.vchk.pending{ color:var(--copper-deep); }
.vchk.pending i{ background:var(--paper-raised); border:1.5px solid var(--copper); color:var(--copper); }

/* ---- Nostr status next to "Share to Nostr" (combined records) ---- */
.nostr-tag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; }
.nostr-tag i{ font-style:normal; width:16px; height:16px; border-radius:50%; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex:none; }
.nostr-tag.optional{ color:var(--ink-faint); }
.nostr-tag.optional i{ border:1.5px dashed var(--ink-faint); }
.nostr-tag.done{ color:var(--ink); font-weight:600; }
.nostr-tag.done i{ background:#F7931A; color:#fff; }

/* ---- Personal archive | All tabs (like x.com's For you | Following) ---- */
.feed-tabs{ display:none; position:sticky; top:0; z-index:21; grid-template-columns:repeat(4,1fr); background:var(--glass-92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
body.has-tabs .feed-tabs{ display:grid; }
.feed-tab{ position:relative; background:none; border:0; padding:16px 8px; font:600 15px/1.2 var(--font-body); color:var(--ink-soft); cursor:pointer; }
.feed-tab + .feed-tab{ border-left:1px solid var(--line); }
.feed-tab:hover{ background:var(--hover-04); }
.feed-tab.active{ color:var(--ink); }
.feed-tab.active::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:56px; height:4px; border-radius:4px; background:#F7931A; }
body.has-tabs .feed-head{ position:static; display:block; padding:0; border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
body.has-tabs .feed-head h1{ display:none; }
body.has-tabs .feed-head .archive-io-msg{ display:block; padding:8px 20px; }
body.has-tabs .feed-head .archive-io-msg:empty{ display:none; }
body.drafting .feed-tabs, body.infopage .feed-tabs{ display:none; }

/* Search box floats above everything (it is moved to <body> when opened) */
#search-dropdown.search-floating{ position:fixed; z-index:5000; max-width:none; box-sizing:border-box; padding:14px; }

.post-card .post-meta .vchk .vblock{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-left:2px; }

/* About page: short, post-sized sections */
.about-posts .lead{ font-size:18px; line-height:1.6; color:var(--ink); }
.about-posts h2{ margin:26px 0 6px; font-size:20px; }
.about-posts h2 + p{ margin-top:0; font-size:16.5px; line-height:1.6; }
.about-posts .about-more{ margin-top:28px; padding-top:16px; border-top:1px solid var(--line); }
.faq-posts p strong{ color:var(--ink); }

.faq-posts .faq-steps{ margin:4px 0 8px 20px; padding:0; color:var(--ink-soft); font-size:16.5px; line-height:1.6; }
.faq-posts .faq-steps li{ margin:2px 0; }

.faq-posts h3{ margin:20px 0 4px; font:600 16.5px/1.3 var(--font-display); color:var(--ink); }
.faq-posts .faq-note{ font-size:14px; color:var(--ink-faint); margin:0 0 6px; }
.faq-posts p{ font-size:16.5px; line-height:1.6; }

/* ---- Share to X ---- */
#x-note{ width:100%; box-sizing:border-box; font:inherit; padding:10px 12px; border:1px solid var(--line, #ddd); border-radius:10px; background:var(--card, #fff); color:var(--ink); resize:vertical; }
.x-count{ text-align:right; font-size:12.5px; color:var(--ink-faint); margin-top:4px; }
.x-count.over{ color:#c0392b; font-weight:700; }
#x-post:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Seal warning pop-up ---- */
.seal-warn{ max-width:420px; text-align:center; }
.seal-warn h3{ margin:0 0 6px; }
.seal-warn .seal-warn-lead{ font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); margin:0 0 10px; }
.seal-warn p{ color:var(--ink-soft); line-height:1.55; margin:0 0 10px; }
.seal-warn-actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
.seal-warn-actions .btn{ min-width:130px; }

/* ---- Terms checkbox on Create account ---- */
.terms-check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--ink-soft); margin:2px 0 14px; cursor:pointer; }
.terms-check input{ margin-top:3px; width:17px; height:17px; accent-color:#F7931A; flex:none; }
.terms-check a{ color:var(--copper-deep); text-decoration:underline; }
#signup-submit:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Pre-seal check and Review queue ---- */
.seal-warn h3{ margin:0 0 8px; }
.mod-rule{ font-size:14px; }
.mod-fine, .mod-note{ font-size:13px; color:var(--ink-faint); }
.mod-note{ color:var(--ink-soft); font-weight:600; }
.review-modal{ max-width:640px; width:calc(100% - 32px); max-height:86vh; overflow:auto; }
.rq-item{ border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:12px 14px; margin-bottom:10px; }
.rq-top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.rq-state{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--copper-deep); }
.rq-blocked .rq-state{ color:#c0392b; }
.rq-removed{ opacity:.65; }
.rq-meta{ font-size:12.5px; color:var(--ink-faint); margin:3px 0 6px; }
.rq-reason{ font-size:13.5px; color:var(--ink); margin-bottom:6px; }
.rq-text{ font-size:13px; color:var(--ink-soft); background:var(--paper); border-radius:8px; padding:8px 10px; white-space:pre-wrap; word-break:break-word; max-height:140px; overflow:auto; }
.rq-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

.seal-warn .seal-agree{ text-align:left; margin:14px 0 0; }
#seal-warn-go:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Footer: copyright left, logo centre, links right ---- */
footer.zhero-footer .zhero-footer-wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; }
.zhero-copyright{ position:static; bottom:auto; right:auto; justify-self:start; }
.zhero-footer-logo-link{ display:block; align-self:center; line-height:0; }
.zhero-footer-nav{ justify-self:end; display:flex; gap:16px; margin:0 0 6px; }
.zhero-footer-nav a{ font-family:Arial, Helvetica, sans-serif; font-weight:300; font-size:11.5px; color:var(--ink-faint); text-decoration:none; }
.zhero-footer-nav a:hover{ text-decoration:underline; }
@media (max-width: 700px){
  footer.zhero-footer .zhero-footer-wrap{ display:flex; flex-direction:column; align-items:center; }
  .zhero-copyright{ justify-self:auto; }
}

/* ---- More pop-up ---- */
#more-menu{ display:none; position:fixed; z-index:5000; min-width:230px; padding:8px; background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px rgba(46,32,19,.18); flex-direction:column; gap:2px; }
#more-menu.open{ display:flex; }
#more-menu .side-btn{ width:100%; font-size:16px; padding:10px 14px; }
.zhero-copyright{ margin:0 0 6px; }
#more-menu .side-btn span{ position:static !important; width:auto !important; height:auto !important; overflow:visible !important; clip:auto !important; white-space:nowrap; }
#more-menu .side-btn{ padding:10px 14px !important; }

.archive-io-msg .io-msg-x{ margin-left:10px; border:0; background:none; cursor:pointer; font-size:18px; line-height:1; color:var(--ink-faint); padding:0 4px; vertical-align:middle; }
.archive-io-msg .io-msg-x:hover{ color:var(--ink); }

/* ---- Delete account ---- */
.profile-danger{ border-top:1px solid var(--line); padding-top:12px; margin-top:4px; text-align:left; }
.btn-danger{ background:#B3382C; color:#fff; border:0; }
.btn-danger:hover{ background:#982E24; }

#more-menu .more-danger{ color:#B3382C; margin-top:4px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; }

/* Centre the labels of the buttons in the Before you seal (and similar) pop-ups */
.seal-warn-actions .btn{ justify-content:center; text-align:center; }

/* Timestamp only option */
.rec-badge.rec-free{ background:#2F7D4F; }
.mode-tab.is-disabled,.mode-tab:disabled{ opacity:.45; cursor:not-allowed; }
.ts-limit-msg{ margin:8px 2px 0; font-size:13px; color:var(--copper-deep); }
.ts-left-line{ font-size:13px; }
.ts-limits{ margin-top:10px; font-size:13px; line-height:1.55; text-align:left; }
.ts-limits strong:first-child{ display:block; margin-bottom:2px; }
.post-stamp img.is-pending{ opacity:.35; filter:grayscale(.6); }
.post-card .post-meta .fp-tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }

/* Proof-only card: a hash or timestamp seal whose author kept the text private. */
.post-card.is-proof-only .proof-title{ color: var(--ink-soft); font-weight: 600; }
.post-card.is-proof-only .pc-preview{ color: var(--ink-faint); }

.profile-card .welcome-lead{ font-size: 16.5px; color: var(--ink); font-weight: 500; }
.profile-card .bio + .bio{ margin-top: 10px; }
.profile-card .welcome-close{ font-style: italic; color: var(--ink-soft); }

/* Back link at the top of record pages */
.back-link{ display:inline-flex; align-items:center; gap:6px; margin: 0 0 18px; font-weight:600; font-size:14px; color: var(--ink-soft); text-decoration:none; }
.back-link svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.back-link:hover{ color: var(--ink); }

/* Visitors have no Edit profile button, so the welcome text can use the full width of the box. */
body:not(.is-auth) .profile-card .archive-profile-info{ padding-right: 0; }
.profile-card .welcome-lead{ font-weight: 400; line-height: 1.65; }

/* Invite people (Shared visibility) */
.invite-box .invite-row{ display:flex; gap:8px; }
.invite-box .invite-row input{ flex:1; min-width:0; }
.invite-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.invite-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--paper-raised); font-size:13px; color:var(--ink); }
.invite-chip.is-email{ border-style:dashed; }
.invite-chip small{ color:var(--ink-faint); font-size:11px; }
.invite-chip button{ border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:16px; line-height:1; padding:0 4px; }
.invite-chip button:hover{ color:var(--copper-deep); }
.invite-suggest{ margin:10px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.9; }
.invite-suggest button{ border:1px solid var(--line); background:none; color:var(--ink-soft); border-radius:999px; padding:2px 9px; font:inherit; font-size:12px; cursor:pointer; margin:0 4px 0 0; }
.invite-suggest button:hover{ color:var(--ink); background:var(--hover-04); }
.invite-err{ margin:8px 0 0; font-size:12px; color:#b4442b; }
.bs-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); max-width:min(92vw,460px); background:var(--ink); color:var(--paper); padding:11px 16px; border-radius:10px; font-size:14px; line-height:1.4; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.25); }
@media (max-width:560px){ .feed-tab{ font-size:13px; padding:14px 4px; } }
.new-tag{ display:inline-block; padding:1px 7px; border-radius:999px; background:#F7931A; color:#fff; font:700 11px/1.5 var(--font-body); letter-spacing:.02em; }
.post-card .post-meta .vis-tag, .post-card .post-meta .enc-tag{ font-family:var(--font-body,inherit); font-size:12px; line-height:1.5; padding:0 9px; border:1px solid var(--line); border-radius:999px; color:var(--copper-deep); }
.post-card{ scroll-margin-top:70px; }
@keyframes bsHit{ 0%,60%{ background:rgba(247,147,26,.22); } 100%{ background:transparent; } }
.post-card.search-hit{ animation:bsHit 2.4s ease-out 1; }
/* Login and Create account are the same size */
.rside .side-post.rside-cta{ box-sizing:border-box; }
@media (max-width:1179px){ .rside .side-post.rside-cta{ min-width:160px; } .rside .side-post.create-cta{ margin:0 0 0 8px; } }

/* Verify / Share buttons at the bottom of a record page */
.rec-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.rec-dd{ position:relative; }
.rec-caret{ font-size:11px; margin-left:4px; }
.rec-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:270px; padding:8px; background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 30px rgba(46,32,19,.18); flex-direction:column; gap:2px; }
.rec-dd.open .rec-menu{ display:flex; }
.rec-menu .rec-item{ display:block; width:100%; box-sizing:border-box; text-align:left; background:none; border:0; border-radius:10px; padding:10px 14px; font:500 15px/1.3 var(--font-body); color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap; }
.rec-menu .rec-item:hover{ background:var(--hover-04); }

/* Features switched off in js/config.js stay hidden */
[data-feature][hidden]{ display:none !important; }

/* Logged out: Search is hidden, so Login sits where Search was (wide layout). */
@media (min-width:1180px){ body:not(.is-auth) .rside #login-cta{ margin-top:4px; } }

/* Download button: top right, above the content box on record pages */
.rec-top{ display:flex; justify-content:flex-end; margin:0 0 10px; }
.rec-top:empty{ display:none; }
.rec-top .rec-download{ display:inline-flex; align-items:center; gap:8px; }
.rec-top .rec-download svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Around Bitcoin spotlight (All feed) */
.spot{position:relative;background:var(--tint-gold);border:1px solid var(--tint-gold-line);border-radius:6px;padding:16px 18px 14px;margin:14px 16px 12px;overflow:hidden}
.spot[hidden]{display:none}
.spot-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.spot-label{font:600 11px/1 var(--sans,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep)}
.spot-dots{display:flex;gap:6px}.spot-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--tint-gold-line);cursor:pointer}.spot-dots button[aria-current="true"]{background:var(--copper)}
.spot-slide{display:none;gap:14px;align-items:flex-start}.spot-slide.on{display:flex;animation:spotfade .45s ease}
@keyframes spotfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.spot-badge{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--tint-gold-line);display:grid;place-items:center;background:#fff}
.spot-badge img{width:28px;height:28px;object-fit:contain}
.spot-badge.wide{width:72px;border-radius:26px}.spot-badge.wide img{width:46px;height:auto}
.spot-slide h3{margin:0 0 2px;font-size:17px;color:var(--ink)}
.spot-tag{color:var(--ink-soft);margin:0 0 12px;font-size:14px}
.spot-btn{display:inline-block;font-weight:600;font-size:13px;padding:8px 14px;border-radius:3px;border:1px solid var(--copper);color:var(--copper-deep);text-decoration:none;background:transparent}
.spot-btn:hover{background:var(--copper);color:#fff}
.spot-note{font-size:12px;color:var(--ink-faint);margin-top:8px}
.spot-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--copper);width:0}
.spot-bar.run{animation:spotrun 8s linear forwards}@keyframes spotrun{to{width:100%}}
@media (max-width:520px){.spot{margin:12px 12px 10px;padding:14px}.spot-slide{gap:10px}}

/* Profile picture (circle, about the size of the one on an x.com profile) */
.avatar{flex:none;border-radius:50%;overflow:hidden;background:var(--tint-gold);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-faint)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar svg{width:56%;height:56%;fill:currentColor}
.avatar-lg{width:104px;height:104px}
.avatar-md{width:72px;height:72px}
.prof-top{display:flex;align-items:center;gap:18px;margin:0 0 14px}
.prof-id{min-width:0}
.prof-id .handle{margin:0 0 4px !important;overflow-wrap:anywhere}
.prof-id .joined{margin:0 !important}
.avatar-edit{display:flex;align-items:center;gap:14px}
.avatar-edit-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.avatar-edit-actions{display:flex;gap:8px;flex-wrap:wrap}
.avatar-edit-side .hint{font-size:12px}
@media (max-width:520px){.avatar-lg{width:80px;height:80px}.prof-top{gap:14px}}

/* small author picture on feed cards, and the "Show more" button */
.avatar-xs{width:40px;height:40px;align-self:center;margin-right:4px}
.pc-who{align-items:center}
.feed-more{display:flex;justify-content:center;padding:18px 0 6px}
.feed-more:empty{display:none}

.draft-video{display:block;max-width:100%;max-height:70vh;margin:12px 0;border-radius:10px;background:#000}
.attach-vid{flex:0 0 100%;margin:8px 0}.attach-vid .draft-video{margin:0 0 6px;max-height:40vh}.attach-vid-cap{display:flex;align-items:center;gap:8px;font-size:.9em}

/* Phones: a Bitseal logo in the top bar leads home from every page; the bottom bar no longer covers the footer */
.mobile-logo{display:none}
@media (max-width:700px){
  .side .side-nav{min-width:100%;box-sizing:border-box}
  .mobile-logo{display:flex;align-items:center;justify-content:center;flex:1 0 auto;padding:0 10px 0 6px}
  .info-page .feed-head{display:none}
  .mobile-logo img{height:24px;width:auto;display:block}
  #v-back{display:none}
  .app-shell{padding-bottom:0}
  body{padding-bottom:84px}
}
@media (max-width:700px){
  footer.zhero-footer .zhero-footer-wrap{ height:auto; gap:14px; padding:26px 16px 22px; box-sizing:border-box; width:100%; }
  footer.zhero-footer .zhero-footer-logo-link{ order:1; align-self:center; }
  footer.zhero-footer .zhero-footer-logo{ margin-top:0; height:44px; }
  footer.zhero-footer .zhero-footer-nav{ order:2; justify-self:auto; justify-content:center; flex-wrap:wrap; margin:0; }
  footer.zhero-footer .zhero-copyright{ order:3; position:static; text-align:center; margin:0; }
}
/* Phones: the Verify page's (i) tip spans the page width, so it can never push the page wider than the screen */
@media (max-width:700px){
  .verify-wrap{ position:relative; }
  .verify-wrap .v-info{ position:static; }
  .verify-wrap .v-info::after{ top:auto; margin-top:24px; left:24px; right:24px; width:auto; max-width:none; transform:none; }
}

/* Phones: the bottom bar is the same logged in or out (Learn, Verify, More, Draft, logo); Personal lives in the tabs at the top and Logout moves into More */
#more-menu .more-logout{ display:none; }
@media (max-width:700px){
  .side .side-nav > [data-archive-scope="personal"], .side #logout-btn{ display:none !important; }
  #more-menu .more-logout{ display:flex; }
}

/* YouTube Play button on drafts that hold a YouTube link */
.yt-play{margin:14px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.yt-play-note{font-size:12.5px;color:var(--ink-faint)}
.yt-frame{width:100%;max-width:720px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.yt-frame iframe{width:100%;height:100%;border:0;display:block}

/* Categories */
.category-bar{margin:0 0 14px;padding:10px 0 12px;border-bottom:1px solid var(--border,rgba(128,128,128,.25));}
.cat-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:8px;}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;}
.cat-chip{font:inherit;font-size:14px;padding:6px 12px;border-radius:999px;border:1px solid var(--border,rgba(128,128,128,.4));background:transparent;color:inherit;cursor:pointer;}
.cat-chip:hover{border-color:currentColor;}
.cat-chip.active{background:var(--orange,#f7931a);border-color:var(--orange,#f7931a);color:#fff;}
.cat-chip .cat-n{opacity:.7;font-size:12px;margin-left:4px;}
.cat-chip.cat-add{border-style:dashed;opacity:.85;}
.cat-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.cat-pick select{min-width:180px;max-width:100%;}
.cat-new{gap:6px;align-items:center;}
.cat-new input{min-width:0;width:180px;}
.cat-tag{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--border,rgba(128,128,128,.4));font-size:12px;}
.cat-rows{display:flex;flex-direction:column;gap:6px;margin:12px 0;max-height:45vh;overflow:auto;}
.cat-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border,rgba(128,128,128,.3));border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;}
button.cat-row{cursor:pointer;}
.cat-row.current{border-color:var(--orange,#f7931a);}
.cat-row small{opacity:.6;margin-left:6px;}
.cat-row-btns{display:flex;gap:12px;}
.cat-del{color:#d33;}
.cat-create{margin-top:8px;}
@media (max-width:700px){.cat-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;}.cat-chip{white-space:nowrap;flex:0 0 auto;}}