@layer components {

html { scroll-behavior: auto; }
.theme-control { display: flex; align-items: center; gap: .4rem; font: .62rem var(--mono); color: var(--ink-soft); }
.theme-control select { min-height: 36px; border: 1px solid var(--rule-faint); padding: .35rem; background: var(--paper); color: var(--ink); font: inherit; cursor: var(--cursor-link); }
.masthead .theme-control { justify-self: end; }
.theme-control > label { display: flex; align-items: center; gap: .4rem; }
.appearance-picker { position: relative; }
.appearance-picker > summary { display: flex; min-width: 36px; min-height: 36px; justify-content: center; align-items: center; gap: .35rem; list-style: none; padding: .3rem; cursor: var(--cursor-link); font-size: .9rem; }
.appearance-picker > summary > * { cursor: inherit; }
.appearance-picker__label { font: .62rem/1.4 var(--mono); letter-spacing: normal; text-transform: none; }
.appearance-picker > summary::-webkit-details-marker { display: none; }
.appearance-picker__panel { position: absolute; z-index: 60; top: calc(100% + .5rem); right: 0; width: min(19rem, calc(100vw - 2rem)); max-height: calc(100svh - 5rem); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 1px solid var(--rule-faint); background: var(--paper-bright); box-shadow: var(--shadow-hard); }
.appearance-picker__panel label { display: grid; gap: .5rem; }
.appearance-picker__panel select { width: 100%; }
.theme-control .appearance-picker__panel select { max-width: none; }
.appearance-picker__panel p { font: .72rem/1.5 var(--sans); text-transform: none; letter-spacing: normal; white-space: normal; }
.appearance-picker__panel [role="status"]:empty { display: none; }
@media (max-width: 700px) {
  .theme-control { gap: .25rem; }
  .theme-control > label { font-size: 0; gap: 0; }
  .theme-control select { min-height: 44px; font-size: .65rem; }
  .appearance-picker > summary { min-width: 44px; min-height: 44px; }
  .appearance-picker__label { display: none; }
  /* Anchor to the whole bar, not the icon: the shelf has Menu after it, which
     otherwise pushes a right-aligned panel off the left edge of small phones. */
  .appearance-picker { position: static; }
  .appearance-picker__panel {
    top: calc(100% + .25rem); right: .75rem;
    width: min(19rem, calc(100% - 1.5rem)); max-height: 70dvh;
  }
  .issue-line { position: relative; }
  .issue-line .appearance-picker__panel { right: 0; width: min(19rem, 100%); }
}
@media (pointer: fine) {
  .shelf, .shelf article, .shelf svg { cursor: var(--cursor-default); }
  .shelf :is(a, button:not(:disabled), select, input[type="checkbox"], label:has(input[type="checkbox"])) { cursor: var(--cursor-link); }
  .shelf :is(input:not([type="checkbox"]), textarea, [contenteditable="true"]) { cursor: var(--cursor-text); }
  .graph-canvas { cursor: var(--cursor-grab); }
  .graph-canvas[data-hover-node="true"] { cursor: var(--cursor-link); }
  .graph-canvas[data-dragging="true"] { cursor: var(--cursor-grabbing); }
  .graph-minimap { cursor: var(--cursor-target); }
  .timeline-rail { cursor: var(--cursor-vertical-resize); }
}
}