/* =============================================================================
   PlotPDFPro Portal — Base layer
   Reset, typography, layout primitives and the blueprint background system.
   No literal colour or length values: every value is a token (see tokens.css).
   ============================================================================= */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Digits must never shift their neighbours as they count (DL §5.3). */
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  /* Segoe UI Variable and Inter are both variable fonts with an optical size axis. Without this the
     browser renders the hero at the same optical size as caption text, which reads slightly heavy. */
  font-optical-sizing: auto;
  /* Never let the browser fake a weight it does not have; a synthesised bold is muddy at hero size. */
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

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

/* ---------------------------------------------------------------- focus
   A visible focus ring on every interactive element is non-negotiable (DL §19). */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent-default);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link — first tab stop on every page. */
.pp-skip-link {
  position: absolute;
  left: var(--space-3);
  top: calc(var(--space-3) * -10);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--surface-raised);
  box-shadow: var(--elevation-2);
  color: var(--text-primary);
  text-decoration: none;
  transition: top var(--motion-fast) var(--ease-standard);
}

.pp-skip-link:focus {
  top: var(--space-3);
}

.pp-visually-hidden {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  padding: 0;
  margin: calc(var(--hairline) * -1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- typography scale */
.pp-type-hero {
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-line);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-hero);
}

.pp-type-display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-display);
}

.pp-type-title1 {
  font-size: var(--type-title1-size);
  line-height: var(--type-title1-line);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-title1);
}

.pp-type-title2 {
  font-size: var(--type-title2-size);
  line-height: var(--type-title2-line);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-title2);
}

.pp-type-title3 {
  font-size: var(--type-title3-size);
  line-height: var(--type-title3-line);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-title3);
}

.pp-type-body-large {
  font-size: var(--type-body-large-size);
  line-height: var(--type-body-large-line);
  letter-spacing: var(--tracking-normal);
}

.pp-type-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--tracking-normal);
}

.pp-type-body-strong {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--weight-strong);
}

.pp-type-caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-tertiary);
}

.pp-type-caption-strong {
  font-size: var(--type-caption-strong-size);
  line-height: var(--type-caption-strong-line);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-caption-strong);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pp-type-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-line);
  /* 0 and O are indistinguishable inside a hash without this (DL §5.3). */
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Reading measure: 65–75 characters (DL §5.4). */
.pp-prose {
  /* Whichever is narrower: the layout cap, or the measure the type itself can carry. */
  max-width: min(var(--container-reading), var(--measure-prose));
  /* Avoids a last line holding a single word. Ignored by browsers that do not support it, so there
     is nothing to fall back to. */
  text-wrap: pretty;
}

/* Headings set their own line breaks badly by default: a two-line title often leaves one word
   stranded. Balancing distributes the words across the lines instead. */
.pp-type-hero,
.pp-type-display,
.pp-type-title1,
.pp-type-title2,
.pp-type-title3 {
  text-wrap: balance;
}

/* ---------------------------------------------------------------- long-form reading (ACP-DESIGN-001A)
   Legal and policy documents are read, not scanned, and they are the one place in the product where
   a customer has to follow a numbered argument across several screens. The interface body size is
   set for text that sits beside controls; here there are no controls, so the type gets bigger and
   the rhythm gets stricter. */
.pp-reading {
  font-size: var(--type-reading-size);
  line-height: var(--type-reading-line);
}

/* A heading must bind to the section it introduces. The surrounding stack applies one uniform gap,
   which puts a heading exactly as far from the paragraph above it as from the one below — so the
   page reads as a flat list of blocks rather than as sections. Adding to the leading edge only
   restores the asymmetry. */
.pp-reading-flow > h2 { margin-block-start: var(--space-4); }
.pp-reading-flow > h3 { margin-block-start: var(--space-2); }
.pp-reading-flow > :first-child { margin-block-start: 0; }

/* Turkish builds long agglutinative words, which leave a heavy rag in a narrow column. Hyphenation
   is scoped to narrow viewports because at reading width the rag is preferable. */
@media (max-width: 599px) {
  .pp-reading-flow .pp-prose { hyphens: auto; }
}

/* ---------------------------------------------------------------- layout */
.pp-container {
  width: 100%;
  max-width: var(--container-app);
  margin-inline: auto;
  padding-inline: var(--page-margin-desktop);
}

.pp-container--text {
  max-width: var(--container-text);
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.pp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pp-stack--tight { gap: var(--space-2); }
.pp-stack--loose { gap: var(--space-5); }

.pp-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pp-section {
  padding-block: var(--space-6);
}

/* ---------------------------------------------------------------- blueprint background
   Never animated, never parallax, never scaled with the viewport (DL §4.4).
   The SVG is used as a MASK, so the stroke colour comes from a token and the
   asset itself carries no colour decision. */
.pp-blueprint {
  position: relative;
  isolation: isolate;
}

.pp-blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--blueprint-stroke);
  -webkit-mask-image: url("../img/blueprint.svg");
  mask-image: url("../img/blueprint.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  /* Fixed world scale: a larger page reveals more drawing, it does not enlarge it. */
  -webkit-mask-size: var(--blueprint-tile) var(--blueprint-tile);
  mask-size: var(--blueprint-tile) var(--blueprint-tile);
  opacity: var(--blueprint-opacity-page);
}

/* Context-specific opacity (DL §4.3). */
.pp-blueprint--open::before  { opacity: var(--blueprint-opacity-open); }
.pp-blueprint--text::before  { opacity: var(--blueprint-opacity-text); }
.pp-blueprint--dense::before { opacity: var(--blueprint-opacity-dense); }

/* ---------------------------------------------------------------- accessibility overrides */

/* All motion collapses to an instant transition; no information is lost (DL §9.3). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Blueprint is switched off entirely, not merely faded (DL §4.4). */
@media (prefers-reduced-transparency: reduce) {
  .pp-blueprint::before { display: none; }
}

@media (forced-colors: active) {
  .pp-blueprint::before { display: none; }
}

/* Blueprint never reaches print or PDF output (DL §4.4). */
@media print {
  .pp-blueprint::before { display: none; }

  body {
    background-color: transparent;
  }
}

/* ---------------------------------------------------------------- responsive
   Desktop first: the user is an engineer at a workstation (DL §16.2). */
@media (max-width: 1023px) {
  .pp-container { padding-inline: var(--page-margin-tablet); }
  .pp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pp-container { padding-inline: var(--page-margin-mobile); }
  .pp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-type-hero {
    font-size: var(--type-display-size);
    line-height: var(--type-display-line);
    letter-spacing: var(--tracking-display);
  }
  .pp-type-display {
    font-size: var(--type-title1-size);
    line-height: var(--type-title1-line);
    letter-spacing: var(--tracking-title1);
  }
}

/* ---------------------------------------------------------------- paper texture
   A very subtle surface grain so the canvas reads as premium paper rather than a flat fill.
   Regular weave, never random noise, and never a gradient. Disabled wherever the blueprint is. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--blueprint-stroke);
  -webkit-mask-image: url("../img/paper.svg");
  mask-image: url("../img/paper.svg");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: var(--paper-texture-tile) var(--paper-texture-tile);
  mask-size: var(--paper-texture-tile) var(--paper-texture-tile);
  opacity: var(--paper-texture-opacity);
}

@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
}

@media (forced-colors: active) {
  body::before { display: none; }
}

@media print {
  body::before { display: none; }
}