/* ==========================================================================
   styles/base.css
   Reset, document defaults, and the controls shared across the studio.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 16px;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Buttons
   One class, three intents. Icon-only buttons are square; buttons with a
   Persian label grow to fit it, because a reader should never have to guess
   what a picture means.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 0.82rem; font-weight: 500; line-height: 1;
  color: var(--fg); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 7px 11px; min-height: 32px; cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  white-space: nowrap; user-select: none;
}
/* Every variant below must restate its own background on :hover and :active.
   These two rules carry a pseudo-class each, so a bare .btn--danger cannot
   outweigh them - which is how a red button turned white the moment the
   pointer touched it, taking its white label with it. */
.btn:hover:not(:disabled) { background: var(--panel-2); }
.btn:active:not(:disabled) { background: var(--accent-wash); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn[aria-pressed='true'] { background: var(--accent-wash); color: var(--accent-strong); }

.btn--icon { width: 32px; padding: 0; }
.btn--primary { background: var(--accent); color: var(--on-accent); font-weight: 600; border-color: var(--accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--primary:active:not(:disabled) { background: var(--accent-strong); }

.btn--danger { background: var(--err); color: #fff; border-color: var(--err); }
.btn--danger:hover:not(:disabled) { background: var(--err); filter: brightness(1.12); }
.btn--danger:active:not(:disabled) { background: var(--err); filter: brightness(0.94); }

.btn--outline { border-color: var(--line); }
.btn--outline:hover:not(:disabled) { background: var(--panel-2); border-color: var(--fg-faint); }

.btn--quiet { color: var(--fg-dim); font-weight: 400; }
.btn--quiet:hover:not(:disabled) { color: var(--fg); }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field > label { font-size: 0.74rem; font-weight: 500; color: var(--fg-dim); }
.field__hint { font-size: 0.68rem; color: var(--fg-faint); line-height: 1.7; }

.control {
  font-family: inherit; font-size: 0.83rem; color: var(--fg);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 10px; width: 100%;
  transition: border-color var(--fast), background var(--fast);
}
.control:hover { border-color: var(--fg-faint); }
.control:focus { outline: none; border-color: var(--accent); }
.control::placeholder { color: var(--fg-faint); }
.control--ltr { direction: ltr; text-align: left; font-family: var(--font-mono); font-size: 0.78rem; }

select.control {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: 12px calc(50% + 1px), 17px calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-left: 28px;
}

textarea.control { resize: vertical; min-height: 68px; line-height: 1.9; }

/* --------------------------------------------------------------------------
   Shared fragments
   -------------------------------------------------------------------------- */

.sep { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; margin: 0 4px; }

.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Tooltips are drawn by ui/tooltip.js on a single floating element, because
   the ribbon scrolls - and anything that scrolls also clips. See that file. */