/* @rudedog/ui — base: reset, body defaults, mono helper, scrollbars, window
   chrome. Extracted from Slates; colours resolve through tokens.css vars so an
   app that overrides the palette (Slates' slate gallery) keeps its look. */

* {
  box-sizing: border-box;
}
/* The [hidden] attribute is only a UA-stylesheet display:none — any author
   `display` on the same element silently defeats it. Make it absolute. */
[hidden] {
  display: none !important;
}
/* Drop the default (macOS-accent-coloured) focus ring — inputs provide their
   own focus styling via border-color. */
:focus,
:focus-visible {
  outline: none;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--window, var(--page));
  color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-user-select: none;
  user-select: none;
}
.mono {
  font-family: var(--mono);
}
::selection {
  background: var(--accent-tint, oklch(0.55 0.23 280 / 0.22));
}
a {
  color: var(--link, oklch(0.3 0.02 282));
}
a:hover {
  color: var(--accent);
}

/* ---- scrollbars ----------------------------------------------------------
   Global on purpose: this used to be opt-in via .ui-scroll, so every surface
   that forgot the class got the chunky default macOS bar. One slim treatment
   everywhere instead — a 4px sliver at rest that grows to 6px and brightens
   as the pointer approaches, so it stays out of the way while remaining an
   easy target. Colours come from tokens, so each ground (warm or velvet)
   resolves its own. */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  /* Transparent border + padding-box clip = the visible sliver is inset,
     while the full 10px stays grabbable. */
  background: var(--scrollbar-idle, rgba(28, 35, 50, 0.10));
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 100px;
  transition: background 0.15s ease, border-width 0.15s ease;
}
/* Hovering the scrolling element brings its bar forward. */
*:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar, rgba(28, 35, 50, 0.20));
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-hover, rgba(28, 35, 50, 0.34));
  border-width: 2px; /* 6px sliver — comfortable to grab */
  background-clip: padding-box;
}

/* Standards property (Firefox, and Safari/Chrome as it lands). */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar, rgba(28, 35, 50, 0.20)) transparent;
}

/* Opt-in helper: reserve the gutter so content doesn't shift when a list
   grows past the fold. */
.ui-scroll {
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  *::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/* ---- window chrome ---- */
/* Generic draggable titlebar region. */
.titlebar-drag {
  -webkit-app-region: drag;
}
.no-drag {
  -webkit-app-region: no-drag;
}
/* The 34px status strip; left padding clears the native traffic lights. */
.status {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 30px 0 86px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  -webkit-app-region: drag;
}
.status-app {
  color: var(--ink-strong, var(--ink));
}
.status-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}