/* Finding your way (the navigation redesign, 2026-09-29). Shared by every page: the
   breadcrumb line, the "On this page" rail, Previous and Next, the Tools cards on a task
   page, the home page's launchpad, the calendar's tabs, and tool windows as full pages on
   a phone. Colors come from each page's own variables: black and gold, no blue. */

/* ---- Breadcrumb line, above a page's title ---- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 14px;font-size:.8rem;font-weight:800;color:var(--ink-soft)}
.crumbs a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.crumbs a:hover,.crumbs a:focus-visible{background:var(--gold-soft);outline:none}
.crumbs .crumb-sep{color:var(--ink-soft)}
.crumbs [aria-current]{color:var(--ink-soft);font-weight:800}

/* ---- Previous and Next, at the foot of a task page ---- */
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0;padding-top:22px;border-top:2px solid var(--line)}
.prev-next a{display:block;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none}
.prev-next a:hover,.prev-next a:focus-visible{border-color:var(--gold);outline:none}
.prev-next .pn-dir{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.prev-next .pn-name{display:block;font-size:1rem;font-weight:800;margin-top:2px}
.prev-next .pn-next{text-align:right}
.prev-next .pn-empty{visibility:hidden}
@media (max-width:560px){.prev-next{grid-template-columns:1fr}.prev-next .pn-next{text-align:left}.prev-next .pn-empty{display:none}}

/* ---- Inside a section: a heading that used to be a section's own, the next due date, the rubric links ---- */
.sub-h{margin:34px 0 14px;font-size:1.1rem;scroll-margin-top:calc(var(--nav-h,64px) + 18px)}
.csec-body > .sub-h:first-child{margin-top:0}
.next-due{margin:14px 0 0;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;background:var(--surface);font-size:.92rem}
.next-due a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.rubric-lead{margin:0 0 10px;font-size:.92rem;color:var(--ink-soft)}
.rubric-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.rubric-links a{display:block;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:800;font-size:.92rem;text-decoration:none}
.rubric-links a:hover,.rubric-links a:focus-visible{border-color:var(--gold);background:var(--gold-soft);outline:none}

/* ---- What's next: one link ---- */
.whats-next{font-size:1rem}
.whats-next a{font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

/* ---- Tools on a task page: one card each ---- */
.tool-group-h{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:22px 0 10px}
.tool-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:0 0 8px}
.tool-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tool-card h4{margin:0;font-size:.98rem;font-weight:800;color:var(--ink)}
.tool-card p{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
.tool-card .btn{margin-top:auto;align-self:flex-start}
.tool-note{font-size:.84rem;color:var(--ink-soft);margin:10px 0 0}

/* ---- The "On this page" rail: a slim rail at the left on a wide screen, a list that
        folds at the top on a narrow one. The section in view is marked. ---- */
.otp{font-size:.84rem}
.otp-toggle{display:none}
.otp-list{list-style:none;margin:0;padding:0}
.otp-list a{display:block;padding:7px 12px;border-left:3px solid transparent;color:var(--ink-soft);font-weight:700;text-decoration:none;border-radius:0 8px 8px 0}
.otp-list a:hover,.otp-list a:focus-visible{color:var(--ink);background:var(--bg-soft);outline:none}
.otp-list a.is-here{color:var(--ink);border-left-color:var(--gold);background:var(--gold-soft)}
.otp-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px 12px}
/* a section lands just under the bars: the nav bar, and on a narrow screen the rail's own row
   (the page already keeps every landing clear of the nav bar) */
body.has-otp .csec-title{scroll-margin-top:8px}
@media (max-width:1179px){body.has-otp .csec-title{scroll-margin-top:62px}}
@media (min-width:1180px){
  body.has-otp .otp{position:fixed;top:calc(var(--nav-h,64px) + 28px);left:max(12px,calc((100vw - 1180px) / 2 - 190px));width:176px;max-height:calc(100vh - var(--nav-h,64px) - 56px);overflow-y:auto;z-index:90}
  body.has-otp section.block > .container{padding-left:max(0px,calc(200px - (100vw - 1180px) / 2))}
}
@media (max-width:1179px){
  .otp{position:sticky;top:var(--nav-h,64px);z-index:100;margin:0 0 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
  .otp-label{display:none}
  .otp-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:0;background:none;color:var(--ink);font:inherit;font-weight:800;font-size:.84rem;cursor:pointer;text-align:left}
  .otp-toggle .otp-here{font-weight:700;color:var(--ink-soft)}
  .otp-toggle .otp-arrow{transition:transform .15s}
  .otp.is-open .otp-toggle .otp-arrow{transform:rotate(180deg)}
  .otp-list{display:none;padding:0 6px 8px}
  .otp.is-open .otp-list{display:block}
}

/* ---- The home page: a place to find things ---- */
.hero-launch .container.hero-inner{padding:64px 24px 44px}
.hero .container.hero-inner{padding-left:24px;padding-right:24px}
.hero-launch .hero-sub{max-width:640px}
.hero-launch .hero-sub a{color:var(--gold);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.hero-search{display:block;position:relative;margin:26px 0 0;max-width:720px}
.hero-search input,.hero-search input:focus{width:100%;box-sizing:border-box;font:inherit;font-size:1.1rem;padding:16px 20px;border-radius:14px;border:2px solid var(--gold);background:#fff;color:#1A1A1A}
.hero-search input::placeholder{color:#555}
.hero-search .site-search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);width:auto;max-width:none;max-height:min(60vh,520px)}
@media (max-width:900px){.site-search.hero-search{display:block}}
.block-launch{padding-top:40px;padding-bottom:16px}
.block-launch + .block{padding-top:40px}
.launch-h{font-size:1.25rem;font-weight:900;margin:34px 0 14px;scroll-margin-top:calc(var(--nav-h,64px) + 18px)}
.launch-h:first-child{margin-top:0}
.week-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.week-item{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;background:var(--surface)}
.week-item .wk-when{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.week-item .wk-what{font-size:1rem;font-weight:800;color:var(--ink);line-height:1.35}
.week-item .wk-left{font-size:.8rem;color:var(--ink-soft)}
.week-item a{margin-top:auto;padding-top:8px;font-size:.86rem;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.week-none{grid-column:1 / -1;font-size:.9rem;color:var(--ink-soft);margin:0}
.need-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.need-tile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;min-height:84px}
.need-tile:hover,.need-tile:focus-visible{border-color:var(--gold);background:var(--gold-soft);outline:none}
.need-tile b{font-size:1rem;font-weight:800;line-height:1.3}
.need-tile span{font-size:.8rem;color:var(--ink-soft)}
.year-strip{display:block}
.year-units{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.year-unit{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.year-unit b{display:block;font-size:.92rem;font-weight:800}
.year-unit span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.year-unit.is-now{border-color:var(--gold);background:var(--gold-soft)}
.year-unit.is-now b::after{content:" (now)";font-weight:700;color:var(--ink-soft)}
.year-months{display:flex;flex-wrap:wrap;gap:6px}
.year-months a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;font-weight:800;color:var(--ink);text-decoration:none;background:var(--surface)}
.year-months a:hover,.year-months a:focus-visible{border-color:var(--gold);outline:none}
.year-months a.is-now{background:var(--gold);border-color:var(--gold);color:#1A1A1A}
.res-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin:26px 0 0;font-size:.9rem;scroll-margin-top:calc(var(--nav-h,64px) + 18px)}
.res-row a{font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
@media (max-width:900px){.week-list{grid-template-columns:1fr}.need-grid{grid-template-columns:1fr 1fr}.year-units{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.need-grid{grid-template-columns:1fr}}

/* ---- The calendar's two tabs: Calendar, and Timeline (the old Timeline page) ---- */
.cal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.cal-tabs .tab-btn{font:inherit;font-weight:800;font-size:.9rem;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.cal-tabs .tab-btn.active{background:var(--gold);border-color:var(--gold);color:#1A1A1A}
.cal-tabs .tab-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cal-panel{display:none;scroll-margin-top:calc(var(--nav-h,64px) + 84px)}   /* the tabs stay in view above it */
.cal-panel.active{display:block}
.cal-link{display:block;width:fit-content;margin:6px 0 0;font-size:.82rem;font-weight:800;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.cal-link:hover,.cal-link:focus-visible{background:var(--gold-soft);outline:none}
.rem .cal-link{margin-top:8px}
/* the months, as they looked on the Timeline page */
.cal-panel .timeline{position:relative;margin:18px 0 0 8px;padding-left:34px}
.cal-panel .timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.cal-panel .t-band{margin:0 0 20px -34px;padding-bottom:7px;border-bottom:2px solid var(--gold);font-weight:900;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cal-panel .t-band:not(:first-child){margin-top:30px}
.cal-panel .t-item{position:relative;padding-bottom:30px;scroll-margin-top:calc(var(--nav-h,64px) + 18px)}
.cal-panel .t-item:last-child{padding-bottom:0}
.cal-panel .t-item::before{content:"";position:absolute;left:-34px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--gold)}
.cal-panel .t-item .t-when{display:block;font-size:1.35rem;font-weight:900;color:var(--ink);letter-spacing:-.01em;line-height:1.1;margin-bottom:1px}
.cal-panel .t-item h4{font-size:.95rem;color:var(--gold-deep);margin:0 0 3px}
.cal-panel .t-item p{font-size:.88rem;color:var(--ink-soft);max-width:620px;margin:0}
.cal-panel .t-item p + p{margin-top:6px}
.cal-panel .t-item .t-more a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

/* ---- The phone menu: a rule between the tasks and the rest ---- */
.mobile-menu a.mm-first{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}

/* ---- A section heading, when the keyboard is on it ---- */
.csec-title:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.otp-list a:focus-visible,.otp-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* ---- A tool window is a full page on a phone ---- */
@media (max-width:700px){
  .modal-backdrop{padding:0;align-items:stretch}
  .modal-backdrop .modal,.modal-backdrop .modal[data-modal-id]{max-width:none;width:100%;min-height:100vh;min-height:100dvh;max-height:none;margin:0;border-radius:0;box-shadow:none}
  .modal-backdrop .modal-head{border-radius:0;padding:14px 16px}
  .modal-backdrop .modal-body{padding:18px 16px 28px}
}