/* Wave 1 hub pages (information architecture + card sorting guides).
   Only the furniture the guide grammar (guides.css / guides-rich.css) lacks:
   an eyebrow, a horizontal flow strip, a copyable template block, a child-page
   index and a compact definition grid. Every colour is an existing guide token
   (#643995 accent, #e3dedd border, #f2eeec / #faf8f6 panels, #56514f muted). */

.hub-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #837c74; margin: 28px 0 6px; }

/* Horizontal flow strip: inventory -> sort -> structure -> test. */
.hub-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 18px; margin: 20px 0 24px; padding: 0; list-style: none; }
.hub-flow > li { flex: 1 1 150px; position: relative; padding: 12px 14px; border: 1px solid #e3dedd; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.45; }
.hub-flow > li b { display: block; font-size: 14.5px; color: #303030; margin-bottom: 2px; }
.hub-flow > li span { color: #56514f; }
.hub-flow > li + li::before { content: "\2192"; position: absolute; left: -15px; top: 11px; color: #643995; font-weight: 700; }
@media (max-width: 640px) {
  .hub-flow { gap: 16px; }
  .hub-flow > li + li::before { content: "\2193"; left: 14px; top: -17px; }
}

/* Copyable template block: a titled bar over the existing mono sample panel. */
.hub-tpl { margin: 18px 0 26px; border: 1px solid #e3dedd; border-radius: 8px; overflow: hidden; }
.hub-tpl__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: #faf8f6; border-bottom: 1px solid #e3dedd; font-size: 13px; font-weight: 700; color: #303030; }
.hub-tpl__bar small { font-weight: 400; color: #56514f; margin-left: 6px; }
.hub-tpl .gd-tree-sample { margin: 0; border-radius: 0; max-height: 340px; overflow: auto; }
.hub-copy { font: inherit; font-size: 12.5px; font-weight: 700; color: #643995; background: #fff; border: 1px solid #643995; border-radius: 6px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.hub-copy:hover, .hub-copy:focus-visible { background: #f5f0ff; }
.hub-copy[data-done="1"] { color: #fff; background: #643995; }

/* Child-page index: whole card is the link. */
.hub-index .gd-card { position: relative; padding-right: 36px; }
.hub-index .gd-card h3 a { color: #303030; text-decoration: none; }
.hub-index .gd-card h3 a::after { content: ""; position: absolute; inset: 0; }
.hub-index .gd-card:hover { border-color: #643995; }
.hub-index .gd-card::after { content: "\2192"; position: absolute; right: 16px; top: 18px; color: #643995; font-weight: 700; }

/* Compact definition grid (input / participant / output). */
.hub-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 28px; margin: 16px 0 8px; }
.hub-defs dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #643995; margin: 12px 0 4px; }
.hub-defs dd { margin: 0; font-size: 15px; line-height: 1.55; }

/* Illustrative placement tables: the winning cell, and a split card. */
.gd-table td.hub-hi { font-weight: 700; color: #643995; }
.gd-table td.hub-split { font-style: italic; }