/* Building types page (/types, BT4a): family tree on a time axis, type and material views, detail-view box */
.tt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin: 6px 0 10px; }
.tt-key { display: inline-flex; align-items: center; gap: 5px; }
.tt-key i { display: inline-block; width: 22px; }
.tt-key-span { border-top: 2px solid var(--muted); opacity: .6; }
.tt-key-flourish { border-top: 5px solid var(--accent); border-radius: 3px; }
.tt-key-dot { width: 7px !important; height: 7px; border-radius: 50%; background: var(--ink); }
.tt-key-link { border-top: 2px solid var(--muted); }
.tt-key-link.disputed { border-top-style: dashed; }
.tt-key-link.probable { opacity: .45; }
.tt-box { overflow-x: auto; }
.tt-svg { display: block; font-size: 12px; }
.tt-axis text { fill: var(--muted); font-size: 10.5px; }
.tt-grid { stroke: var(--line); stroke-width: 1; }
.tt-domain-band { fill: var(--accent-soft); }
.tt-domain { font-weight: 700; font-size: 13.5px; fill: var(--accent); }
.tt-family { cursor: pointer; }
.tt-family text { font-weight: 600; fill: var(--ink); }
.tt-family:focus-visible text, .tt-type:focus-visible .tt-label { outline: none; text-decoration: underline; }
.tt-type { cursor: pointer; }
.tt-hit { fill: transparent; }
.tt-type:hover .tt-hit, .tt-type:focus .tt-hit { fill: var(--band-alt); opacity: .55; }
.tt-label { fill: var(--ink); }
.tt-type.abroad .tt-label { font-style: italic; fill: var(--muted); }
.tt-count { fill: var(--muted); font-size: 10.5px; }
.tt-span { stroke: var(--muted); stroke-width: 2; opacity: .55; stroke-linecap: round; }
.tt-span.ongoing { stroke-dasharray: none; }
.tt-flourish { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.tt-type.abroad .tt-flourish { stroke: var(--muted); }
.tt-earliest { fill: var(--ink); stroke: var(--panel); stroke-width: 1; }
.tt-link { fill: none; stroke-width: 1.3; opacity: .5; }
.tt-link.probable { opacity: .28; }
.tt-link.disputed { stroke-dasharray: 4 3; }
.tt-link.far { opacity: 0; }
.tt-svg.focus .tt-link { opacity: .07; }
.tt-svg.focus .tt-link.far { opacity: 0; }
.tt-svg.focus .tt-link.on, .tt-svg.focus .tt-link.far.on { opacity: 1; stroke-width: 2.2; }
.ty-links dt { font-weight: 600; margin-top: 8px; }
.ty-links dd { margin: 2px 0 4px 14px; }
.ty-links details summary { font-size: 13px; color: var(--muted); cursor: pointer; }
.ty-conf { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ty-conf.disputed { border-style: dashed; color: var(--accent); }
.ty-flag { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--warn-soft); }
.ty-sources li { margin: 3px 0; }
.ty-earliest { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; margin: 10px 0; }
.ty-earliest img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.ty-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.ty-plans figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.ty-plans img { width: 100%; height: 160px; object-fit: contain; background: #fff; border-radius: 4px; }
.ty-plans figcaption { font-size: .85em; margin-top: 4px; }
.ty-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ty-grid .stories-map { height: 420px; position: static; }
.ty-matlist li { margin: 4px 0; }
.ty-here-mats { margin: 4px 0; padding-left: 18px; }
@media (max-width: 760px) {
  .ty-grid { grid-template-columns: 1fr; }
  .ty-grid .stories-map { height: 300px; }
}
.types-page .gl-tools { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 .3rem; }
.types-page .gl-tools input[type=search] { flex: 0 1 280px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 15px; }
.types-page #ty_tabs { display: inline-flex; margin-top: 4px; }
.ty-links { display: block; }
/* BT5: charts through time */
.tt-year { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0; }
.tt-year input[type=range] { width: min(420px, 60vw); vertical-align: middle; }
.tt-area { fill: var(--accent); opacity: .55; }
.tt-base { stroke: var(--line); }
.tt-mark { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tt-inuse-list p { margin: 4px 0; font-size: 14px; }
.tt-heat { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.tt-heat thead th { height: 74px; vertical-align: bottom; font-weight: 400; color: var(--muted); }
.tt-heat thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.tt-heat tbody th[scope=row] { text-align: left; font-weight: 400; white-space: nowrap; padding-right: 8px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; }
.tt-heat-group th { text-align: left; font-weight: 700; color: var(--accent); padding-top: 8px; }
.tt-heat td { width: 18px; min-width: 18px; height: 16px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), var(--accent-soft)); }
.tt-heat td.first { box-shadow: inset 2px 0 0 var(--ink); }
.tt-step { fill: none; stroke: var(--accent); stroke-width: 2; }
.tt-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; cursor: default; }
.tt-chains { padding-left: 18px; }
.tt-chains li { margin: 5px 0; line-height: 1.6; }
.tt-chains a.abroad { font-style: italic; }
.tt-arrow { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.tt-arrow.disputed, .tt-arrow.probable { font-style: italic; }
/* BT3c2: the material's bedrock under its map */
.ty-bedrock .tt-legend { margin: 6px 0 4px; }
.ty-bedrock .tt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ty-bedrock .tt-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
/* BT6c: labelled diagrams of a type */
.td-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 8px 0 12px; }
.td-fig { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.td-fig figcaption { font-size: .88em; margin-top: 4px; }
.td-svg { width: 100%; height: auto; display: block; background: var(--surface); border-radius: 4px; }
.td-svg * { vector-effect: non-scaling-stroke; }
.td-room { fill: var(--panel); stroke: var(--ink); stroke-width: 1; }
.td-open { fill: color-mix(in srgb, var(--g4) 22%, var(--panel)); stroke: var(--ink); stroke-width: 1; }
.td-chamber { fill: color-mix(in srgb, var(--g4) 22%, var(--panel)); stroke: var(--ink); stroke-width: 2; }
.td-wall { fill: none; stroke: var(--ink); stroke-width: 4; }
.td-walls { fill: var(--ink); stroke: none; }
.td-stone { fill: color-mix(in srgb, var(--g-other) 55%, var(--panel)); stroke: var(--ink); stroke-width: 1; }
.td-cairn { fill: color-mix(in srgb, var(--g-other) 30%, var(--panel)); stroke: var(--muted); stroke-width: 1; }
.td-kerb { fill: color-mix(in srgb, var(--g-other) 30%, var(--panel)); stroke: var(--ink); stroke-width: 3; }
.td-timber { fill: color-mix(in srgb, var(--g11) 55%, var(--panel)); stroke: var(--g11); stroke-width: 2; }
.td-earth { fill: color-mix(in srgb, var(--g11) 28%, var(--panel)); stroke: var(--g11); stroke-width: 1; }
.td-bank { fill: none; stroke: color-mix(in srgb, var(--g11) 60%, var(--panel)); stroke-width: 12; }
.td-ditch { fill: none; stroke: color-mix(in srgb, var(--g12) 45%, var(--panel)); stroke-width: 9; }
.td-water { fill: color-mix(in srgb, var(--g1) 30%, var(--panel)); stroke: none; }
.td-land { fill: color-mix(in srgb, var(--g13) 22%, var(--panel)); stroke: var(--g13); stroke-width: 1; }
.td-yard { fill: color-mix(in srgb, var(--g13) 12%, var(--panel)); stroke: none; }
.td-roof { fill: color-mix(in srgb, var(--g19) 35%, var(--panel)); stroke: var(--ink); stroke-width: 1; }
.td-gap { fill: var(--surface); stroke: none; }
.td-door { fill: var(--surface); stroke: none; }
.td-window { fill: color-mix(in srgb, var(--g1) 25%, var(--panel)); stroke: var(--ink); stroke-width: 1; }
.td-hearth { fill: color-mix(in srgb, var(--g8) 55%, var(--panel)); stroke: var(--ink); stroke-width: 1; }
.td-stair { fill: color-mix(in srgb, var(--g-other) 20%, var(--panel)); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; }
.td-dash { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.td-thin { fill: none; stroke: var(--ink); stroke-width: 1; }
.td-ground { fill: none; stroke: var(--g11); stroke-width: 2; }
.td-leader { stroke: var(--muted); stroke-width: 1; }
.td-tip { fill: var(--muted); }
.td-label { font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }