/* MorseHub landing page and admin panel. Loads after app.css; every color comes from tokens.css.
   Quiet Threads paper with Signal's one blue (DESIGN.md "Landing and admin"). */

.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn { text-decoration: none; }
.opt { font-weight: 400; color: var(--ink-3); }
.quiet { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- landing ---------- */
.landing { --page: 1040px; min-height: 100%; }
.site-bar {
  height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4);
}
#landing-main { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4) 64px; }
.bar-links { display: flex; align-items: center; gap: var(--s2); }
.bar-link {
  min-height: var(--tap); padding: 0 var(--s3); display: inline-flex; align-items: center; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: none;
  transition: background var(--fast) var(--ease);
}
.bar-link[aria-current="page"] { color: var(--accent); }
.bar-link:active { background: color-mix(in srgb, var(--ink) 10%, var(--wash)); }
a.wordmark { color: var(--ink); text-decoration: none; min-height: var(--tap); border-radius: var(--r-row); }
#landing-main:focus { outline: none; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center;
  padding: 72px 0 88px;
}
/* The typing mark above the headline: the product's own "someone is writing" moment. */
.hero-mark { width: 48px; height: 48px; color: var(--accent); margin-bottom: var(--s6); }
.hero h1 {
  font-size: clamp(32px, 4.6vw, 46px); line-height: 1.08; font-weight: 650; letter-spacing: -0.025em;
  max-width: 14ch; text-wrap: balance;
}
.lede { margin-top: var(--s5); font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: 32px; }
.hero .note { margin-top: var(--s4); }
code.inline { font-size: .875em; background: var(--wash); border-radius: var(--r-tail); padding: 1px 5px; overflow-wrap: anywhere; }

/* The one picture: MorseHub as it looks, drawn from the app's own parts. */
.demo { margin: 0; }
.demo-card { overflow: hidden; max-width: 440px; margin-left: auto; }
.demo-head {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3) var(--s2) var(--s4);
  border-bottom: 1px solid var(--line);
}
.demo-who { flex: 1; min-width: 0; display: grid; }
.demo-name { font-weight: 600; }
.demo-head .pill { max-width: none; }
.demo-body { display: flex; flex-direction: column; padding: var(--s2) var(--s4) var(--s4); min-height: 236px; justify-content: flex-end; }
.demo-stamp { align-self: center; font-size: var(--t-meta); color: var(--ink-3); margin: var(--s4) 0 var(--s3); }
.demo-stamp strong { font-weight: 600; }
.demo-b {
  max-width: 78%; padding: var(--s2) var(--s3); border-radius: var(--r-bubble); line-height: var(--lh);
}
.demo-b + .demo-b { margin-top: 2px; }
.demo-b.in { align-self: flex-start; background: var(--wash); }
.demo-b.in.tail { border-bottom-left-radius: var(--r-tail); }
.demo-b.out { align-self: flex-end; background: var(--accent-fill); color: var(--on-accent); margin-top: var(--s3); }
.demo-b.out.tail { border-bottom-right-radius: var(--r-tail); }
.demo-meta { align-self: flex-end; font-size: var(--t-meta); color: var(--ink-3); margin: var(--s1) var(--s1) 0; }
.demo-compose {
  display: flex; align-items: center; justify-content: space-between; margin: 0 var(--s3) var(--s3);
  height: var(--tap); padding: 0 6px 0 var(--s4); border-radius: 22px; background: var(--wash); color: var(--ink-2);
}
.demo-send { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; }
.demo-send .icon { width: 18px; height: 18px; }
/* The authored moment: the reply goes out the way it does in the app. Outlined while it travels to
   the phone ("Sending"), filled once the phone has it. The resting state is the finished one. */
.demo-meta { display: grid; justify-items: end; }
.demo-meta > span { grid-area: 1 / 1; }
.m-sending { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .landing:not([hidden]) .demo-b.out { animation: demo-send 900ms cubic-bezier(.16, 1, .3, 1) 600ms both; }
  .landing:not([hidden]) .m-sending { animation: demo-unswap 900ms linear 600ms both; }
  .landing:not([hidden]) .m-sent { animation: demo-swap 900ms linear 600ms both; }
  @keyframes demo-send {
    0% { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(8px); }
    40% { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); transform: none; }
    100% { background: var(--accent-fill); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-fill); transform: none; }
  }
  @keyframes demo-swap { 0%, 39% { visibility: hidden; } 40%, 100% { visibility: visible; } }
  @keyframes demo-unswap { 0%, 39% { visibility: visible; } 40%, 100% { visibility: hidden; } }
}

/* Sections: a heading column and a reading column, divided by Threads hairlines. No cards as structure. */
.sect {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6);
  padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: var(--s4);
}
.sect:focus { outline: none; }
.sect h2 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.sect-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); max-width: 62ch; min-width: 0; align-content: start; }
.sect-body > p { line-height: 1.55; }
.sect-body strong { font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s5); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--s3); line-height: 1.55; }
.steps li::before {
  content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: var(--r-pill);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: var(--t-meta); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); margin-top: -1px;
}
.steps strong { font-weight: 600; }
.steps span { color: var(--ink-2); }

/* Tables: the supported phones and the prices. Hairline rows, no cards. */
.phones, .prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.phones caption { display: table-caption; caption-side: top; text-align: left; margin: 0 0 var(--s2); }
.phones th, .phones td, .prices th, .prices td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.phones td:last-child, .prices td:last-child { padding-right: 0; }
.phones thead th, .prices thead th { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); padding-top: 0; padding-bottom: var(--s2); }
.phones tbody th, .prices tbody th { font-weight: 600; }
.phones tbody th, .prices thead th { white-space: nowrap; }
.phones td { color: var(--ink-2); }
.prices td { color: var(--ink-2); }
.prices .amt { color: var(--ink); font-weight: 600; }
.prices tr.past th, .prices tr.past td, .prices tr.past .amt { color: var(--ink-3); }
.founder-left { font-weight: 600; }
.trial-note { font-weight: 600; }
.subscribe-box { display: grid; gap: var(--s3); justify-items: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.sent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.sent-row p { font-weight: 600; }
.sent-row p:focus { outline: none; }
.code-in { letter-spacing: .12em; }
.done-body { display: grid; gap: var(--s2); min-width: 0; }
.done-label { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); margin-top: var(--s2); }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.done-body .btn { margin-top: var(--s2); }

.limits { list-style: none; margin: 0; padding: 0; gap: 0; }
.limits li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.limits li:first-child { padding-top: 0; }
.limits li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Request form */
.req { padding: var(--s6); display: grid; gap: var(--s5); max-width: 520px; }
.field { display: grid; gap: var(--s1); }
.field .error { margin-top: var(--s1); }
.field .row-help { margin-top: 2px; }
textarea.input { min-height: 96px; resize: vertical; line-height: var(--lh); padding-top: 10px; padding-bottom: 10px; }
.input[aria-invalid="true"] { border-color: var(--ink); }
.req .btn.fill { justify-self: start; min-width: 168px; }
/* The trap field: off-screen for people, still in the form for bots (not display:none). */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.req-done { padding: var(--s6); display: flex; gap: var(--s3); align-items: flex-start; max-width: 520px; line-height: 1.5; }
.req-done:focus { outline: none; }
.req-done strong { font-weight: 600; }
.done-mark { width: 28px; height: 28px; border-radius: var(--r-pill); border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; flex: none; }
.done-mark .icon { width: 16px; height: 16px; }

/* Download */
.dl { justify-self: start; }
/* The Copy button sits above its block, right-aligned, so long commands scroll under nothing. */
.code-wrap { display: grid; gap: var(--s1); min-width: 0; }
.code {
  margin: 0; padding: var(--s4) var(--s4); background: var(--wash); border-radius: var(--r-row); min-width: 0;
  font-size: var(--t-small); line-height: 1.7; overflow-x: auto; white-space: pre; tab-size: 2;
}
.code code { font: inherit; }
.code-wrap .btn.small { order: -1; justify-self: end; background: var(--card); }

.sect.last { padding-bottom: 24px; }
.site-foot {
  width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--s5) var(--s4) var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4);
  font-size: var(--t-meta); color: var(--ink-3);
}
.site-foot::before { content: ""; flex-basis: 100%; height: 1px; background: var(--line); margin-bottom: var(--s1); }
.site-foot .text-link { min-height: var(--tap); display: inline-flex; align-items: center; }
.loading-mark .mark { width: 32px; height: 32px; }
.panel .loading-mark { padding: var(--s6) var(--s5); }

/* ---------- static pages: /setup, /terms, /privacy, /manage, /subscribe, /welcome ---------- */
body.page { --page: 1040px; display: flex; flex-direction: column; }
.page-main { flex: 1 0 auto; width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s4) 48px; }
.page-main:focus { outline: none; }
.doc-head { padding: 56px 0 40px; display: grid; gap: var(--s4); max-width: 44em; }
.doc-head h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.doc-head .lede { margin-top: 0; }
.doc-date { font-size: var(--t-small); color: var(--ink-2); }
.doc-list { margin: 0; padding-left: 20px; display: grid; gap: var(--s2); line-height: 1.55; }
.doc-list strong { font-weight: 600; }
.explain { margin: 0; display: grid; gap: var(--s3); }
.explain > div { display: grid; gap: 2px; }
.explain dt { font-size: var(--t-small); font-weight: 600; overflow-wrap: anywhere; }
.explain dd { margin: 0; color: var(--ink-2); line-height: 1.5; }
.invite-field { max-width: 320px; }
.solo { display: grid; gap: var(--s5); max-width: 520px; padding-bottom: var(--s6); }
.solo > p { line-height: 1.55; }
.solo .req { justify-items: start; }
.solo .req p { line-height: 1.5; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }

/* app.css flattens .card under 720 px for the app panes; landing and admin cards keep their shape. */
.landing .card, .admin-main .card, .page .card { border: 1px solid var(--line); border-radius: var(--r-card); }

@media (max-width: 879.98px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 0 56px; }
  .demo-card { margin: 0; }
  .sect { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: 36px 0; }
}
@media (max-width: 559.98px) {
  /* Prices: each row stacks, the column names move beside the numbers. */
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prices tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .prices th, .prices td { border: 0; padding: 2px 0; }
  .prices td::before { content: attr(data-label) ": "; color: var(--ink-2); }
  .prices tr.past td::before { color: var(--ink-3); }
  .doc-head { padding: 36px 0 28px; }
}
@media (max-width: 479.98px) {
  .site-bar .btn { padding: 0 var(--s4); }
  .bar-links .bar-link[href$="#pricing"] { display: none; }
  .form-actions .btn { flex: 1 1 100%; }
  .subscribe-box { justify-items: stretch; }
  .lede { font-size: 17px; }
  .cta .btn { flex: 1 1 100%; }
  .req, .req-done { padding: var(--s5) var(--s4); }
  .req .btn.fill { justify-self: stretch; }
  .demo-head .pill { display: none; }
}

/* ---------- admin ---------- */
.admin-bar {
  height: var(--bar); display: flex; align-items: center; gap: var(--s3);
  width: 100%; max-width: 920px; margin: 0 auto; padding: 0 var(--s4);
}
.admin-bar .tag { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px var(--s2); }
.admin-bar .who { margin-left: auto; font-size: var(--t-small); color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-main { width: 100%; max-width: 920px; margin: 0 auto; padding: var(--s3) var(--s4) 64px; display: grid; gap: var(--s5); }
.panel-body .actions { justify-content: flex-start; }
.admin-main:focus { outline: none; }
.admin-main.center { min-height: calc(100% - var(--bar)); place-items: center; padding-bottom: var(--bar); }
.panel { overflow: hidden; }
.panel-head {
  display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3) var(--s2) var(--s5);
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: var(--t-body); font-weight: 600; }
.panel-head .count { font-size: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.panel-head .btn { margin-left: auto; }
.panel-body { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); }
.panel-body > .row-help { line-height: 1.5; }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); padding: var(--s4) var(--s5); align-items: start; }
.item + .item { border-top: 1px solid var(--line); }
.item-main { min-width: 0; display: grid; gap: 2px; }
.item-title { font-weight: 600; overflow-wrap: anywhere; }
.item-sub { font-size: var(--t-small); color: var(--ink-2); overflow-wrap: anywhere; }
.item-meta { font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin-top: 2px; }
.item-note { font-size: var(--t-small); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: var(--s2); padding-left: var(--s3); border-left: 1px solid var(--line); }
.item .actions { flex-wrap: nowrap; }
.item-result { grid-column: 1 / -1; display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-row); background: var(--canvas); }
.item-result .row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.item-result .error { margin: 0; }
.status-tag { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
/* Plan beside a user's name: Comped, Trial, Paid. Paused reads in ink with a darker edge (words, not color). */
.plan-tag { display: inline-block; margin-left: var(--s2); vertical-align: 2px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 var(--s2); line-height: 20px; }
.plan-tag.paused { color: var(--ink); border-color: var(--ink); }
.acct-facts { color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: 2px var(--s5); justify-content: start; margin-top: var(--s2); font-size: var(--t-small); }
.stats dt { font-size: var(--t-meta); color: var(--ink-3); }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.stats > div { display: grid; gap: 0; }
.invite-code { font-size: 20px; font-weight: 600; letter-spacing: .06em; user-select: all; font-variant-numeric: tabular-nums; }
.earlier { border-top: 1px solid var(--line); }
.earlier > summary {
  min-height: var(--tap); padding: 0 var(--s5); display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none;
}
.earlier > summary::-webkit-details-marker { display: none; }
.earlier > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--fast) var(--ease); margin-right: 2px; }
.earlier[open] > summary::before { transform: rotate(45deg); }
.earlier > summary:focus-visible { outline-offset: -2px; }
.earlier .items { border-top: 1px solid var(--line); }
.loading { padding: var(--s5); color: var(--ink-2); font-size: var(--t-small); }
.signin { width: 100%; max-width: 420px; }
.signin.screen-card .input { text-transform: none; letter-spacing: 0; }
.typed .input { text-transform: none; letter-spacing: 0; }

@media (hover: hover) {
  .earlier > summary:hover { color: var(--ink); }
  .bar-link:hover { background: var(--wash); }
}
@media (max-width: 599.98px) {
  .admin-bar .who { display: none; }
  .admin-bar .btn { margin-left: auto; }
  .admin-main { padding: var(--s2) 0 48px; gap: var(--s3); }
  .admin-main .panel { border-radius: 0; border-left: 0; border-right: 0; }
  .item { grid-template-columns: 1fr; padding: var(--s4); }
  .item .actions { justify-content: flex-start; }
  .panel-head { padding-left: var(--s4); }
  .panel-body { padding: var(--s4); }
  .earlier > summary { padding: 0 var(--s4); }
  .stats { grid-template-columns: repeat(2, auto); }
  .admin-main.center { padding: var(--s4); }
}

/* Update notice form (spec 12) */
.check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }