/* =====================================================================
   GTOOL: Google-style tool page component set  (gt-*)

   Portable and self-contained. First used on the Japan Payroll
   Calculator (EN + JP); built to be ported to the other calculators.
   Nothing here touches the shared .playbook-* / .pc-* / .pb-* classes,
   so reverting a page is swapping its markup and stylesheet back.

   Anatomy, top to bottom:
     body.gt-body     page wash (blue glow off the top edge)
     .gt-hero         centred crumbs, H1, deck, byline meta row
     .gt-tool         one elevated card: inputs | live results
     .gt-section      reading sections at 820px (prose, reference, FAQ)
     .gt-author       centred author block
     .gt-related      three illustrated cards (scene covers)
     .gt-sources      official sources + legal disclaimer

   Data colours are Google's brand palette (the same four hues as the
   illustration set) and carry one meaning each everywhere on the page:
   blue = take-home, green = social insurance, yellow = income tax,
   red = resident tax.
===================================================================== */

body.gt-body{
  background-color:#fff;
  background-image:
    radial-gradient(1100px 560px at 50% 0%, rgba(0, 113, 235, .11), transparent 70%),
    linear-gradient(180deg, #f1f5fe 0%, #f5f8fd 460px, rgba(248, 250, 252, 0) 1040px);
  background-repeat:no-repeat;
}

.gt-page{
  --gt-ink:var(--text-main);
  --gt-ink-2:#334155;
  --gt-muted:#5b6476;
  --gt-faint:#8b95a5;
  --gt-outline:#d3d9e2;
  --gt-outline-hover:#98a2b3;
  --gt-hair:#e6e9ef;
  --gt-pane:#f8fafd;
  --gt-alt:#f8fafc;
  --gt-primary:var(--blue);
  --gt-primary-strong:#0058c4;
  --gt-tonal:#e8f0fe;
  --gt-tonal-hover:#dbe7fd;

  --gt-blue:#4285F4;
  --gt-green:#34A853;
  --gt-yellow:#FBBC04;
  --gt-red:#EA4335;

  --gt-ease:cubic-bezier(.2, .7, .2, 1);

  color:var(--gt-ink);
}

/* Tabular figures only where numbers line up. Inter's tnum feature also
   widens the hyphen, so applying it page-wide spaces out "take-home". */
.gt-input,
.gt-bignum > span:first-child,
.gt-legend-value,
.gt-stat dd,
.gt-table td{ font-variant-numeric:tabular-nums; }

.gt-page :focus-visible{
  outline:2px solid var(--gt-primary);
  outline-offset:2px;
}

/* Keeps a heading's clause together: the line breaks between phrases
   (e.g. after a Japanese 、), and a phrase wraps inside only if it can't fit */
.gt-phrase{
  display:inline-block;
  text-spacing-trim:trim-start;   /* a line opening on "（" starts flush, not indented */
}

.gt-sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Data colour per key, reused by the bar, legend, table and reference */
.gt-page [data-key="net"]     { --gt-c:var(--gt-blue); }
.gt-page [data-key="si"]      { --gt-c:var(--gt-green); }
.gt-page [data-key="income"]  { --gt-c:var(--gt-yellow); }
.gt-page [data-key="resident"]{ --gt-c:var(--gt-red); }

/* Paid leave keys: blue = days granted, green = eligibility,
   yellow = employer duty, red = limits and loss */
.gt-page [data-key="grant"]   { --gt-c:var(--gt-blue); }
.gt-page [data-key="eligible"]{ --gt-c:var(--gt-green); }
.gt-page [data-key="duty"]    { --gt-c:var(--gt-yellow); }
.gt-page [data-key="limit"]   { --gt-c:var(--gt-red); }


/* =====================================================================
   HERO
===================================================================== */
.gt-hero{
  padding:clamp(40px, 6vw, 72px) 22px clamp(30px, 4vw, 44px);
  text-align:center;
}
.gt-hero-inner{ max-width:880px; margin:0 auto; }

.gt-crumbs ol{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  row-gap:4px;
  font-size:13px;
  line-height:1.4;
  color:var(--gt-muted);
}
.gt-crumbs li{ display:inline-flex; align-items:center; }
.gt-crumbs li + li::before{
  content:"";
  width:14px;
  height:14px;
  margin:0 6px;
  background-color:#b3bac6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gt-crumbs a{
  color:var(--gt-muted);
  text-decoration:none;
  border-radius:4px;
  transition:color .15s ease;
}
.gt-crumbs a:hover{ color:var(--gt-ink); text-decoration:underline; text-underline-offset:3px; }
.gt-crumbs [aria-current="page"]{ color:var(--gt-ink); font-weight:500; }

.gt-title{
  margin:0;
  font-size:clamp(38px, 5.2vw, 62px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.038em;
  color:var(--gt-ink);
  text-wrap:balance;
}
.gt-deck{
  max-width:620px;
  margin:18px auto 0;
  font-size:clamp(17px, 1.55vw, 19px);
  line-height:1.55;
  color:var(--gt-muted);
  text-wrap:balance;
}

.gt-meta{
  margin-top:26px;
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px 12px;
  font-size:14px;
  line-height:1.4;
  color:var(--gt-muted);
}
.gt-byline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--gt-ink-2);
  text-decoration:none;
  border-radius:20px;
}
.gt-byline strong{ font-weight:600; color:var(--gt-ink); }
.gt-byline:hover strong{ text-decoration:underline; text-underline-offset:3px; }
.gt-byline-face{
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  background:var(--gt-primary);
  box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(15, 23, 42, .14);
}
.gt-byline-face img{ display:block; width:100%; height:100%; object-fit:cover; }
.gt-meta-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.55;
}

@media (max-width:620px){
  .gt-meta{ flex-direction:column; gap:10px; }
  .gt-meta-dot{ display:none; }
}


/* =====================================================================
   TOOL CARD: inputs | results
===================================================================== */
.gt-tool{ padding:0 22px clamp(64px, 8vw, 104px); }

.gt-card{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.06fr);
  background:#fff;
  border-radius:24px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .04),
    0 1px 2px rgba(15, 23, 42, .05),
    0 16px 48px -12px rgba(15, 23, 42, .14);
}
/* No overflow:hidden here: it would make the card the scroll container
   and break the sticky inputs pane. The tinted pane rounds its own corners. */

.gt-inputs,
.gt-results{
  min-width:0;
  padding:clamp(24px, 3.4vw, 40px);
}
.gt-inputs{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.gt-results{
  background:var(--gt-pane);
  border-left:1px solid var(--gt-hair);
  border-radius:0 24px 24px 0;
}

.gt-pane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:36px;
}
.gt-pane-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--gt-ink-2);
}

/* Text button (Reset) */
.gt-textbtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  margin-right:-12px;
  padding:0 12px;
  border:0;
  border-radius:18px;
  background:transparent;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--gt-primary);
  cursor:pointer;
  transition:background-color .15s ease;
}
.gt-textbtn:hover{ background:rgba(0, 113, 235, .08); }
.gt-textbtn svg{ width:16px; height:16px; }


/* ---------- Outlined text field (label notched into the border) ---------- */
.gt-field{ position:relative; min-width:0; }
.gt-label{
  position:absolute;
  top:-8px;
  left:12px;
  z-index:1;
  max-width:calc(100% - 24px);
  padding:0 4px;
  overflow:hidden;
  background:#fff;
  font-size:12px;
  font-weight:500;
  line-height:16px;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--gt-muted);
  transition:color .15s ease;
}
.gt-control{
  position:relative;
  display:flex;
  align-items:center;
  height:56px;
  border:1px solid var(--gt-outline);
  border-radius:10px;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.gt-control:hover{ border-color:var(--gt-outline-hover); }
.gt-field:focus-within .gt-control{
  border-color:var(--gt-primary);
  box-shadow:0 0 0 1px var(--gt-primary);
}
.gt-field:focus-within .gt-label{ color:var(--gt-primary); }

.gt-input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 16px;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:16px;
  color:var(--gt-ink);
  font-variant-numeric:tabular-nums;
}
.gt-input::placeholder{ color:var(--gt-faint); opacity:1; }
.gt-page .gt-input:focus-visible{ outline:0; }

.gt-affix{
  flex:none;
  padding-left:16px;
  margin-right:-10px;
  font-size:16px;
  color:var(--gt-muted);
}

.gt-help{
  margin:6px 16px 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--gt-muted);
}
.gt-help:empty{ display:none; }
/* Help under a row with no outlined field above it (a switch): no indent */
.gt-help--flush{ margin:-14px 0 0; }
.gt-help a{ color:var(--gt-primary-strong); text-decoration:underline; text-underline-offset:2px; }

/* The headline input: gross salary */
.gt-field--hero .gt-control{ height:68px; }
.gt-field--hero .gt-input{
  font-size:28px;
  font-weight:600;
  letter-spacing:-.015em;
}
.gt-field--hero .gt-affix{ font-size:22px; font-weight:500; margin-right:-8px; }

/* Select */
.gt-control--select .gt-input{
  -webkit-appearance:none;
  appearance:none;
  padding-right:46px;
  text-overflow:ellipsis;
  cursor:pointer;
}
.gt-chevron{
  position:absolute;
  right:14px;
  top:50%;
  width:20px;
  height:20px;
  margin-top:-10px;
  color:var(--gt-muted);
  pointer-events:none;
}

/* Stepper */
.gt-control--stepper{ padding-right:6px; gap:2px; }
.gt-control--stepper .gt-input{ -moz-appearance:textfield; appearance:textfield; }
.gt-control--stepper .gt-input::-webkit-inner-spin-button,
.gt-control--stepper .gt-input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.gt-step{
  flex:none;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--gt-ink-2);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.gt-step svg{ width:18px; height:18px; }
.gt-step:hover{ background:rgba(15, 23, 42, .06); }
.gt-step:active{ background:rgba(15, 23, 42, .1); }
.gt-step:disabled{ color:#c3c9d3; background:transparent; cursor:default; }

.gt-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* Switch (Material 3 proportions) */
.gt-switch-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:-4px;
  padding:4px 0;
  cursor:pointer;
}
.gt-switch-title{
  display:block;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  color:var(--gt-ink);
}
.gt-switch-help{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--gt-muted);
}
.gt-switch-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.gt-switch{
  position:relative;
  flex:none;
  width:52px;
  height:32px;
  border:2px solid #8b95a5;
  border-radius:16px;
  background:#e7ebf1;
  transition:background-color .2s ease, border-color .2s ease;
}
.gt-switch::after{
  content:"";
  position:absolute;
  top:50%;
  left:6px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#8b95a5 no-repeat center / 16px;
  transform:translateY(-50%);
  transition:left .2s var(--gt-ease), width .2s var(--gt-ease), height .2s var(--gt-ease),
             background-color .2s ease, box-shadow .15s ease;
}
.gt-switch-row:hover .gt-switch::after{ box-shadow:0 0 0 9px rgba(15, 23, 42, .06); }
.gt-switch-input:checked + .gt-switch{
  border-color:var(--gt-primary);
  background:var(--gt-primary);
}
.gt-switch-input:checked + .gt-switch::after{
  left:22px;
  width:24px;
  height:24px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8.5' fill='none' stroke='%230071eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gt-switch-row:hover .gt-switch-input:checked + .gt-switch::after{ box-shadow:0 0 0 9px rgba(0, 113, 235, .12); }
.gt-switch-input:focus-visible + .gt-switch{
  outline:2px solid var(--gt-primary);
  outline-offset:3px;
}

/* Input groups: a small title (and optional note) over a hairline,
   for forms with more than one set of inputs */
.gt-group{
  margin-bottom:-6px;
  padding-top:24px;
  border-top:1px solid var(--gt-hair);
}
.gt-group-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:.005em;
  color:var(--gt-ink-2);
}
.gt-group-note{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--gt-muted);
}
.gt-group-note strong{ font-weight:600; color:var(--gt-ink-2); }

/* Date fields */
.gt-input[type="date"]{ color-scheme:light; }
.gt-input[type="date"]::-webkit-date-and-time-value{ text-align:left; }
.gt-input[type="date"]::-webkit-calendar-picker-indicator{
  width:18px;
  height:18px;
  padding:6px;
  margin-right:-6px;
  border-radius:50%;
  opacity:.55;
  cursor:pointer;
  transition:opacity .15s ease, background-color .15s ease;
}
.gt-input[type="date"]::-webkit-calendar-picker-indicator:hover{
  opacity:.9;
  background-color:rgba(15, 23, 42, .06);
}


/* ---------- Results ---------- */

/* Segmented button */
.gt-seg{
  display:inline-flex;
  flex:none;
  height:36px;
  border:1px solid var(--gt-outline);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.gt-seg-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  border:0;
  background:transparent;
  font:inherit;
  font-size:13.5px;
  font-weight:500;
  color:var(--gt-ink-2);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.gt-seg-btn + .gt-seg-btn{ border-left:1px solid var(--gt-outline); }
.gt-seg-btn:hover{ background:rgba(15, 23, 42, .04); }
.gt-seg-btn svg{
  width:0;
  height:16px;
  opacity:0;
  transition:width .15s ease, opacity .15s ease;
}
.gt-seg-btn.is-active{
  background:var(--gt-tonal);
  color:var(--gt-primary-strong);
  font-weight:600;
}
.gt-seg-btn.is-active svg{ width:16px; opacity:1; }
.gt-page .gt-seg-btn:focus-visible{ outline-offset:-3px; }

/* The number */
.gt-bignum{
  margin:12px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 12px;
  font-size:clamp(40px, 4.6vw, 56px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--gt-ink);
}
.gt-bignum-unit{
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  color:var(--gt-muted);
}
.gt-bignum-sub{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.5;
  color:var(--gt-muted);
}
.gt-bignum-sub strong{ font-weight:600; color:var(--gt-ink); }

/* Status chip under the number (data-state set by the script) */
.gt-status{
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  margin:14px 0 0;
  padding:6px 14px 6px 12px;
  border-radius:16px;
  background:#eef1f5;
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--gt-muted);
}
.gt-status::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8b95a5;
}
.gt-status[data-state="eligible"]{ background:#e6f4ea; color:#137333; }
.gt-status[data-state="eligible"]::before{ background:var(--gt-green); }
.gt-status[data-state="failed"]{ background:#fce8e6; color:#c5221f; }
.gt-status[data-state="failed"]::before{ background:var(--gt-red); }

/* Split bar: where the gross salary goes */
.gt-split{
  display:flex;
  gap:3px;
  height:12px;
  margin-top:24px;
  border-radius:6px;
  overflow:hidden;
}
.gt-split-seg{
  flex:0 1 0;
  min-width:0;
  background:var(--gt-c);
  transition:flex-grow .45s var(--gt-ease);
}
.gt-split-seg[data-key="net"]{ flex-grow:1; }

.gt-legend{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 28px;
}
.gt-legend li{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:13.5px;
  line-height:1.3;
  color:var(--gt-ink-2);
}
.gt-legend li::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gt-c);
}
.gt-legend-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gt-legend-value{ margin-left:auto; font-weight:600; color:var(--gt-ink); white-space:nowrap; }

/* Two headline stats */
.gt-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:26px 0 0;
  padding-top:22px;
  border-top:1px solid var(--gt-hair);
}
.gt-stat{ min-width:0; }
.gt-stat + .gt-stat{ padding-left:24px; border-left:1px solid var(--gt-hair); }
.gt-stat dt{ font-size:13px; font-weight:500; color:var(--gt-muted); }
.gt-stat dd{
  margin:6px 0 0;
  font-size:clamp(22px, 2.2vw, 28px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--gt-ink);
}
.gt-stat dd.gt-stat-note{
  margin-top:4px;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.45;
  color:var(--gt-muted);
}
.gt-stat-note span{ font-weight:600; color:var(--gt-ink-2); }

/* Four stats as a 2 x 2 grid: hairline between the columns only */
.gt-stats--quad{ row-gap:20px; }
.gt-stats--quad .gt-stat:nth-child(odd){ padding-left:0; border-left:0; }
.gt-stats--quad .gt-stat:nth-child(even){ padding-left:24px; border-left:1px solid var(--gt-hair); }
.gt-stats--quad .gt-stat dd{
  font-size:clamp(18px, 1.8vw, 22px);
  font-variant-numeric:normal;   /* these hold dates: tnum would widen the hyphens */
}

/* Breakdown table */
.gt-breakdown{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--gt-hair);
}
.gt-breakdown-title{
  margin:0 0 4px;
  font-size:13px;
  font-weight:600;
  color:var(--gt-ink-2);
}
.gt-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.35;
}
.gt-table th,
.gt-table td{ padding:10px 0; }
.gt-table thead th{
  padding-top:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--gt-hair);
  font-size:12px;
  font-weight:500;
  text-align:right;
  color:var(--gt-muted);
}
.gt-table thead th:first-child{ text-align:left; }
.gt-table tbody th{
  font-weight:500;
  text-align:left;
  color:var(--gt-ink-2);
}
.gt-table tbody th::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:10px;
  border-radius:50%;
  background:var(--gt-c);
  vertical-align:1px;
}
.gt-table td{
  width:27%;
  padding-left:12px;
  text-align:right;
  white-space:nowrap;
  color:var(--gt-ink);
}
.gt-table tbody tr + tr > *{ border-top:1px solid #eef1f5; }
.gt-table tfoot th,
.gt-table tfoot td{
  padding-top:12px;
  border-top:1px solid #cfd6e0;
  font-weight:700;
  color:var(--gt-ink);
}
.gt-table tfoot th{ text-align:left; }

/* Timeline table: hollow dots for upcoming rows, the current row
   (tr.is-current, set by the script) filled and set in bold */
.gt-table--timeline tbody th::before{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--gt-c);
}
.gt-table--timeline tr.is-current > *{ font-weight:600; color:var(--gt-ink); }
.gt-table--timeline tr.is-current th::before{ background:var(--gt-c); box-shadow:none; }
/* Days column (th is child 1): the current grant in brand blue */
.gt-table--timeline tr.is-current td:nth-child(3){ color:var(--gt-primary-strong); }
/* More than two figure columns: let the browser size them, keep dates whole */
.gt-table--timeline th,
.gt-table--timeline td{ width:auto; white-space:nowrap; }
.gt-table--timeline thead th:last-child,
.gt-table--timeline td:last-child{ padding-left:14px; }
/* Past cycles: filled grey dot, muted figures */
.gt-table--timeline tr.is-past th::before{ background:#c3c9d3; box-shadow:none; }
.gt-table--timeline tr.is-past > *{ color:var(--gt-muted); }
/* A cycle lost to attendance under 80%: red dot, statutory days struck */
.gt-table--timeline tr.is-failed th::before{ background:var(--gt-c); box-shadow:none; }
.gt-table--timeline tr.is-failed td:nth-child(3){ color:#c5221f; font-weight:600; }
.gt-struck{
  margin-right:6px;
  font-size:.85em;
  font-weight:400;
  color:var(--gt-faint);
  text-decoration-color:currentColor;
}
.gt-table--timeline tr.is-expired td:last-child{ text-decoration:line-through; text-decoration-color:#c3c9d3; }
/* Wide tables scroll inside the card on very small screens, never the page */
.gt-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:400px){
  .gt-table--timeline{ font-size:12.5px; }
  .gt-table--timeline tbody th::before{ margin-right:6px; }
  .gt-table--timeline thead th:last-child,
  .gt-table--timeline td:last-child{ padding-left:8px; }
  .gt-table--timeline td{ padding-left:8px; }
}
.gt-table-note{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--gt-muted);
}

/* Notes under the results: flat lines with a coloured glyph, no box */
.gt-notes{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.gt-note{
  position:relative;
  margin:0;
  padding-left:28px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--gt-ink-2);
  --gt-note:var(--gt-primary);
}
.gt-note[data-key="duty"]{ --gt-note:#a86200; }
.gt-note[data-key="limit"]{ --gt-note:#c5221f; }
.gt-note strong{ font-weight:600; color:var(--gt-ink); }
.gt-note::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:18px;
  height:18px;
  background-color:var(--gt-note);
  -webkit-mask:var(--gt-note-icon) center / contain no-repeat;
          mask:var(--gt-note-icon) center / contain no-repeat;
}
.gt-note--calendar{
  --gt-note-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3v3M16 3v3M4.5 9.5h15M6 5h12a1.5 1.5 0 0 1 1.5 1.5V19a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 19V6.5A1.5 1.5 0 0 1 6 5zM9 14.5l2 2 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gt-breakdown .gt-notes{ margin-top:10px; }
.gt-note--info{
  --gt-note-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17zM12 11v5.5M12 7.6v.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gt-note--clock{
  --gt-note-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17zM12 7.5V12l3 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.gt-fineprint{
  margin:20px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--gt-muted);
}
.gt-fineprint a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#c3c9d3;
  text-underline-offset:2px;
}
.gt-fineprint a:hover{ color:var(--gt-ink); text-decoration-color:currentColor; }

/* The results run longer than the inputs: keep the inputs in view while
   the reader scans the breakdown, so a change and its effect share a screen */
@media (min-width:921px) and (min-height:760px){
  .gt-inputs{
    position:sticky;
    top:76px;
    align-self:start;
  }
}

@media (max-width:920px){
  .gt-card{ grid-template-columns:minmax(0, 1fr); }
  .gt-results{ border-left:0; border-top:1px solid var(--gt-hair); border-radius:0 0 24px 24px; }
}
@media (max-width:480px){
  .gt-tool{ padding-left:12px; padding-right:12px; }
  .gt-card{ border-radius:20px; }
  .gt-results{ border-radius:0 0 20px 20px; }
  .gt-field-row{ grid-template-columns:1fr; gap:26px; }
  .gt-legend{ grid-template-columns:1fr; }
  .gt-pane-head{ flex-wrap:wrap; }
}


/* =====================================================================
   READING SECTIONS
===================================================================== */
.gt-section{ padding:clamp(60px, 8vw, 104px) 22px; }
/* The tool's bottom padding already separates it from the first section */
.gt-tool + .gt-section{ padding-top:0; }
/* Two sections on the same background read as one band: don't double the gap */
.gt-section:not(.gt-section--alt) + .gt-section:not(.gt-section--alt),
.gt-section--alt + .gt-section--alt{ padding-top:0; }
.gt-section--alt{ background:var(--gt-alt); }
.gt-section-inner{ max-width:820px; margin:0 auto; }
.gt-section-inner--wide{ max-width:1120px; }

.gt-section-head{ margin-bottom:36px; }
.gt-eyebrow{
  margin:0 0 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gt-primary);
}
.gt-h2{
  margin:0;
  font-size:clamp(28px, 3.3vw, 40px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.032em;
  color:var(--gt-ink);
  text-wrap:balance;
}
.gt-section-deck{
  margin:14px 0 0;
  font-size:17px;
  line-height:1.6;
  color:var(--gt-muted);
}
.gt-section-inner--wide .gt-section-deck{ max-width:820px; }

/* Links inside reading copy */
.gt-steps p a,
.gt-flow p a,
.gt-faq-item p a,
.gt-group-note a,
.gt-def dd a,
.gt-prose-text a,
.gt-aside-note a{
  color:var(--gt-primary);
  text-decoration:underline;
  text-decoration-color:rgba(0, 113, 235, .35);
  text-underline-offset:3px;
}
.gt-steps p a:hover,
.gt-flow p a:hover,
.gt-faq-item p a:hover,
.gt-group-note a:hover,
.gt-def dd a:hover,
.gt-prose-text a:hover,
.gt-aside-note a:hover{ text-decoration-color:currentColor; }

/* How-to strip: short numbered steps side by side, lighter than .gt-steps */
.gt-flow{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:32px 28px;
  counter-reset:gt-flow;
}
.gt-flow > li{
  min-width:0;
  counter-increment:gt-flow;
  --gt-flow:#1967d2;
  --gt-flow-tint:#e8f0fe;
}
.gt-flow > li:nth-child(4n+2){ --gt-flow:#c5221f; --gt-flow-tint:#fce8e6; }
.gt-flow > li:nth-child(4n+3){ --gt-flow:#a86200; --gt-flow-tint:#fef7e0; }
.gt-flow > li:nth-child(4n+4){ --gt-flow:#137333; --gt-flow-tint:#e6f4ea; }
.gt-flow > li::before{
  content:counter(gt-flow);
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--gt-flow-tint);
  font-size:14px;
  font-weight:700;
  color:var(--gt-flow);
}
.gt-flow h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  color:var(--gt-ink);
}
.gt-flow p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--gt-muted);
}
@media (max-width:900px){
  .gt-flow{ grid-template-columns:minmax(0, 1fr); gap:22px; }
  .gt-flow > li{
    display:grid;
    grid-template-columns:30px minmax(0, 1fr);
    column-gap:16px;
  }
  .gt-flow > li::before{ grid-row:span 2; margin:0; }
}

/* Reference grid table (e.g. a statutory rate table): centred figures,
   optional two-level header, one key column tinted with its data colour */
.gt-grid-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.gt-grid-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.35;
}
.gt-grid-table th,
.gt-grid-table td{
  padding:12px 8px;
  border-bottom:1px solid var(--gt-hair);
  text-align:center;
}
.gt-grid-table thead th{
  vertical-align:bottom;
  font-size:14px;
  font-weight:600;
  color:var(--gt-ink);
}
.gt-grid-table thead tr:last-child th,
.gt-grid-table thead th[rowspan]{ border-bottom-color:#cfd6e0; }
.gt-grid-table thead tr:first-child th:first-child,
.gt-grid-table tbody th{ padding-left:0; text-align:left; }
/* Labels break only where the markup allows (<wbr>, spaces), never mid-word */
.gt-grid-table thead th,
.gt-grid-table tbody th{ word-break:keep-all; }
.gt-grid-table .gt-grid-group{
  padding-bottom:8px;
  font-size:12.5px;
  color:var(--gt-muted);
}
.gt-grid-sub{
  display:block;
  margin-top:3px;
  word-break:normal;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  color:var(--gt-muted);
}
.gt-grid-table tbody th{
  font-weight:500;
  white-space:nowrap;
  color:var(--gt-ink-2);
}
.gt-grid-table td{
  font-size:16px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--gt-ink);
}
.gt-grid-table .gt-grid-key{
  background:rgba(66, 133, 244, .08);
  background:color-mix(in srgb, var(--gt-c) 9%, transparent);
}
.gt-grid-table td.gt-grid-key{ color:var(--gt-primary-strong); }
.gt-unit{
  margin-left:1px;
  font-size:.75em;
  font-weight:500;
  color:var(--gt-muted);
}
.gt-grid-key .gt-unit{ color:inherit; opacity:.7; }
.gt-grid-key .gt-grid-sub{ word-break:keep-all; }   /* break at its spaces only */
@media (min-width:621px){
  .gt-grid-table thead tr:first-child th:first-child,
  .gt-grid-table thead th.gt-grid-key{ width:19%; }
}
.gt-grid-note{
  margin:18px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--gt-muted);
}
@media (max-width:620px){
  .gt-grid-table th,
  .gt-grid-table td{ padding:10px 4px; }
  .gt-grid-table thead th{ font-size:13px; }
  .gt-grid-table tbody th{ white-space:normal; font-size:13.5px; }
  .gt-grid-table td{ font-size:15px; }
  .gt-grid-sub{ font-size:10.5px; }
}

/* Prose */
.gt-steps p,
.gt-lead{
  margin:0;
  font-size:17px;
  line-height:1.75;
  color:var(--gt-ink-2);
}
.gt-lead{ margin-bottom:44px; }
.gt-lead strong,
.gt-steps strong{ font-weight:600; color:var(--gt-ink); }

/* Numbered steps, Google colour rotation on the counters */
.gt-steps{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:gt-step;
  display:grid;
  gap:36px;
}
.gt-steps > li{
  position:relative;
  padding-left:60px;
  counter-increment:gt-step;
  --gt-step:#1967d2;
  --gt-step-tint:#e8f0fe;
}
.gt-steps > li:nth-child(4n+2){ --gt-step:#c5221f; --gt-step-tint:#fce8e6; }
.gt-steps > li:nth-child(4n+3){ --gt-step:#a86200; --gt-step-tint:#fef7e0; }
.gt-steps > li:nth-child(4n+4){ --gt-step:#137333; --gt-step-tint:#e6f4ea; }
.gt-steps > li::before{
  content:counter(gt-step);
  position:absolute;
  left:0;
  top:-4px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--gt-step-tint);
  font-size:15px;
  font-weight:700;
  color:var(--gt-step);
}
.gt-steps h3{
  margin:0 0 12px;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--gt-ink);
}
/* A short list inside a step (e.g. a rate table): dots take the step colour */
.gt-steps ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.gt-steps ul li{
  position:relative;
  padding-left:22px;
  font-size:16px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  color:var(--gt-ink-2);
}
.gt-steps ul li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gt-step);
}

.gt-h3{
  margin:56px 0 16px;
  font-size:20px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--gt-ink);
}
.gt-bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.gt-bullets li{
  position:relative;
  padding-left:28px;
  font-size:17px;
  line-height:1.6;
  color:var(--gt-ink-2);
}
.gt-bullets li::before{
  content:"";
  position:absolute;
  left:3px;
  top:.5em;
  width:14px;
  height:14px;
  background-color:var(--gt-green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Reference list: term + chips on the left, definition on the right */
.gt-deflist{ margin:0; border-top:1px solid var(--gt-hair); }
.gt-def{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:10px 40px;
  padding:24px 0;
  border-bottom:1px solid var(--gt-hair);
}
.gt-def dt{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.gt-def-name{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  color:var(--gt-ink);
}
.gt-def-name::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gt-c);
}
.gt-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-left:20px;
}
.gt-chip{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border:1px solid var(--gt-outline);
  border-radius:13px;
  background:#fff;
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
  color:var(--gt-ink-2);
}
.gt-def dd{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--gt-ink-2);
}
@media (max-width:720px){
  .gt-def{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .gt-def dd{ padding-left:20px; }
}

/* FAQ */
.gt-faq{ border-top:1px solid var(--gt-hair); }
.gt-faq-item{ border-bottom:1px solid var(--gt-hair); }
.gt-faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 2px;
  list-style:none;
  cursor:pointer;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--gt-ink);
  border-radius:6px;
}
.gt-faq-item summary::-webkit-details-marker{ display:none; }
.gt-faq-item summary::after{
  content:"";
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%235b6476' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition:transform .2s var(--gt-ease), background-color .15s ease;
}
.gt-faq-item summary:hover::after{ background-color:rgba(15, 23, 42, .05); }
.gt-faq-item[open] summary::after{ transform:rotate(180deg); }
.gt-faq-item p{
  margin:0;
  padding:0 56px 26px 2px;
  font-size:16px;
  line-height:1.75;
  color:var(--gt-ink-2);
}
@media (max-width:620px){
  .gt-faq-item p{ padding-right:0; }
}


/* =====================================================================
   AUTHOR
===================================================================== */
.gt-author{
  padding:clamp(64px, 8vw, 108px) 22px;
  background:var(--gt-alt);
  text-align:center;
}
.gt-author-inner{
  max-width:660px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.gt-author .gt-eyebrow{ margin-bottom:28px; color:var(--gt-muted); }

.gt-author-face{
  position:relative;
  width:128px;
  height:128px;
}
.gt-author-portrait{
  display:block;
  width:128px;
  height:128px;
  border-radius:50%;
  object-fit:cover;
  background:radial-gradient(circle at 32% 24%, #4d9bf5 0%, #0071eb 48%, #005bc0 100%);
  box-shadow:
    0 0 0 5px #fff,
    0 18px 40px -10px rgba(0, 88, 196, .45);
}

.gt-author-name{
  margin:28px 0 0;
  font-size:clamp(26px, 2.6vw, 32px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--gt-ink);
}
.gt-author-role{
  margin:8px 0 0;
  font-size:16px;
  line-height:1.5;
  color:var(--gt-muted);
}
.gt-author-creds{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 26px;
}
.gt-author-creds li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  color:var(--gt-ink-2);
}
.gt-author-creds svg,
.gt-author-creds img{ display:block; width:18px; height:18px; }
/* The round flag is mostly white: a hairline ring keeps its edge */
.gt-author-creds img{ border-radius:50%; box-shadow:0 0 0 1px #d9dee6; }

.gt-author-bio{
  margin:28px 0 0;
  font-size:17px;
  line-height:1.75;
  color:var(--gt-ink-2);
  text-wrap:pretty;
}
.gt-author-bio strong{ font-weight:600; color:var(--gt-ink); }

.gt-author-note{
  max-width:560px;
  margin:18px 0 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--gt-muted);
  text-wrap:pretty;
}
.gt-author-note svg{
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:4px;
  vertical-align:-3px;
  color:#137333;
}

.gt-author-actions{
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

/* Buttons */
.gt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 22px;
  border-radius:22px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gt-btn svg,
.gt-btn img{ flex:none; width:18px; height:18px; }
.gt-btn svg{ transition:transform .2s var(--gt-ease); }
.gt-btn--tonal{ background:var(--gt-tonal); color:var(--gt-primary-strong); }
.gt-btn--tonal:hover{ background:var(--gt-tonal-hover); box-shadow:0 1px 3px rgba(0, 88, 196, .18); }
.gt-btn--tonal:hover svg{ transform:translateX(3px); }
.gt-btn--outlined{
  border:1px solid var(--gt-outline);
  background:#fff;
  color:var(--gt-ink-2);
}
.gt-btn--outlined:hover{ border-color:var(--gt-outline-hover); background:#fbfcfe; }


/* =====================================================================
   RELATED (scene-cover cards, same language as the hub libraries)
===================================================================== */
.gt-related{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:36px 28px;
}
.gt-rel{
  display:flex;
  flex-direction:column;
  min-width:0;
  color:inherit;
  text-decoration:none;
  border-radius:16px;
}
.gt-rel-cover{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16 / 10;
  border-radius:16px;
  background:#f6f8fb;
  overflow:hidden;
  transition:transform .25s var(--gt-ease), box-shadow .25s ease;
}
.gt-rel-cover img{
  width:auto;
  height:88%;
  max-width:94%;
  object-fit:contain;
  transition:transform .35s var(--gt-ease);
}
.gt-rel:hover .gt-rel-cover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(17, 24, 39, .12);
}
.gt-rel:hover .gt-rel-cover img{ transform:scale(1.035); }
.gt-rel-tag{
  margin-top:18px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gt-muted);
}
.gt-rel-title{
  margin-top:6px;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--gt-ink);
}
.gt-rel:hover .gt-rel-title{ text-decoration:underline; text-underline-offset:3px; }
.gt-rel-text{
  margin-top:8px;
  font-size:15px;
  line-height:1.6;
  color:var(--gt-muted);
}
@media (max-width:900px){
  .gt-related{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .gt-related{ grid-template-columns:minmax(0, 1fr); }
}


/* =====================================================================
   SOURCES + DISCLAIMER
===================================================================== */
.gt-sources{ padding:0 22px clamp(56px, 7vw, 88px); }
.gt-sources .gt-section-inner{
  padding-top:clamp(40px, 4.5vw, 56px);
  border-top:1px solid var(--gt-hair);
}
.gt-sources-head{ max-width:760px; margin-bottom:24px; }
.gt-sources-title{
  margin:0;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--gt-ink);
}
.gt-sources-intro{
  margin:8px 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--gt-muted);
}

/* Source tiles: three per row at any count, wrapping onto new rows.
   Flat tinted surface like the cover tiles; no border, no shadow at rest. */
.gt-src-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px 28px;   /* column gap matches .gt-related, so the edges line up */
}
.gt-src-grid > li{ display:flex; min-width:0; }
.gt-src{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  padding:20px 22px 22px;
  border-radius:16px;
  background:#f6f8fb;
  color:inherit;
  text-decoration:none;
  transition:background-color .2s ease, transform .2s var(--gt-ease);
  --gt-src:#1967d2;
  --gt-src-tint:#e8f0fe;
}
.gt-src-grid > li:nth-child(4n+2) .gt-src{ --gt-src:#c5221f; --gt-src-tint:#fce8e6; }
.gt-src-grid > li:nth-child(4n+3) .gt-src{ --gt-src:#a86200; --gt-src-tint:#fef7e0; }
.gt-src-grid > li:nth-child(4n+4) .gt-src{ --gt-src:#137333; --gt-src-tint:#e6f4ea; }
.gt-src:hover{ background:#eef2f9; transform:translateY(-2px); }
.gt-page .gt-src:focus-visible{ outline-offset:3px; }

.gt-src-head{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.gt-src-icon{
  flex:none;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--gt-src-tint);
  color:var(--gt-src);
}
.gt-src-icon svg{ width:20px; height:20px; }
.gt-src-org{
  display:flex;
  flex-direction:column;
  min-width:0;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:var(--gt-ink);
}
.gt-src-site{
  overflow:hidden;
  font-size:12.5px;
  font-weight:400;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--gt-muted);
}
.gt-src-ext{
  flex:none;
  width:20px;
  height:20px;
  margin-left:auto;
  align-self:flex-start;
  color:var(--gt-faint);
  transition:transform .2s var(--gt-ease), color .2s ease;
}
.gt-src:hover .gt-src-ext{ color:var(--gt-primary); transform:translate(2px, -2px); }

.gt-src-title{
  margin-top:18px;
  font-size:17px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--gt-ink);
}
.gt-src:hover .gt-src-title{ color:var(--gt-primary-strong); }
.gt-src-note{
  margin-top:8px;
  font-size:14px;
  line-height:1.55;
  color:var(--gt-muted);
}

@media (max-width:900px){
  .gt-src-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .gt-src-grid{ grid-template-columns:minmax(0, 1fr); }
}

.gt-disclaimer{
  max-width:900px;
  margin:36px 0 0;
  font-size:13px;
  line-height:1.65;
  color:var(--gt-muted);
}
.gt-disclaimer strong{ color:var(--gt-ink-2); font-weight:600; }


/* =====================================================================
   COMPONENTS ADDED FOR THE ATTENDANCE RATE TOOL
   Generic: checklist rows with a revealed day count, a weekday picker,
   a meter with a threshold line, a reference table for prose sections.
===================================================================== */

/* Attribute-hidden always wins over a component's display value */
.gt-page [hidden]{ display:none !important; }

/* Excluded / not counted: a neutral grey, the fifth data key */
.gt-page [data-key="neutral"]{ --gt-c:#9aa0a6; }

/* Group title with a live total on the right */
.gt-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.gt-group-value{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:var(--gt-ink);
}

/* Checklist: a checkbox per category, its day count revealed when ticked */
.gt-checks{ display:grid; gap:4px; }
.gt-checks-title{
  margin:0 0 6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--gt-muted);
}
.gt-check{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:8px 16px;
  min-height:48px;
}
.gt-check-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  padding:6px 0;
  cursor:pointer;
}
.gt-checkbox-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.gt-checkbox{
  position:relative;
  flex:none;
  width:20px;
  height:20px;
  margin-top:1px;
  border:2px solid #5b6476;
  border-radius:4px;
  background:#fff no-repeat center / 16px;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gt-check-row:hover .gt-checkbox{ box-shadow:0 0 0 8px rgba(15, 23, 42, .05); }
.gt-checkbox-input:checked + .gt-checkbox{
  border-color:var(--gt-primary);
  background-color:var(--gt-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.gt-checkbox-input:focus-visible + .gt-checkbox{
  outline:2px solid var(--gt-primary);
  outline-offset:3px;
}
.gt-check-text{ min-width:0; }
.gt-check-title{
  display:block;
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  color:var(--gt-ink);
}
.gt-check-help{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--gt-muted);
}
/* A field that belongs to a ticked row, set under its text (margin, not
   padding: the notched label is positioned against the field's own box) */
.gt-check-sub{ grid-column:1 / -1; margin:10px 0 6px 34px; }

/* A revealed set of inputs inside the form, spaced like the form itself */
.gt-inputs-sub{ display:grid; gap:26px; }

/* Compact outlined control: a day count beside a checklist row */
.gt-control--compact{ height:44px; padding-right:4px; }
.gt-control--compact .gt-input{
  width:64px;
  flex:none;
  padding:0 2px 0 12px;
  text-align:right;
}
.gt-control--compact .gt-count-unit{
  padding:0 6px 0 2px;
  font-size:14px;
  color:var(--gt-muted);
}
.gt-control--compact .gt-step{ width:32px; height:32px; }
.gt-control--compact .gt-step svg{ width:16px; height:16px; }

/* Weekday picker: round toggles, pressed = day off */
.gt-daypick{ margin:0; padding:0; border:0; min-width:0; }
.gt-daypick-label{
  margin:0 0 10px;
  padding:0;
  font-size:12.5px;
  font-weight:600;
  color:var(--gt-muted);
}
.gt-daypick-row{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 40px));
  gap:8px;
}
.gt-daychip{
  aspect-ratio:1;
  width:100%;
  padding:0;
  border:1px solid var(--gt-outline);
  border-radius:50%;
  background:#fff;
  font:inherit;
  font-size:13.5px;
  font-weight:500;
  color:var(--gt-ink-2);
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gt-daychip:hover{ border-color:var(--gt-outline-hover); }
.gt-daychip[aria-pressed="true"]{
  border-color:transparent;
  background:var(--gt-tonal);
  color:var(--gt-primary-strong);
  font-weight:700;
}
.gt-daypick-help{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--gt-muted);
}

/* A worked sum under the inputs: "183 days − 52 − 9 = 122" */
.gt-calc-line{
  margin:-8px 0 0;
  font-size:13px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  color:var(--gt-ink-2);
}

/* Meter: share of a whole, with a fixed threshold line (--gt-mark) */
.gt-meter{
  position:relative;
  margin-top:24px;
  padding-top:22px;
  --gt-mark:80%;
}
.gt-meter-track{
  display:flex;
  height:12px;
  border-radius:6px;
  overflow:hidden;
  background:#e7ebf1;
}
.gt-meter-seg{
  flex:none;
  box-sizing:border-box;
  height:100%;
  background:var(--gt-c);
  transition:width .45s var(--gt-ease);
}
.gt-meter-seg + .gt-meter-seg{ border-left:3px solid var(--gt-pane); }
.gt-meter-mark{
  position:absolute;
  top:18px;
  bottom:-4px;
  left:var(--gt-mark);
  width:2px;
  margin-left:-1px;
  border-radius:1px;
  background:var(--gt-ink);
}
.gt-meter-mark > span{
  position:absolute;
  bottom:100%;
  left:50%;
  margin-bottom:3px;
  transform:translateX(-50%);
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  color:var(--gt-ink-2);
}

/* More note glyphs and colours */
.gt-note[data-key="eligible"]{ --gt-note:#137333; }
.gt-note[data-key="neutral"]{ --gt-note:var(--gt-muted); }
.gt-note a{
  color:var(--gt-primary-strong);
  text-decoration:underline;
  text-underline-offset:2px;
}
.gt-note--info{
  --gt-note-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17zM12 11v5.5M12 7.6v.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The next-step button under the results */
.gt-next{ margin-top:22px; }

/* Prose paragraph outside the numbered steps, and a formula line */
.gt-prose-text{
  margin:0;
  font-size:17px;
  line-height:1.75;
  color:var(--gt-ink-2);
}
.gt-formula{
  margin:-12px 0 44px;
  padding:18px 0;
  border-top:1px solid var(--gt-hair);
  border-bottom:1px solid var(--gt-hair);
  font-size:clamp(18px, 2vw, 22px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  text-align:center;
  color:var(--gt-ink);
}


@media (max-width:480px){
  .gt-check{ grid-template-columns:minmax(0, 1fr); }
  .gt-check .gt-check-days{ margin-left:34px; }
  .gt-daypick-row{ gap:6px; }
}

/* A table straight after a prose paragraph needs its own gap */
.gt-prose-text + .gt-grid-wrap{ margin-top:20px; }

/* A green key column reads in green, not the default blue */
.gt-grid-table td.gt-grid-key[data-key="eligible"]{ color:#137333; }
.gt-grid-table td.gt-grid-key[data-key="limit"]{ color:#c5221f; }

/* A section that opens on an H3 straight under its head */
.gt-section-head + .gt-h3{ margin-top:0; }

/* Formula rows: label, code, copy button, on hairlines */
.gt-codelist{ margin:20px 0 0; border-top:1px solid var(--gt-hair); }
.gt-codelist > div{
  display:grid;
  grid-template-columns:210px minmax(0, 1fr);
  align-items:center;
  gap:6px 24px;
  padding:12px 0;
  border-bottom:1px solid var(--gt-hair);
}
.gt-codelist dt{ font-size:14px; font-weight:600; line-height:1.4; color:var(--gt-ink-2); }
.gt-codelist dd{ display:flex; align-items:center; gap:6px; min-width:0; margin:0; }
.gt-codelist code{
  flex:1;
  min-width:0;
  padding:8px 12px;
  overflow-x:auto;
  border:1px solid var(--gt-hair);
  border-radius:8px;
  background:#fff;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:14px;
  line-height:1.5;
  white-space:nowrap;
  color:var(--gt-ink);
}
@media (max-width:620px){
  .gt-codelist > div{ grid-template-columns:minmax(0, 1fr); }
}

/* Copy button: icon swaps to a check for a moment after copying */
.gt-copy{
  flex:none;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--gt-muted);
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.gt-copy:hover{ background:rgba(15, 23, 42, .06); color:var(--gt-ink); }
.gt-copy svg{ width:18px; height:18px; }
.gt-copy .gt-copy-done,
.gt-copy.is-done .gt-copy-icon{ display:none; }
.gt-copy.is-done .gt-copy-done{ display:block; }
.gt-copy.is-done{ color:#137333; }

/* A document excerpt (sample clause) set as one white sheet */
.gt-clause{
  position:relative;
  margin:20px 0 0;
  padding:24px 60px 24px 28px;
  border:1px solid var(--gt-hair);
  border-radius:16px;
  background:#fff;
}
.gt-clause .gt-copy{ position:absolute; top:14px; right:14px; }
.gt-clause p{ margin:0; font-size:15px; line-height:1.8; color:var(--gt-ink-2); }
.gt-clause p + p{ margin-top:8px; }
.gt-clause .gt-clause-title{ margin-bottom:12px; font-weight:700; color:var(--gt-ink); }
.gt-clause .gt-clause-item{ margin-top:2px; padding-left:2em; }
@media (max-width:480px){
  .gt-clause{ padding:20px 52px 20px 20px; }
}

/* Download link under a prose paragraph */
.gt-download{ margin-top:20px; }

/* Dense grid: six columns that must fit a phone without scrolling sideways */
@media (max-width:620px){
  .gt-grid-table--dense th,
  .gt-grid-table--dense td{ padding:10px 3px; }
  .gt-grid-table--dense thead th{ font-size:12px; }
  .gt-grid-table--dense .gt-grid-group{ font-size:11.5px; }
  .gt-grid-table--dense tbody th{ font-size:13px; white-space:normal; }
  .gt-grid-table--dense td{ font-size:14px; }
}

/* Spacing when a paragraph or list follows another block in prose */
.gt-prose-text--spaced{ margin-top:28px; }
.gt-bullets--spaced{ margin-top:16px; }


/* =====================================================================
   PAID LEAVE CALCULATOR ADDITIONS (reusable)
===================================================================== */
/* Segmented button stretched across a form column */
.gt-seg--block{ display:flex; width:100%; }
.gt-seg--block .gt-seg-btn{ flex:1 1 0; justify-content:center; min-width:0; }

/* Unit after the value in a full-size field ("日") */
.gt-control--unit .gt-count-unit{
  flex:none;
  padding:0 4px 0 0;
  font-size:15px;
  color:var(--gt-muted);
}

.gt-nowrap{ white-space:nowrap; }
.gt-prose-text + .gt-prose-text{ margin-top:16px; }

/* Empty state of a generated checklist */
.gt-att-empty{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--gt-muted);
}

/* Two flat lists side by side (e.g. counted / excluded days) */
.gt-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:36px 48px;
}
.gt-col-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:var(--gt-ink);
}
.gt-col-note{
  margin:6px 0 16px;
  font-size:14px;
  line-height:1.6;
  color:var(--gt-muted);
}
.gt-cols .gt-bullets li{ font-size:16px; }
/* Minus marks: "taken out of the total" */
.gt-bullets--minus li::before{
  background-color:#8b95a5;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* A short qualifying note under a block, set on a hairline */
.gt-aside-note{
  margin:36px 0 0;
  padding-top:20px;
  border-top:1px solid var(--gt-hair);
  font-size:15px;
  line-height:1.75;
  color:var(--gt-ink-2);
}
.gt-aside-note strong{ font-weight:600; color:var(--gt-ink); }
@media (max-width:720px){
  .gt-cols{ grid-template-columns:minmax(0, 1fr); }
}


/* =====================================================================
   JAPANESE
   CJK glyphs are set on a full em already: the negative tracking that
   tightens Inter display type crowds them, and body copy wants more
   leading. Sizes step down because each character is ~2x a Latin one.
===================================================================== */
.gt-page:lang(ja) .gt-title{
  font-size:clamp(30px, 4.2vw, 50px);
  line-height:1.2;
  letter-spacing:-.01em;
}
.gt-page:lang(ja) .gt-h2{
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.35;
  letter-spacing:-.01em;
}
.gt-page:lang(ja) .gt-eyebrow,
.gt-page:lang(ja) .gt-rel-tag{ letter-spacing:.06em; }
.gt-page:lang(ja) .gt-sources-title,
.gt-page:lang(ja) .gt-src-title{ letter-spacing:0; }
.gt-page:lang(ja) .gt-steps h3,
.gt-page:lang(ja) .gt-h3,
.gt-page:lang(ja) .gt-def-name,
.gt-page:lang(ja) .gt-faq-item summary,
.gt-page:lang(ja) .gt-rel-title{ letter-spacing:0; }
.gt-page:lang(ja) .gt-deck,
.gt-page:lang(ja) .gt-lead,
.gt-page:lang(ja) .gt-steps p,
.gt-page:lang(ja) .gt-def dd,
.gt-page:lang(ja) .gt-faq-item p,
.gt-page:lang(ja) .gt-author-bio,
.gt-page:lang(ja) .gt-section-deck{ line-height:1.9; }
.gt-page:lang(ja) .gt-flow p{ line-height:1.8; }
.gt-page:lang(ja) .gt-lead,
.gt-page:lang(ja) .gt-steps p,
.gt-page:lang(ja) .gt-prose-text,
.gt-page:lang(ja) .gt-author-bio{ font-size:16px; }
.gt-page:lang(ja) .gt-prose-text{ line-height:1.9; }
.gt-page:lang(ja) .gt-formula{ letter-spacing:0; }
/* A phrase wider than a small screen may still break inside, never overflow */
.gt-page:lang(ja) .gt-title,
.gt-page:lang(ja) .gt-h2{ overflow-wrap:anywhere; }
/* Break Japanese display lines at phrase boundaries, not mid-word */
.gt-page:lang(ja) .gt-title,
.gt-page:lang(ja) .gt-deck,
.gt-page:lang(ja) .gt-h2,
.gt-page:lang(ja) .gt-author-role,
.gt-page:lang(ja) .gt-author-bio,
.gt-page:lang(ja) .gt-author-note,
.gt-page:lang(ja) .gt-sources-intro,
.gt-page:lang(ja) .gt-src-note,
.gt-page:lang(ja) .gt-rel-text,
.gt-page:lang(ja) .gt-disclaimer,
.gt-page:lang(ja) .gt-col-note,
.gt-page:lang(ja) .gt-aside-note,
.gt-page:lang(ja) .gt-table-note,
.gt-page:lang(ja) .gt-section-deck,
.gt-page:lang(ja) .gt-flow h3,
.gt-page:lang(ja) .gt-flow p,
.gt-page:lang(ja) .gt-grid-note,
.gt-page:lang(ja) .gt-help,
.gt-page:lang(ja) .gt-group-note,
.gt-page:lang(ja) .gt-def-name,
.gt-page:lang(ja) .gt-note,
.gt-page:lang(ja) .gt-fineprint{ word-break:auto-phrase; }


@media (prefers-reduced-motion:reduce){
  .gt-page *,
  .gt-page *::before,
  .gt-page *::after{ transition:none !important; }
}