/* Rules every page needs, whatever chrome it uses. Loaded before any layout. */

/* The design system's hairlines read as almost nothing on a bright screen, so every edge is darkened once here. */
:root {
  --border: oklch(0.885 0 0);
  --input: oklch(0.865 0 0);
  --ring-card: color-mix(in oklch, var(--foreground) 16%, transparent);

  /* Studio Admin sizes its rail for longer labels and sub items than ours carries. */
  --sidebar-width: 208px;
}

.dark {
  --border: oklch(1 0 0 / 16%);
  --input: oklch(1 0 0 / 22%);
}

/* A fingertip needs a bigger target than a cursor, so every control grows once here on touch screens. */
@media (pointer: coarse) {
  :root {
    --control-h-sm: 36px;
    --control-h: 40px;
    --control-h-lg: 44px;
  }
}

/* shell.js puts the frame around a page that has one, so nothing is drawn until it has. */
body[data-page]:not([data-shell]) {
  visibility: hidden;
}

/* The sprite defines symbols only, so it is collapsed rather than laid out. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Read by screen readers but never drawn. */
.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprite icons carry no size attributes, so they default to 16px everywhere. */
svg:has(use) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* An element a script has hidden stays hidden, whatever display its own rules ask for. */
[hidden] {
  display: none !important;
}