/* Tartan Dictionary — project styles (owned here, not in the simpleness theme).
   Start of the custom theme: the responsive pattern-swatch component. */

/* A pattern swatch: one coloured block per stripe in the six-colour sequence, then its code label.
   inline-flex + flex-wrap means the blocks wrap to the available width, and the label — being the
   last flex item — sits beside a short pattern but drops onto a new line once the blocks fill the
   row. So an 82-stripe sett wraps gracefully instead of forcing a column absurdly wide. */
.pat {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  margin: 0 .6em .4em 0;
  vertical-align: top;
  text-decoration: none;
}
.pat .blk {
  display: inline-block;
  width: .8em;
  height: 1.1em;
  border: 1px solid #0003;
}
.pat .seq {
  font-family: monospace;
  font-size: .85em;
  margin-left: .3em;
  /* Let a long code wrap to as many lines as the swatch blocks took, instead of one runaway line.
     min-width:0 lets the flex item shrink below its content; overflow-wrap breaks the unbroken
     code string. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* External border: a real tartan from the corpus — Drummond of Perth (/setts/s8/…wd0d0d0-yffc800/)
   — tiles behind the centred content column (body.container is max-width 900px, margin auto), so on
   wider screens the plaid shows as a woven frame around the page, like matted artwork. The engine's
   woven render tiles seamlessly (it's a whole number of setts square). The cloth shows at full
   strength — no translucent wash — and the solid reading card carries the text over it. On narrow
   screens the column fills the width and the frame simply isn't seen. */
html {
  background-color: #edf0ea;
  background-image: url('../img/drummond-of-perth.png');
  background-repeat: repeat;
  background-size: 200px 200px;
}
/* Pin the content column to a solid light card with dark text, regardless of colour scheme. The
   theme's prefers-color-scheme:dark turns text white but our tartan frame stays light, so on a
   dark-mode phone the text was white-on-light (invisible). This makes the reading surface stable,
   and the shadow lifts it off the plaid so the frame reads as a border. */
body.container {
  background-color: #fbfbf8;
  color: #1a1a1a;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 16px #00000014;
}
/* Keep links legible on the light card even under the theme's dark-mode link colour. */
body.container a {
  color: #1a4f8b;
}

/* Breadcrumb trail (#133/#146): the way UP the model's ladder — on a variant page Home › Clan ›
   Family › Tartan › Sett, on a named-tartan page Home › super group (clan) › group (family) —
   each crumb a link, rendered from front matter by the shared crumbs partial.
   Always one line: flex with hidden overflow, and each crumb may shrink and ellipsize
   independently — except Home (the non-negotiable way back to the root) and the separators,
   which keep their full width. */
.crumbs {
  display: flex;
  align-items: baseline;
  gap: .35em;
  font-size: .85em;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 0 .6em;
}
.crumbs a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumbs a:first-child,
.crumbs .crumb-sep {
  flex-shrink: 0;
}
.crumbs .crumb-sep {
  color: #888;
}

/* Band summary: a responsive card grid (was a markdown table whose patterns column blew out to
   the width of the longest sett). Each card's sample swatches flex-wrap within the card. Shared by
   the /bands/ and /stripes/ indexes — both emit `band-summary` cards with a `.count` link over a
   `.samples` swatch row. (Renamed from `stripe-summary` when the stripe tier became the band tier.) */
.band-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}
.band-summary li {
  border: 1px solid #0002;
  border-radius: .4rem;
  padding: .6rem .8rem;
  min-width: 0; /* let the card shrink so swatches wrap instead of overflowing */
}
.band-summary .count {
  display: block;
  margin-bottom: .4rem;
  text-decoration: none;
}
.band-summary .samples {
  display: flex;
  flex-wrap: wrap;
}

/* Families A–Z summary: the same card grid, one card per letter — a `.letter` link (the letter, its
   count) over a `.names` row of the first few families, each linked, with a trailing "…" to the
   letter page. Narrower cards than the band grid since each holds only a few names. */
.family-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
.family-summary li {
  border: 1px solid #0002;
  border-radius: .4rem;
  padding: .6rem .8rem;
  min-width: 0;
}
.family-summary .letter {
  display: block;
  margin-bottom: .4rem;
  text-decoration: none;
}
.family-summary .names {
  font-size: .9rem;
  line-height: 1.5;
}

/* Pagination nav for the long per-stripe-count pages. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  align-items: baseline;
  margin: 1rem 0;
  font-size: .95em;
}
.pager strong {
  padding: 0 .2em;
}

/* Opening "hero": the legal-definition quote on the left, a decorative tartan swatch on the right.
   Flex row on wide screens, stacked on a phone. The swatch is capped so it always fits the column;
   the quote keeps its tinted blockquote styling as a flex item. Source order is quote-then-image,
   so the image sits on the right. */
.quote-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  margin: 1em 0;
}
.quote-hero > blockquote {
  flex: 1 1 58%;
  min-width: 16rem;
  margin: 0;
}
/* The image may or may not be wrapped in a <p> depending on the markdown render — cover both. */
.quote-hero > img,
.quote-hero > p,
.quote-hero > figure {
  flex: 0 1 34%;
  min-width: 9rem;
  margin: 0;
}
.quote-hero figure { margin: 0; }
.quote-hero figcaption {
  font-size: .8rem;
  line-height: 1.3;
  margin-top: .35rem;
  opacity: .85;
}
.quote-hero img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #0002;
  border-radius: .2rem;
}
@media screen and (max-width: 600px) {
  .quote-hero { flex-direction: column; }
  .quote-hero > blockquote,
  .quote-hero > img,
  .quote-hero > p,
  .quote-hero > figure { flex-basis: auto; width: 100%; }
}

/* The tartan story as a graphical coloured table: a column of era colour-chips down the left
   (natural fleece tones giving way to dyed colour, just as tartan's own palette did), each
   labelled to the right. Evenly spaced — deliberately NOT to scale, so deep prehistory and the
   last three centuries get equal room — and reflowing, so it reads the same on a phone as on a
   wide screen. Each <li> sets its chip colour with an inline `--c`. */
.timeline {
  list-style: none;
  margin: 1.4em 0;
  padding: 0;
  border: 1px solid #0002;
  border-radius: .4rem;
  overflow: hidden;                 /* clip the colour chips to the rounded corners */
}
.timeline > li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: stretch;
}
.timeline > li + li {
  border-top: 1px solid #0000001a;
}
.timeline .t-swatch {
  background: var(--c, #cdd2dd);
}
.timeline .t-body {
  padding: .5em .8em;
  line-height: 1.4;
}
.timeline .t-when {
  display: block;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: #5a5a5a;
}
.timeline .t-what {
  font-weight: 600;
}

/* ------- name search (nav) -------
   A small client-side search over /search/index.v1.json (clans, families, septs, types),
   driven by js/search.js. The results dropdown hangs off the input, so the nav item anchors it. */
.nav-search {
  position: relative;
  flex: 0 1 10rem;
}
.nav-search input {
  width: 100%;
  font: inherit;
  font-size: .85em;
  padding: .2em .55em;
  border: 1px solid #0003;
  border-radius: 1em;
  background: #ffffff;
  color: inherit;
}
.nav-search input:focus {
  outline: none;
  border-color: #1a4f8b88;
  box-shadow: 0 0 0 2px #1a4f8b22;
}
.search-results {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #0002;
  border-radius: .4rem;
  box-shadow: 0 4px 16px #0002;
  max-height: 22rem;
  overflow-y: auto;
}
.search-results li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8em;
  padding: .3em .8em;
  margin: 0;
  font-size: 1em;
  text-decoration: none;
}
.search-results li:hover,
.search-results li.selected {
  background: #1a4f8b14;
}
.search-results .kind {
  font-size: .75em;
  color: #5a5a5a;
  white-space: nowrap;
}

/* ------- nav dropdown (e.g. "Name") -------
   A hover/focus menu hanging off a top-level nav label. Matches .nav-menu a sizing
   and reuses the name-search card styling for the panel. */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-label {
  font-size: 1.2em;
  padding: 1px;
  margin: 0;
  cursor: pointer;
  /* The label is a <span>, so it misses `body.container a`'s link colour; mirror it
     here so the dropdown tops (Clan/Tartans/Info) match the plain links (TTD/Blog). */
  color: #1a4f8b;
}
.nav-dropdown-caret {
  font-size: .7em;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 9rem;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #0002;
  border-radius: .4rem;
  box-shadow: 0 4px 16px #0002;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
/* Keyboard focus and an explicit tap (.open, set by nav.js) always reveal the menu. */
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}
/* Pointer hover reveals it only where hover actually exists — not on touch, where a
   stuck :hover would fight the tap-to-toggle. */
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}
/* Right-hand dropdowns (e.g. "Info") open flush to the right so they don't overflow. */
.nav-dropdown--right .nav-dropdown-menu {
  left: auto;
  right: 0;
}
/* Keep the right-hand menu (Info + social icons) flush right, even when the narrow
   900px nav wraps it onto a second row. */
.nav-right {
  display: flex;
  align-items: center;
  gap: .9rem;
  white-space: nowrap;
}
/* Social / RSS glyphs: smaller than the word links, tighter spacing. */
.nav-right a .fab,
.nav-right a .fas {
  font-size: .9em;
}
.nav-right > a {
  font-size: 1em;
  margin: 0;
  padding: 1px;
}
.nav-dropdown-menu li a {
  display: block;
  padding: .3em .9em;
  margin: 0;
  font-size: 1em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown-menu li a:hover {
  background: #1a4f8b14;
}

/* Third level: a dropdown child that itself has children (e.g. Colour → its palettes)
   opens a flyout submenu to the side, so you can navigate straight to one. */
.nav-subdropdown {
  position: relative;
}
.nav-subdropdown > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.nav-submenu {
  position: absolute;
  top: -.25rem;            /* line the flyout's top up with the parent item */
  left: 100%;              /* open to the right of the parent menu */
  z-index: 101;
  min-width: 10rem;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #0002;
  border-radius: .4rem;
  box-shadow: 0 4px 16px #0002;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.nav-subdropdown:focus-within > .nav-submenu {
  opacity: 1;
  visibility: visible;
}
@media (hover: hover) {
  .nav-subdropdown:hover > .nav-submenu {
    opacity: 1;
    visibility: visible;
  }
}
/* In the right-hand (Info) dropdown the parent menu is flush right, so the flyout opens
   to the LEFT to stay on-screen. */
.nav-dropdown--right .nav-submenu {
  left: auto;
  right: 100%;
}

/* ------- mobile hamburger -------
   Hidden on desktop; the @media block below shows it and collapses the nav into a
   stacked panel that drops below the brand row. nav.js toggles `.nav-open` on <nav>. */
.nav-toggle {
  display: none;
  margin-left: auto;          /* sit at the right end of the brand row */
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid #0003;
  border-radius: .4rem;
  background: #fff;
  cursor: pointer;
}
/* Three bars: the element is the middle bar, ::before/::after are top and bottom. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: #1a4f8b;
  border-radius: 2px;
  transition: transform .15s ease, opacity .15s ease, top .15s ease;
}
.nav-toggle-bars {
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }
/* Open → the bars fold into an X. */
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

@media screen and (max-width: 760px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* The collapse panel: hidden until toggled, then a full-width stacked column. */
  .nav-collapse {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding-bottom: .5rem;
  }
  .navigation.nav-open .nav-collapse { display: flex; }

  .nav-search { flex: 1 1 auto; }
  .nav-search input { width: 100%; }

  .nav-menu,
  .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    width: 100%;
  }
  /* Dropdowns expand inline rather than floating, and open on tap (nav.js sets .open). */
  .nav-dropdown { display: block; width: 100%; }
  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    padding: .1rem 0 .2rem 1rem;
    min-width: 0;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown--right .nav-dropdown-menu { right: auto; }
  /* Third level stacks inline and indented when its parent dropdown is open — no flyout. */
  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: .1rem 0 .1rem 1rem;
    min-width: 0;
  }
  .nav-dropdown--right .nav-submenu { right: auto; left: auto; }
}

/* ------- holding / "coming soon" pages -------
   Used by layout: holding for nav entries whose real section isn't built yet. A panel of
   the committed Drummond of Perth cloth (self-contained — no generated /bg asset needed)
   carries a centred card so "Coming soon" always sits on tartan, at any screen width. */
.holding {
  background-image: url('../img/drummond-of-perth.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  border-radius: .5rem;
  margin: 1.5rem 0;
  padding: clamp(3rem, 12vw, 7rem) 1rem;
  text-align: center;
}
.holding-card {
  display: inline-block;
  max-width: 90%;
  background: #fbfbf8;
  border-radius: .5rem;
  padding: 1.6rem 2.6rem;
  box-shadow: 0 2px 18px #0004;
}
.holding-title {
  margin: 0 0 .15em;
}
.holding-soon {
  margin: .15em 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #1a4f8b;
}
.holding-sub {
  margin: .45em 0 0;
  color: #5a5a5a;
}

/* ------- tartan thumbnails (clan/family/type tier) -------
   a.tartan is one linked sett image with its caption; .tartan-grid wraps a set of them. */
a.tartan {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
}
a.tartan img {
  display: block;
  margin: 0 auto .3em;
  border: 1px solid #0002;
  border-radius: .2rem;
}
.tartan-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}
.tartan-grid li {
  max-width: 11rem;
}

/* The /clan/ index: a card per clan — major tartan, name, territory, families. */
.clan-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
}
.clan-grid li {
  border: 1px solid #0002;
  border-radius: .4rem;
  padding: .8rem;
  text-align: center;
  min-width: 0;
}
.clan-grid .clan-territory {
  font-size: .8rem;
  color: #5a5a5a;
  margin-top: .2rem;
}
.clan-grid .clan-families {
  font-size: .85rem;
  margin-top: .4rem;
}

/* ------- per-page tartan backgrounds -------
   Each nav landing page names its own cloth in `background:` front matter (a seamless tile from
   tartan-weaver's `task site:assets`); baseof.html carries it in --tartan-bg. It replaces the
   site-wide Drummond of Perth frame beside the column, at full strength — the page's cloth shown
   as itself, no translucent wash — while the reading card stays solid so the text never sits on
   pattern. Tiles keep their natural pixel size: each was woven to a comparable scale, and scaling
   would blur the threads. */
html.tartan-bg {
  background-image: var(--tartan-bg);
  background-size: auto;
}

/* ------- home-page hero (Forgejo #44) -------
   The full-width journey map is the masthead: Natural Earth land tracing tartan's road west to
   Scotland, with the "Tartan Dictionary" title carried in the map's own top-right panel. The page
   <h1> stays in the DOM but is visually hidden — the map carries the title itself. */
.homepage-header .journey-map {
  display: block;
  width: 100%;
  height: auto;
  margin: .25rem auto 1.25rem;
}
.homepage-header .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ------- weaver build stamp -------
   The in-browser weaver (and logo matcher) report their link-time build (commit + UTC date) via
   buildInfo(); weaver.js / logoweaver.js append it as #weaver-build at the foot of the tool, so a
   woven tartan always says which weaver wove it. Muted and small — it sits below the tool. */
#weaver-build {
  margin-top: 1.5rem;
  font-size: .75rem;
  color: #5a5a5a;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------- /tartans/ index ------- */
.tartan-index {
  columns: 2 18rem;
  column-gap: 2rem;
  list-style: none;
  padding-left: 0;
}
.tartan-index li {
  break-inside: avoid;
  margin: .15rem 0;
}
.tartan-index small {
  color: #777;
}

/* ------- sett page: collapsed attestations -------
   The source records a cloth was collapsed from (only present when >1) sit in a closed <details> so
   a singleton sett stays clean and the multi-record structure reveals on demand. */
details.attestations {
  margin: 1rem 0;
}
details.attestations summary {
  cursor: pointer;
  font-weight: 600;
}
details.attestations ul {
  margin: .5rem 0 0 1.2rem;
}

/* ------- sett page: dataset provenance (#74) -------
   The dataset-level provenance the record inherits from its source manifest — source, data date,
   licence, and the capture chain (the hands the data passed through, oldest first, each capture
   under its own licence). Secondary matter: a closed <details> like the attestations. */
details.dataset {
  margin: 1rem 0;
}
details.dataset summary {
  cursor: pointer;
  font-weight: 600;
}
details.dataset summary small,
details.dataset .chain-lead small {
  color: #777;
  font-weight: 400;
}
dl.dataset-prov {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15rem .8rem;
  margin: .5rem 0 0;
  font-size: .9rem;
}
dl.dataset-prov dt {
  color: #777;
}
dl.dataset-prov dd {
  margin: 0;
  overflow-wrap: anywhere;
}
details.dataset .chain-lead {
  margin: .6rem 0 0;
  font-size: .9rem;
  font-weight: 600;
}
ol.capture-chain {
  margin: .3rem 0 0 1.4rem;
  font-size: .9rem;
}
ol.capture-chain small {
  color: #777;
}

/* ------- pattern page (/stripes/<SEQ>/) -------
   The heading colour-block strip (the sequence as big swatches) and the idealised woven sample
   figure. See internal/dictionary writePattern + patternBlocks (tartan-weaver issue #53). */
.pat-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  margin: .2rem 0 1rem;
}
.pat-hero-block {
  display: inline-block;
  width: 1.6rem;
  height: 2.4rem;
  border: 1px solid #0003;
  border-radius: 2px;
}
.pat-hero-seq {
  font-family: monospace;
  font-size: 1.3rem;
  margin-left: .5rem;
  color: #333;
}
.pat-woven {
  margin: 1rem 0;
  text-align: center;
}
.pat-woven img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.pat-woven figcaption {
  font-size: .85rem;
  color: #666;
  font-style: italic;
  margin-top: .35rem;
}

/* Logan 1831 table-scan, in the Provenance section: floated beside the eighths text so the reader
   can compare Logan's own print with the transcription and the later variants attributed to him. */
.logan-scan {
  float: right;
  width: 16rem;
  max-width: 45%;
  margin: 0 0 .8rem 1.2rem;
}
.logan-scan img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fff;
}
.logan-scan figcaption {
  font-size: .78rem;
  color: #666;
  font-style: italic;
  margin-top: .35rem;
}
@media screen and (max-width: 600px) {
  .logan-scan {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0;
  }
}

/* ------- nearest-tartans table -------
   Rendered once in Go by internal/nntable.Table and shared by the static /setts/ page and the
   in-browser TTD, so the two never drift (tartan-weaver issue #54). A three-column grid —
   ΔTartan | Tartan | Sett — led by the page's own cloth (.nn-base), so every neighbour's swatch
   lines up in one column under it for comparison. Each swatch is the cloth's sett.png stretched
   to a band-count width (set inline by Go), capped at the column; max-width keeps it inside.
   On a narrow screen each swatch drops onto its own full-width row under the ΔT + name. */
.nn-table {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  column-gap: .9rem;
  row-gap: .4rem;
  align-items: center;
  margin: .6rem 0 1rem;
}
.nn-table > div {
  min-width: 0;
}
.nn-h {
  font-weight: 600;
  border-bottom: 2px solid #d8d2c4;
  padding-bottom: .2rem;
}
.nn-dt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #555;
}
.nn-threads {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #555;
}
.nn-name {
  line-height: 1.3;
}
.nn-out {
  text-decoration: none;
  color: #8a8a8a;
}
.nn-swatch {
  display: block;
  height: auto;
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 2px;
}
/* the page's own cloth leads the table, tinted so its swatch heads the column */
.nn-base {
  background: #f7f3e9;
}
.nn-name.nn-base {
  font-weight: 600;
}
/* de-emphasis by ΔTartan distance band (nntable.farClass): the close neighbours stay full strength,
   the further ones the wide cutoff admits fade back so they don't compete. Only the ΔT + name text
   carries these classes — the swatch never fades, so its colours stay true. */
.nn-far {
  opacity: .68;
}
.nn-far2 {
  opacity: .42;
}
@media screen and (max-width: 600px) {
  .nn-table {
    grid-template-columns: auto auto 1fr;
    column-gap: .7rem;
  }
  .nn-h {
    display: none;
  }
  .nn-sw {
    grid-column: 1 / -1;
  }
  .nn-swatch {
    width: 100% !important;
  }
}

/* One swatch treatment across the editor (#136): the TTD's own cloth images — the woven sample and
   its sett strip — read exactly like the nearest-variants rows' strips (square, thin #ddd border,
   flush left), not the rounded, centred picture styling `.post-text img` gives ordinary post
   images. The same override keeps the nn strips themselves square inside .post-text, where the
   generic img rule otherwise outweighs .nn-swatch. */
.post-text img#weaver-tartan,
.post-text img#weaver-sett,
.post-text img.nn-swatch {
  border: 1px solid #ddd;
  border-radius: 2px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* /stripes/<seq>/ — a divider row between clusters of near-identical tartans (issue #11), so the
   genuinely distinct designs read as separate groups down the list. */
.sett-table tr.cluster-sep td {
  border-top: 1px solid #0000001a;
  padding: 0;
  height: 1.4rem;
}

/* /colour/<supplier>/ — the shade row a variant page's Ref column deep-linked to (issue #93):
   light up the landed code so the eye finds it in the long table. */
span[id^="s-"]:target code {
  background: #fff3bf;
  outline: 2px solid #f0c000;
  border-radius: 3px;
}

/* Colour-dictionary index (/colour/named/): a wrapping grid of colour cards — a swatch over its
   name and code. Ordered by the light-gradient rule in the generator. Replaces the old bare inline
   links, which wrapped raggedly with no alignment. */
.cdict-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 0.9rem 0 1.4rem;
}
.cdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-decoration: none;
  color: inherit;
}
.cdict:hover {
  color: inherit;
}
.cdict-sw {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid #0003;
  border-radius: 4px;
  transition: outline 0.1s;
}
.cdict:hover .cdict-sw,
.cdict:focus-visible .cdict-sw {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.cdict-name {
  display: block;
  margin-top: 0.3rem;
  text-align: center;
}
.cdict-code {
  display: block;
  font-family: monospace;
  opacity: 0.55;
}