/* answers.tnaado.ca: dark theme on the shared TNAADO tokens (css/tokens.css). No invented values. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on-black);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--on-black);text-decoration-color:var(--red);text-underline-offset:3px}
a:hover,a:focus-visible{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:var(--spacing-2);top:-100px;background:var(--red);color:var(--on-black);padding:var(--spacing-2) var(--spacing-4);z-index:var(--z-toast)}
.skip:focus{top:var(--spacing-2)}
.wrap{max-width:var(--container-xl);margin:0 auto;padding:0 var(--spacing-4)}
.prose{max-width:var(--container-md)}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--font-medium);color:var(--on-black);margin:0 0 var(--spacing-4);letter-spacing:-0.01em}
h1{font-size:var(--text-3xl);line-height:var(--leading-tight)}
h2{font-size:var(--text-2xl);line-height:var(--leading-snug);margin-top:var(--spacing-12)}
h3{font-size:var(--text-xl);line-height:var(--leading-snug);margin-top:var(--spacing-6)}
p,ul,ol{margin:0 0 var(--spacing-4)}
li{margin-bottom:var(--spacing-2)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-black-mute);margin:0 0 var(--spacing-3)}
.lead{font-size:var(--text-lg);color:var(--on-black-mute)}
sup{font-size:var(--text-xs)}
sup a{text-decoration:none;color:var(--red)}
/* header */
.hdr{position:sticky;top:0;z-index:var(--z-header);background:var(--ink);border-bottom:1px solid var(--rule-on-black)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);min-height:var(--spacing-16);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:var(--spacing-3);text-decoration:none}
.brand img{height:var(--spacing-6);width:auto;filter:brightness(0) invert(1)}
.brand span{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.nav{display:flex;gap:var(--spacing-4);flex-wrap:wrap;font-size:var(--text-sm)}
.nav a{text-decoration:none;color:var(--on-black-mute);padding:var(--spacing-2) 0;min-height:var(--spacing-8)}
.nav a:hover,.nav a[aria-current]{color:var(--on-black)}
.nav a[aria-current]{border-bottom:2px solid var(--red)}
/* breadcrumb */
.crumbs{font-size:var(--text-sm);color:var(--on-black-mute);margin:var(--spacing-6) 0 var(--spacing-4)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--spacing-2)}
.crumbs li{margin:0}.crumbs li+li::before{content:"/";margin-right:var(--spacing-2);color:var(--rule-on-black)}
.crumbs a{color:var(--on-black-mute)}
/* guide */
.guide{padding-bottom:var(--spacing-12)}
.meta{display:flex;flex-wrap:wrap;gap:var(--spacing-2) var(--spacing-4);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--on-black-mute);margin-bottom:var(--spacing-6)}
.notice{border:1px solid var(--rule-on-black);border-left:3px solid var(--red);background:var(--red-mist);padding:var(--spacing-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--spacing-6)}
.answer{background:var(--red-mist);border:1px solid var(--red-soft);border-radius:var(--radius-lg);padding:var(--spacing-6);margin-bottom:var(--spacing-8)}
.answer h2{margin:0 0 var(--spacing-3);font-size:var(--text-xs);font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.answer p{font-size:var(--text-lg);margin:0}
.table-wrap{overflow-x:auto;margin:0 0 var(--spacing-6)}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}
th,td{text-align:left;padding:var(--spacing-3);border-bottom:1px solid var(--rule-on-black);vertical-align:top}
th{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--on-black-mute);font-weight:var(--font-medium)}
caption{text-align:left;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-black-mute);padding-bottom:var(--spacing-3)}
.callout{border-left:3px solid var(--red);padding-left:var(--spacing-4)}
.cols{display:grid;gap:var(--spacing-6);grid-template-columns:1fr}
.cols>div{border:1px solid var(--rule-on-black);border-radius:var(--radius-lg);padding:var(--spacing-4) var(--spacing-6)}
.cols h3{margin-top:0}
.faq h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:var(--font-semibold)}
.sources ol{padding-left:var(--spacing-6);font-size:var(--text-sm);color:var(--on-black-mute)}
.sources li{overflow-wrap:anywhere}
.related ul{list-style:none;padding:0;display:grid;gap:var(--spacing-3);grid-template-columns:1fr}
.related a{display:block;padding:var(--spacing-4);border:1px solid var(--rule-on-black);border-radius:var(--radius-md);text-decoration:none}
.related a:hover{border-color:var(--red)}
/* cards / hubs */
.hero{padding:var(--spacing-12) 0 var(--spacing-8)}
.hero h1{font-size:var(--text-4xl)}
.cards{display:grid;gap:var(--spacing-4);grid-template-columns:1fr;list-style:none;padding:0}
.cards li{margin:0}
.card{display:block;height:100%;padding:var(--spacing-6);border:1px solid var(--rule-on-black);border-radius:var(--radius-lg);text-decoration:none;transition:border-color var(--transition-fast)}
.card:hover{border-color:var(--red);color:var(--on-black)}
.card strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-medium);margin-bottom:var(--spacing-2)}
.card span{color:var(--on-black-mute);font-size:var(--text-sm)}
.empty{color:var(--on-black-mute)}
/* footer */
.ftr{border-top:1px solid var(--rule-on-black);padding:var(--spacing-8) 0;margin-top:var(--spacing-16);font-size:var(--text-sm);color:var(--on-black-mute)}
.ftr a{color:var(--on-black-mute)}
.ftr__row{display:flex;flex-wrap:wrap;gap:var(--spacing-3) var(--spacing-4);align-items:center;margin-bottom:var(--spacing-4)}
.ftr__logo{height:var(--spacing-5);width:auto;filter:brightness(0) invert(1);opacity:.9}
.ftr p{color:var(--on-black-mute);margin-bottom:var(--spacing-3)}
@media (min-width:768px){
 h1{font-size:var(--text-4xl)}
 .hero h1{font-size:var(--text-5xl)}
 .cols{grid-template-columns:1fr 1fr}
 .cards,.related ul{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}