/* ============================================================================
 * Disambi — shared editorial component primitives (Dark-Editorial direction).
 * Loaded site-wide via base.html, AFTER tokens.css. All classes are namespaced
 * `ds-` to avoid collisions with existing page-scoped classes. Consumed by the
 * marketing sweep (Task 2) and, in restrained form, the product sweep (Task 3).
 * ========================================================================== */

/* ---- Eyebrow label (uppercase, copper) ---- */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--type-xs);
  /* One mid blue cannot sit on both grounds: #007BFF measured 3.2-3.5:1 on
     cream and 4.1:1 on the hero's night frame, and 12-14px eyebrows get no
     large-text exemption. --blue-ink is that blue moved in whichever direction
     the ground requires. Still reserved for labels/trust-signals, not CTAs. */
  color: var(--blue-ink);
}

/* ---- Buttons: radius 0, uppercase, copper slides in from the left ---- */
.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  height: 56px;
  padding: 0 36px;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-btn);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color var(--motion-fast) var(--ease-lux),
              border-color var(--motion-slow) var(--ease-lux),
              box-shadow var(--motion-slow) var(--ease-lux);
}
.ds-btn--sm { height: 40px; padding: 0 24px; }
.ds-btn--block { display: flex; width: 100%; }

.ds-btn__label { position: relative; z-index: 1; }
.ds-btn__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Clear of the edge: at -100% a button at a fractional x or width shows a copper line. */
  transform: translateX(calc(-100% - 2px));
  transition: transform 500ms var(--ease-lux);
}
.ds-btn:focus-visible .ds-btn__fill { transform: translateX(0); }
@media (hover: hover) and (pointer: fine) {
  .ds-btn:hover .ds-btn__fill { transform: translateX(0); }
}

/* primary: dark ink base + edge hairline (reads on imagery), copper slide */
.ds-btn--primary {
  background: var(--bg-elevated);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-card);
}
.ds-btn--primary .ds-btn__fill { background: var(--copper); }
.ds-btn--primary:focus-visible { box-shadow: var(--shadow-hover); }
@media (hover: hover) and (pointer: fine) {
  .ds-btn--primary:hover { box-shadow: var(--shadow-hover); }
}

/* secondary: transparent w/ hairline border, copper slide */
.ds-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.ds-btn--secondary .ds-btn__fill { background: var(--copper); }
.ds-btn--secondary:focus-visible { border-color: var(--copper); }
@media (hover: hover) and (pointer: fine) {
  .ds-btn--secondary:hover { border-color: var(--copper); }
}

/* solid: flat copper fill, no slide — for product CTAs and <button> submits.
   Renders correctly without the __fill/__label spans (restrained product tier). */
.ds-btn--solid {
  background: var(--copper);
  color: #fff;
}
.ds-btn--solid:focus-visible {
  background: var(--copper-hover);
  box-shadow: var(--shadow-hover);
}
@media (hover: hover) and (pointer: fine) {
  .ds-btn--solid:hover {
    background: var(--copper-hover);
    box-shadow: var(--shadow-hover);
  }
}

/* ---- Shared keyframe for accordion / reveal content ---- */
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ds-btn__fill { transition-duration: 1ms; }
}

/* ---- Flash messages (shared across dashboard, messaging, signup, collab pages) ---- */
.ds-flash-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}

.ds-flash--error   { border-color: rgb(from var(--danger) r g b / 0.4); background: var(--danger-tint); }
.ds-flash--success { border-color: rgb(from var(--ok) r g b / 0.4);     background: var(--ok-tint); }
.ds-flash--info    { border-color: var(--copper-border);                background: var(--copper-tint); }
.ds-flash--warning { border-color: rgb(from var(--warn) r g b / 0.45);  background: var(--warn-tint); }

/* ---- Shared form controls (pages outside .dashboard, e.g. collab terms form) ---- */
.ds-field { display: grid; gap: 6px; margin-bottom: 14px; }

.ds-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--motion-fast) var(--ease-lux);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  outline: none;
  border-color: var(--copper);
}

/* Native <option> popups ignore inherited color in most browsers — style them
   explicitly or they render illegibly (e.g. light text on a white popup). */
.ds-select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.ds-textarea { min-height: 90px; resize: vertical; }

.ds-fieldset {
  /* Fieldsets default to min-width: min-content, so a wide child (a date
     input, a long option) pushed the licence terms form past a 320px screen. */
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 0 14px;
  display: grid;
  gap: 8px;
}

.ds-legend {
  padding: 0 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ds-checkbox-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  cursor: pointer;
}
.ds-checkbox-row input[type="checkbox"] { margin-top: 3px; }

/* ---- Touch targets ----
 * Native checkboxes and radios render ~13px, which is unusable on a phone and
 * the primary audience here is mobile. Sized once, site-wide. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--copper);
}

/* Show/hide password button (static/js/password-toggle.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 3rem !important; }
.pw-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-secondary); font-size: 1.125rem;
}
@media (hover: hover) and (pointer: fine) {
  .pw-toggle:hover { color: var(--text-primary); }
}
.pw-toggle:focus-visible { outline: 2px solid var(--copper-ink); outline-offset: -2px; }

/* ── Phones and tablets ─────────────────────────────────────────────────────
   Capability queries, not widths: a narrow desktop window keeps its mouse sizes. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a, button, label, summary, select, [role="button"] { touch-action: manipulation; }
input[type="file"] { color: var(--text-secondary); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--text-primary);
  font: inherit;
}
@media (pointer: coarse) {
  /* iOS zooms into any field under 16px and stays zoomed. !important because
     page stylesheets load later with more specific selectors. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  .nav-hamburger, .dashboard .d-sidebar__toggle { min-width: 44px; min-height: 44px; }
  .dashboard .d-btn, .dashboard .d-checkboxes label, select,
  input:is(:not([type]), [type="text"], [type="email"], [type="password"], [type="search"],
           [type="tel"], [type="url"], [type="number"], [type="date"]) { min-height: 44px; }
  /* Signup category pills and the collaboration page's buttons: centred, not
     just taller. Inline links in prose keep their size (WCAG's inline exception);
     padding them out made stacked links overlap. */
  .signup-creator .sg-pills .sg-pill label, .btn-primary, .btn-danger, .btn-ghost, .btn-warn, .m-back {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  }
  /* Standalone links, not prose: the footer's legal row, auth-page links under
     the form, the collaboration back link, the thread header's name. */
  .footer-legal a, .auth-links .auth-link, .back-link, .m-thread-header__name a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ── Touch: the CTA look and press feedback ──────────────────────────────────
   The complement of the hover gate, so every device gets one or the other.
   Buttons can't be hovered to discover their copper, so it shows at rest; a
   press is a short eased dip (scale 0.97) and, on the slide buttons, the copper
   fill coming in fast. :root lifts specificity over page stylesheets that load
   later and set their own transitions. */
@media not all and (hover: hover) and (pointer: fine) {
  .ds-btn--primary { border-color: var(--copper-border); box-shadow: var(--shadow-hover); }
  /* Primary CTAs wear the copper their hover would have slid in. */
  .ds-btn--primary .ds-btn__fill { transform: translateX(0); }
  .ds-btn--secondary { border-color: var(--copper-border); }
  .auth-btn, .ds-btn--solid, :root .signup-creator .sg-submit, :root .signup-brand .sg-submit { box-shadow: var(--shadow-hover); }

  :root .ds-btn, :root .dashboard .d-btn, :root .auth-btn, :root .btn-primary, :root .btn-danger,
  :root .btn-ghost, :root .btn-warn, :root .messages-inbox .m-btn, :root .messages-detail .m-btn,
  :root .messages-start .m-btn, :root .signup-creator .sg-submit, :root .signup-brand .sg-submit {
    /* At rest this is the release: the press (scale, glow) tapers back slowly
       once the finger lifts, and :active below swaps in the quick press.
       Colours stay quick both ways, so a theme switch or disabled state
       doesn't crawl. */
    transition: transform var(--motion-release) var(--ease-release),
                box-shadow var(--motion-release) var(--ease-release),
                background-color var(--motion-press) var(--ease-press),
                border-color var(--motion-press) var(--ease-press),
                color var(--motion-press) var(--ease-press);
  }
  :root .ds-btn:active, :root .dashboard .d-btn:active, :root .auth-btn:active, :root .btn-primary:active,
  :root .btn-danger:active, :root .btn-ghost:active, :root .btn-warn:active,
  :root .messages-inbox .m-btn:active, :root .messages-detail .m-btn:active, :root .messages-start .m-btn:active,
  :root .signup-creator .sg-submit:active, :root .signup-brand .sg-submit:active {
    transform: scale(0.97);
    transition-duration: var(--motion-press);
    transition-timing-function: var(--ease-press);
  }
  .ds-btn__fill { transition: transform var(--motion-release) var(--ease-release); }
  .ds-btn:active .ds-btn__fill {
    transform: translateX(0);
    transition: transform var(--motion-press) var(--ease-press);
  }
  .ds-btn--solid:active, .auth-btn:active, :root .dashboard .d-btn--primary:active,
  :root .signup-creator .sg-submit:active, :root .signup-brand .sg-submit:active { background: var(--copper-hover); }
}
@media (prefers-reduced-motion: reduce) {
  :root .ds-btn:active, :root .dashboard .d-btn:active, :root .auth-btn:active, :root .btn-primary:active,
  :root .btn-danger:active, :root .btn-ghost:active, :root .btn-warn:active,
  :root .messages-inbox .m-btn:active, :root .messages-detail .m-btn:active, :root .messages-start .m-btn:active,
  :root .signup-creator .sg-submit:active, :root .signup-brand .sg-submit:active {
    transform: none;
  }
}