/* TOGAF page: figure text, the three tools, stacked tables on phones and the related work pill */

/* ---------- figure text and shapes ---------- */
.motion-svg .tg-pt{font-family:var(--font-heading);font-size:16px;font-weight:700;fill:var(--ink);text-anchor:start}
.motion-svg .tg-pd{font-size:13px;fill:var(--text);text-anchor:start}
.motion-svg .tg-otx{font-size:14px;fill:var(--ink);text-anchor:start}
.motion-svg .tg-bt{font-size:15px;font-weight:700;fill:var(--ink);text-anchor:start}
.motion-svg .tg-li{font-size:12.5px;fill:var(--text);text-anchor:start}
.motion-svg .tg-see{font-size:14px;fill:var(--ink);text-anchor:start}
.motion-svg .tg-see.o{fill:var(--orange-strong);font-weight:600}
.motion-svg .lbl.tl{fill:var(--teal-strong)}
.tg-arrow{fill:var(--subtle)}
.tg-dot{fill:#fff;stroke:var(--line-strong);stroke-width:3}
.tg-dot.on{fill:var(--orange);stroke:#fff}
#m-tg-domains .n .t,#m-tg-ami .n .t{font-size:13px}
#m-tg-ami .n .s{font-size:11px}
#m-tg-cont .n .t{font-size:14px}
#m-tg-ff .n .t{font-size:14px}
.tg-hero .n.dark rect{stroke:var(--orange)}

/* ---------- shared tool layout ---------- */
.tg-tool{margin-top:26px}
.tg-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.tg-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.tg-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:24px;margin-top:14px;align-items:start}
.tg-tool-grid > *{min-width:0}
.tg-in{display:grid;gap:12px;align-content:start}
.tg-field{display:grid;gap:6px}
.tg-flab{font-size:.88rem;font-weight:600;color:var(--ink)}
.tg-verdict{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.tg-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.tg-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.no-js .tg-js{display:none}
.tg-dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;margin:0;font-size:.93rem}
.tg-dl dt{font-weight:600;color:var(--ink)}
.tg-dl dd{margin:0;color:var(--text)}
.tg-dl ul,.tg-dl ol{margin:0;padding-left:18px;display:grid;gap:3px}

/* ADM navigator */
.tg-navbtns{margin:14px 0 4px}
.tg-phases{display:grid;gap:14px;margin-top:12px}
.tg-phase{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tg-phase h4{margin:0 0 12px;font-size:1.02rem}
#tg-nav.is-ready .tg-phase:not(.is-on){display:none}

/* gap analysis */
.tg-grow{display:grid;gap:5px}
.tg-grow label{font-size:.86rem;font-weight:600;color:var(--ink)}
.tg-grow select{font:inherit;font-size:.9rem;padding:7px 9px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);max-width:100%}
.tg-matrix{font-size:.8rem;border-collapse:collapse}
.tg-matrix th,.tg-matrix td{padding:7px 6px;border:1px solid var(--line);text-align:center;vertical-align:middle}
.tg-matrix thead th{font-size:.72rem;background:var(--surface-2)}
.tg-matrix tbody th{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap;text-transform:none;letter-spacing:0;font-size:.84rem}
#tg-gap .tg-tool-grid{grid-template-columns:minmax(0,1fr)}
#tg-gap .tg-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;align-items:end}
.tg-matrix tr[data-row="new"] th{color:var(--purple-strong)}
.tg-c{display:inline-block;padding:2px 7px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.tg-c.rep{background:#CCFBF1;color:#115E59}
.tg-c.kept{background:#E2E8F0;color:#334155}
.tg-c.enh{background:#CFFAFE;color:#155E75}
.tg-c.elim{background:#FFE4E6;color:#9F1239}
.tg-c.new{background:#F3E8FF;color:#6B21A8}
.tg-glist{margin:12px 0 0;padding-left:18px;display:grid;gap:6px;font-size:.9rem}
.tg-glist li.warn::marker{color:#E11D48}
.tg-glist li.new::marker{color:var(--purple)}

/* tailoring */
.tg-tout{font-size:.92rem}

/* principles */
.tg-pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:start}
.tg-principle{border-left:4px solid var(--orange)}
.tg-principle h3{margin:0 0 12px;font-size:var(--fs-h4)}
.tg-ptag{margin:0 0 4px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-strong)}
.sub-title.tg-st0{margin-top:0}
.tg-pgrid .principles{grid-template-columns:1fr}

/* stakeholder map */
.tg-grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;max-width:820px}
.tg-q{display:grid;gap:4px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.tg-q b{font-family:var(--font-heading);color:var(--ink)}
.tg-q span{font-size:.9rem;color:var(--text)}
.tg-q small{font-size:.8rem;color:var(--muted)}
.tg-q.hi-hi{border-color:var(--orange-border);background:var(--orange-tint)}
.tg-q.hi-lo{border-color:#C4B5FD}
.tg-q.lo-hi{border-color:#99F6E4}

/* the related work pill on project cards */
.tag-rel{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--orange-border);border-radius:999px;font:600 .68rem/1.6 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-strong);vertical-align:middle}

/* narrow tables do not need the brand minimum width */
.table-wrap .tg-glance,.table-wrap .tg-levels2,.table-wrap .tg-dom,.table-wrap .tg-tools{min-width:0}
.key-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-note{margin-top:8px}

@media (max-width:1000px){
  .key-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tg-gap .tg-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-pgrid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .tg-tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .key-points.four,.tg-grid4,#tg-gap .tg-in{grid-template-columns:1fr}
  .tg-dl{grid-template-columns:1fr;gap:2px}
  .tg-dl dd{margin-bottom:10px}
  /* multi column tables become stacked cards, each cell labelled with its column */
  .table-wrap > table.tg-stack{min-width:0}
  .tg-stack thead{display:none}
  .tg-stack,.tg-stack tbody,.tg-stack tr,.tg-stack td{display:block;width:100%}
  .tg-stack tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .tg-stack td{border:0;padding:2px 0}
  .tg-stack td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
  .tg-stack td:first-child{font-weight:600;color:var(--ink)}
  .tg-stack td:first-child::before{display:none}
}