/* A single 20px outline icon set. Text carries each control's accessible name. */
.icon {
  display:inline-block;
  inline-size:1.25rem;
  block-size:1.25rem;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-.25em;
  pointer-events:none;
}
.icon-label,.project-action {
  display:inline-flex;
  align-items:center;
  gap:.625rem;
}
.pill:has(>.icon) { gap:.875rem; }
.mini-nav .icon-label { gap:.375rem; }
.mini-nav .icon { stroke-width:2; }
.mini-button { display:inline-flex; align-items:center; gap:.5rem; }
.project-action .icon { margin-inline-start:.125rem; }
footer a { gap:.5rem; }
.filter-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
.filter-check { display:none; }
.filter-button[aria-pressed="true"] .filter-check { display:inline-block; }
.detail-summary li>.icon { color:var(--accent-fill); margin-block-start:.15em; }
.journal-story summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:1.5rem;
  list-style:none;
}
.journal-story summary::-webkit-details-marker { display:none; }
.story-heading { display:block; min-width:0; }
.story-heading .story-meta { display:block; margin:.625rem 0 0; }
.story-toggle {
  display:inline-grid;
  place-items:center;
  inline-size:2.5rem;
  block-size:2.5rem;
  border:1px solid var(--control-border);
  border-radius:50%;
  color:var(--ink);
  pointer-events:none;
}
.story-toggle .icon-close { display:none; }
.journal-story[open] .story-toggle .icon-open { display:none; }
.journal-story[open] .story-toggle .icon-close { display:inline-block; }
[dir="rtl"] .icon-directional { scale:-1 1; }
@media(hover:hover) {
  .journal-story summary:hover .story-toggle { background:var(--filter-fill); color:var(--filter-ink); }
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) {
  a>.icon,.project-action>.icon { transition:transform 150ms cubic-bezier(.2,0,0,1); }
  a:hover>.icon[data-icon="arrow-right"],.projects>a:hover .project-action>.icon[data-icon="arrow-right"] { transform:translateX(2px); }
  a:hover>.icon[data-icon="arrow-left"] { transform:translateX(-2px); }
  a:hover>.icon[data-icon="arrow-up-right"] { transform:translate(1px,-1px); }
  [dir="rtl"] a:hover>.icon-directional { transform:none; }
}
@media(forced-colors:active) {
  .story-toggle { border-color:ButtonText; }
  .journal-story summary:hover .story-toggle { color:CanvasText; background:Canvas; }
}