/* ============================================================
   Syndie · V7 tokens — V5 × V6 merge.
   From V5: the organic green hero picture, sharp 3px geometry,
            the Try-Syd UX, the overall page flow.
   From V6: the component effects (aurora fills, glows, gradient
            edges, halos) — restricted to GREEN ONLY — and the
            pure white / black / grey color world. No cream.
   ============================================================ */

:root {
  /* Surfaces — pure, no warm cast */
  --paper: #FFFFFF;
  --mist: #F4F5F4;
  --ink: #101211;
  --black: #060707;

  --text: #16181A;
  --gray: #9CA09E;            /* two-tone dim voice */
  --text-2: #5A5F5D;
  --faint: #AEB2B0;
  --on-dark: #F4F6F4;
  --on-dark-2: #939994;

  --hairline: #E9EAE8;
  --dark-line: #242625;

  /* Green-only system */
  --green: #1E7A44;
  --green-deep: #124D2B;
  --leaf: #3F9B54;
  --lime: #B9E14C;
  --green-pale: #E9F4EA;

  /* Aurora — greens only */
  --aurora:
    radial-gradient(60% 90% at 18% 20%, rgba(185,225,76,.8) 0%, rgba(185,225,76,0) 62%),
    radial-gradient(55% 80% at 82% 30%, rgba(63,155,84,.5) 0%, rgba(63,155,84,0) 65%),
    radial-gradient(60% 85% at 55% 92%, rgba(30,122,68,.55) 0%, rgba(30,122,68,0) 66%),
    linear-gradient(120deg, #E3F2E3 0%, #EDF6EC 50%, #E6F2E7 100%);
  --aurora-deep:
    radial-gradient(55% 75% at 15% 25%, rgba(185,225,76,.45) 0%, rgba(185,225,76,0) 60%),
    radial-gradient(50% 70% at 85% 20%, rgba(63,155,84,.4) 0%, rgba(63,155,84,0) 62%),
    radial-gradient(55% 70% at 60% 95%, rgba(30,122,68,.5) 0%, rgba(30,122,68,0) 64%),
    linear-gradient(140deg, #0B1F12 0%, #113524 55%, #0E2A1A 100%);
  --grad-line: linear-gradient(90deg, #1E7A44 0%, #3F9B54 45%, #B9E14C 100%);

  /* The V5 hero picture — blurred leaf-light, deep greens */
  --organic:
    radial-gradient(42% 34% at 12% 78%, rgba(196,224,99,.85) 0%, rgba(196,224,99,0) 70%),
    radial-gradient(30% 26% at 8% 38%, rgba(163,199,84,.55) 0%, rgba(163,199,84,0) 70%),
    radial-gradient(36% 30% at 55% 62%, rgba(150,190,80,.5) 0%, rgba(150,190,80,0) 70%),
    radial-gradient(28% 24% at 78% 88%, rgba(180,212,92,.45) 0%, rgba(180,212,92,0) 70%),
    radial-gradient(46% 40% at 85% 30%, rgba(58,94,44,.6) 0%, rgba(58,94,44,0) 75%),
    linear-gradient(160deg, #24401F 0%, #2B5124 45%, #386030 100%);
  --organic-overlay:
    radial-gradient(50% 45% at 10% 80%, rgba(169,201,63,.5) 0%, rgba(169,201,63,0) 70%),
    linear-gradient(160deg, rgba(30,48,25,.55) 0%, rgba(43,81,36,.35) 100%);

  --ok: #2E6B34;   --ok-soft: #E9F1E8;
  --warn: #96660F; --warn-soft: #F6EEDB;
  --bad: #A63A22;  --bad-soft: #F7EAE5;

  /* Shape — sharp, one value (per team: ~3) */
  --r: 3px;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", Consolas, monospace;

  --page-max: 1140px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  letter-spacing: -0.006em;
}

::selection { background: var(--green-pale); }

.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.dim { color: var(--gray); }
.dark .dim { color: var(--on-dark-2); }

/* Film grain (V5 hero picture) */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.7'/></svg>");
}
.grain > * { position: relative; z-index: 2; }

/* Green halo behind headings (V6 effect, green only) */
.halo { position: relative; }
.halo::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 420px; height: 260px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(45% 45% at 40% 40%, rgba(185,225,76,.5) 0%, rgba(185,225,76,0) 70%),
    radial-gradient(55% 55% at 62% 60%, rgba(63,155,84,.42) 0%, rgba(63,155,84,0) 70%);
  filter: blur(42px);
}
.halo > * { position: relative; }

/* ---- Mono voice ---- */
.mono { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.flag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.flag::before { content: "▪"; font-size: 8px; }
.dark .flag { color: var(--lime); }
.micro { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ---- Buttons — V6 effects on sharp V5 geometry ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 500; line-height: 1;
  border: none; cursor: pointer; text-decoration: none; border-radius: var(--r);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

.btn-aurora {
  position: relative; background: var(--aurora); color: var(--ink);
  font-size: 14px; padding: 15px 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 30px rgba(30,122,68,.22);
}
.btn-aurora:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 14px 36px rgba(30,122,68,.3); }
.btn-aurora .arr { font-size: 13px; }

.btn-aurora-dark {
  position: relative;
  background:
    radial-gradient(70% 120% at 20% 20%, rgba(185,225,76,.32) 0%, rgba(185,225,76,0) 60%),
    radial-gradient(70% 120% at 80% 80%, rgba(63,155,84,.3) 0%, rgba(63,155,84,0) 60%),
    #0F1510;
  color: var(--on-dark); font-size: 14px; padding: 15px 24px;
}
.btn-aurora-dark::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-line);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn-aurora-dark:hover { transform: translateY(-1px); }

.btn-mono {
  border: 1px solid var(--hairline); background: var(--paper);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); padding: 14px 19px;
}
.btn-mono:hover { border-color: var(--text); }
.btn-mono.on-photo { background: transparent; border-color: rgba(244,246,244,.5); color: var(--on-dark); }
.btn-mono.on-photo:hover { border-color: var(--on-dark); }
.btn-ink { background: var(--ink); color: #fff; font-size: 13.5px; padding: 13px 20px; }
.btn-ink:hover { background: #000; }
.btn-light { background: var(--paper); color: var(--ink); font-size: 14px; padding: 14px 22px; }
.btn-light:hover { background: var(--green-pale); }
.btn-green { background: var(--green); color: #fff; font-size: 14px; padding: 14px 20px; }
.btn-green:hover { background: var(--green-deep); }

.link-u { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; }
.link-u:hover { color: #000; }

/* ---- Tags ---- */
.tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; border-radius: var(--r); padding: 6px 10px; }
.tag::before { content: "▪"; font-size: 8px; }
.tag-ok { color: var(--ok); background: var(--ok-soft); }
.tag-warn { color: var(--warn); background: var(--warn-soft); }
.tag-bad { color: var(--bad); background: var(--bad-soft); }

.card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r); }

.meter { height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: var(--grad-line); transition: width .5s ease; }

.num-chip { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-2); flex: none; }
.arrow-chip { width: 32px; height: 32px; border-radius: var(--r); flex: none; background: rgba(255,255,255,.14); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; backdrop-filter: blur(4px); }