/* ============================================================================
   Applied NDT - Design System
   Foundation layer. Loaded before every other stylesheet.

   Grounded in Apple's Human Interface Guidelines:
   - Semantic colour roles (label / background / fill / separator levels)
     rather than raw hex, so both appearances resolve as a set.
   - Both appearances are first-class. Light is the base; dark is defined
     for prefers-color-scheme AND for an explicit [data-appearance] override.
   - A type scale built on the SF text styles, using the system font stack so
     Apple platforms get San Francisco and everyone else gets their native face.
   - 44pt minimum hit target on everything interactive.
   - Visible, consistent keyboard focus.
   - Motion respects prefers-reduced-motion; contrast respects prefers-contrast.
   ========================================================================= */

:root {
  --bg:                 #ffffff;
  --bg-secondary:       #f5f7fa;
  --bg-tertiary:        #eceff4;
  --bg-grouped:         #f2f4f8;
  --bg-elevated:        #ffffff;

  --label:              #10141c;
  --label-secondary:    #46505f;
  --label-tertiary:     #6c7688;
  --label-quaternary:   #99a2b0;
  --label-on-tint:      #ffffff;
  --label-on-dark:      #ffffff;

  --separator:          rgba(16, 20, 28, 0.10);
  --separator-opaque:   #dde2e9;
  --fill-1:             rgba(16, 20, 28, 0.05);
  --fill-2:             rgba(16, 20, 28, 0.08);
  --fill-3:             rgba(16, 20, 28, 0.12);

  --tint:               #c2410c;
  --tint-hover:         #9a3412;
  --tint-active:        #7c2d12;
  --tint-soft:          rgba(194, 65, 12, 0.10);
  --tint-border:        rgba(194, 65, 12, 0.32);
  --tint-bright:        #f97316;

  --brand-deep:         #0d1524;
  --brand:              #16233a;
  --brand-soft:         #1f3050;

  --success:            #1c7048;
  --success-bg:         #e5f3ec;
  --warning:            #a25a00;
  --warning-bg:         #fdf1de;
  --danger:             #b0241c;
  --danger-bg:          #fbe9e7;
  --info:               #26618f;
  --info-bg:            #e7f0f8;

  --shadow-1: 0 1px 2px rgba(16, 20, 28, .06);
  --shadow-2: 0 1px 2px rgba(16, 20, 28, .05), 0 6px 16px -10px rgba(16, 20, 28, .22);
  --shadow-3: 0 2px 4px rgba(16, 20, 28, .06), 0 18px 40px -22px rgba(16, 20, 28, .35);

  --material-bar:       rgba(255, 255, 255, 0.72);
  --material-blur:      saturate(180%) blur(20px);

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-large-title: clamp(2.15rem, 1.5rem + 2.6vw, 3.25rem);
  --text-title-1:     clamp(1.75rem, 1.35rem + 1.6vw, 2.35rem);
  --text-title-2:     clamp(1.4rem, 1.2rem + 0.85vw, 1.75rem);
  --text-title-3:     clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --text-headline:    1.0625rem;
  --text-body:        1.0625rem;
  --text-callout:     1rem;
  --text-subhead:     0.9375rem;
  --text-footnote:    0.8125rem;
  --text-caption:     0.75rem;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 6px;  --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-full: 999px;

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-1: 120ms;
  --duration-2: 220ms;
  --duration-3: 380ms;

  --measure: 68ch;
  --container: 1120px;
  --tap-min: 44px;
  --focus-ring: 0 0 0 3px rgba(194, 65, 12, 0.40);
}

/* ---- Dark appearance: OS preference (explicit light choice still wins) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
  --bg:               #0b1017;
  --bg-secondary:     #131a24;
  --bg-tertiary:      #1b2431;
  --bg-grouped:       #0f151e;
  --bg-elevated:      #172230;

  --label:            #e9eef5;
  --label-secondary:  #a9b6c6;
  --label-tertiary:   #7c8b9d;
  --label-quaternary: #5d6b7c;

  --separator:        rgba(233, 238, 245, 0.12);
  --separator-opaque: #263341;
  --fill-1:           rgba(233, 238, 245, 0.06);
  --fill-2:           rgba(233, 238, 245, 0.10);
  --fill-3:           rgba(233, 238, 245, 0.15);

  --tint:             #ff8a4c;
  --tint-hover:       #ffa06b;
  --tint-active:      #ffb489;
  --tint-soft:        rgba(255, 138, 76, 0.14);
  --tint-border:      rgba(255, 138, 76, 0.38);
  --tint-bright:      #ff9a5c;

  --brand-deep:       #070c14;
  --brand:            #0e1725;
  --brand-soft:       #172438;

  --success:          #4ec18a;  --success-bg: #10251c;
  --warning:          #eda23f;  --warning-bg: #2a2013;
  --danger:           #ff7065;  --danger-bg:  #2b1614;
  --info:             #74acdd;  --info-bg:    #152431;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .8);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 48px -24px rgba(0, 0, 0, .9);

  --material-bar: rgba(11, 16, 23, 0.72);
  --focus-ring: 0 0 0 3px rgba(255, 138, 76, 0.45);
  }
}

/* ---- Dark appearance: explicit override ---- */
:root[data-appearance="dark"] {
  --bg:               #0b1017;
  --bg-secondary:     #131a24;
  --bg-tertiary:      #1b2431;
  --bg-grouped:       #0f151e;
  --bg-elevated:      #172230;

  --label:            #e9eef5;
  --label-secondary:  #a9b6c6;
  --label-tertiary:   #7c8b9d;
  --label-quaternary: #5d6b7c;

  --separator:        rgba(233, 238, 245, 0.12);
  --separator-opaque: #263341;
  --fill-1:           rgba(233, 238, 245, 0.06);
  --fill-2:           rgba(233, 238, 245, 0.10);
  --fill-3:           rgba(233, 238, 245, 0.15);

  --tint:             #ff8a4c;
  --tint-hover:       #ffa06b;
  --tint-active:      #ffb489;
  --tint-soft:        rgba(255, 138, 76, 0.14);
  --tint-border:      rgba(255, 138, 76, 0.38);
  --tint-bright:      #ff9a5c;

  --brand-deep:       #070c14;
  --brand:            #0e1725;
  --brand-soft:       #172438;

  --success:          #4ec18a;  --success-bg: #10251c;
  --warning:          #eda23f;  --warning-bg: #2a2013;
  --danger:           #ff7065;  --danger-bg:  #2b1614;
  --info:             #74acdd;  --info-bg:    #152431;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .8);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 48px -24px rgba(0, 0, 0, .9);

  --material-bar: rgba(11, 16, 23, 0.72);
  --focus-ring: 0 0 0 3px rgba(255, 138, 76, 0.45);
}

/* ---- Increased contrast (HIG: Increase Contrast setting) ---- */
@media (prefers-contrast: more) {
  :root {
    --label-secondary:  #2b3442;
    --label-tertiary:   #46505f;
    --separator:        rgba(16, 20, 28, 0.26);
    --separator-opaque: #9aa5b4;
    --tint:             #9a3412;
  }
  :root[data-appearance="dark"] {
    --label-secondary:  #ccd6e2;
    --label-tertiary:   #a9b6c6;
    --separator:        rgba(233, 238, 245, 0.28);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-large-title); font-weight: 700; }
h2 { font-size: var(--text-title-1);     font-weight: 700; }
h3 { font-size: var(--text-title-2);     font-weight: 600; }
h4 { font-size: var(--text-title-3);     font-weight: 600; }
h5, h6 { font-size: var(--text-headline); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--space-4); }
p, li { text-wrap: pretty; }

a { color: var(--tint); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--tint-hover); }

small { font-size: var(--text-footnote); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--separator); margin: var(--space-6) 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
::selection { background: var(--tint-soft); color: var(--label); }

/* ==== Focus: visible and consistent (HIG keyboard accessibility) ==== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
  padding: var(--space-3) var(--space-4); min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  background: var(--tint); color: var(--label-on-tint);
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
  transition: top var(--duration-2) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: var(--label-on-tint); }

/* ==== Hit targets: HIG minimum 44x44 ==== */
button, [role="button"], input[type="button"], input[type="submit"],
input[type="reset"], select, summary {
  min-height: var(--tap-min);
  font-family: inherit;
  font-size: var(--text-callout);
}
nav a, .footer a, .nav-link, .btn, .method-card, [data-action] { min-height: var(--tap-min); }
/* Inline links in running prose must not be stretched. */
p a, li a, td a, dd a, .prose a, h1 a, h2 a, h3 a { min-height: 0; }

/* ==== Controls: HIG button hierarchy (filled / tinted / gray / plain) ==== */
.btn, .btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-text);
  font-size: var(--text-callout);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-1) var(--ease-out),
              color var(--duration-1) var(--ease-out),
              border-color var(--duration-1) var(--ease-out),
              transform var(--duration-1) var(--ease-out);
}
.btn:active, .btn-primary:active, .btn-secondary:active { transform: scale(0.975); }

.btn-primary, .btn--filled { background: var(--tint); color: var(--label-on-tint); }
.btn-primary:hover, .btn--filled:hover { background: var(--tint-hover); color: var(--label-on-tint); }

.btn-secondary, .btn--tinted {
  background: var(--tint-soft); color: var(--tint); border-color: var(--tint-border);
}
.btn-secondary:hover, .btn--tinted:hover { background: var(--fill-2); color: var(--tint-hover); }

.btn--gray { background: var(--fill-2); color: var(--label); }
.btn--gray:hover { background: var(--fill-3); }

.btn--plain { background: transparent; color: var(--tint); padding-inline: var(--space-2); }
.btn--plain:hover { background: var(--fill-1); }

.btn[disabled], .btn-primary[disabled], .btn-secondary[disabled], button[disabled] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

/* ==== Fields ==== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  color: var(--label);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--radius-sm);
  font-family: var(--font-text);
  font-size: var(--text-body);
  transition: border-color var(--duration-1) var(--ease-out),
              box-shadow var(--duration-1) var(--ease-out);
}
textarea { min-height: 120px; line-height: var(--leading-body); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--label-quaternary); }
input:focus, select:focus, textarea:focus { border-color: var(--tint); }
input[aria-invalid="true"] { border-color: var(--danger); }

/* ==== Surfaces ==== */
.material-bar {
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  border-bottom: 1px solid var(--separator);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .material-bar { background: var(--bg); }
}

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-caption); font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--fill-2); color: var(--label-secondary);
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge--info    { background: var(--info-bg);    color: var(--info);    }
.badge--tint    { background: var(--tint-soft);  color: var(--tint);    }

/* ==== Layout helpers ==== */
.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.prose { max-width: var(--measure); }
td.num, .num, .tabular { font-variant-numeric: tabular-nums; }
.table-scroll, .overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==== Motion ==== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active, .btn-primary:active, .btn-secondary:active { transform: none; }
}

/* ==== Print ==== */
@media print {
  body { background: #fff; color: #000; }
  nav, .footer, .skip-link, .btn, button { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}