/* seo-architecture.html only: page tree, crawl record, link graph, link matrix */

.map { display: grid; gap: calc(var(--bl) * 4); }

/* page tree */
.tree { font-size: var(--small); }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul ul { margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--rule-2); }
.tree li { position: relative; padding: 3px 0; }
.tree ul ul > li::before { content: ""; position: absolute; left: -18px; top: 26px; width: 14px; border-top: 1px solid var(--rule-2); }
.node {
  appearance: none; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--gutter); align-items: baseline;
  padding: 8px 10px; min-height: 44px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit;
  transition: border-color 120ms cubic-bezier(.2,.7,.2,1), background-color 120ms cubic-bezier(.2,.7,.2,1);
}
.node:hover { border-color: var(--rule-2); }
.node[aria-pressed="true"] { border-color: var(--seal); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--seal); }
.node__url { font-family: var(--mono); font-size: var(--small); }
.node__type { font-family: var(--mono); font-size: var(--micro); color: var(--ink-3); white-space: nowrap; }
.node__title { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--small); }
.node--planned { border-style: dashed; color: var(--ink-3); cursor: default; }
.node--planned .node__url { color: var(--ink-3); }
.node--planned:hover { border-color: var(--rule); }
.tree .open { font-family: var(--mono); font-size: var(--micro); margin-left: 10px; }

/* crawl record */
.record { position: sticky; top: calc(var(--bl) * 2); }
.record dd { overflow-wrap: anywhere; }
.record .ok { color: var(--ink); }
.record .n { font-family: var(--mono); color: var(--ink-3); }
.record .links { display: flex; flex-wrap: wrap; gap: 4px 8px; font-family: var(--mono); font-size: var(--micro); }
.record .links a { text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.record .links a:hover { color: var(--seal); border-color: var(--seal); }

/* link graph */
.graph { border-top: 2px solid var(--rule-2); padding-top: calc(var(--bl) * 2); overflow-x: auto; }
.graph svg { width: 100%; min-width: 880px; height: auto; font-family: var(--sans); }
.g-edge { fill: none; stroke: var(--rule); stroke-width: 1; transition: stroke 120ms, stroke-width 120ms, opacity 120ms; }
.g-edge.is-hot { stroke: var(--seal); stroke-width: 1.75; }
.g-edge.is-dim { opacity: .25; }
.g-node { cursor: pointer; }
.g-node circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.g-node.is-sel circle, .g-node:hover circle { fill: var(--seal); stroke: var(--seal); }
.g-node text { fill: var(--ink); font-size: 12px; font-weight: 600; }
.g-node .g-type { fill: var(--ink-3); font-size: 10px; font-family: var(--mono); font-weight: 400; }
.g-node:focus { outline: none; }
.g-node:focus circle { stroke: var(--seal); stroke-width: 3; }
.g-level { fill: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; }
.graph-legend { display: flex; flex-wrap: wrap; gap: var(--bl) calc(var(--bl) * 3); font-family: var(--mono); font-size: var(--micro); color: var(--ink-3); margin-top: var(--bl); }
.graph-legend span::before { content: ""; display: inline-block; width: 18px; border-top: 2px solid var(--rule); margin-right: 6px; vertical-align: middle; }
.graph-legend .hot::before { border-color: var(--seal); }

/* link matrix */
.matrix-wrap { overflow-x: auto; }
.matrix { border-collapse: collapse; font-family: var(--mono); font-size: var(--micro); border-top: 2px solid var(--rule-2); min-width: 640px; }
.matrix th, .matrix td { padding: 6px 7px; border-bottom: 1px solid var(--rule); text-align: center; min-width: 2.4em; }
.matrix th { font-weight: 500; color: var(--ink-2); vertical-align: bottom; }
.matrix thead th { border-bottom: 1px solid var(--rule-2); }
.matrix th.row { text-align: left; white-space: nowrap; font-weight: 600; color: var(--ink); }
.matrix td.z { color: var(--rule); }
.matrix td.hit { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.matrix td.hub { color: var(--seal); }
.matrix th.tot, .matrix td.tot { border-left: 1px solid var(--rule-2); color: var(--ink-3); }
.matrix tfoot td { color: var(--ink-3); border-top: 1px solid var(--rule-2); border-bottom: 0; }
.matrix th.col { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; padding-top: 10px; }

/* coverage table tweaks */
.cov td.yes { font-family: var(--mono); }
.cov td.no { color: var(--ink-3); font-family: var(--mono); }

@media (min-width: 1000px) {
  .map { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}