/* Ishaks Conveyancing · the calculator pages (/calculators/…)
   Loaded after styles.css and pages.css. Each page is one sheet pulled from the
   home worksheet: the index tabs on its edge now open the other sheets, the notes
   underneath are numbered like clauses, and the file closes on the other
   calculators, with the eight states as rubber stamps. Built by tools/build-calc-pages.mjs. */

/* ------------------------------------------------------------------ the head */
.calc-head { padding-bottom: clamp(40px, 6vh, 64px); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0;
  margin: 0 0 22px; padding: 0; list-style: none;
  font: 600 11.5px/1.4 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
}
.crumbs li + li::before { content: '/'; content: '/' / ''; margin: 0 10px; color: var(--burgundy); }
.crumbs a { color: var(--text-2); text-decoration: none; background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat; }
.crumbs a:hover { color: var(--burgundy); }
.crumbs [aria-current] { color: var(--near); }
.calc-head .body b { font-weight: 600; color: var(--near); }

/* ----------------------------------------------------------------- the sheet */
.calc-sec { position: relative; padding: 18px 0 clamp(110px, 16vh, 170px); }
a.ws-tab { text-decoration: none; }
.ws-tab[aria-current] {
  z-index: 2;
  background: var(--grain), var(--paper);
  color: var(--burgundy);
  transform: translateX(0);
}
.ws-tab[aria-current] .tab-i { color: var(--burgundy); }
.ws-tab:not([aria-current]) .tab-i { color: #4a0816; }
/* the state is printed on the sheet, not a blank to fill */
.ws-fixed { font: italic 600 1em/1.25 var(--serif); color: var(--burgundy); }

/* -------------------------------------------------- the notes, as clauses */
.calc-notes { padding: clamp(90px, 13vh, 140px) 0 clamp(100px, 14vh, 150px); }
.calc-notes .h2 { max-width: 900px; }
.clauses { margin: clamp(40px, 6vh, 60px) 0 0; padding: 0; list-style: none; max-width: 860px; counter-reset: cl; }
.calc-cl {
  counter-increment: cl;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 26px 0 28px;
  border-top: 1px solid var(--pencil);
}
.calc-cl:first-child { border-top: 1.5px solid var(--near); }
.calc-cl::before {
  content: counter(cl) '.';
  font: italic 700 26px/1.15 var(--serif);
  color: var(--burgundy);
}
.calc-cl h2 { margin: 0 0 10px; font: 600 clamp(21px, 1.9vw, 25px)/1.25 var(--serif); color: var(--near); }
.calc-cl p, .calc-cl li { font: 300 17px/1.7 var(--sans); color: var(--text-2); }
.calc-cl p + p { margin-top: 12px; }
.calc-cl ul { margin: 10px 0 0; padding-left: 1.15em; }
.calc-cl li + li { margin-top: 6px; }
.calc-cl b { font-weight: 600; color: var(--near); }
.calc-cl a { color: var(--burgundy); text-decoration: underline; text-underline-offset: 2px; }
.calc-cl .src { margin-top: 14px; font: italic 400 15px/1.5 var(--serif); color: var(--text-2); }

/* duty on one price, state by state: a schedule annexed to the clause */
.sched { width: 100%; margin-top: 16px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sched caption { text-align: left; padding-bottom: 10px; font: italic 400 15px/1.45 var(--serif); color: var(--text-2); caption-side: top; }
.sched th { padding: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); text-align: right; border-bottom: 1.5px solid var(--near); }
.sched th:first-child { text-align: left; }
.sched td { padding: 13px 0 11px; border-bottom: 1px solid var(--pencil); text-align: right; font: italic 600 18px/1.2 var(--serif); color: var(--burgundy); white-space: nowrap; }
.sched td:first-child, .sched th[scope="row"] { text-align: left; font: 400 16px/1.3 var(--sans); color: var(--near); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--pencil); padding: 13px 0 11px; }
.sched th[scope="row"] a { color: var(--near); }
.sched th[scope="row"] a:hover { color: var(--burgundy); }
.sched td + td, .sched th + th { padding-left: 18px; }

/* --------------------------------------------- the other calculators (close) */
.calc-more { position: relative; padding: clamp(110px, 16vh, 170px) 0; color: var(--cream); }
.calc-more .h2 { max-width: 900px; }
.more-sheet {
  max-width: 980px;
  margin-top: clamp(40px, 6vh, 60px);
  padding: 30px clamp(22px, 3vw, 46px) 34px;
  background:
    linear-gradient(158deg, rgba(22, 22, 22, 0) 45%, rgba(22, 22, 22, .06)),
    var(--grain), var(--paper);
  color: var(--near);
  box-shadow: 1px 1px 0 rgba(22, 22, 22, .3), 8px 16px 24px rgba(10, 0, 4, .35), 22px 46px 70px -18px rgba(10, 0, 4, .6);
  transform: rotate(-.4deg);
}
.calc-hub .more-sheet { margin-top: 0; transform: rotate(.3deg); box-shadow: 1px 1px 0 rgba(22, 22, 22, .14), 8px 14px 22px rgba(22, 22, 22, .16), 22px 44px 70px -18px rgba(22, 22, 22, .42); }
.more-list { margin: 0; padding: 0; list-style: none; }
.more-list a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--pencil);
  text-decoration: none; color: var(--near);
}
.more-list .fi-no { width: 26px; }
.more-list .fi-t { font-size: clamp(22px, 2.1vw, 28px); transition: color .18s ease; }
.more-list .fi-ref { font-size: 15px; }
.more-list a:hover .fi-t { color: var(--burgundy); }
.more-list a:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.more-states { margin-top: 30px; }
.more-states .ss-h { margin-bottom: 20px; }
.stamp-links { list-style: none; margin: 0; padding: 0; }
.stamp-links li { display: grid; place-items: center; width: 100%; }
.stamp-links .stamp {
  opacity: .9;
  text-decoration: none;
  transition: opacity .18s ease, transform .3s cubic-bezier(.2, .7, .2, 1), background-color .18s ease;
}
.stamp-links a.stamp:hover { opacity: 1; background-color: rgba(110, 13, 37, .09); transform: rotate(calc(var(--rot) * .35)) scale(1.04); }
.stamp-links a.stamp:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
/* the state you're on is inked solid */
.stamp-links .stamp[aria-current] {
  opacity: 1;
  color: var(--paper);
  border-color: var(--burgundy);
  background-color: var(--burgundy);
  box-shadow: inset 0 0 0 4px var(--burgundy), inset 0 0 0 5.6px var(--paper);
}
.more-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.more-foot p { flex: 1 1 260px; font: italic 400 17px/1.45 var(--serif); color: var(--text-2); }

/* ------------------------------------------------------------------- phones */
@media (max-width: 760px) {
  .crumbs ol { font-size: 10.5px; letter-spacing: .12em; }
  .crumbs li + li::before { margin: 0 7px; }
  .calc-sec { padding-top: 8px; }
  .ws-tab[aria-current] { transform: translateY(0); }
  .calc-cl { grid-template-columns: 40px minmax(0, 1fr); padding: 22px 0 24px; }
  .calc-cl::before { font-size: 22px; }
  .calc-cl p, .calc-cl li { font-size: 16px; }
  .sched td { font-size: 16px; }
  .sched td:first-child, .sched th[scope="row"] { font-size: 15px; }
  .sched td + td, .sched th + th { padding-left: 10px; }
  .sched th { font-size: 10px; letter-spacing: .08em; }
  .more-sheet { padding: 24px 18px 28px; transform: none; }
  .calc-hub .more-sheet { transform: none; }
  .more-list a { gap: 10px; padding: 16px 0 12px; }
  .more-list .fi-ref { display: none; }
  .stamp-links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
  .stamp-links .stamp { max-width: 72px; border-width: 2.5px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.2px currentColor; }
  .stamp-links .stamp[aria-current] { box-shadow: inset 0 0 0 3px var(--burgundy), inset 0 0 0 4.2px var(--paper); }
  .stamp-links .st-a { font-size: 17px; }
  .stamp-links .st-n { display: none; }
}
@media (max-width: 380px) {
  .sched td { font-size: 15px; }
  .more-list .fi-t { font-size: 20px; }
}
:root:is(.rm, :not(.js)) .stamp-links .stamp { transition: none; }
/* "Calculators" stays underlined in the header on every page under /calculators/ */
.hdr-nav a[aria-current]::after { clip-path: inset(0 0 0 0); }
.fi-list a[aria-current] .fi-t { color: var(--burgundy); }