/* ==========================================================================
   letsconnect

   Dark by default and by intent: the board is read next to X, which is dark for
   most people, and the page should not flash white in the middle of a session.

   Two structural rules hold this together:
     * No filled grey boxes. Separation is done with hairlines and space. A page
       of grey cards reads as a template; a page of rules and whitespace reads
       as considered.
     * One accent, used only for karma and the primary action. The moment a
       second colour earns meaning, the first one stops meaning anything.
   ========================================================================== */

:root {
  --bg:        #0b0b0d;
  --bg-lift:   #0f0f12;   /* used for input wells only, never for cards */
  --ink:       #f3f2ef;
  --ink-2:     #9b9ba4;
  --ink-3:     #61616b;
  --line:      #1b1b20;
  --line-2:    #2a2a32;
  --accent:    #ffb454;   /* karma, and the one primary action */
  --accent-dim:#3a2b13;
  --good:      #6ee79f;
  --bad:       #ff7a70;

  --w: 720px;
  --r: 10px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

button, input { font: inherit; color: inherit; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Nav. Brand, one link, one action — and it must stay on ONE line at every
   width down to 320px. The links collapse before the button does, because the
   button is the only thing on this bar anyone needs.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 11, 13, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav__in {
  display: flex; align-items: center; gap: 18px;
  height: 58px;
  flex-wrap: nowrap;              /* the standing rule: never two lines */
}

.nav__brand {
  font-weight: 600; letter-spacing: -.02em; text-decoration: none;
  white-space: nowrap; font-size: 16px;
}
.nav__brand i { font-style: normal; color: var(--accent); }

.nav__links { display: flex; gap: 18px; margin-left: auto; }
.nav__links a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; white-space: nowrap;
}
.nav__links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: #14100a;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; filter: none; }

.btn--ghost {
  background: transparent; color: var(--ink-2);
  border-color: var(--line-2);
}
.btn--ghost:hover { color: var(--ink); border-color: #3b3b45; filter: none; }

.btn--sm { height: 30px; padding: 0 12px; font-size: 13px; }

/* Pushes a nav action to the right when there are no links beside it. Exists as
   a class rather than an inline style so the page can ship a strict CSP with no
   'unsafe-inline'. */
.btn--navend { margin-left: auto; text-decoration: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Longhand, not the shorthand. These elements also carry .wrap, and
   `padding: 76px 0 52px` silently resets .wrap's side padding to zero, which
   puts the headline flush against the edge of a phone screen. */
.hero { padding-top: 76px; padding-bottom: 52px; }

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 8vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 600;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero p {
  margin: 0; max-width: 46ch;
  color: var(--ink-2); font-size: 1.06rem; line-height: 1.6;
}

.rules {
  margin: 32px 0 0; padding: 0; list-style: none;
  display: grid; gap: 13px;
}
/*
   Deliberately NOT display:grid on the li.

   Grid promotes each contiguous run of text to its own anonymous item, so
   "<b>No gate.</b> Post immediately…" becomes two items and the sentence lands
   in the 18px bullet column, one word per line. Padding plus an absolutely
   positioned marker keeps it as one flowing paragraph.
*/
.rules li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
  max-width: 62ch;
}
.rules li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--line-2);
}
.rules li:first-child::before { background: var(--accent); }
.rules b { color: var(--ink); font-weight: 550; }

/* --------------------------------------------------------------------------
   Receipt. The screenshot. Bordered rather than filled, so it stays on the
   same visual plane as everything else.
   -------------------------------------------------------------------------- */
.receipt {
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 20px 22px 18px;
  margin: 0 0 30px;
}

.receipt__top {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.receipt__who { font-weight: 600; letter-spacing: -.02em; }
.receipt__rank { font-size: 13px; color: var(--ink-3); }
.receipt__rank b { color: var(--accent); font-weight: 600; }

.receipt__line {
  font-size: 1.02rem; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 18px;
}
.receipt__line b { color: var(--ink); font-weight: 600; }

.stats { display: flex; gap: 30px; flex-wrap: wrap; }
.stat__n {
  display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat--karma .stat__n { color: var(--accent); }
.stat__l {
  display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 5px;
}

/* --------------------------------------------------------------------------
   Forms. A "well" is the only place a fill is allowed, because an input has to
   read as somewhere you can type.
   -------------------------------------------------------------------------- */
.field {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-lift);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0 6px 0 14px; height: 40px;
}
.field:focus-within { border-color: #4a4a56; }
.field input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  font-size: 14.5px;
}
.field input::placeholder { color: var(--ink-3); }
.field .at { color: var(--ink-3); font-size: 14.5px; }

.form-row { display: grid; gap: 10px; grid-template-columns: 1fr auto; }

.note { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.5; }
.note a { color: var(--ink-2); }

.msg { font-size: 13.5px; margin: 10px 0 0; line-height: 1.5; }
.msg--ok  { color: var(--good); }
.msg--err { color: var(--bad); }

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.head h2 {
  margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em;
}
.head p { margin: 0; font-size: 13px; color: var(--ink-3); text-align: right; }

/* Sections need air between them or the submit form runs straight into the
   board heading and the page reads as one undifferentiated column. */
#post, #board { margin-top: 48px; }
.postbox { padding: 22px 0 4px; }

/* --------------------------------------------------------------------------
   Board. Rows, not cards. Hairline between each.
   -------------------------------------------------------------------------- */
.board { list-style: none; margin: 0; padding: 0; }

.row { border-bottom: 1px solid var(--line); padding: 22px 0; }

.row__grid { display: grid; grid-template-columns: 28px 40px 1fr; gap: 14px; }

.row__rank {
  font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  padding-top: 11px; text-align: right;
}

.row__av {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--line); object-fit: cover; display: block;
}

.row__who { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.row__name { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.row__at   { color: var(--ink-3); font-size: 13.5px; }
.row__dot  { color: var(--ink-3); font-size: 13.5px; }
.row__when { color: var(--ink-3); font-size: 13.5px; }

.tag {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2);
  padding: 1px 6px; border-radius: 999px;
}

.row__text {
  margin: 6px 0 0; font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.row__text a { color: var(--ink-2); text-decoration: none; }
.row__text a:hover { text-decoration: underline; }

.row__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.row__karma {
  margin-left: auto; font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.row__karma b { color: var(--accent); font-weight: 600; }

.out { font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.out:hover { color: var(--ink); }

/* Replying on X is now the only thing anyone has to do, so it is the only
   thing in a row that reads as an action. A hairline pill rather than a filled
   one: twelve solid accent buttons down the page would shout, and the accent
   still has to mean karma everywhere else. */
.out--go {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink); font-weight: 550;
}
.out--go:hover { border-color: var(--accent); color: var(--accent); }

/* The manual paste, demoted. It used to be a button competing with the action
   above; it is a footnote now, because needing it is the exception. */
.linky {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--ink-3);
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.linky:hover { color: var(--ink-2); }

/* The confirm drawer under a row. Hidden until asked for, so the board stays
   readable rather than showing forty input boxes. */
.claim { margin: 14px 0 0; display: grid; gap: 10px; }
.claim[hidden] { display: none; }
.claim .note { margin: 0; }

/* Sits between the board heading rule and the first row, so the promise that
   replies are found automatically is read before anyone starts looking for a
   button to press. */
.board__note { margin: 14px 0 4px; max-width: 62ch; }

.empty { padding: 40px 0; color: var(--ink-3); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot {
  margin-top: 60px; padding-top: 26px; padding-bottom: 50px;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px; line-height: 1.6;
}
.foot a { color: var(--ink-2); }
.foot em { font-style: normal; color: var(--ink-2); }
.foot p + p { margin-top: 12px; }

/* The running SocialData count. Tabular so the digits do not jitter when it
   ticks up, and dimmer than the prose around it because it is a meter, not a
   sentence anyone has to read. */
#apiNote {
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  font-size: 12.5px; opacity: .85;
}

.skel { color: var(--ink-3); font-size: 14px; padding: 30px 0; }

/* --------------------------------------------------------------------------
   Narrow. Checked at 390px and at 320px.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* The nav links go before anything else does, and the action takes the space
     they leave. Brand + button fit on one line at 320px with room to spare. */
  .nav__links { display: none; }
  .nav .btn   { margin-left: auto; }

  .wrap { padding: 0 18px; }
  .hero { padding-top: 52px; padding-bottom: 40px; }
  .stats { gap: 22px; }

  /* Same three columns, just tighter. Reflowing the avatar under the rank was
     tried and looked broken; narrowing the gutters keeps the reading rhythm. */
  .row__grid { grid-template-columns: 22px 34px 1fr; gap: 10px; }
  .row__av   { width: 34px; height: 34px; }
  .row__rank { padding-top: 8px; font-size: 12px; }

  .form-row { grid-template-columns: 1fr; }
  .receipt { padding: 18px 16px 16px; }
}