/* Dip app guides.
   Everything that holds text is sized in rem or em, so the page follows the
   reader's font size instead of fighting it. No fixed heights on anything that
   contains words — they get padding and grow. */
:root {
  --navy: #091B3D;
  --blue: #0387D1;
  --blue-dk: #2A66EC;
  --blue-100: #DCEBFE;
  --blue-50: #EFF6FF;
  --ink: #030712;
  --body: #374151;
  --muted: #6B7280;
  --faint: #979FB4;
  --line: #E5E7EB;
  --paper: #F9FAFB;
  --fill: #F3F4F6;
  --wrap: 77.5rem;
  --gutter: 2.5rem;
  --shot: 15.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* Long words and urls must never be the reason a page scrolls sideways. */
p, li, h1, h2, h3, summary, td, th, dd, dt { overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }

a { color: var(--blue); text-underline-offset: 0.1875rem; }
h1, h2, h3 { color: var(--navy); letter-spacing: -0.015em; }
p { margin: 0 0 1rem; }

/* ---- chrome ---- */
/* The site header and footer come from the layout and dip_chrome.css.
   Nothing here may style them, or the two stylesheets fight. */

/* ---- hero ---- */
.hero-inner { max-width: var(--wrap); margin: auto; padding: 3.5rem var(--gutter) 2.25rem; }
.hero-inner::before {
  content: ""; display: block; width: 3.5rem; height: 0.25rem;
  background: var(--blue); border-radius: 0.125rem; margin-bottom: 1rem;
}
.eyebrow { font-size: 0.8125rem; font-weight: 600; color: var(--blue); margin: 0 0 0.875rem; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 1rem; max-width: 20ch; }
.intro { font-size: 1.1875rem; line-height: 1.65; color: var(--body); max-width: 42ch; margin: 0 0 0.875rem; }
.meta { font-size: 0.8125rem; color: var(--faint); margin: 0; }

/* ---- section chips ---- */
/* The contents rail lists the same sections, so the chips only appear once the
   rail is gone. Two copies of one list sat side by side otherwise. */
.task-picker { display: none; }
@media (max-width: 68em) {
  .task-picker {
    max-width: var(--wrap); margin: auto; padding: 0 var(--gutter) 2.5rem;
    display: flex; flex-wrap: wrap; gap: 0.625rem;
  }
}
/* padding, not height — a chip has to grow with its label */
.task-picker a {
  display: inline-block; padding: 0.4375rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; color: var(--body); text-decoration: none;
}
.task-picker a:hover { border-color: var(--blue); color: var(--blue); }

/* ---- body ---- */
.layout {
  max-width: var(--wrap); margin: auto; padding: 0 var(--gutter) 4.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(17.5rem, 30%), 17.5rem); gap: 4rem; align-items: start;
}
article { min-width: 0; }

aside {
  position: sticky; top: 1.5rem;
  max-height: calc(100vh - 3rem); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 0.875rem;
  padding: 1.25rem 1.375rem;
}
aside b { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
aside ol { list-style: none; padding: 0; margin: 0.875rem 0; display: grid; gap: 0.625rem; }
/* Every entry looks the same: nothing here tracks where the reader actually is,
   so highlighting the first one just told them the wrong thing. */
aside ol a { font-size: 0.8125rem; line-height: 1.5; color: var(--blue); text-decoration: none; }
aside ol a:hover { text-decoration: underline; }
aside > a { display: block; font-size: 0.8125rem; font-weight: 500; text-decoration: none; margin-top: 0.625rem; }

/* Label and text stack rather than sharing a line, so neither gets squeezed. */
.before {
  background: var(--paper); border: 1px solid var(--line); border-radius: 0.75rem;
  padding: 1rem 1.125rem; font-size: 0.875rem;
}
/* Direct child only — the guide text inside the paragraph bolds control names,
   and a descendant selector turned each of those into its own line. */
.before > strong { color: var(--navy); display: block; margin-bottom: 0.25rem; }
.before p { margin: 0; color: var(--body); }

.procedure-heading { margin: 3.25rem 0 1.75rem; }
.procedure-heading h2 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.375rem; }
.procedure-heading p { font-size: 1rem; color: var(--muted); margin: 0; }

/* ---- steps ---- */
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.75rem;
  align-items: start;
  padding: 2rem 0; border-bottom: 1px solid var(--line);
}
.step.no-image { grid-template-columns: minmax(0, 1fr); }
.step-copy { min-width: 0; }
.step-head { display: flex; align-items: baseline; gap: 0.875rem; margin-bottom: 0.875rem; }
.number {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.125em; min-height: 2.125em; padding: 0.25em;
  border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 0.875rem; font-weight: 700;
  line-height: 1;
}
.step h2, .step h3 { font-size: 1.25rem; line-height: 1.35; margin: 0; }
.step p { font-size: 1rem; line-height: 1.7; color: var(--body); }
.step-copy > p:last-child { margin-bottom: 0; }
.tip { border-left: 0.1875rem solid var(--blue); padding-left: 0.875rem; color: var(--muted); font-size: 0.875rem !important; }

figure { margin: 0; }
figure a { display: block; background: var(--fill); border-radius: 1rem; padding: 1rem; }
figure img {
  display: block; width: var(--shot);
  border: 1px solid #D1D5DB; border-radius: 0.75rem;
}

/* ---- reference table ---- */
.reference { margin: 0 0 2.5rem; }
.reference h2 { font-size: 1.25rem; margin: 0 0 0.375rem; }
.reference { overflow-x: auto; }
.reference table { width: 100%; min-width: 18rem; border-collapse: collapse; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; }
.reference th, .reference td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.reference th { background: var(--paper); font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.reference tr:last-child td { border-bottom: 0; }

/* ---- outcome, faq, related ---- */
.after { background: var(--navy); border-radius: 1rem; padding: 1.5rem 1.75rem; margin-top: 1rem; }
.after h2 { color: #fff; font-size: 1.25rem; margin: 0 0 0.5rem; }
.after p { color: #C7D5F0; font-size: 1rem; line-height: 1.7; margin: 0; }

.faq { margin-top: 3.5rem; }
.faq h2, .related h2 { font-size: 1.75rem; margin: 0 0 1.25rem; }
details { border-top: 1px solid var(--line); padding: 1.125rem 0; }
summary {
  cursor: pointer; font-size: 1.0625rem; font-weight: 600; color: var(--navy);
  list-style: none; display: flex; gap: 1rem; align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--faint); font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { margin: 0.625rem 0 0; color: var(--body); }

.related { margin-top: 3.5rem; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1.25rem; }
.related li { background: var(--paper); border: 1px solid var(--line); border-radius: 0.875rem; }
.related a { display: block; padding: 1.25rem 1.375rem; font-size: 1.125rem; font-weight: 600; color: var(--navy); text-decoration: none; line-height: 1.4; }
.related li:hover { border-color: var(--blue); }
.related li:hover a { color: var(--blue); }

.back-link { margin-top: 2.5rem; font-size: 0.875rem; }

/* ---- index ---- */
.catalog { max-width: var(--wrap); margin: auto; padding: 2.5rem var(--gutter) 4.5rem; }
.page-title { font-size: 1.875rem; margin: 0 0 1.75rem; }
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1.25rem; }
.start-card { background: var(--paper); border: 1px solid var(--line); border-radius: 0.875rem; padding: 1.5rem 1.625rem; }
.start-card h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.start-card ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.start-card a { font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.start-card a:hover { text-decoration: underline; }

/* Each label stays with its own control — as loose grid items they landed in
   four separate columns. */
.find { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem 1.25rem; margin: 2.5rem 0 0.5rem; }
.find-field { min-width: 0; }
.find label { font-size: 0.8125rem; font-weight: 500; color: var(--muted); display: block; margin-bottom: 0.375rem; }
.find input, .find select {
  font: inherit; font-size: 0.9375rem; width: 100%; padding: 0.625rem 0.875rem;
  border: 1px solid var(--line); border-radius: 0.625rem; background: #fff; color: var(--ink);
}

.category { margin: 2.5rem 0 0; }
.category h2 { font-size: 1.25rem; margin: 0 0 0.875rem; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1.25rem; }
.guide-card {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.375rem;
  border: 1px solid var(--line); border-radius: 0.875rem; text-decoration: none; color: inherit;
}
.guide-card:hover { border-color: var(--blue); background: var(--blue-50); }
.guide-card .eyebrow { font-size: 0.75rem; margin: 0; }
.guide-card h3 { font-size: 1.125rem; line-height: 1.35; margin: 0; }
.guide-card p { font-size: 0.875rem; color: var(--muted); margin: 0; flex: 1; }
.read { font-size: 0.8125rem; font-weight: 600; color: var(--blue); }
#no-results { color: var(--muted); }
[hidden] { display: none !important; }

/* ---- accessibility ---- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0.75rem; top: 0.75rem; background: #fff; padding: 0.625rem; z-index: 10; }
a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 0.1875rem solid var(--blue); outline-offset: 0.1875rem;
}

/* Breakpoints in em, so they also fire when the reader's text is large. */
@media (max-width: 68em) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  aside { display: none; }
}
@media (max-width: 46em) {
  :root { --gutter: 1.375rem; --shot: 100%; }
  .find { grid-template-columns: minmax(0, 1fr); }
  .hero-inner { padding-top: 2.25rem; }
  .step, .step.no-image { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
  figure a { max-width: min(20rem, 100%); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { aside, .skip, .task-picker { display: none; } .layout { display: block; } }