/* ==========================================================================
   enkripsiyon — public landing page. Static, same-origin, CSP-clean.
   Not part of the app bundle, so it cannot import the app's stylesheets:
   the token values below are COPIED VERBATIM from web/src/styles/tokens.css
   and must be re-copied if the app's tokens change. Base patterns (reset,
   type, focus, selection, scrollbars, reduced motion) are mirrored from
   web/src/styles/base.css. One value (--dur-leave) is copied from
   web/src/styles/interactions.css.

   Nothing here introduces a colour, spacing, weight or duration the token
   set does not have. The single deliberate addition is --measure, named and
   justified in docs/LANDING.md.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- copied verbatim from web/src/styles/tokens.css (used subset only) --- */
  --bg-0: #060606;   /* page                                                     */
  --bg-3: #161616;   /* scrollbar thumb                                          */
  --bg-4: #1d1d1d;   /* scrollbar thumb hover                                    */

  --text-hi:  #ededed; /* primary text / headings      17.3:1 on bg-0 */
  --text:     #c9c9c9; /* body text                    12.2:1 on bg-0 */
  --text-dim: #8a8a8a; /* secondary text  5.9:1 on bg-0               */
  --white:    #ffffff; /* hover state of the inverted primary button  */

  --line:        rgba(255, 255, 255, 0.07);  /* structural hairline   */
  --line-strong: rgba(255, 255, 255, 0.16);  /* emphasis hairline     */
  --ring:        rgba(255, 255, 255, 0.45);  /* focus ring            */
  --selection:   rgba(255, 255, 255, 0.18);  /* ::selection           */

  /* The page's one accent spend: green marks inside the room schematic,
     where they mean what they mean in the app (online / verified). No red,
     no amber — nothing on this page is destructive or a warning. */
  --green:     #4d7a22;

  --font-ui:   "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fw-2: 200;             /* wordmark                                  */
  --fw-3: 300;             /* UI base weight                            */
  --fw-4: 400;             /* body emphasis, names                      */
  --fs-micro:  11px;
  --fs-label:  12px;
  --fs-body:   14px;
  --fs-head:   16px;
  --fs-display: 30px;      /* wordmark                                  */
  --fs-mono:    12px;      /* codes, fingerprints                       */
  --lh-body:  1.5;
  --lh-tight: 1.3;
  --ls-label: 0.14em;
  --ls-word:  0.22em;

  --s1: 2px;  --s2: 4px;  --s3: 6px;  --s4: 8px;  --s5: 12px;
  --s6: 16px; --s7: 20px; --s8: 24px; --s9: 32px; --s10: 48px;

  --r1: 2px;
  --r2: 4px;
  --bw: 1px;

  --dur-1: 120ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- copied verbatim from web/src/styles/interactions.css ---------------- */
  --dur-leave: 240ms;      /* hover decay; enter stays --dur-1          */

  /* --- deliberate addition (see docs/LANDING.md) ------------------------------
     The app has no reading measure: its widest structural width is the 420px
     modal, and the 400px card. A page of prose with two-column passages needs
     one. 560px keeps ~70 characters per line at 14px and gives two-column
     splits a 272px half. */
  --measure: 560px;
}

/* --- Reset / base (mirrored from base.css) -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { height: 100%; }

body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-3);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-weight: var(--fw-3);
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

strong, b { font-weight: var(--fw-4); }

code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-mono);
}

a {
  color: var(--text-hi);
  text-decoration-thickness: var(--bw);
  text-decoration-color: var(--line-strong);
  text-underline-offset: var(--s1);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
a:hover { text-decoration-color: var(--text-hi); }

ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible {
  outline: var(--bw) solid var(--ring);
  outline-offset: var(--s1);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--selection); color: var(--text-hi); }

html { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
::-webkit-scrollbar { width: var(--s4); height: var(--s4); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r2); }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* --- Column ---------------------------------------------------------------- */
.wrap {
  width: min(var(--measure), calc(100% - (var(--s6) * 2)));
  margin-inline: auto;
}

/* --- 1 · First screen -------------------------------------------------------- */
.hero { padding: var(--s10) 0 var(--s9); }

.wordmark {
  font-size: var(--fs-display);
  font-weight: var(--fw-2);
  letter-spacing: var(--ls-word);
  color: var(--text-hi);
}

.statement {
  margin-top: var(--s7);
  font-size: var(--fs-head);
  line-height: var(--lh-body);
  color: var(--text-hi);
}

.support {
  margin-top: var(--s4);
  color: var(--text-dim);
}

/* The room schematic: the README's three panes, drawn with hairlines.
   Decorative illustration of the real UI; text is the docs' own example. */
.shell {
  margin-top: var(--s9);
  display: grid;
  /* Right pane is wide enough that "End-to-End Encrypted" and the full
     fingerprint groups each hold one line — the pane sizes the drawing. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.7fr) minmax(0, 1.15fr);
  border: var(--bw) solid var(--line);
  border-radius: var(--r2);
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
  color: var(--text-dim);
}
.shell__pane { padding: var(--s4); min-width: 0; }
.shell__pane--left { display: flex; flex-direction: column; }
.shell__pane--chat  { border-left: var(--bw) solid var(--line); }
.shell__pane--right { border-left: var(--bw) solid var(--line); }

.shell__room { font-size: var(--fs-label); font-weight: var(--fw-4); color: var(--text-hi); }
.shell__code { margin-top: var(--s1); font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.shell__roster { margin-top: var(--s4); padding-top: var(--s3); border-top: var(--bw) solid var(--line); }
.shell__roster li { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; color: var(--text); }
.shell__roster .shell__self { color: var(--text-hi); font-weight: var(--fw-4); }

/* The README drawing's own footer row, anchoring the left pane's bottom edge. */
.shell__you {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: var(--bw) solid var(--line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.dot { flex: none; width: var(--s3); height: var(--s3); border-radius: 50%; }
.dot--on { background: var(--green); }
.dot--idle { border: var(--bw) solid var(--green); }

.shell__day {
  display: flex;
  align-items: center;
  gap: var(--s3);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.shell__day::before, .shell__day::after { content: ""; flex: 1; height: var(--bw); background: var(--line); }

.shell__msg { margin-top: var(--s3); color: var(--text); overflow-wrap: anywhere; }
.shell__msg .who { font-weight: var(--fw-4); }
.shell__msg .who--self { color: var(--text-hi); }
.shell__msg .when { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.shell__file {
  display: inline-block;
  margin-top: var(--s1);
  padding: var(--s1) var(--s2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r1);
}
.shell__composer {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--bw) solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.shell__send { letter-spacing: var(--ls-label); text-transform: uppercase; }

.shell__stat { text-align: center; letter-spacing: var(--ls-label); text-transform: uppercase; }
.shell__nav { margin-top: var(--s2); text-align: center; }
.shell__rule { margin: var(--s3) 0; height: var(--bw); background: var(--line); }
.shell__level { display: flex; align-items: center; gap: var(--s2); color: var(--text); }
.hollow { flex: none; width: var(--s3); height: var(--s3); border-radius: 50%; border: var(--bw) solid var(--text-dim); }
.shell__detail { margin-top: var(--s1); }
.shell__e2e { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); font-weight: var(--fw-4); color: var(--text-hi); white-space: nowrap; }
.shell__keys { margin-top: var(--s2); }
.shell__keys .fp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--text); }
/* The app's fingerprint model: groups wrap only at group boundaries. */
.fp__group { display: inline-block; white-space: nowrap; margin-right: var(--s2); }

/* --- Sections ---------------------------------------------------------------- */
.sect { padding: var(--s9) 0; border-top: var(--bw) solid var(--line); }

.label {
  margin-bottom: var(--s5);
  font-size: var(--fs-micro);
  font-weight: var(--fw-3);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dim);
}

.lead { margin-bottom: var(--s6); color: var(--text); }

/* Property rows: hairline-separated, name / mechanism, no icons. */
.rows > li {
  display: grid;
  grid-template-columns: calc(var(--s10) * 3) minmax(0, 1fr);
  column-gap: var(--s6);
  padding: var(--s4) 0;
  border-top: var(--bw) solid var(--line);
}
.row__name { font-size: var(--fs-body); font-weight: var(--fw-4); color: var(--text-hi); }
.row__text { color: var(--text); }

/* Server-sees: two lists at full body size — limits are content, not disclaimer. */
.sees { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s9); }
.sees__head {
  margin-bottom: var(--s2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-3);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.sees__list > li { padding: var(--s3) 0; border-top: var(--bw) solid var(--line); color: var(--text); }

/* Steps: mono numerals are text, not iconography. */
.steps { counter-reset: step; }
.steps > li {
  display: grid;
  grid-template-columns: var(--s9) minmax(0, 1fr);
  column-gap: var(--s5);
  padding: var(--s4) 0;
  border-top: var(--bw) solid var(--line);
  color: var(--text);
}
.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-mono);
  color: var(--text-dim);
  padding-top: var(--s1);
}
/* The out-of-band handoff is the step everybody skips: it gets the page's
   only full hairline frame. No colour — emphasis, not warning. */
.steps > .outband {
  margin: var(--s3) 0;
  padding: var(--s4) var(--s5);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r1);
}
.steps > .outband + li { border-top: 0; }
.steps strong { color: var(--text-hi); }
.key {
  display: block;
  grid-column: 2; /* the steps grid's content column — not the numeral column */
  margin-top: var(--s2);
  letter-spacing: 0.02em;
  color: var(--text-hi);
  overflow-wrap: anywhere;
}

/* --- 5 · The way in ------------------------------------------------------------ */
.wayin {
  padding: var(--s10) 0;
  border-top: var(--bw) solid var(--line);
  text-align: center;
}
.wayin p { margin: 0 auto var(--s6); max-width: calc(var(--s10) * 9); color: var(--text); }

/* .btn--primary's visual language, verbatim from components.css + the
   interaction layer's timing (enter --dur-1, leave --dur-leave, press 0ms).
   Used exactly once on the page. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  font-size: var(--fs-body);
  font-weight: var(--fw-4);
  line-height: var(--lh-tight);
  color: var(--bg-0);
  background: var(--text-hi);
  border: var(--bw) solid transparent;
  border-radius: var(--r1);
  text-decoration: none;
  transition: background var(--dur-leave) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--white); transition-duration: var(--dur-1); }
}
/* Keyboard parity: the hover/focus pair is kept in lockstep — same
   declarations, ungated, since keyboard focus has no pointer to gate on. */
.btn-primary:focus-visible { background: var(--white); transition-duration: var(--dur-1); }
.btn-primary:active { background: var(--text); transition-duration: 0ms; }

/* --- 6 · Footer ------------------------------------------------------------------ */
.foot {
  padding: var(--s8) 0 var(--s10);
  border-top: var(--bw) solid var(--line);
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* --- ≤760px: one column, the same breakpoint as layout.css (raw px — custom
     properties are illegal in media conditions). The schematic keeps the
     centre pane only, which is the app's own mobile default pane. ------------- */
@media (max-width: 760px) {
  .hero { padding-top: var(--s9); }

  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell__pane--left, .shell__pane--right { display: none; }
  .shell__pane--chat { border-left: 0; }

  .rows > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  .sees { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
}