/* Extra rules on top of the compiled Grok Build Tailwind CSS (assets/styles.css).
   Only things the compiled CSS does not contain: draft bar, prose pages, filter pills, details, tables, form bits.
   Uses the same theme variables (--color-navy, --color-orange, ...). */
html { scroll-padding-top: 5rem; }
.draftbar { background: #b3261e; color: #fff; font-family: var(--font-sans); font-size: .8125rem; font-weight: 600; line-height: 1.3; text-align: center; padding: .35rem .75rem; }
.todo { background: #fff3b0; color: #5c4400; padding: 0 .35em; font-size: .85em; font-weight: 600; border-radius: 2px; white-space: normal; }
.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.lnk, .prose a, .srcs a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lnk:hover, .prose a:hover, .srcs a:hover { text-decoration-color: var(--color-navy); }
.small { font-size: .875rem; color: var(--color-muted); }

/* prose pages */
.prose { max-width: 46rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.85rem; font-weight: 800; line-height: 1.05; margin-top: 2.25rem; }
.prose h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.15; margin-top: 1.25rem; }
.prose p, .prose ul, .prose ol { margin-top: .85rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; }
.prose li { margin-top: .35rem; }
.prose .note { border: 1px solid var(--color-orange); background: color-mix(in srgb, var(--color-orange) 10%, white); padding: 1rem 1.1rem; margin-top: 1.25rem; }
.prose .note p { margin-top: .4rem; }
.prose .note > :first-child { margin-top: 0; }
.callout { border: 1px solid var(--color-line); background: var(--color-card); padding: 1.1rem 1.25rem; }
.callout.alarm { border-color: var(--color-orange); background: color-mix(in srgb, var(--color-orange) 10%, white); }
.callout h2, .callout h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; }
.callout p { margin-top: .5rem; }
.callout ol { list-style: decimal; padding-left: 1.4rem; margin-top: .6rem; }
.callout li { margin-top: .35rem; }

/* i-got-hit steps */
ol.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.25rem; }
ol.steps > li { counter-increment: step; position: relative; border: 1px solid var(--color-line); background: var(--color-card); padding: 1.1rem 1.25rem 1.1rem 4rem; margin-top: 0; }
ol.steps > li::before { content: counter(step); position: absolute; left: 1.1rem; top: 1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--color-navy); color: var(--color-on-navy); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
ol.steps h3 { margin-top: 0; }
ol.steps p, ol.steps ul { margin-top: .5rem; }
.tablewrap { overflow-x: auto; margin-top: 1rem; }
.prose table { width: 100%; border-collapse: collapse; background: var(--color-card); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .6rem .8rem; border: 1px solid var(--color-line); font-size: .95rem; }
.prose th { font-family: var(--font-display); font-size: 1rem; background: var(--color-paper); }

/* filters */
.pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.pill { flex: none; min-height: 2.75rem; padding: 0 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; border: 1px solid var(--color-line); background: var(--color-card); color: var(--color-navy); }
.pill[aria-pressed="true"] { background: var(--color-navy); color: var(--color-on-navy); border-color: var(--color-navy); }
.field { min-height: 3rem; width: 100%; border: 1px solid var(--color-line); background: var(--color-card); padding: 0 .75rem; color: var(--color-ink); font: inherit; }
.filterbar { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .filterbar { grid-template-columns: 2fr 1fr; } }
.filterbar label { display: block; font-family: var(--font-display); font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .25rem; }
.count { margin-top: 1rem; font-family: var(--font-display); font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chip { display: inline-block; border: 1px solid var(--color-line); background: var(--color-paper); padding: .1rem .55rem; font-size: .8125rem; font-weight: 600; color: var(--color-muted); }

/* pattern details + sources */
details.more { margin-top: 1.25rem; border-top: 1px solid var(--color-line); padding-top: .9rem; }
details.more > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--color-navy); }
details.more > summary:hover { text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
details.more h4 { margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
details.more ul { list-style: disc; padding-left: 1.4rem; margin-top: .4rem; }
details.more li { margin-top: .25rem; }
details.more p { margin-top: .4rem; max-width: 48rem; }
.srcs { list-style: disc; padding-left: 1.4rem; margin-top: .4rem; font-size: .95rem; }
.srcs li { margin-top: .25rem; }

/* checklist */
.choice { display: flex; min-height: 3rem; cursor: pointer; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-navy); font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.choice.on { background: var(--color-navy); color: var(--color-on-navy); border-color: var(--color-navy); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-orange); outline-offset: 3px; }
.crit-tag { margin-left: .5rem; font-size: .75rem; letter-spacing: .1em; color: var(--color-orange); }
#verdict-list { list-style: disc; padding-left: 1.4rem; margin-top: .5rem; }
#verdict-list li { margin-top: .35rem; }
.steplist { list-style: decimal; padding-left: 1.5rem; margin-top: .75rem; }
.steplist li { margin-top: .5rem; }

/* tiny utilities the compiled CSS lacks */
.mb-2 { margin-bottom: .5rem; }
.mt-12 { margin-top: 3rem; }
.footlinks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; }
.tools-sec:first-child { margin-top: 0; }

/* Six-link nav: use the menu button until the full desktop nav fits (>=1024px). */
@media (min-width: 768px) and (max-width: 1023.98px){
  header nav[aria-label="Main"]{display:none}
  #menu-btn{display:inline-flex}
  #mobile-nav:not([hidden]){display:flex}
}
header nav[aria-label="Main"] a{white-space:nowrap}