/* The shell shared by every calculator page and by the directory of calculators: the sidebar on the left (the whole
   list with its search on a calculator page, the four areas on the directory), the breadcrumb, and the drawer the
   sidebar becomes on a narrow screen. Built by calculator-nav.js. A calculator's own content is not styled here:
   every rule is about the sidebar, or about where the content column sits. Colours are the site's own (site.css). */

.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .38rem}
.crumbs [aria-current="page"]{color:var(--text-faint)}
.breadcrumb-separator{color:var(--text-faint)}
.calculator-nav .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- where things sit ---------- */

/* Calculator pages use a wider frame than the rest of the site, so that the sidebar can stand at the left edge. The
   content column keeps the width it has always had: nothing inside a calculator is laid out differently. */
body:is([data-calculator-id],[data-calculator-directory]) .wrap{max-width:1360px}
body:is([data-calculator-id],[data-calculator-directory]) main.layout{grid-template-columns:262px minmax(0,1fr);padding-top:0;padding-left:clamp(1rem,3.5vw,2rem);padding-right:clamp(1rem,3.5vw,2rem)}
/* (site.css gives .wrap its side padding and then takes it away again in .layout, .topbar-inner and .foot; on these pages it is kept, so that nothing touches the edge of a narrow window) */
body:is([data-calculator-id],[data-calculator-directory]) .topbar-inner,body:is([data-calculator-id],[data-calculator-directory]) .foot{padding-left:clamp(1rem,3.5vw,2rem);padding-right:clamp(1rem,3.5vw,2rem)}
body:is([data-calculator-id],[data-calculator-directory]) main.layout > #calculator-sidebar{grid-column:1;grid-row:1}
body:is([data-calculator-id],[data-calculator-directory]) main.layout > :not(#calculator-sidebar){grid-column:2;grid-row:1;min-width:0;max-width:calc(1120px - 4rem - 262px - 1.8rem)}
/* The title block belongs to the content column. Until the script has moved it there (it is the first thing the
   script does) it is held at the same place, so that nothing jumps. */
body:is([data-calculator-id],[data-calculator-directory]) > .masthead{padding-left:calc(clamp(1rem,3.5vw,2rem) + 262px + 1.8rem);margin-bottom:1.2rem}
body:is([data-calculator-id],[data-calculator-directory]) main.layout .masthead{padding:clamp(1.7rem,4vw,2.6rem) 0 .6rem;margin:0 0 1.2rem;max-width:none}

/* ---------- the sidebar ---------- */

.calculator-sidebar{position:sticky;top:3.6rem;align-self:start;max-height:calc(100vh - 3.6rem);overflow-y:auto;overscroll-behavior:contain;padding:clamp(1.7rem,4vw,2.6rem) 1.1rem 2rem 0;border-right:1px solid var(--border);scrollbar-width:thin}
.calculator-nav{font-size:.93rem}
.calculator-nav .nav-top{display:flex;align-items:center;justify-content:space-between}
.calculator-nav .nav-heading{font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.calculator-nav .nav-close{display:none}

/* the way back to the directory, on a calculator page */
.calculator-nav .nav-home{display:inline-flex;align-items:baseline;gap:.4rem;margin-top:.7rem;font-size:.88rem;font-weight:500;color:var(--accent);text-decoration:none;border-radius:5px}
.calculator-nav .nav-home:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.2em}
.calculator-nav .nav-home:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the directory's sidebar: the four areas, each with the number of calculators it has */
.calculator-nav .nav-areas{list-style:none;margin:.9rem 0 0;padding:.6rem 0 0;border-top:1px solid var(--border)}
.calculator-nav .nav-areas li + li{margin-top:.15rem}
.calculator-nav .nav-area{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .6rem .55rem .75rem;border-left:3px solid transparent;border-radius:0 7px 7px 0;font-weight:500;line-height:1.35;color:var(--text-soft);text-decoration:none}
.calculator-nav .nav-area:hover{color:var(--text);background:var(--surface-2)}
.calculator-nav .nav-area:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.calculator-nav .nav-count{flex:none;min-width:1.9rem;text-align:center;font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-soft);border:1px solid var(--border-strong);border-radius:999px;padding:.05rem .45rem}
/* the area now being read: a bar at the left, a tint, and bold, as for the current calculator below */
.calculator-nav .nav-area.is-current{color:var(--accent);background:var(--accent-wash);border-left-color:var(--accent);font-weight:600}
.calculator-nav .nav-area.is-current .nav-count{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

.calculator-nav .nav-search{position:relative;margin-top:.8rem}
.calculator-nav .nav-search input{width:100%;min-width:0;font:inherit;font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:.5rem 2rem .5rem .7rem;outline:none;-webkit-appearance:none;appearance:none}
.calculator-nav .nav-search input::placeholder{color:var(--text-faint)}
.calculator-nav .nav-search input::-webkit-search-cancel-button{display:none}
.calculator-nav .nav-search input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.calculator-nav .nav-search-clear{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);width:1.6rem;height:1.6rem;display:grid;place-items:center;background:transparent;border:0;border-radius:6px;color:var(--text-soft);font-size:1.1rem;line-height:1}
.calculator-nav .nav-search-clear:hover{color:var(--text);background:var(--surface-2)}
.calculator-nav .nav-empty{margin-top:.8rem;font-size:.88rem;color:var(--text-soft)}

.calculator-nav .nav-tree{margin-top:.9rem}
.calculator-nav .nav-section{border-top:1px solid var(--border);padding:.45rem 0}
.calculator-nav .nav-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:.45rem .5rem .45rem 0;font:inherit;font-weight:600;color:var(--text)}
.calculator-nav .nav-toggle:hover{color:var(--accent)}
.calculator-nav .nav-toggle.is-sub{font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);padding:.4rem .5rem .4rem .75rem}
.calculator-nav .nav-toggle.is-sub:hover{color:var(--accent)}
/* the chevron points down when the part is open and to the right when it is closed; aria-expanded says the same in words */
.calculator-nav .nav-chevron{flex:none;width:.5rem;height:.5rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;margin-right:.3rem}
.calculator-nav .nav-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(45deg) translate(-2px,-2px)}
.calculator-nav .nav-list{list-style:none;margin:.1rem 0 .35rem;padding:0}
.calculator-nav .nav-sub .nav-list{margin-bottom:.5rem}

/* One calculator. (The classes calc-row, calc-title and calc-desc are the catalogue's own, kept so that links to it and
   tests of it still find the rows; their catalogue styling in site.css is replaced here.) */
.calculator-nav .calc-row.nav-item{display:flex;grid-template-columns:none;grid-template-areas:none;align-items:baseline;gap:.5rem;padding:.38rem .6rem .38rem .75rem;border:0;border-left:3px solid transparent;border-radius:0 7px 7px 0;color:var(--text-soft);text-decoration:none;line-height:1.35;background:transparent;cursor:pointer}
.calculator-nav .calc-symbol.nav-symbol{grid-area:auto;flex:0 0 2.5rem;max-width:2.5rem;overflow:hidden;font-family:var(--mono);font-size:.72rem;font-weight:400;line-height:inherit;color:var(--text-faint);white-space:nowrap;transition:none}
.calculator-nav a.nav-item:hover .calc-symbol,.calculator-nav a.nav-item:focus-visible .calc-symbol{color:var(--text-faint)}
.calculator-nav .nav-words{min-width:0;flex:1}
.calculator-nav .calc-title.nav-label{display:block;font-size:.93rem;font-weight:400;color:inherit;overflow-wrap:anywhere;transition:none}
.calculator-nav .calc-desc.nav-desc{display:block;margin-top:.1rem;font-size:.8rem;line-height:1.4;color:var(--text-faint);max-width:none}
.calculator-nav a.nav-item:hover,.calculator-nav a.nav-item:focus-visible{color:var(--text);background:var(--surface-2)}
.calculator-nav a.nav-item:hover .calc-title,.calculator-nav a.nav-item:focus-visible .calc-title{color:inherit}
.calculator-nav a.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the current page: a bar at the left, a tint, and bold, so that it does not depend on colour alone */
.calculator-nav .calc-row.nav-calculator-current{color:var(--accent);background:var(--accent-wash);border-left-color:var(--accent);font-weight:600;cursor:default}
.calculator-nav .nav-calculator-current .calc-title{font-weight:600}
.calculator-nav .nav-calculator-current .calc-symbol.nav-symbol{color:var(--accent)}
.calculator-nav .calc-row.calc-row--planned{cursor:default;color:var(--text-faint)}
.calculator-nav .calc-row.calc-row--planned:hover{background:transparent}
.calculator-nav .calc-status{flex:none;align-self:center;grid-area:auto;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--text-faint);background:transparent;border:1px solid var(--border-strong);border-radius:999px;padding:.05rem .4rem}
.calculator-nav [hidden]{display:none !important}

/* while searching: every match is shown under its area, with its description, and the matched letters are marked */
.calculator-nav.is-searching .nav-toggle{pointer-events:none}
.calculator-nav.is-searching .nav-chevron{visibility:hidden}
.calculator-nav mark{background:color-mix(in srgb,var(--accent) 28%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.calculator-nav .nav-browse{margin-top:.6rem;width:100%;font:inherit;font-size:.84rem;color:var(--text-soft);background:transparent;border:1px solid var(--border-strong);border-radius:8px;padding:.42rem .6rem}
.calculator-nav .nav-browse:hover{color:var(--text);border-color:var(--accent)}

/* ---------- the drawer on a narrow screen ---------- */

.nav-open{display:none}
.nav-backdrop{display:none}
@media (max-width:900px){
  body:is([data-calculator-id],[data-calculator-directory]) main.layout{grid-template-columns:minmax(0,1fr)}
  body:is([data-calculator-id],[data-calculator-directory]) main.layout > :not(#calculator-sidebar){grid-column:1;max-width:none}
  body:is([data-calculator-id],[data-calculator-directory]) > .masthead{padding-left:clamp(1rem,3.5vw,2rem)}
  .nav-open{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font:inherit;font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:.5rem .8rem}
  .nav-open:hover{border-color:var(--accent)}
  .nav-open-icon{width:1rem;height:.7rem;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
  .nav-open-icon::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);border-top:2px solid currentColor}
  body:is([data-calculator-id],[data-calculator-directory]) main.layout .masthead{padding-top:.9rem}
  .calculator-sidebar{position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(20rem,86vw);height:100%;max-height:none;align-self:stretch;padding:1.1rem 1rem 2rem;background:var(--bg);border-right:1px solid var(--border-strong);box-shadow:var(--shadow);display:none}
  .calculator-sidebar.is-open{display:block;animation:nav-drawer-in .2s ease}
  @keyframes nav-drawer-in{from{transform:translateX(-100%)}to{transform:none}}
  .calculator-nav .nav-close{display:grid;place-items:center;width:2.2rem;height:2.2rem;background:transparent;border:1px solid var(--border-strong);border-radius:8px;color:var(--text);font-size:1.3rem;line-height:1}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.45)}
  .nav-backdrop[hidden]{display:none}
  .nav-drawer-open{overflow:hidden}
  /* fingers need more room than a pointer */
  .calculator-nav .calc-row.nav-item{padding-top:.55rem;padding-bottom:.55rem}
  .calculator-nav .nav-area{padding-top:.7rem;padding-bottom:.7rem}
  .calculator-nav .nav-toggle{padding-top:.6rem;padding-bottom:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .calculator-sidebar.is-open{animation:none}
  .calculator-nav .nav-chevron{transition:none}
}
@media print{
  .calculator-sidebar,.nav-open,.nav-backdrop{display:none}
  body:is([data-calculator-id],[data-calculator-directory]) main.layout{display:block}
}