/* Public component vocabulary. Requires sapphire.tokens.css and shrifty.css. */
:where([data-theme="sapphire"], [data-hr-theme="sapphire"]) {
  color: var(--hr-color-ink);
  font-family: var(--hr-font-body);
  font-size: var(--hr-font-size-body);
  line-height: var(--hr-font-leading-body);
}
.hr-surface { background: var(--hr-surface-raised); border: 1px solid var(--hr-border-subtle); border-radius: var(--hr-radius-card); box-shadow: var(--hr-shadow-surface); }
.hr-glass { color: var(--hr-color-inverse); background: var(--hr-glass-opaque); border: 1px solid var(--hr-border-glass); border-radius: var(--hr-radius-card); box-shadow: var(--hr-shadow-glass); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hr-glass { background: var(--hr-background-glass), var(--hr-glass-fill); -webkit-backdrop-filter: blur(var(--hr-glass-blur)) saturate(var(--hr-glass-saturation)); backdrop-filter: blur(var(--hr-glass-blur)) saturate(var(--hr-glass-saturation)); }
}
/* Bar material (§12): translucent bar over light content with a bright top edge. Atelier maps it to
   its opaque paper; the tokens turn it solid under prefers-reduced-transparency and give it a strong
   edge under prefers-contrast: more. */
.hr-material { background: var(--hr-material-bar-opaque); box-shadow: inset 0 1px 0 var(--hr-material-edge); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hr-material { background: var(--hr-material-bar); -webkit-backdrop-filter: var(--hr-material-blur); backdrop-filter: var(--hr-material-blur); }
}
.hr-button, .hr-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--hr-space-2); min-height: var(--hr-control-height); padding: var(--hr-space-3) var(--hr-space-5); border: 1px solid transparent; border-radius: var(--hr-radius-control); background: var(--hr-color-lime); color: var(--hr-color-on-lime); font: var(--hr-font-weight-label) var(--hr-font-size-body)/1.25 var(--hr-font-body); text-decoration: none; cursor: pointer; box-shadow: var(--hr-shadow-primary); -webkit-tap-highlight-color: transparent; transition: background var(--hr-motion-fast), box-shadow var(--hr-motion-fast), opacity var(--hr-motion-fast), scale var(--hr-motion-duration-release) var(--hr-motion-easing-settle); }
.hr-button--secondary { color: var(--hr-color-sapphire-hover); background: var(--hr-surface-selected); border-color: var(--hr-border-control); box-shadow: none; }
.hr-button--danger { color: var(--hr-color-danger); background: var(--hr-surface-danger); box-shadow: none; }
.hr-icon-button { min-width: var(--hr-control-height); padding: var(--hr-space-2); background: transparent; box-shadow: none; color: inherit; }
/* Hover tints only where a pointer really hovers: on touch they would arrive at touch-end and stick. */
@media (hover: hover) {
  .hr-button:hover { background: var(--hr-color-lime-hover); }
  .hr-button--secondary:hover { background: var(--hr-surface-subtle); }
}
.hr-button:disabled, .hr-button[aria-disabled="true"], .hr-icon-button:disabled { opacity: var(--hr-opacity-disabled); cursor: not-allowed; }
/* Press (§1): instant on pointer-down, critically damped release. `scale` composes with transforms. */
.hr-button:active:not(:disabled):not([aria-disabled="true"]), .hr-icon-button:active:not(:disabled):not([aria-disabled="true"]),
.hr-pressable:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--hr-press-scale); transition-duration: var(--hr-motion-duration-press); transition-timing-function: ease-out; }
/* Opt-in press for any control, card or full-width row outside the button vocabulary. */
.hr-pressable, .hr-pressable-card, .hr-pressable-row { -webkit-tap-highlight-color: transparent; transition: background-color var(--hr-motion-fast), border-color var(--hr-motion-fast), color var(--hr-motion-fast), opacity var(--hr-motion-fast), scale var(--hr-motion-duration-release) var(--hr-motion-easing-settle); }
.hr-pressable-card:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--hr-press-scale-card); transition-duration: var(--hr-motion-duration-press); transition-timing-function: ease-out; }
.hr-pressable-row:active:not(:disabled):not([aria-disabled="true"]):not([aria-current]) { background-color: color-mix(in srgb, currentColor 14%, transparent); transition-duration: var(--hr-motion-duration-press); transition-timing-function: ease-out; }
.hr-button:focus-visible, .hr-icon-button:focus-visible, .hr-field:focus-visible { outline: 3px solid var(--hr-color-focus); outline-offset: 3px; }
.hr-glass :focus-visible { outline-color: var(--hr-color-focus-inverse); }
.hr-field { min-width: 0; min-height: var(--hr-control-height); border: 1px solid var(--hr-border-control); border-radius: var(--hr-radius-control); padding: var(--hr-space-3); background: var(--hr-surface-paper); color: var(--hr-color-ink); font: inherit; }
.hr-field[aria-invalid="true"] { border-color: var(--hr-color-danger); }
.hr-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: var(--hr-space-1) var(--hr-space-2); border-radius: var(--hr-radius-pill); background: var(--hr-surface-selected); color: var(--hr-color-sapphire-hover); font-size: var(--hr-font-size-caption); font-weight: var(--hr-font-weight-label); font-variant-numeric: tabular-nums; }
.hr-badge--unread { color: var(--hr-color-on-lime); background: var(--hr-color-lime); }
.hr-title { margin: 0; font-family: var(--hr-font-display); font-size: var(--hr-font-size-title); font-weight: var(--hr-font-weight-heading); line-height: var(--hr-font-leading-heading); letter-spacing: var(--hr-font-tracking-display); }
.hr-muted { color: var(--hr-color-muted); }
@media (max-width: 760px) { .hr-button, .hr-icon-button, .hr-field { min-height: var(--hr-control-height-mobile); } }
/* Reduced motion (owner 08.10.2026): the press never moves — the press tokens are 1 — it dims instead. */
@media (prefers-reduced-motion: reduce) {
  :is(.hr-button, .hr-icon-button, .hr-pressable, .hr-pressable-card):active:not(:disabled):not([aria-disabled="true"]) { scale: none; opacity: var(--hr-press-opacity); }
}
@media (prefers-reduced-transparency: reduce) { .hr-glass { background: var(--hr-glass-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (forced-colors: active) { .hr-glass, .hr-surface, .hr-button, .hr-field { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; } .hr-button:focus-visible { outline-color: Highlight; } }