/* Abracadabra Labs Resource Directory
   Dark-first. All colour as custom properties on :root, redefined under [data-theme].
   No external requests: system font stack only. */

:root {
  color-scheme: dark;

  --ground:        #0b0b0c;
  --ground-raised: #0f0f11;
  --ground-sunken: #08080a;
  --rule:          #26262a;
  --rule-strong:   #606069;

  --ink:           #e8e6e1;
  --ink-muted:     #a6a39c;
  --ink-faint:     #84817a;

  --accent:        #c85a37;
  --accent-hover:  #e07a55;
  --accent-sunken: #b4462a;
  --accent-wash:   #2a1610;

  --steel:         #6e8ca6;
  --sand:          #b9a27a;

  --focus:         var(--accent-hover);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --measure: 72ch;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground:        #fbfaf8;
    --ground-raised: #ffffff;
    --ground-sunken: #f1efea;
    --rule:          #ddd9d2;
    --rule-strong:   #8b8478;
    --ink:           #1a1917;
    --ink-muted:     #56534e;
    --ink-faint:     #6f6b63;
    --accent:        #a63c21;
    --accent-hover:  #8a3019;
    --accent-sunken: #b4462a;
    --accent-wash:   #f6e7e0;
    --steel:         #3f5f7a;
    --sand:          #7a6538;
    --focus:         #8a3019;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ground:        #fbfaf8;
  --ground-raised: #ffffff;
  --ground-sunken: #f1efea;
  --rule:          #ddd9d2;
  --rule-strong:   #8b8478;
  --ink:           #1a1917;
  --ink-muted:     #56534e;
  --ink-faint:     #6f6b63;
  --accent:        #a63c21;
  --accent-hover:  #8a3019;
  --accent-sunken: #b4462a;
  --accent-wash:   #f6e7e0;
  --steel:         #3f5f7a;
  --sand:          #7a6538;
  --focus:         #8a3019;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:        #0b0b0c;
  --ground-raised: #0f0f11;
  --ground-sunken: #08080a;
  --rule:          #26262a;
  --rule-strong:   #606069;
  --ink:           #e8e6e1;
  --ink-muted:     #a6a39c;
  --ink-faint:     #84817a;
  --accent:        #c85a37;
  --accent-hover:  #e07a55;
  --accent-wash:   #2a1610;
  --steel:         #6e8ca6;
  --sand:          #b9a27a;
  --focus:         #e07a55;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

@media (max-width: 480px) { body { font-size: 16px; } }

.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.prose { max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ground-raised);
  color: var(--ink);
  padding: .6rem 1rem;
  border: 1px solid var(--rule-strong);
  z-index: 100;
}
.skip:focus { left: var(--gutter); top: .5rem; }

/* ---- header ---- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--ground-sunken);
}
.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: baseline;
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.wordmark {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--accent); }
.wordmark b { font-weight: 600; }
.wordmark span { color: var(--ink-faint); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
  flex: 1 1 auto;
}
.nav a { color: var(--ink-muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

.theme-toggle {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: .3rem .6rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.no-js .theme-toggle { display: none; }

/* ---- page furniture ---- */

main { padding: 2.5rem 0 4rem; }

h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}
h2 {
  font-size: 1.22rem;
  margin: 2.75rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
  letter-spacing: -.005em;
}
h3 {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.8rem 0 .7rem;
  font-weight: 500;
}
h4 { font-size: 1rem; margin: 1.4rem 0 .4rem; }

/* Subtopic and pairing group headings. These are h3 because they are children of
   the "Everything in this topic" h2, but they are visually major and should not
   inherit the small uppercase mono h3 used for minor labels. */
[data-group] > h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink);
  margin: 2.5rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}

.lede { color: var(--ink-muted); font-size: 1.04rem; margin: 0 0 1.5rem; }

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .5rem;
}

/* ---- topic cards ---- */

.topic-cards {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.topic-card { background: var(--ground-raised); padding: 1.3rem 1.2rem; }
.topic-card h2,
.topic-card h3 {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink);
  border: 0;
  margin: 0 0 .45rem;
  padding: 0;
}
.topic-card h2 a,
.topic-card h3 a { text-decoration: none; color: var(--ink); }
.topic-card h2 a:hover,
.topic-card h3 a:hover { color: var(--accent); }
.topic-card p { margin: 0 0 .8rem; color: var(--ink-muted); font-size: .94rem; }
.topic-card .count {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.topic-card[data-topic="autonomous-attackers"] { border-top: 2px solid var(--accent); }
.topic-card[data-topic="cyber-deception"] { border-top: 2px solid var(--steel); }
.topic-card[data-topic="quantum-cognition"] { border-top: 2px solid var(--sand); }

/* ---- entries ---- */

.entries { list-style: none; margin: 0; padding: 0; }

.entry {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}
.entry:first-child { border-top: 1px solid var(--rule); }

.entry-title {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
}
.entry-title a { text-decoration: none; }
.entry-title a:hover { text-decoration: underline; }

.ext {
  font-family: var(--mono);
  font-size: .72em;
  color: var(--ink-faint);
  margin-left: .35em;
  vertical-align: .08em;
}
a:hover .ext { color: var(--accent-hover); }

.entry-meta {
  font-family: var(--mono);
  font-size: .745rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
  margin: 0 0 .4rem;
  line-height: 1.5;
}
.entry-meta .sep { color: var(--rule-strong); padding: 0 .35em; }
.entry-meta .authors { color: var(--ink-muted); }

.entry-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: .95rem;
  max-width: var(--measure);
}

.entry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
}

.chip {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: lowercase;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: .1rem .4rem;
}
.chip[data-flag="seminal"] { color: var(--sand); border-color: var(--sand); }
.chip[data-flag="contested"], .chip[data-flag="vendor-authored"] { color: var(--accent); border-color: var(--accent-sunken); }

.altlink { font-size: .78rem; color: var(--ink-muted); }
.altlink a { color: var(--ink-muted); }
.altlink a:hover { color: var(--accent); }

.cite-btn {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: lowercase;
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: .1rem .4rem;
  cursor: pointer;
}
.cite-btn:hover { color: var(--accent); border-color: var(--accent); }
.no-js .cite-btn { display: none; }

.starred { border-left: 2px solid var(--accent); padding-left: .85rem; }

/* ---- search + filters ---- */

.controls {
  background: var(--ground-raised);
  border: 1px solid var(--rule);
  padding: 1rem;
  margin: 1.5rem 0 2rem;
}
.no-js [data-filters] { display: none; }

.field { margin-bottom: .9rem; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}

input[type="search"], input[type="number"], select {
  font-family: inherit;
  font-size: .95rem;
  background: var(--ground-sunken);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: .5rem .6rem;
  width: 100%;
  max-width: 100%;
}
input[type="number"] { width: 7rem; }

.years { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.years select { width: auto; min-width: 11rem; }

/* ---- facets ----
   Checkbox groups in disclosures, replacing the multi-selects. A 46-option
   <select multiple> four rows tall, needing ctrl-click, was unusable for the
   one job these pages have. */

.facet-grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  /* Without this, a closed facet stretches to the height of the tallest open
     one in its row and renders as a large empty box. */
  align-items: start;
  margin-bottom: .9rem;
}

.facet {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
}
.facet[open] { background: var(--ground-sunken); }
.facet.is-active { border-color: var(--accent-sunken); }

.facet > summary {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: .5rem .6rem;
  cursor: pointer;
  list-style-position: inside;
}
.facet > summary:hover { color: var(--accent); }
.facet.is-active > summary { color: var(--ink); }

.facet-count {
  font-family: var(--mono);
  font-size: .68rem;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid var(--accent-sunken);
  border-radius: 999px;
  padding: 0 .4em;
  margin-left: .3em;
}

.facet fieldset {
  border: 0;
  margin: 0;
  padding: 0 .6rem .6rem;
  max-height: 15rem;
  overflow-y: auto;
}

.check {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--sans);
  font-size: .88rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  padding: .2rem 0;
  cursor: pointer;
}
.check:hover { color: var(--accent); }
.check input {
  width: auto;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}
.check-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-faint);
}

.scope-note { margin-top: .8rem; }

/* ---- jump nav ---- */

.jump { margin: 1.25rem 0; }
.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .76rem;
}

/* ---- permalinks ---- */

.permalink {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 0 .3rem;
}
.permalink:hover, .permalink:focus-visible { color: var(--accent); }

.group-count {
  font-family: var(--mono);
  font-size: .78em;
  color: var(--ink-faint);
  letter-spacing: normal;
}

/* Arriving at /all/#entry-id: make the row findable among 136 others. */
.is-target {
  background: var(--accent-wash);
  outline: 2px solid var(--accent-sunken);
  outline-offset: 1px;
  scroll-margin-top: 2rem;
}
.entry.is-target { outline-offset: 4px; }

.controls-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rule);
}

.btn {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: .4rem .75rem;
  cursor: pointer;
}
.btn:hover { color: var(--accent); border-color: var(--accent); }

.result-count {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-muted);
}

[hidden] { display: none !important; }

/* ---- table (/all/) ---- */

.table-wrap { margin: 1.5rem 0; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
caption { text-align: left; color: var(--ink-faint); font-size: .85rem; margin-bottom: .6rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--rule-strong);
}
td.mono { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); white-space: nowrap; }
tbody tr:hover { background: var(--ground-raised); }

/* Column sizing for /all/. Without this the title and annotation column is
   squeezed by the author column and the actions column overflows the table. */
table { table-layout: fixed; }
thead th:nth-child(1) { width: 38%; }
thead th:nth-child(2) { width: 14%; }
thead th:nth-child(3) { width: 6%; }
thead th:nth-child(4) { width: 10%; }
thead th:nth-child(5) { width: 8%; }
thead th:nth-child(6) { width: 14%; }
thead th:nth-child(7) { width: 10%; }
td.mono { overflow-wrap: break-word; white-space: normal; }
td.mono[data-label="Year"] { white-space: nowrap; }
tbody td:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

@media (max-width: 720px) {
  .table-wrap table, .table-wrap thead, .table-wrap tbody,
  .table-wrap th, .table-wrap td, .table-wrap tr { display: block; }
  .table-wrap thead { position: absolute; left: -9999px; }
  .table-wrap tr {
    border-bottom: 1px solid var(--rule);
    padding: .85rem 0;
  }
  .table-wrap td { border: 0; padding: .1rem 0; }
  /* Beats `tbody td:last-child { display: flex }` above on specificity grounds,
     so the actions cell stacks with the rest of the row on narrow screens. */
  .table-wrap tbody td:last-child { display: flex; gap: .5rem; padding-top: .4rem; }
  .table-wrap table { table-layout: auto; }
  .table-wrap td.mono { white-space: normal; }
  .table-wrap td[data-label]::before {
    content: attr(data-label) " ";
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    margin-right: .4em;
  }
}

/* ---- paths ---- */

.path { margin: 0 0 3rem; }
.path-steps { list-style: none; counter-reset: step; margin: 1rem 0 0; padding: 0; }
.path-step {
  counter-increment: step;
  position: relative;
  padding: .9rem 0 .9rem 2.6rem;
  border-bottom: 1px solid var(--rule);
}
.path-step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .95rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
  border: 1px solid var(--accent-sunken);
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
}
.path-why {
  margin: .35rem 0 0;
  color: var(--ink-muted);
  font-size: .92rem;
  font-style: italic;
  max-width: var(--measure);
}

/* ---- misc ---- */

.note {
  border-left: 2px solid var(--rule-strong);
  padding: .3rem 0 .3rem 1rem;
  margin: 1.5rem 0;
  color: var(--ink-muted);
  font-size: .94rem;
  max-width: var(--measure);
}
.note strong { color: var(--ink); }

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-faint);
  margin: 1.2rem 0 0;
}
.stat-row b { color: var(--ink); font-weight: 600; display: block; font-size: 1.3rem; }

.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list li { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.feed-url {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-muted);
  word-break: break-all;
  display: block;
  margin-top: .2rem;
}

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--ground-sunken);
  padding: 1.75rem 0;
  color: var(--ink-faint);
  font-size: .85rem;
}
.site-foot p { margin: 0 0 .5rem; max-width: var(--measure); }
.site-foot a { color: var(--ink-muted); }
.site-foot a:hover { color: var(--accent); }
.site-foot .mono { font-family: var(--mono); font-size: .76rem; }

.err h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}