:root {
  color-scheme: light;
  font: 100%/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  --canvas: var(--night-canvas, #f7f9fc);
  --surface: var(--night-surface, #fff);
  --ink: var(--night-ink, #101c30);
  --secondary: var(--night-secondary, #475569);
  --quiet: var(--night-quiet, #546378);
  --rule: var(--night-rule, #dce3ed);
  --control-border: var(--night-control, #728193);
  --blue: var(--night-link, #1949a1);
  --blue-hover: var(--night-hover, #123877);
  --blue-soft: var(--night-soft, #edf4ff);
  --blue-mid: var(--night-mid, #b9ceed);
  --navy: var(--night-navy, #163965);
  --chart-secondary: var(--night-chart, #5a708c);
  --attention: var(--night-attention, #8f470e);
  --attention-soft: var(--night-attention-soft, #fff4e5);
  --attention-rule: var(--night-attention-rule, #ab722f);
  --error: var(--night-error, #932d3a);
  --tool-title: clamp(1.9rem, 1.45rem + 1.5vw, 2.4rem);
  --section-title: clamp(1.4rem, 1.19rem + .85vw, 1.8rem);
  --lead: clamp(1rem, .95rem + .35vw, 1.12rem);
  --reading-measure: 60ch;
  --reading-leading: 1.65;
  --panel-radius: 12px;
  --control-radius: 8px;
  --control-height: 3rem;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
main :is(input, textarea)::placeholder { color: var(--quiet); opacity: 1; }
button, select, summary { cursor: pointer; }
button { color: inherit; }
img, svg { vertical-align: middle; }
a { color: var(--blue); text-underline-offset: .2em; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
main:focus:not(:focus-visible) { outline: none; }
.container { width: calc(100% - 80px); max-width: 1200px; margin-inline: auto; }
@media screen and (min-width: 90rem) {
  .inner-page .container { max-width: clamp(75rem, calc(39rem + 40vw), 84rem); }
}
/* Labels, lists, leads and narrow columns use natural word spacing. Opt in
   to a square edge only for continuous prose with room for it. */
:where(main) :is(h1,h2,h3) { text-wrap: balance; overflow-wrap: anywhere; }
.reading-passage {
  width: 100%;
  max-width: var(--reading-measure);
  container: passage / inline-size;
}
.reading-passage > p { line-height: var(--reading-leading); }
@container passage (min-width: 32rem) {
  .reading-passage > p {
    text-align: justify;
    text-align-last: start;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
}

.skip {
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 16px;
  padding: 10px 14px;
  background: var(--blue);
  color: var(--night-on-action, white);
  border-radius: var(--control-radius);
  transform: translateY(-160%);
}
.skip:focus { transform: none; color: var(--night-on-action, white); }

.site-head { position: relative; z-index: 6; container: masthead / inline-size; background: var(--surface); border-top: 3px solid var(--blue); border-bottom: 1px solid var(--rule); }
.head-inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 1rem; min-height: 72px; }
.identity { display: inline-grid; place-items: center; flex: none; min-width: 44px; min-height: 44px; }
.head-inner > .identity { justify-self: start; }
.header-tools { display: flex; align-items: center; justify-self: end; gap: 1rem; }
.header-contact { display: inline-flex; align-items: center; min-height: 44px; color: var(--secondary); font-size: .93rem; font-weight: 600; text-decoration: none; }
.header-contact:hover, .header-contact[aria-current] { color: var(--blue); text-decoration: underline; }
.identity img { display: block; width: 44px; height: 44px; }
.primary-nav { display: flex; align-items: center; gap: clamp(12px,2.2vw,32px); }
.primary-nav > a, .tool-switch summary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: .25rem;
  color: var(--ink); font-size: .97rem; font-weight: 625; line-height: 1.2; text-decoration: none;
  border-block-end: 2px solid transparent;
}
.primary-nav > a[aria-current], .tool-switch[data-current-section] summary { color: var(--blue); border-color: var(--blue); }
.primary-nav > a:hover, .tool-switch summary:hover, .tool-switch[open] summary { color: var(--blue); }
.tool-switch summary { list-style: none; gap: .5em; cursor: pointer; }
.tool-switch summary::-webkit-details-marker { display: none; }
.tool-switch summary::after { content: ""; width: .36em; height: .36em; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: translateY(-.12em) rotate(45deg); }
.tool-switch[open] summary::after { transform: translateY(.12em) rotate(225deg); }
.tool-menu {
  position: absolute; z-index: 10; inset-inline-start: 0; top: calc(100% - 1px); width: min(47rem,100%); max-height: 72vh; overflow: auto;
  display: grid; grid-template-columns: 1fr .72fr 1.2fr; align-items: start; gap: .8rem 1.35rem; padding: .6rem 1.25rem 1rem;
  background: var(--surface); border: 1px solid var(--blue-mid); border-radius: 0 0 var(--panel-radius) var(--panel-radius); box-shadow: 0 .7rem 1.4rem rgb(12 28 46 / 13%);
}
.tool-menu .all-tools { grid-column: 1/-1; justify-content: space-between; color: var(--blue); font-weight: 650; border-bottom: 1px solid var(--rule); }
.tool-menu strong { display: block; font-size: .84rem; color: var(--quiet); margin-bottom: .3rem; }
.tool-menu a { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .93rem; line-height: 1.4; text-decoration: none; }
.tool-menu a:hover { text-decoration: underline; }
.tool-menu a[aria-current] { color: var(--blue); font-weight: 700; }
@media screen and (max-width: 680px) {
  .head-inner { display: flex; justify-content: space-between; min-height: 60px; gap: clamp(4px,1.5vw,12px); }
  .header-contact { display: none; }
  .head-inner > .identity { padding: 0; border: 0; }
  .identity img { width: 36px; height: 36px; }
  .primary-nav { gap: clamp(3px,1.4vw,10px); }
  .primary-nav > a, .tool-switch summary { min-width: 44px; padding-inline: 2px; font-size: .89rem; }
  .tool-menu { grid-template-columns: 1fr 1fr; gap: .5rem 1rem; padding-inline: 1rem; }
  .tool-menu > div:last-child { grid-column: 1/-1; }
}
@media print { .tool-switch { display:none; } }
@media screen and (max-width: 22rem) {
  .head-inner {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px;
    column-gap: .25rem;
  }
  .primary-nav { flex-wrap: wrap; justify-content: center; row-gap: 0; }
}
/* Make a second row when the navigation labels outgrow the available space
   at a large reader-selected font size. */
@container masthead (max-width: 19rem) {
  .head-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 .25rem; padding-block: .12rem; }
  .head-inner > .identity { grid-column: 1; grid-row: 1; }
  .head-inner > .header-tools { grid-column: 2; grid-row: 1; }
  .head-inner > .primary-nav { grid-column: 1/-1; grid-row: 2; flex-wrap: wrap; min-width: 0; justify-self: start; }
  .tool-menu { grid-template-columns: minmax(0,1fr); }
}
.crumbs { display: flex; align-items: center; gap: 10px; margin: 27px 0 24px; font-size: .82rem; color: var(--quiet); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs > span { min-width: 0; overflow-wrap: anywhere; }

.calc-intro { padding-bottom: 26px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-rule { width: 22px; height: 2px; background: var(--blue); }
.calc-intro h1 { margin: 0 0 12px; font-size: var(--tool-title); font-weight: 680; line-height: 1.12; letter-spacing: -.035em; }
.calc-lead { max-width: 70ch; margin: 0 0 12px; color: var(--secondary); font-size: var(--lead); line-height: 1.6; }
.intro-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--quiet); font-size: .875rem; }
.intro-notes a { font-weight: 600; }
.intro-notes a, .auto-entry a { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; }
.intro-notes .intro-primary, .auto-entry a:first-child, .life-start a:first-child,
.whole-intro-actions a:first-child, .term-start a:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--control-height);
  padding: 8px 16px;
  border-radius: var(--control-radius);
  background: var(--blue);
  color: var(--night-on-action, white);
  font-size: .91rem;
  font-weight: 650;
  text-decoration: none;
}
.intro-notes .intro-primary:hover, .auto-entry a:first-child:hover, .life-start a:first-child:hover,
.whole-intro-actions a:first-child:hover, .term-start a:first-child:hover { background: var(--blue-hover); }

.site-foot { margin-top: clamp(2.5rem,6vw,4.5rem); border-top: 3px solid #749fc9; background: var(--night-footer, #132c48); color: #eff5fc; }
.foot-inner { padding-block: clamp(1.6rem,4vw,3rem) .65rem; }
.foot-directory { display: grid; grid-template-columns: minmax(13rem,.88fr) minmax(0,2fr); align-items: start; gap: clamp(1.5rem,5vw,5rem); }
.foot-brand .identity { margin-bottom: .6rem; }
.foot-brand img { width: 44px; height: 44px; }
.foot-brand p { margin: .15rem 0 .5rem; max-width: 34ch; color: #e1eaf5; }
.foot-brand .publisher-email { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.site-foot a, .foot-utility summary { color: #dbe9fa; font-size: .93rem; }
.site-foot a:hover, .foot-utility summary:hover { color: #fff; text-decoration: underline; }
.site-foot :focus-visible { outline-color: #a5cfff; }
.foot-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.8rem,2vw,2.25rem); }
.foot-groups h2 { color: white; margin: .55rem 0 .6rem; font-size: 1rem; line-height: 1.3; }
.foot-groups ul { list-style: none; margin: 0; padding: 0; }
.foot-groups a, .foot-utility > a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; text-decoration: none; }
.foot-utility { margin-top: clamp(1rem,3vw,2rem); padding-top: .55rem; border-top: 1px solid #54708d; display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.foot-utility details { min-width: 0; max-width: 68ch; }
.foot-utility summary { min-height: 44px; padding-block: .6rem; cursor: pointer; }
.foot-utility details p { color: #dbe9fa; }
.foot-utility > a { flex: none; }
@media (max-width: 860px) {
  .foot-directory { grid-template-columns: 1fr; gap: 1rem; }
  .foot-brand { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
  .foot-brand .identity, .foot-brand p { margin: 0; }
}
@media (max-width: 640px) {
  .foot-brand { grid-template-columns: 44px minmax(0,1fr); gap: .2rem .8rem; }
  .foot-brand .publisher-email { grid-column: 1/-1; }
  .foot-groups { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap: 1rem; }
  .foot-groups > div:last-child { grid-column: 1/-1; border-top: 1px solid #54708d; padding-top: .25rem; }
  .foot-groups > div:last-child ul { display: flex; flex-wrap: wrap; column-gap: 1.1rem; }
  .foot-directory { gap: 1.25rem; }
}
#main .page-updated {
  margin:.35rem 0 .8rem; color:var(--quiet);
  font-size:.84rem; font-weight:500; line-height:1.4; letter-spacing:normal;
}
.page-updated time { white-space:nowrap; }
@media screen and (max-width:800px) {
  .container { width: calc(100% - 40px); }
}
@media screen and (max-width:580px) {
  .container { width: calc(100% - 32px); }
  .crumbs { margin: 19px 0 20px; }
  .calc-intro { padding-bottom: 18px; }
}
@media print {
  body { color: #111; background: white; }
  .container { width: 100%; max-width: none; }
  .head-inner { min-height: 40px; }
  .head-inner nav, .head-action, .crumbs, .site-foot, .skip, .intro-notes, .calc-lead, .eyebrow, .guide-layout { display: none !important; }
  .calc-intro { padding: 6px 0; }
  .calc-intro h1 { font-size: 22pt; }
  .site-head { border-bottom: 0; }
}

.site-head:focus { outline:none; }
.missing-page { padding-block:clamp(2rem,7vw,6rem); }
.theme-picker {
  position:relative; flex:none; visibility:hidden;
  min-width:44px; min-height:44px; margin-inline-start:auto;
}
.theme-picker[data-ready] {visibility:visible;}
.theme-trigger {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  width:100%; min-width:44px; min-height:44px; padding:0 .55rem;
  border:1px solid var(--blue-mid); border-radius:var(--control-radius);
  color:var(--blue); background:var(--surface); font-size:.875rem; font-weight:650;
}
.theme-trigger:hover,.theme-trigger[aria-expanded="true"],.float-top:hover {background:var(--blue-soft);}
.theme-current {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.theme-menu {
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:12;
  display:grid; gap:2px; width:min(12rem,calc(100vw - 2rem)); padding:5px;
  border:1px solid var(--control-border); border-radius:10px;
  background:var(--surface); color:var(--ink); box-shadow:0 .5rem 1.5rem rgb(12 28 46 / 18%);
}
.theme-menu[hidden] {display:none;}
.theme-menu button {
  display:grid; grid-template-columns:18px minmax(0,1fr) 14px; align-items:center;
  gap:.7rem; min-height:44px; padding:.5rem .65rem; border:0; border-radius:6px;
  color:var(--ink); background:var(--surface); font:inherit; font-size:.925rem; text-align:start;
}
.theme-menu button svg {fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;}
.theme-menu button:hover {background:var(--canvas);}
.theme-menu button[aria-checked="true"] {background:var(--blue-soft);color:var(--blue);font-weight:650;}
.theme-menu button[aria-checked="true"]::after {
  content:""; justify-self:center; width:7px; height:12px; margin-block-start:-3px;
  border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.theme-menu button:focus-visible {outline:2px solid var(--blue);outline-offset:-2px;}
.float-top:not([hidden]) {
  display:inline-flex;gap:.35rem;align-items:center;justify-content:center;
  position:fixed;z-index:5;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));
  min-height:44px;min-width:44px;padding:.5rem .75rem;
  background:var(--surface);color:var(--blue);border:1px solid var(--blue-mid);
  border-radius:var(--control-radius);box-shadow:0 2px 8px #12263c20;text-decoration:none;font-weight:650;
}
.float-top[hidden] {display:none;}
@media screen and (max-width: 680px) {
  .theme-label { display: none; }
  .theme-trigger { padding: 0; }
  .float-top span { display:none; }
  html { scroll-padding-bottom: 4.5rem; }
  body:has(form :is(input,select,textarea):focus) .float-top { visibility:hidden; }
}
@media print { .theme-picker,.float-top:not([hidden]) {display:none!important;} }
