@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ============================================================ TOKENS
   Dark is the default and light redefines the same names, so every rule
   below is written once and works in both. Two pairs do not simply shift:
   --btn-* inverts (gold text on gold is the trap), and --opp-* is the
   opposite ground, used where something must contrast with the page. */
:root {
  --bg: #0B0B09;  --surface: #121210;  --surface-2: #191917;
  --line: #2E2E28;  --line-strong: #45453C;
  --text: #EAE6DA;  --text-dim: #B8B4A8;  --text-mute: #8A867E;
  --meta: #9A9589;  --faint: #837E72;  --arrow: #8C8679;
  --gold: #E2B84A;  --gold-deep: #C49A1A;  --gold-dark: #A8841A;
  --gold-wash: rgba(226,184,74,0.045);
  --teal: #2FC79B;  --teal-deep: #1A9B78;  --teal-wash: rgba(47,199,155,0.045);
  --btn-bg: #E2B84A;  --btn-fg: #0B0B09;
  --opp-bg: #EAE6DA;  --opp-text: #0B0B09;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #FCFBF7;  --surface: #EFEADA;  --surface-2: #E6E0CD;
  --line: #C6BDA4;  --line-strong: #A1977D;
  --text: #13130D;  --text-dim: #403D36;  --text-mute: #565248;
  --meta: #575349;  --faint: #6A6456;  --arrow: #6D6758;
  --gold: #7B5E06;  --gold-deep: #6A5106;  --gold-dark: #6A5106;
  --gold-wash: rgba(138,106,8,0.075);
  --teal: #0C6049;  --teal-deep: #0B5644;  --teal-wash: rgba(12,96,73,0.075);
  --btn-bg: #7B5E06;  --btn-fg: #FBF9F3;
  --opp-bg: #13130D;  --opp-text: #EAE6DA;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================ HEADER */
header {
  padding: 1.3rem 2.5rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.logo { text-decoration: none; display: flex; align-items: center; gap: 0.75rem; }
.logo-mark { flex-shrink: 0; width: 30px; height: 30px; }
.logo-title {
  display: block;
  font-size: 1.32rem; font-weight: 400; letter-spacing: 0.16em;
  color: var(--text); line-height: 1;
}
.logo-title .tidy { color: var(--gold); }
.logo-sub {
  display: block;
  font-family: 'DM Mono', monospace; font-size: 0.74rem; color: var(--meta);
  letter-spacing: 0.2em; text-transform: uppercase; margin-top: 0.3rem;
}

nav.top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.btn {
  font-family: 'DM Mono', monospace;
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.68rem 1.2rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: none;
  color: var(--text-dim);
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s, color 0.15s;
  cursor: pointer;
}
.btn:hover { border-color: var(--line-strong); color: var(--gold); }

/* One gold action per screen. No gradient: the flat fill is the brand. */
.btn-gold { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--btn-fg); }
.btn-big { font-size: 0.85rem; padding: 0.95rem 1.9rem; }

/* Each theme shows the icon of the one you switch to. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none;
  border: 1px solid var(--line); border-radius: 2px;
  color: var(--text-dim); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--gold); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ============================================================ LAYOUT
   Prose pages keep a readable measure. Pages built on the 12 column grid
   (home, landing pages) opt into the wider frame. */
main { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 2.5rem 2.5rem 4rem; }
main.wide { max-width: 1296px; }

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
.rule { height: 1px; background: var(--line); }
.prose { max-width: 44em; }

.kicker {
  font-family: 'DM Mono', monospace; font-size: 0.80rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--meta);
}

/* Teal marks the terms: what it costs and what it does not ask of you.
   The privacy claim is already the biggest type on the page, so it has size
   and does not need colour too. These three facts appear nowhere else at any
   size, so colour is the only emphasis available to them. Structural kickers
   ("The tools", "At a glance") stay neutral. */
.kicker.terms { color: var(--teal); }

/* ============================================================ HERO
   Asymmetric, not centred: the claim on the left, the proof on the right. */
.hero { padding: 2.6rem 0 2.2rem; }
.hero h1 {
  font-size: 3.9rem; font-weight: 300; line-height: 1.05;
  letter-spacing: -0.015em; color: var(--text); margin: 1rem 0 0;
}
.hero h1 b { color: var(--gold); font-weight: 300; }
.hero .sub {
  font-size: 1.2rem; color: var(--text-dim); max-width: 34em; margin: 1.1rem 0 0;
}
.hero-claim { display: flex; flex-direction: column; gap: 0; }

/* The trust row lost its ticks. Same facts, stated once, quietly. */
.trust {
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--meta); margin-top: 1.2rem;
}

/* ============================================================ DIAGRAM
   The privacy claim, drawn rather than asserted.

   Deliberately quiet. This is supporting cast: it explains the drop zone
   sitting next to it, and it must not outrank it. So it gets one frame
   rather than two, no saturated fill, and a muted gold waveform. The only
   full-strength teal in the hero is the label, which is a few characters. */
.diagram { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 1.5rem; }
.diagram-device { padding: 0; }
.diagram-label {
  font-family: 'DM Mono', monospace; font-size: 0.84rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--meta); margin-bottom: 0.7rem;
}
.diagram-wave { display: block; width: 100%; height: 58px; }
.diagram-steps {
  font-family: 'DM Mono', monospace; font-size: 0.84rem; letter-spacing: 0.05em;
  color: var(--text-dim); margin-top: 0.7rem;
}
.diagram-gap { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 0.2rem 0.9rem; }
.diagram-gap i {
  flex: 1; height: 1px; font-style: normal;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}
.diagram-gap span {
  font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--meta); white-space: nowrap;
}
.diagram-server { border: 1px dashed var(--line); border-radius: 3px; padding: 1.1rem; text-align: center; }
.diagram-server .who {
  font-family: 'DM Mono', monospace; font-size: 0.84rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 0.35rem;
}
.diagram-server .what { color: var(--faint); font-style: italic; }
.diagram-verify {
  font-family: 'DM Mono', monospace; font-size: 0.84rem; line-height: 1.7;
  color: var(--meta); margin-top: 0.8rem;
}

/* ============================================================ TOOL INDEX
   A manual's contents page, not a grid of cards. */
.toolindex { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.toolrow {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.35fr) 1.75rem; gap: 1.5rem;
  align-items: baseline; padding: 1.25rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.toolrow:hover .toolname { color: var(--gold); }
.toolnum { font-family: 'DM Mono', monospace; font-size: 0.86rem; color: var(--gold); letter-spacing: 0.08em; }
.toolname { display: block; font-size: 1.45rem; font-weight: 300; color: var(--text); transition: color 0.15s; }
.toolrow p { font-size: 1.02rem; line-height: 1.55; color: var(--text-dim); margin: 0; }
.toolrow svg { justify-self: end; }
.tag {
  display: inline-block; margin-top: 0.55rem;
  font-family: 'DM Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap; color: var(--teal);
  border: 1px solid var(--teal-deep); border-radius: 2px; padding: 0.18rem 0.45rem;
}

/* ============================================================ LIMITS
   Stating what it will not do, which most tools leave out. */
.limits { display: flex; flex-direction: column; gap: 1.2rem; }
.limit { display: grid; grid-template-columns: 1.6rem 1fr; gap: 1.1rem; align-items: start; }
.limit i {
  display: block; height: 1px; width: 1.05rem; margin-top: 0.85rem;
  background: var(--gold-deep);
}
.limit h3 { font-size: 1.12rem; font-weight: 400; color: var(--text); margin: 0 0 0.2rem; }
.limit p { font-size: 1.02rem; line-height: 1.55; color: var(--text-dim); margin: 0; }

/* ============================================================ SPEC RAIL
   Landing pages: the technical answer without reading 850 words. */
.rail { border: 1px solid var(--line); border-radius: 3px; padding: 1.2rem 1.2rem 0.9rem; }
.rail .kicker { color: var(--gold); margin-bottom: 0.7rem; }
.specrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.specrow:first-of-type { border-top: none; }
.speck {
  font-family: 'DM Mono', monospace; font-size: 0.84rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--meta);
}
.specv { font-size: 1.0rem; color: var(--text); }
.specv.good { color: var(--teal); }
.railnote { margin-top: 1.3rem; border-left: 2px solid var(--teal-deep); padding: 0.2rem 0 0.2rem 1rem; }
.railnote .kicker { color: var(--teal); margin-bottom: 0.4rem; }
.railnote p { font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); margin: 0; }

.breadcrumb {
  font-family: 'DM Mono', monospace; font-size: 0.80rem; letter-spacing: 0.09em;
  color: var(--faint); padding: 0.9rem 2.5rem; border-bottom: 1px solid var(--line);
}
.breadcrumb a { color: var(--meta); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }

/* ============================================================ PROSE */
h1 { font-size: 2.6rem; font-weight: 300; line-height: 1.12; letter-spacing: -0.012em; color: var(--text); }
h2 { font-size: 1.85rem; font-weight: 300; line-height: 1.2; color: var(--gold); margin: 2.5rem 0 0.7rem; letter-spacing: -0.008em; }
h3 { font-size: 1.2rem; font-weight: 400; line-height: 1.35; color: var(--text); margin: 1.7rem 0 0.4rem; }
p { margin-bottom: 0.95rem; color: var(--text-dim); }
ul, ol { margin: 0 0 1rem 1.3rem; color: var(--text-dim); }
li { margin-bottom: 0.45rem; }
a { color: var(--teal); }
a:hover { color: var(--gold); }
b, strong { color: var(--text); font-weight: 400; }

.steps { counter-reset: step; list-style: none; margin-left: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: 0.8rem; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.25rem;
  font-family: 'DM Mono', monospace; font-size: 0.82rem; color: var(--gold);
  letter-spacing: 0.08em;
}

/* Cards survive for the guide, but flat: no lift, no glow, no gradient. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 2rem 0; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 1.3rem 1.4rem; text-decoration: none; display: block;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--line-strong); }
.card h3 { color: var(--text); font-weight: 400; font-size: 1.18rem; margin: 0 0 0.35rem; }
.card:hover h3 { color: var(--gold); }
.card p { color: var(--text-dim); font-size: 1.02rem; margin: 0; }
.card .go {
  font-family: 'DM Mono', monospace; font-size: 0.84rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--meta); margin-top: 0.65rem; display: inline-block;
}

/* The FAQ accordion is now plain typography: a rule, a question, an answer. */
details {
  border: none; border-top: 1px solid var(--line); border-radius: 0;
  background: none; padding: 1.1rem 0; margin: 0;
}
details:last-of-type { border-bottom: 1px solid var(--line); }
details summary {
  cursor: pointer; font-size: 1.15rem; color: var(--text); font-weight: 400;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: '+'; font-family: 'DM Mono', monospace; font-size: 1rem;
  color: var(--gold); margin-right: 0.7rem;
}
details[open] summary::before { content: '\2212'; }
details summary:hover { color: var(--gold); }
details p { margin: 0.6rem 0 0 1.55rem; font-size: 1.04rem; }

.cta-band {
  margin: 3rem 0 0.6rem; padding: 2.2rem 2.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;
  flex-wrap: wrap;
}
.cta-band h2 { margin: 0 0 0.4rem; font-size: 1.75rem; }
.cta-band p { margin: 0; max-width: 40em; }
.cta-band .hint {
  font-family: 'DM Mono', monospace; font-size: 0.80rem; color: var(--meta);
  letter-spacing: 0.08em; margin-top: 0.7rem;
}

.related { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.related a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.05rem; color: var(--text); text-decoration: none;
}
.related a:hover { color: var(--gold); }

/* ============================================================ FOOTER */
footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 2.5rem 2.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--meta);
}
footer a { color: var(--meta); text-decoration: none; margin-right: 1.1rem; }
footer a:hover { color: var(--gold); }

/* ============================================================ DROP ZONE
   Dropping a file here parks it and opens the editor with it already
   loaded, saving a step. Clicking does the same via the file picker. */
.dropzone {
  position: relative;
  /* The warm edge is what makes this read as the primary action rather than
     another panel. It is the only dashed gold on the page. */
  border: 1px dashed var(--gold-dark);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.85rem 2rem;
  cursor: pointer;
  display: flex; align-items: center; gap: 1.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--gold); background: var(--surface-2); }
.dropzone.drag-over { border-color: var(--teal); background: var(--teal-wash); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dz-icon { flex-shrink: 0; width: 44px; height: 44px; color: var(--gold); }
.dz-title { font-size: 1.35rem; font-weight: 300; color: var(--text); }
.dz-sub {
  font-family: 'DM Mono', monospace; font-size: 0.80rem; letter-spacing: 0.07em;
  color: var(--meta); margin-top: 0.35rem;
}
.dz-busy { color: var(--gold); }
.dz-alt { margin-left: auto; text-align: right; font-family: 'DM Mono', monospace; font-size: 0.80rem; letter-spacing: 0.07em; }
.dz-alt a { color: var(--meta); text-decoration: none; }
.dz-alt a:hover { color: var(--gold); }

/* ============================================================ RESPONSIVE
   Verified at 360px, which is the Samsung S23 width, not 375. */
@media (max-width: 900px) {
  .g12 > * { grid-column: 1 / -1 !important; }
  .g12 { gap: 1.8rem; }
  .related { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}

@media (max-width: 700px) {
  header, footer { padding-left: 1.1rem; padding-right: 1.1rem; }
  .breadcrumb { padding-left: 1.1rem; padding-right: 1.1rem; }
  main { padding: 1.6rem 1.1rem 3rem; }
  header { gap: 0.6rem; }
  .logo-title { font-size: 1.15rem; }
  .logo-sub { display: none; }
  .hero { padding: 1.6rem 0 1.4rem; }
  .hero h1 { font-size: 2.35rem; }
  .hero .sub { font-size: 1.06rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  /* Three columns on a phone, with the description dropping to a second row
     under the name. The arrow has to be placed explicitly: left to auto-flow
     it follows the description and ends up beside it rather than at the edge. */
  .toolrow { grid-template-columns: 2.2rem 1fr 1.1rem; gap: 0.8rem; }
  .toolrow p { grid-column: 2 / 3; grid-row: 2; margin-top: 0.2rem; }
  .toolrow svg { grid-column: 3; grid-row: 1; }
  .toolname { font-size: 1.2rem; }
  .dropzone { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 1.4rem 1.2rem; }
  .dz-alt { margin-left: 0; text-align: left; }
  .cta-band { padding: 1.5rem 1.3rem; }
  .btn-big { width: 100%; text-align: center; }
}