/* =====================================================================
   GTOOL TEMPLATE: document-template layer for the gt-* design  (gtt-*)

   Load after gtool.css on any template page (letters, notices, contracts).
   Never redefines a gt-* rule; modifiers are added as a second class
   (e.g. <div class="gt-card gtt-card">). First used on 入社書類の添え状
   (JP). Spec, ecs-* mapping and porting steps: Documentation/Tool Page.md,
   section "Template pages".

   Anatomy, top to bottom:
     .gt-hero                      as on calculators (+ optional .gtt-toc jump links)
     .gt-card.gtt-card             one card: a header across both panes,
       .gtt-card-head                visible H2, deck, optional .gtt-mode switch
       .gt-inputs                    the form (gt fields, .gtt-row, .gtt-control--area,
                                     .gtt-seg-field, .gtt-invalid on a required field)
       .gt-results.gtt-preview       live document: .gtt-paper sheets, .gtt-export
     .gt-section ...               reading sections; .gtt-table, .gtt-numlist,
                                   .gtt-sample (on .gt-clause), .gtt-figure,
                                   .gtt-checklist (on .gt-checks)

   The document itself (.gtt-paper) is a sheet of paper, not a card: square
   corners, A4 proportions, Mincho for Japanese, Georgia for English.
   Letter parts are .gtt-l-*, contract parts .gtt-c-*.
===================================================================== */


/* =====================================================================
   COMPACT HERO: <section class="gt-hero gtt-hero">
   The template is the reason for the visit: a shorter hero lets the card
   (header, first fields, top of the sheet) show on the first screen.
===================================================================== */
.gtt-hero{ padding:clamp(28px, 3.6vw, 44px) 22px clamp(24px, 2.8vw, 32px); }
.gtt-hero .gt-hero-inner{ max-width:960px; }
.gtt-hero .gt-crumbs ol{ margin-bottom:14px; }
.gtt-hero .gt-title{ font-size:clamp(30px, 3.6vw, 44px); line-height:1.12; }
.gtt-hero .gt-deck{
  max-width:780px;
  margin-top:12px;
  font-size:16px;
  line-height:1.7;
}
.gtt-hero .gt-meta{ margin-top:16px; font-size:13.5px; }
.gtt-hero .gt-byline-face{ width:28px; height:28px; }
/* Phones: the meta items wrap on one row instead of stacking */
@media (max-width:620px){
  .gtt-hero .gt-meta{ flex-direction:row; gap:6px 16px; }
  .gtt-hero .gt-deck{ font-size:15px; }
}
.gt-page:lang(ja) .gtt-hero .gt-title{ font-size:clamp(26px, 3.1vw, 40px); line-height:1.25; }
.gt-page:lang(ja) .gtt-hero .gt-deck{ line-height:1.8; }

/* Jump links under the meta row, for template pages that are also long guides
   (readers who came for the explanation can skip the tool). One row of outlined
   chips; wraps on phones. */
.gtt-toc{ margin-top:18px; }
.gtt-toc ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.gtt-toc a{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  border:1px solid var(--gt-outline);
  border-radius:16px;
  background:rgba(255, 255, 255, .72);
  font-size:13px;
  font-weight:500;
  line-height:1;
  color:var(--gt-ink-2);
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gtt-toc a:hover{ border-color:var(--gt-outline-hover); background:#fff; color:var(--gt-ink); }
@media (max-width:620px){
  .gtt-toc{ margin-top:14px; }
  .gtt-toc ul{ gap:6px; }
  .gtt-toc a{ height:30px; padding:0 12px; font-size:12.5px; }
}


/* =====================================================================
   CARD: header across both panes
===================================================================== */
/* Narrow form, wide sheet; --gtt-desk is the surface the sheet lies on */
.gtt-card{
  --gtt-desk:#f1f3f4;   /* neutral grey (Google surface): the white sheet stands out; no blue tint */
  grid-template-columns:minmax(0, .74fr) minmax(0, 1.26fr);
}
.gtt-card-head{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px 32px;
  padding:clamp(20px, 2.6vw, 28px) clamp(24px, 3.4vw, 40px);
  border-bottom:1px solid var(--gt-hair);
}
.gtt-card-head-text{ flex:1 1 360px; min-width:0; }
.gtt-card-title{
  margin:0;
  font-size:clamp(19px, 1.9vw, 22px);
  font-weight:700;
  line-height:1.45;
  color:var(--gt-ink);
}
.gtt-card-deck{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.75;
  color:var(--gt-muted);
}

/* Document variant switch in the header (e.g. 返送用 / 送付用) */
.gtt-mode{ height:40px; border-radius:20px; }
.gtt-mode .gt-seg-btn{ padding:0 16px; font-size:14px; white-space:nowrap; }

/* The header owns the card's top corners */
.gtt-card .gt-results{ border-radius:0 0 24px 0; background:var(--gtt-desk); }
/* Template forms run longer than a screen: they scroll with the page */
.gtt-card .gt-inputs{ position:static; }

/* Two short fields side by side; a lone visible field takes the full row */
.gtt-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:26px 16px;
}
/* A date needs ~156px to show yyyy/mm/dd beside the picker icon: two fit the
   desktop form column (~334px); on phones (~318px) the pair stacks instead of
   clipping the date */
.gtt-row:has(input[type="date"]){ grid-template-columns:repeat(auto-fit, minmax(156px, 1fr)); }

/* A short choice inside the form (e.g. 性別): small label over a block
   segmented button, sized between the 36px seg and a 56px field */
.gtt-seg-field{ display:grid; gap:8px; }
.gtt-seg-label{
  margin:0 0 0 4px;
  font-size:12px;
  font-weight:500;
  line-height:16px;
  color:var(--gt-muted);
}
.gtt-seg-field .gt-seg{ height:44px; border-radius:22px; }

/* A required field left empty (flagged when the user tries to export) */
.gt-field.gtt-invalid .gt-control{ border-color:#c5221f; box-shadow:0 0 0 1px #c5221f; }
.gt-field.gtt-invalid .gt-label{ color:#c5221f; }
/* Help for a whole .gtt-row, tucked under it (the form gap is 26px) */
.gtt-help-row{ margin:-20px 16px 0; }
.gtt-help-row.is-error{ color:#c5221f; }

/* Multi-line field in the outlined shell */
.gtt-control--area{ height:auto; align-items:stretch; }
.gtt-control--area .gt-input{
  height:auto;
  min-height:112px;
  padding:16px;
  resize:vertical;
  font-size:15px;
  line-height:1.65;
  font-variant-numeric:normal;
}


/* =====================================================================
   PREVIEW PANE
===================================================================== */
.gtt-preview-tools{ display:flex; align-items:center; gap:8px; }
.gtt-edit[data-state="on"]{ background:var(--gt-tonal); }
.gtt-edit-note{ margin:16px 0 0; }
.gtt-paper-stack{ display:grid; grid-template-columns:minmax(0, 1fr); gap:22px; margin-top:18px; }

/* The sheet: A4 proportions, growing with its content */
.gtt-paper{
  aspect-ratio:210 / 297;
  padding:clamp(28px, 8%, 56px) clamp(24px, 8%, 58px);
  border-radius:4px;
  background:#fff;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .08),
    0 4px 12px rgba(15, 23, 42, .06),
    0 26px 52px -18px rgba(15, 23, 42, .32);
  font-size:13.5px;
  line-height:1.85;
  color:#1a1a1a;
  overflow-wrap:anywhere;
  counter-reset:gtt-art;
}
.gtt-paper--ja{ font-family:"Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS Mincho", serif; }
.gtt-paper--en{ font-family:Georgia, "Times New Roman", serif; }
/* Zero-specificity reset: any part's own margin wins */
:where(.gtt-paper) p{ margin:0; }
.gtt-paper.is-editable{ outline:2px dashed rgba(0, 113, 235, .4); outline-offset:4px; }
.gtt-paper.is-editable:focus{ outline-color:var(--gt-primary); }

/* Values from the form, marked in the document */
.gtt-var{
  border-radius:2px;
  background:linear-gradient(transparent 76%, rgba(66, 133, 244, .24) 76%);
}
.gtt-paper.is-editable .gtt-var{ background:rgba(66, 133, 244, .12); }
.gtt-var.is-empty{ font-style:italic; color:#9aa3b0; }
/* A value typed over several lines keeps its line breaks */
.gtt-var--lines{ white-space:pre-line; }

/* ---------- Letter parts (送付状, 通知書, 案内) ---------- */
.gtt-paper .gtt-l-date{ margin-bottom:28px; text-align:right; }
.gtt-l-to{ margin-bottom:18px; font-size:15px; font-weight:600; }
.gtt-l-to .gtt-l-to-addr{ font-size:13px; font-weight:400; }
.gtt-l-from{ margin-bottom:26px; font-size:12.5px; line-height:1.75; text-align:right; }
.gtt-l-title{ margin:4px 0 22px; font-size:17px; font-weight:700; letter-spacing:.3em; text-align:center; }
.gtt-paper--en .gtt-l-title{ font-size:15px; letter-spacing:.04em; }
/* Small line under the title, e.g. the Japanese name of an English document */
.gtt-l-subtitle{ margin:-16px 0 20px; font-size:11.5px; text-align:center; color:#64748b; }
.gtt-l-body p + p{ margin-top:8px; }
.gtt-paper .gtt-l-close{ margin:10px 0 18px; text-align:right; }
.gtt-paper .gtt-l-ki{ margin-bottom:12px; font-weight:700; letter-spacing:.3em; text-align:center; }
.gtt-paper--en .gtt-l-ki{ letter-spacing:.06em; }
.gtt-l-list{ padding-left:2em; }
.gtt-paper .gtt-l-end{ margin-top:18px; font-weight:700; text-align:right; }

/* Numbered conditions under 記 (a row with [hidden] drops out of the count) */
.gtt-l-conds{ margin:0; padding:0; list-style:none; counter-reset:gtt-cond; }
.gtt-l-conds > li{
  display:grid;
  grid-template-columns:1.6em minmax(0, 1fr);
  margin-bottom:10px;
  font-size:13px;
  counter-increment:gtt-cond;
}
.gtt-l-conds > li::before{ content:counter(gtt-cond) "."; grid-row:span 2; font-weight:600; }
.gtt-l-cond-label{ font-weight:700; }
.gtt-l-cond-detail{ white-space:pre-line; }

/* Sender's signature, bottom right, with a seal line */
.gtt-l-sign{ margin-top:28px; text-align:right; line-height:1.7; }
.gtt-l-seal{
  width:240px;
  max-width:100%;
  margin:14px 0 0 auto;
  padding-top:4px;
  border-top:1px solid rgba(17, 24, 39, .2);
  font-size:12px;
  color:#666;
}

/* ---------- Contract parts (契約書, 誓約書, 合意書) ---------- */
.gtt-c-intro{ margin-bottom:14px; }
/* Parties side by side (甲 / 乙), on a hairline frame */
.gtt-c-parties{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:0 0 22px;
  padding:14px 0;
  border-top:1px solid rgba(17, 24, 39, .15);
  border-bottom:1px solid rgba(17, 24, 39, .15);
  font-size:13px;
  line-height:1.8;
}
.gtt-c-party-label{ font-size:12px; font-weight:700; letter-spacing:.04em; color:#444; }
/* Articles number themselves; a [hidden] article is skipped */
.gtt-c-article{ counter-increment:gtt-art; }
.gtt-c-article-title{
  margin:18px 0 6px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5;
  break-after:avoid;
}
.gtt-paper--ja .gtt-c-article-title::before{ content:"第" counter(gtt-art) "条（"; }
.gtt-paper--ja .gtt-c-article-title::after{ content:"）"; }
.gtt-paper--en .gtt-c-article-title::before{ content:"Article " counter(gtt-art) " ("; }
.gtt-paper--en .gtt-c-article-title::after{ content:")"; }
.gtt-c-article-body + .gtt-c-article-body{ margin-top:4px; }
/* Numbered clauses inside an article: 1．2．(EN 1. 2.) */
.gtt-c-items{ margin:0 0 6px; padding:0; list-style:none; counter-reset:gtt-item; }
.gtt-c-items > li{ position:relative; margin-bottom:3px; padding-left:2.4em; counter-increment:gtt-item; }
.gtt-c-items > li::before{ content:counter(gtt-item) "．"; position:absolute; left:.6em; top:0; }
.gtt-paper--en .gtt-c-items > li::before{ content:counter(gtt-item) "."; }
/* Bulleted sub-list inside a clause */
.gtt-c-items ul{ margin:4px 0 0; padding:0; list-style:none; }
.gtt-c-items ul > li{ position:relative; margin-bottom:2px; padding-left:16px; }
.gtt-c-items ul > li::before{ content:"・"; position:absolute; left:0; top:0; }
.gtt-paper--en .gtt-c-items ul > li::before{ content:"•"; }
.gtt-c-note{ margin:22px 0 28px; font-size:13px; line-height:1.8; color:#333; }
/* Two signature blocks (甲 / 乙) with signature lines */
.gtt-c-signs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:18px;
  padding-top:20px;
  border-top:1px solid rgba(17, 24, 39, .15);
  font-size:13px;
  line-height:1.8;
}
.gtt-c-sign-line{ margin-top:16px; padding-top:4px; border-top:1px solid rgba(17, 24, 39, .2); font-size:12px; color:#666; }


/* =====================================================================
   STANDARD FOR TEMPLATE PAGES (2026-10-11): TRUE-SCALE A4 SHEET +
   PREVIEW THAT STAYS IN VIEW. Every gtt page uses both; behaviour comes
   from /js/gtool-template.js. First on 招聘状（招へい理由書）, then 添え状.

   <div class="gtt-paper-stack gtt-a4">  The sheet becomes a scaled copy of the
     PDF: one font size in container units (9pt on a 595pt A4 page = 1.51% of
     the width), every other size in em, margins as in the PDF. The page keeps
     A4 proportions at any width, so a one-page PDF looks like one A4 page.
   <div class="gtt-preview-sticky">      Wraps the preview pane's content so it
     stays in view while the long form scrolls. The script sets
     --gtt-sticky-top: under the nav when it fits the screen, otherwise
     negative so its bottom (export buttons) stays on screen, and slides it to
     the focused field's value.
   (Without .gtt-a4 a sheet keeps the original 13.5px reading size.)
===================================================================== */
.gtt-a4{ container-type:inline-size; }
.gtt-a4 .gtt-paper{
  padding:3.8em 5.8em;                 /* PDF margins: 34pt / 52pt at 9pt */
  font-size:max(1.51cqw, 8px);
  line-height:1.66;                    /* the PDF's line pitch */
}
.gtt-a4 .gtt-l-date{ margin-bottom:.9em; }
.gtt-a4 .gtt-l-to{ margin-bottom:.9em; font-size:1.22em; font-weight:700; }
.gtt-a4 .gtt-l-title{ margin:0 0 .55em; font-size:1.78em; letter-spacing:.25em; }
.gtt-a4 .gtt-paper--en .gtt-l-title{ font-size:1.67em; letter-spacing:.02em; }
.gtt-a4 .gtt-l-subtitle{ margin:-.4em 0 1.1em; font-size:1em; }
.gtt-a4 .gtt-l-body{ margin-bottom:.67em; }
.gtt-a4 .gtt-l-body p + p{ margin-top:.9em; }
.gtt-a4 .gtt-l-ki{ margin-bottom:.67em; }
.gtt-a4 .gtt-l-conds > li{ grid-template-columns:1.5em minmax(0, 1fr); margin-bottom:.78em; font-size:1em; }
.gtt-a4 .gtt-l-cond-label{ margin-bottom:.15em; }
.gtt-a4 .gtt-l-sign{ margin-top:0; line-height:1.66; }
.gtt-a4 .gtt-l-seal{ width:14em; margin-top:1.1em; font-size:.9em; }
/* The other letter parts, in em (their px values were set for a 13.5px sheet) */
.gtt-a4 .gtt-l-to .gtt-l-to-addr{ font-size:.8em; font-weight:400; }
.gtt-a4 .gtt-l-from{ margin-bottom:1.6em; font-size:.93em; line-height:1.6; }
.gtt-a4 .gtt-l-close{ margin:.6em 0 1.1em; }
.gtt-a4 .gtt-l-end{ margin-top:1.1em; }
/* Contract parts, in em */
.gtt-a4 .gtt-c-intro{ margin-bottom:1em; }
.gtt-a4 .gtt-c-parties{ gap:1.8em; margin:0 0 1.6em; padding:1em 0; font-size:.96em; line-height:1.66; }
.gtt-a4 .gtt-c-party-label{ font-size:.92em; }
.gtt-a4 .gtt-c-article-title{ margin:1.3em 0 .45em; font-size:1em; }
.gtt-a4 .gtt-c-article-body + .gtt-c-article-body{ margin-top:.3em; }
.gtt-a4 .gtt-c-items{ margin:0 0 .45em; }
.gtt-a4 .gtt-c-items > li{ margin-bottom:.22em; }
.gtt-a4 .gtt-c-note{ margin:1.6em 0 2em; font-size:.96em; line-height:1.66; }
.gtt-a4 .gtt-c-signs{ gap:2em; margin-top:1.3em; padding-top:1.5em; font-size:.96em; line-height:1.66; }
.gtt-a4 .gtt-c-sign-line{ margin-top:1.2em; font-size:.92em; }
/* Phones: a smaller sheet keeps a legible floor and lighter margins; it may
   then run past A4 (the PDF is unchanged) */
@container (max-width:560px){
  .gtt-a4 .gtt-paper{ padding:2.6em 2.4em; font-size:max(1.51cqw, 9px); }
}

/* Letter parts used by the true-scale sheet (any sheet can use them) */
/* Data block as a compact table: two label / value pairs per row */
.gtt-l-table{
  width:100%;
  margin-top:.2em;
  border-collapse:collapse;
  table-layout:fixed;
}
.gtt-l-table th,
.gtt-l-table td{
  padding:.18em .55em;
  border:1px solid #cbd5e1;
  text-align:left;
  vertical-align:top;
  font-weight:400;
  overflow-wrap:anywhere;
}
.gtt-l-table th{ width:18%; background:#f8fafc; font-size:.94em; font-weight:700; }
.gtt-l-indent{ display:block; padding-left:1.1em; }
/* Closing request with 以上 on the same line, at the right */
.gtt-l-closing{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.4em;
  margin:.2em 0 1.1em;
}
.gtt-l-closing-end{ flex:none; font-weight:700; }

@media (min-width:921px){
  .gtt-preview-sticky{
    position:sticky;
    top:var(--gtt-sticky-top, 88px);
    transition:top .35s var(--gt-ease);   /* the script slides it to the focused field's value */
  }
}
.gtt-overflow-note{ margin:16px 0 0; }


/* =====================================================================
   EXPORT: outlined secondary (Word), filled primary (PDF), email gate
===================================================================== */
.gtt-export{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}
.gtt-btn-filled{
  border:0;
  background:var(--gt-primary);
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0, 88, 196, .25);
}
.gtt-btn-filled:hover{ background:var(--gt-primary-strong); box-shadow:0 2px 8px rgba(0, 88, 196, .3); }
.gtt-btn-filled:disabled{ opacity:.6; cursor:default; }
/* The gate replaces the PDF button: email field + submit */
.gtt-gate{ display:flex; align-items:center; gap:10px; flex:1 1 340px; min-width:0; }
.gtt-gate .gt-field{ flex:1; min-width:0; }
.gtt-gate .gt-control{ height:48px; padding-right:4px; }
/* The notched label sits on the tinted pane above a white field */
.gtt-gate .gt-label{ background:linear-gradient(var(--gtt-desk, var(--gt-pane)) 50%, #fff 50%); }
.gtt-gate-error,
.gtt-export-status{ margin:10px 0 0; font-size:13px; line-height:1.5; }
.gtt-gate-error{ color:#c5221f; }
.gtt-export-status{ color:#137333; }
.gtt-export-status[data-state="error"]{ color:#c5221f; }


/* =====================================================================
   READING SECTIONS
===================================================================== */

/* Text table on hairlines; a status cell carries a data-key dot */
.gtt-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.65;
}
.gtt-table th,
.gtt-table td{
  padding:14px 18px 14px 0;
  border-bottom:1px solid var(--gt-hair);
  text-align:left;
  vertical-align:top;
}
.gtt-table th:last-child,
.gtt-table td:last-child{ padding-right:0; }
.gtt-table thead th{
  padding-top:0;
  border-bottom-color:#cfd6e0;
  font-size:12.5px;
  font-weight:600;
  color:var(--gt-muted);
}
.gtt-table tbody th{ font-weight:600; white-space:nowrap; color:var(--gt-ink); }
.gtt-table td{ color:var(--gt-ink-2); }
.gtt-table-gap{ margin-top:24px; }
.gtt-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  white-space:nowrap;
  color:var(--gt-ink);
}
.gtt-status::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gt-c, var(--gt-primary));
}
.gtt-status-sub{ display:block; margin:2px 0 0 16px; font-size:13px; color:var(--gt-muted); }

/* Compact numbered rows on hairlines (Google colour rotation, like .gt-steps
   but for one-line items: letter parts, an order of operations) */
.gtt-numlist{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  border-top:1px solid var(--gt-hair);
  counter-reset:gtt-num;
}
.gtt-numlist--flush{ margin-top:0; }
.gtt-numlist > li{
  position:relative;
  padding:16px 0 16px 50px;
  border-bottom:1px solid var(--gt-hair);
  font-size:16px;
  line-height:1.8;
  color:var(--gt-ink-2);
  counter-increment:gtt-num;
  --gtt-c:#1967d2;
  --gtt-t:#e8f0fe;
}
.gtt-numlist > li:nth-child(4n+2){ --gtt-c:#c5221f; --gtt-t:#fce8e6; }
.gtt-numlist > li:nth-child(4n+3){ --gtt-c:#a86200; --gtt-t:#fef7e0; }
.gtt-numlist > li:nth-child(4n+4){ --gtt-c:#137333; --gtt-t:#e6f4ea; }
.gtt-numlist > li::before{
  content:counter(gtt-num);
  position:absolute;
  left:0;
  top:15px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--gtt-t);
  font-size:14px;
  font-weight:700;
  color:var(--gtt-c);
}
.gtt-numlist strong{ font-weight:600; color:var(--gt-ink); }

/* Copyable example document on a .gt-clause sheet */
.gtt-sample p + p{ margin-top:14px; }
.gtt-sample .is-right{ text-align:right; }
.gtt-sample .is-center{ text-align:center; }
.gtt-sample .is-title{ font-weight:700; letter-spacing:.15em; color:var(--gt-ink); }
.gtt-sample .is-subject{ padding-bottom:12px; border-bottom:1px solid var(--gt-hair); font-weight:600; color:var(--gt-ink); }
.gt-prose-text + .gtt-sample{ margin-top:16px; }
/* A placeholder the reader replaces: 〔　〕 */
.gtt-fill{ border-radius:2px; background:linear-gradient(transparent 72%, rgba(66, 133, 244, .22) 72%); }
.gtt-sample-note{
  margin:14px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--gt-muted);
}
.gtt-sample-note a{
  color:var(--gt-primary);
  text-decoration:underline;
  text-decoration-color:rgba(0, 113, 235, .35);
  text-underline-offset:3px;
}
.gtt-sample-note a:hover{ text-decoration-color:currentColor; }

/* Illustration with a caption */
.gtt-figure{ margin:28px 0 0; }
.gtt-figure img{ display:block; width:100%; height:auto; border-radius:16px; }
.gtt-figure figcaption{
  margin-top:12px;
  font-size:13px;
  line-height:1.65;
  text-align:center;
  color:var(--gt-muted);
}

/* A checklist the reader ticks (real checkboxes on hairlines; ticked rows fade) */
.gtt-checklist{ gap:0; border-top:1px solid var(--gt-hair); }
.gtt-checklist .gt-check-row{ position:relative; padding:13px 0; border-bottom:1px solid var(--gt-hair); }
.gtt-checklist .gt-check-title{ font-size:16px; line-height:1.6; transition:color .15s ease; }
.gtt-checklist .gt-checkbox-input:checked ~ .gt-check-text .gt-check-title{ color:var(--gt-muted); }


/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width:920px){
  .gtt-card{ grid-template-columns:minmax(0, 1fr); }
  .gtt-card .gt-results{ border-radius:0 0 24px 24px; }
}
@media (max-width:720px){
  .gtt-c-parties,
  .gtt-c-signs{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:620px){
  .gtt-mode{ display:flex; width:100%; }
  .gtt-mode .gt-seg-btn{ flex:1 1 0; justify-content:center; min-width:0; padding:0 6px; font-size:12.5px; }
  .gtt-mode .gt-seg-btn svg{ display:none; }   /* labels need the room; the tonal fill marks the choice */
  .gtt-preview-tools{ flex-wrap:wrap; }
  .gtt-table{ font-size:14px; }
  .gtt-table th,
  .gtt-table td{ padding-right:12px; }
  .gtt-table tbody th{ white-space:normal; min-width:6.5em; }
  .gtt-status{ white-space:normal; }
}
@media (max-width:480px){
  .gtt-card .gt-results{ border-radius:0 0 20px 20px; }
  .gtt-paper{ font-size:12.5px; }
  .gtt-l-to{ font-size:14px; }
  .gtt-gate{ flex-basis:100%; flex-wrap:wrap; }
  .gtt-gate .gt-btn{ width:100%; }
}


/* =====================================================================
   JAPANESE: phrase-level line breaks on the new copy blocks
===================================================================== */
.gt-page:lang(ja) .gtt-card-title,
.gt-page:lang(ja) .gtt-card-deck,
.gt-page:lang(ja) .gtt-table,
.gt-page:lang(ja) .gtt-numlist > li,
.gt-page:lang(ja) .gtt-sample-note,
.gt-page:lang(ja) .gtt-figure figcaption,
.gt-page:lang(ja) .gtt-checklist .gt-check-title{ word-break:auto-phrase; }
.gt-page:lang(ja) .gtt-numlist > li{ line-height:1.9; }