/* =========================================================================
   Parilon — prototype component layer
   Sits on top of Tailwind. Everything here is a brand primitive that would
   become an Antlers partial or a Tailwind @layer component in the real build.
   ========================================================================= */

:root {
  --p-mist:        #d3feea;
  --p-bright:      #66cc99;
  --p-green:       #339966;
  --p-forest:      #14301f;
  --p-forest-deep: #0b1f14;
  --p-alert:       #b22616;
  --p-ink-green:   #1f6b45;

  --p-rule-dark:  rgba(211, 254, 234, .16);
  --p-rule-light: rgba(20, 48, 31, .12);

  --p-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: 'Gill Sans', 'Gill Sans MT', 'Gill Sans Nova', Calibri, 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  color: var(--p-forest);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings run Light (300) per the brand font page. Body runs
   regular; SemiBold is reserved for emphasis and UI labels. */
.p-display { font-weight: 300; }
.p-semibold { font-weight: 600; }

/* Visible focus everywhere — accessibility is a stated requirement, and the
   default browser ring disappears against the dark green surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--p-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--p-mist);
}

.p-skip {
  position: absolute; left: 1rem; top: -6rem; z-index: 100;
  background: var(--p-mist); color: var(--p-forest);
  padding: .75rem 1.25rem; font-weight: 600;
  transition: top .2s var(--p-ease);
}
.p-skip:focus { top: 1rem; }

/* -------------------------------------------------------------------------
   Eyebrow chip
   Lifted straight from the guidelines: dark green plate, light letter-spaced
   caps, red rule under it and a red bar off its right edge. It appears on
   every section header in the deck, so it becomes the section-label primitive.
   ------------------------------------------------------------------------- */
.p-chip {
  position: relative;
  display: inline-flex; align-items: center;
  background: var(--p-forest);
  color: #fff;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem .95rem .55rem;
}
.p-chip::after {
  content: ''; position: absolute; left: 0; right: -6px; bottom: -3px;
  height: 3px; background: var(--p-alert);
}
.p-chip::before {
  content: ''; position: absolute; top: 3px; bottom: -3px; right: -6px;
  width: 3px; background: var(--p-alert);
}
.p-chip--light { background: var(--p-mist); color: var(--p-forest); }
.p-chip--plain { background: transparent; color: var(--p-ink-green); padding-left: 0; }
.p-chip--plain::before, .p-chip--plain::after { display: none; }
.p-chip--plain { border-left: 3px solid var(--p-alert); padding-left: .75rem; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  border: 2px solid transparent;
  transition: background-color .2s var(--p-ease), color .2s var(--p-ease),
              border-color .2s var(--p-ease), transform .2s var(--p-ease);
  cursor: pointer; text-align: center;
}
.p-btn:active { transform: translateY(1px); }

.p-btn--primary { background: var(--p-bright); color: var(--p-forest); }
.p-btn--primary:hover { background: #7fd8ab; }

.p-btn--dark { background: var(--p-forest); color: #fff; }
.p-btn--dark:hover { background: var(--p-forest-deep); }

.p-btn--ghost-light { border-color: rgba(211,254,234,.45); color: #fff; }
.p-btn--ghost-light:hover { border-color: var(--p-mist); background: rgba(211,254,234,.1); }

.p-btn--ghost-dark { border-color: rgba(20,48,31,.35); color: var(--p-forest); }
.p-btn--ghost-dark:hover { border-color: var(--p-forest); background: rgba(20,48,31,.05); }

.p-btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }

/* Arrow that nudges on hover — used on cards and text links. */
.p-arrow { transition: transform .25s var(--p-ease); }
.group:hover .p-arrow, a:hover > .p-arrow, button:hover > .p-arrow { transform: translateX(4px); }

.p-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--p-ink-green);
  border-bottom: 2px solid rgba(51,153,102,.35); padding-bottom: 2px;
  transition: border-color .2s var(--p-ease), color .2s var(--p-ease);
}
.p-link:hover { border-color: var(--p-green); }
.on-dark .p-link { color: var(--p-bright); border-color: rgba(102,204,153,.4); }
.on-dark .p-link:hover { border-color: var(--p-bright); }

/* -------------------------------------------------------------------------
   Dark surfaces + the "living network" texture
   The guideline imagery is consistently a dark green field with a lit network
   / leaf-vein structure over it. Reproduced here with gradients and an SVG
   line mesh rather than photography, so the prototype carries no image weight.
   ------------------------------------------------------------------------- */
.p-dark {
  background: var(--p-forest);
  color: #fff;
  position: relative; isolation: isolate;
}
.p-dark--deep { background: var(--p-forest-deep); }
.p-dark p { color: rgba(255,255,255,.78); }
.p-dark .p-muted { color: rgba(211,254,234,.62); }

/* Both textures paint behind their own content, so each needs to establish a
   stacking context — otherwise the z-index:-1 layer falls behind an opaque
   parent background and disappears (e.g. inside a card thumbnail). */
.p-glow, .p-mesh { position: relative; isolation: isolate; }

/* The drifting glow layer is deliberately larger than its box (see below), so
   the box must clip it — otherwise it widens the page on narrow viewports.
   Safe here: nothing inside a .p-glow surface overflows or uses position:sticky. */
.p-glow { overflow: hidden; }

.p-glow::before {
  content: ''; position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 8%,  rgba(102,204,153,.30), transparent 68%),
    radial-gradient(50% 60% at 88% 78%, rgba(51,153,102,.28),  transparent 70%),
    radial-gradient(35% 40% at 62% 18%, rgba(211,254,234,.10), transparent 72%);
  /* Passive ambient drift — the light field breathes rather than sitting still.
     Inset is negative so the gradient edges never enter the frame while moving.
     The global prefers-reduced-motion rule above neutralises this. */
  animation: p-drift 34s var(--p-ease) infinite alternate;
  will-change: transform;
}

@keyframes p-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.2%, -1.8%, 0) scale(1.06); }
  100% { transform: translate3d(-1.8%, 2.2%, 0) scale(1.02); }
}

.p-mesh::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg stroke='%2366cc99' stroke-opacity='.30' fill='none' stroke-width='.8'%3E%3Cpath d='M0 60 L70 24 L152 66 L240 30'/%3E%3Cpath d='M0 150 L60 118 L134 168 L240 132'/%3E%3Cpath d='M70 24 L60 118 L134 168 L152 66Z'/%3E%3Cpath d='M0 60 L60 118M152 66 L240 132M134 168 L120 240M70 24 L96 0'/%3E%3C/g%3E%3Cg fill='%2366cc99'%3E%3Ccircle cx='70' cy='24' r='2.2'/%3E%3Ccircle cx='152' cy='66' r='1.8'/%3E%3Ccircle cx='60' cy='118' r='1.8'/%3E%3Ccircle cx='134' cy='168' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 480px;
}

/* Large .p-mesh surfaces are upgraded by parilon.js to a live canvas network
   that drifts on its own and reacts to the cursor. Small ones (card
   thumbnails, portraits) keep the cheap static tile above. Opt out with
   data-network="off". */
.p-network {
  position: absolute; inset: 0; z-index: -1;
  display: block; pointer-events: none;
}
.p-mesh.has-network::after { display: none; }

/* Hairline grid used behind stat rows and the dashboard mock. */
.p-grid-lines {
  background-image:
    linear-gradient(to right, var(--p-rule-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--p-rule-dark) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.p-card {
  background: #fff;
  border: 1px solid var(--p-rule-light);
  transition: border-color .25s var(--p-ease), box-shadow .25s var(--p-ease), transform .25s var(--p-ease);
}
.p-card:hover { border-color: rgba(51,153,102,.5); box-shadow: 0 2px 4px rgba(11,31,20,.05), 0 28px 56px -20px rgba(11,31,20,.24); transform: translateY(-3px); }
.p-card--dark { background: rgba(255,255,255,.04); border-color: var(--p-rule-dark); }
.p-card--dark:hover { border-color: rgba(102,204,153,.55); background: rgba(255,255,255,.07); }

/* Left rule that fills in on hover — the deck uses a lot of thin vertical rules. */
.p-rule-card { border-left: 3px solid rgba(51,153,102,.35); transition: border-color .25s var(--p-ease); }
.p-rule-card:hover { border-left-color: var(--p-green); }

/* -------------------------------------------------------------------------
   Numbered step markers (How It Works, three-step overview)
   ------------------------------------------------------------------------- */
.p-step-num {
  font-weight: 300; font-size: 3.25rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--p-green);
  letter-spacing: -.02em;
}
.p-dark .p-step-num { -webkit-text-stroke-color: var(--p-bright); }

/* -------------------------------------------------------------------------
   Status pills — reused by the dashboard mock and the compliance table
   ------------------------------------------------------------------------- */
.p-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .6rem;
}
.p-pill--ok   { background: rgba(102,204,153,.18); color: #1f6b45; }
.p-pill--warn { background: rgba(234,179,8,.16);   color: #7a5a05; }
.p-pill--fail { background: rgba(178,38,22,.12);   color: var(--p-alert); }
.p-dark .p-pill--ok   { background: rgba(102,204,153,.2); color: var(--p-bright); }
.p-dark .p-pill--warn { background: rgba(250,204,21,.18); color: #facc15; }
.p-dark .p-pill--fail { background: rgba(178,38,22,.28);  color: #ff9a8c; }

.p-dot { width: .5rem; height: .5rem; border-radius: 99px; background: currentColor; }
.p-dot--live { animation: p-pulse 2s var(--p-ease) infinite; }
@keyframes p-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(102,204,153,.55); }
  60%      { box-shadow: 0 0 0 7px rgba(102,204,153,0); }
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.p-field {
  width: 100%; padding: .8rem .9rem;
  border: 1px solid rgba(20,48,31,.25); background: #fff; color: var(--p-forest);
  font-family: inherit; font-size: 1rem;
  transition: border-color .2s var(--p-ease), box-shadow .2s var(--p-ease);
}
.p-field:hover { border-color: rgba(20,48,31,.45); }
.p-field:focus { border-color: var(--p-green); box-shadow: 0 0 0 3px rgba(102,204,153,.3); outline: none; }
.p-label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4rem; }
.p-help  { font-size: .82rem; color: rgba(20,48,31,.65); margin-top: .35rem; }
.on-dark .p-field { background: rgba(255,255,255,.06); border-color: rgba(211,254,234,.28); color: #fff; }
.on-dark .p-field::placeholder { color: rgba(211,254,234,.45); }
.on-dark .p-help { color: rgba(211,254,234,.6); }

/* Range slider — the calculator's door-count control. */
.p-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: rgba(20,48,31,.2); outline: none; }
.p-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--p-green); border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(20,48,31,.3); cursor: grab;
}
.p-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--p-green); border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(20,48,31,.3); cursor: grab;
}

/* -------------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------------- */
.p-header { background: rgba(20,48,31,.94); backdrop-filter: saturate(1.4) blur(10px); }
.p-nav-link {
  position: relative; padding: .4rem 0; font-size: .95rem; color: rgba(255,255,255,.82);
  transition: color .2s var(--p-ease);
}
.p-nav-link:hover, .p-nav-link[aria-current='page'] { color: #fff; }
.p-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--p-bright); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--p-ease);
}
.p-nav-link:hover::after, .p-nav-link[aria-current='page']::after { transform: scaleX(1); }

.p-dropdown { opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s var(--p-ease); }
.p-has-dropdown:hover .p-dropdown,
.p-has-dropdown:focus-within .p-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* -------------------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------------------- */
.p-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--p-ease), transform .7s var(--p-ease); }
.p-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .p-reveal { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------------
   Prototype annotation — makes it obvious what is real and what is stubbed.
   ------------------------------------------------------------------------- */
.p-note {
  border-left: 3px solid var(--p-alert);
  background: #fdeceb; color: #6b1a10;
  padding: .75rem 1rem; font-size: .85rem; line-height: 1.5;
}
.p-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }
.on-dark .p-note { background: rgba(178,38,22,.16); color: #ffd8d2; }

.p-tag-placeholder {
  display: inline-block; font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .15rem .45rem;
  background: rgba(178,38,22,.12); color: var(--p-alert);
}