/* ABRACADABRA Labs Resource Directory
   Dark-first. All colour as custom properties on :root, redefined under [data-theme].
   No external requests: system font stack only. The logo's lettering is outlined
   to SVG paths in the markup, so it needs no font either.

   Brand colour. The accent is keyed to the logo's maroon (#591324): used as-is
   for the logo in the light theme, and lifted in the dark theme until it clears
   WCAG contrast on every ground. Previous rust accent, for reference:
   dark #c85a37 / #e07a55 / #b4462a / #2a1610, light #a63c21 / #8a3019 / #b4462a / #f6e7e0. */

: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:        #d9737f;
  --accent-hover:  #eb95a0;
  --accent-sunken: #b04a5c;
  --accent-wash:   #261216;

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

  /* The logo. Rings and lettering follow the ink; the centre node and "Labs"
     are the brand maroon, lifted for a dark ground. */
  --logo-ink:      #e8e6e1;
  --logo-line:     #6c6c73;
  --logo-core:     #a8384f;
  --logo-labs:     #cf6f7c;

  --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:        #8c2a3f;
    --accent-hover:  #6b1d2f;
    --accent-sunken: #b25065;
    --accent-wash:   #f9edef;
    --steel:         #3f5f7a;
    --sand:          #7a6538;
    --logo-ink:      #000000;
    --logo-line:     #7a7a7a;
    --logo-core:     #591324;
    --logo-labs:     #50212a;
    --focus:         #6b1d2f;
  }
}

: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:        #8c2a3f;
  --accent-hover:  #6b1d2f;
  --accent-sunken: #b25065;
  --accent-wash:   #f9edef;
  --steel:         #3f5f7a;
  --sand:          #7a6538;
  --logo-ink:      #000000;
  --logo-line:     #7a7a7a;
  --logo-core:     #591324;
  --logo-labs:     #50212a;
  --focus:         #6b1d2f;
}

: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:        #d9737f;
  --accent-hover:  #eb95a0;
  --accent-sunken: #b04a5c;
  --accent-wash:   #261216;
  --steel:         #6e8ca6;
  --sand:          #b9a27a;
  --logo-ink:      #e8e6e1;
  --logo-line:     #6c6c73;
  --logo-core:     #a8384f;
  --logo-labs:     #cf6f7c;
  --focus:         #eb95a0;
}

*, *::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: center;
  padding-top: .7rem;
  padding-bottom: .7rem;
}

/* ---- logo ----
   The mark and the wordmark are inline SVG so they can follow the theme. Each
   shape carries its light-theme colour as a presentation attribute, which is
   what shows if this stylesheet fails to load; these rules override it. */

.lg-ink  { fill: var(--logo-ink); }
.lg-labs { fill: var(--logo-labs); }
.lg-ring { stroke: var(--logo-ink); }
.lg-line { stroke: var(--logo-line); }
.lg-core { fill: var(--logo-core); }

/* Masthead lockup: mark, then the wordmark over a mono descriptor. The logo
   itself never changes colour on hover; only the descriptor does. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  text-decoration: none;
  margin-right: .25rem;
}
.brand-mark { display: block; width: 36px; height: 36px; flex: none; }
.brand-words { display: flex; flex-direction: column; gap: .32rem; }
.brand-name { display: block; width: auto; height: 14px; }
.brand-sub {
  font-family: var(--mono);
  font-size: .64rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.brand:hover .brand-sub { color: var(--accent); }

@media (max-width: 380px) {
  .brand { gap: .55rem; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { height: 12.5px; }
}

/* Windows High Contrast and other forced-colour modes: draw the logo in the
   system's link colour rather than in colours the user has asked to override. */
@media (forced-colors: active) {
  .lg-ink, .lg-labs, .lg-core { fill: LinkText; }
  .lg-ring, .lg-line { stroke: LinkText; }
  .foot-brand .lg-ink, .foot-brand .lg-labs, .foot-brand .lg-core,
  .brand-figure .lg-ink, .brand-figure .lg-labs, .brand-figure .lg-core { fill: CanvasText; }
  .foot-brand .lg-ring, .foot-brand .lg-line,
  .brand-figure .lg-ring, .brand-figure .lg-line { stroke: CanvasText; }
}

.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; }

/* Footer sign-off. Drawn by reference to the masthead's SVG (<use>), so it
   adds a few bytes rather than a second copy of the logo. */
.foot-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
}
.foot-mark { display: block; width: 26px; height: 26px; flex: none; }
.foot-name { display: block; width: auto; height: 12px; }

/* About: the full stacked logo, with the artwork's own line weights. Above
   the text on narrow screens, beside it once there is room. */
.who { display: grid; gap: 1.25rem 3rem; align-items: start; }
.who-text > :first-child { margin-top: 0; }
.brand-figure {
  margin: 0;
  padding: 1.5rem 1.75rem;
  justify-self: start;
  background: var(--ground-raised);
  border: 1px solid var(--rule);
}
.brand-logo { display: block; width: 180px; height: auto; max-width: 100%; }

@media (min-width: 60rem) {
  .who { grid-template-columns: minmax(0, var(--measure)) auto; }
  .who-text { grid-column: 1; grid-row: 1; }
  .brand-figure { grid-column: 2; grid-row: 1; }
}

.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;
}