/* retirementdates.com: "the almanac page"
 *
 * Six named colors. Text colors all clear 7:1 on Paper (WCAG AAA); Marigold is for marks only,
 * never for text.
 *   Paper    #FBF8F1  page background
 *   Ink      #1C2430  text (14.7:1 on Paper)
 *   Spruce   #174A44  links, buttons, brand (9.4:1 on Paper; white on it 10:1)
 *   Marigold #E8B04B  ruler dots, the month you turn 65, highlights (marks only)
 *   Clay     #7A3216  deadlines, errors, focus ring (8.6:1 on Paper)
 *   Linen    #F1EADB  panels and table heads (Ink on it 13:1, Spruce 8.4:1)
 * Type: Literata (headings, ages, big dates) with Figtree (everything else): a reading serif
 * over an open, plain sans whose zero is a simple oval and whose 1, 7 and l never look alike,
 * which matters on pages that are mostly dates.
 */
:root {
  --paper: #FBF8F1;
  --ink: #1C2430;
  --ink-soft: #3D4654;
  --spruce: #174A44;
  --spruce-dark: #0F3530;
  --marigold: #E8B04B;
  --clay: #7A3216;
  --linen: #F1EADB;
  --line: #CFC4AE;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Segoe UI", Verdana, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.25rem; line-height: 1.6;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 5.5vw, 2.75rem); margin: .4em 0 .35em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 1.85rem); margin: 1.8em 0 .5em; }
h3 { font-size: 1.3rem; margin: 1.4em 0 .35em; }
p, ul, ol, dl, table { margin: 0 0 1em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; }
a { color: var(--spruce); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--spruce-dark); text-decoration-thickness: .14em; }
:focus-visible { outline: 4px solid var(--clay); outline-offset: 3px; }
a:focus-visible { background: var(--linen); }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 44rem; }
.prose p, .prose li, .prose dd { max-width: 34em; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .6em 1em; z-index: 10; }

/* Header: plain, not sticky, nav visible and wrapping. */
.site-header { border-bottom: 3px solid var(--spruce); background: var(--paper); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-top: .8rem; padding-bottom: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.45rem; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 2.2rem; height: 2.2rem; flex: none; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a { display: inline-block; padding: .35em 0; font-size: 1.1rem; }
.nav a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration-color: var(--marigold); text-decoration-thickness: .22em; }

.crumb { font-size: 1.125rem; margin: 1.2rem 0 0; color: var(--ink-soft); }
.kicker { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clay); margin: 1.4rem 0 0; }
.checked { color: var(--ink-soft); font-size: 1.125rem; border-left: 4px solid var(--marigold); padding-left: .7em; }
.lede { font-size: 1.35rem; line-height: 1.5; }
.hero { padding-top: .6rem; }

/* Figures and source notes */
.fig { font-weight: 700; }
.fig.nowrap { white-space: nowrap; }
sup.note { font-size: .72em; line-height: 0; margin-left: .08em; }
sup.note a { padding: 0 .12em; }

/* Tools */
.tool { background: var(--linen); border: 2px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem; margin: 1.4rem 0 2rem; }
.tool fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.tool legend { font-weight: 700; font-size: 1.3rem; padding: 0; margin-bottom: .4rem; font-family: var(--serif); }
.dob-row { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; }
.tool label { display: flex; flex-direction: column; font-weight: 700; gap: .3rem; }
.tool label.wide { max-width: 34em; margin-bottom: 1rem; font-weight: 400; }
.tool label.wide input { max-width: 12rem; font-weight: 400; }
input, select {
  font: inherit; font-size: 1.25rem; color: var(--ink); background: #fff;
  border: 2px solid var(--ink-soft); border-radius: 8px; padding: .45em .6em; min-height: 3rem;
}
select { padding-right: 1.6em; }
input[name="day"] { width: 4.5rem; }
input[name="year"], input[name="syear"] { width: 7rem; }
.what-happens { margin-bottom: .6rem; }
.btn {
  font: inherit; font-weight: 700; font-size: 1.2rem; min-height: 3rem; padding: .6em 1.3em;
  color: #fff; background: var(--spruce); border: 2px solid var(--spruce); border-radius: 10px; cursor: pointer;
}
.btn:hover { background: var(--spruce-dark); border-color: var(--spruce-dark); }
.form-error { color: var(--clay); font-weight: 700; border-left: 6px solid var(--clay); padding: .3em 0 .3em .7em; background: var(--paper); }
.noscript { font-weight: 700; margin: 0; }
.tool-out:empty { display: none; }
.callout { background: var(--linen); border: 2px solid var(--line); border-left: 6px solid var(--marigold); border-radius: 12px; padding: .9rem 1.1rem; margin: 1.2rem 0 1.6rem; }
.callout p { margin: 0; }
.results { background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin-top: 1rem; }
.results-h { margin-top: .2em; }
.results-h:focus { outline: none; }
.results-meta { }
.results-foot { color: var(--ink-soft); margin-top: 1.2rem; }
.big-date { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; line-height: 1.3; margin: .3em 0 .5em; }
.rule-src { font-size: 1.125rem; color: var(--ink-soft); }
.badge { display: inline-block; font-size: .85em; font-weight: 700; padding: 0 .45em; border-radius: 6px; border: 2px solid var(--ink-soft); color: var(--ink); white-space: nowrap; }
.badge.b-now { background: var(--marigold); border-color: var(--marigold); }
.steps li { margin-bottom: .2em; }

/* The age ruler: the planner's timeline, drawn as a ruler with half-year ticks, because these
   rules turn on half-birthdays (59½, 70½) and on the day before a birthday. */
.ruler { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; position: relative; }
.ruler::before {
  content: ""; position: absolute; top: .4rem; bottom: .4rem; left: 6.6rem; width: 14px;
  background: repeating-linear-gradient(to bottom, var(--ink-soft) 0 2px, transparent 2px 22px);
  border-left: 3px solid var(--ink);
}
.tick { display: grid; grid-template-columns: 6.6rem 1fr; gap: 0; margin: 0; padding: .3rem 0 .9rem; position: relative; }
.tick .age { text-align: right; padding-right: 1.1rem; font-family: var(--serif); }
.age-n { display: block; font-weight: 700; font-size: 1.55rem; line-height: 1.15; }
.age-m { display: block; font-size: 1.05rem; font-weight: 700; }
.age-y { display: block; font-family: var(--sans); font-size: 1.125rem; color: var(--ink-soft); }
.tick .what { padding-left: 1.7rem; position: relative; }
.tick .what::before {
  content: ""; position: absolute; left: -.62rem; top: .45rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--marigold); border: 3px solid var(--ink);
}
.tick.is-past .what::before { background: var(--paper); }
.tick.is-now .what { background: var(--linen); border-radius: 8px; padding-top: .2rem; padding-bottom: .1rem; }
.tick h3 { margin: 0 0 .1em; font-size: 1.25rem; }
.tick .when { font-weight: 700; color: var(--clay); margin-bottom: .3em; }
.tick p { margin-bottom: .5em; }

/* The seven-month window */
.months { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; }
.months .m { margin: 0; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: .55rem .8rem;
  display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(13rem, 1.2fr); gap: .1rem 1rem; align-items: baseline; }
.months .m-note { grid-column: 1 / -1; }
.months .m.is-65 { border: 4px solid var(--marigold); background: var(--linen); }
.months .m.is-past { background: var(--paper); }
.months .m.is-now { border-color: var(--spruce); }
.m-name { font-weight: 700; }
.m-start { }
.m-note { font-size: 1.125rem; font-weight: 700; color: var(--clay); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.figures { border-collapse: collapse; width: 100%; background: #fff; }
.figures caption { text-align: left; font-weight: 700; padding: 0 0 .4em; font-family: var(--serif); font-size: 1.15rem; }
.figures th, .figures td { text-align: left; padding: .5em .6em; border-bottom: 1px solid var(--line); vertical-align: top; }
.figures thead th { background: var(--linen); border-bottom: 2px solid var(--ink-soft); }
.figures tbody th { font-weight: 700; }
.figures tr.is-65 { background: var(--linen); }
.cell-sub { display: block; font-weight: 400; }
.ledger { font-size: 1.125rem; }
.table-note { }

/* Lists of pages */
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; }
.cards li { margin: 0; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.cards span, .guide-list span { font-size: 1.125rem; }
.guide-list { list-style: none; padding: 0; }
.guide-list li { border-bottom: 1px solid var(--line); padding: .7rem 0; display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.guide-list a { font-weight: 700; font-size: 1.2rem; }
.date-list dt { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; margin-top: 1em; }
.date-list dd { margin: .2em 0 0; }
.yearly li { margin-bottom: .7em; }
.win-status { font-weight: 700; }
.rules-list li, .ledger-list li { font-size: 1.125rem; }
.ledger-list span { display: block; }

/* Source notes at the foot of each page */
.sources-box { margin: 3rem 0 1rem; padding-top: 1rem; border-top: 4px double var(--line); font-size: 1.125rem; }
.sources-box h2 { font-size: 1.35rem; margin-top: .4em; }
.sources-box li { margin-bottom: .6em; }
.sources-box li:target { background: var(--linen); outline: 3px solid var(--marigold); }

/* Footer */
.site-footer { background: var(--spruce); color: #fff; margin-top: 3rem; padding: 2rem 0 2.5rem; }
.site-footer a { color: #fff; }
.site-footer h2 { color: #fff; font-size: 1.2rem; margin: 0 0 .4em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .3em; }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem; margin: 1.4rem 0; }
.disclaimer { max-width: 44em; }
.copyright { font-size: 1.125rem; margin: 0; }
.site-footer :focus-visible { outline-color: var(--marigold); }
.print-only { display: none; }

@media (max-width: 34rem) {
  /* On a phone the ruler moves to the left edge and each age sits above its entry, so the
     text keeps the full width. */
  .ruler::before { left: .45rem; }
  .tick { display: block; padding: .2rem 0 1rem 2.1rem; }
  .tick .age { text-align: left; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .6rem; align-items: baseline; }
  .age-n { display: inline; font-size: 1.4rem; }
  .age-m { display: inline; margin-left: .3rem; }
  .age-y { display: inline; }
  .tick .what { padding-left: 0; position: static; }
  .tick .what::before { left: 0; top: .5rem; }
  .tick.is-now .what { padding-left: .4rem; }
  .tool { padding: .8rem .7rem 1rem; }
  .results { padding: .8rem .6rem; margin-left: -.3rem; margin-right: -.3rem; }
  .months .m { grid-template-columns: 1fr; }
}

/* Print: black on white, large type, no nav, no ads, no forms, page address at the foot. With
   results on screen, only the results print. */
@media print {
  @page { margin: 1.6cm; }
  body { background: #fff; color: #000; font-size: 13pt; line-height: 1.45; }
  .nav, .skip, .crumb, .tool-form, .btn, .results-actions, .noscript, .site-footer .cols, .copyright,
  ins.adsbygoogle, iframe, .google-auto-placed, .adsbygoogle { display: none !important; }
  .site-header { border-bottom: 2px solid #000; background: #fff; }
  .brand, h1, h2, h3, a, .tick .when, .m-note, .kicker { color: #000 !important; }
  .site-footer { background: #fff; color: #000; margin-top: 1.5rem; padding: .8rem 0 0; border-top: 2px solid #000; }
  .site-footer a { color: #000; }
  .print-only { display: block; font-size: 11pt; }
  .tool, .results, .months .m, .cards li { background: #fff !important; border-color: #000; }
  .tick .what::before { border-color: #000; }
  .ruler::before { border-left-color: #000; }
  .tick, .months .m, tr, .yearly li { break-inside: avoid; }
  .sources-box a[href^="http"]::after, .rule-src a::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
  .has-results main .wrap > :not(.tool):not(h1) { display: none !important; }
  .has-results .tool { border: 0; padding: 0; margin: 0; }
  .has-results .results { border: 0; padding: 0; }
}