/* moreutils suite primitives. Edit this file, then run npm run ui:sync.
   Each app serves its own copy: no runtime dependency on the hub. */
:root {
  --suite-font: var(--font, "Crimson Pro", ui-serif, Georgia, serif);
  --suite-accent: var(--accent, #ff843d);
  --suite-ink: var(--ink, #ffffdf);
  --suite-secondary: rgb(255 255 223 / .74);
  --suite-muted: rgb(255 255 223 / .64);
  --suite-line: rgb(255 255 223 / .14);
  /* Layout scale: compact tools, a wider directory, and one spacing rhythm. */
  --suite-content-width: 560px;
  --suite-wide-width: 720px;
  --suite-page-gutter: 16px;
  --suite-page-top: 24px;
  --suite-section-gap: 32px;
  --suite-section-heading-gap: 12px;
  --suite-item-gap: 12px;
  --suite-panel-padding: 16px;
  --suite-radius: 12px;
  --suite-control-height: 44px;
  --suite-action-height: 56px;
  --r-sm: var(--suite-radius);
  --ink-3: var(--suite-muted);
  --ink-4: rgb(255 255 223 / .58);
}

/* A small, persistent family identity. The hub opens beside live work. */
header.suite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  height: auto;
  min-height: 60px;
  padding-block: 7px;
  border-bottom: 1px solid var(--suite-line);
  font-family: var(--suite-font);
}
.suite-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
}
.suite-brand a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 6px;
  transition: color .15s;
}
.suite-brand .suite-home {
  gap: 3px;
  color: var(--suite-secondary);
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.2px;
}
.suite-external { font-size: 11px; font-style: normal; color: var(--suite-muted); }
.suite-separator { color: var(--suite-muted); font-size: 17px; font-weight: 300; }
.suite-brand .suite-app {
  gap: 7px;
  color: var(--suite-ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.3px;
  font-style: italic;
}
.suite-icon { display: block; width: 22px; height: 22px; border-radius: 22%; flex: none; }
.suite-brand a:hover { color: var(--suite-accent); }
.suite-brand a:hover .suite-external { color: inherit; }

/* Opt-in primary action: the same meaning in a form, sheet or action bar. */
.suite-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--suite-action-height);
  padding: 14px 20px;
  background: var(--suite-accent);
  color: var(--ground-0, #21120b);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font: 500 19px/1.2 var(--suite-font);
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.suite-primary:hover:not(:disabled) { background: var(--suite-accent); filter: brightness(1.07); }
.suite-primary:active:not(:disabled) { filter: brightness(.96); }
.suite-primary:disabled { opacity: .45; cursor: default; filter: none; }

/* Focus must survive app-specific field and toolbar styles. */
body :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--suite-accent) !important;
  outline-offset: 3px;
}
@media (max-width: 360px) {
  .suite-brand { gap: 7px; }
  .suite-brand .suite-home { font-size: 14px; }
  .suite-brand .suite-app { font-size: 17px; gap: 5px; }
  .suite-icon { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}