/* ============================================================================
   Shared Design System — components (v1, Nov 13, 2026)
   Canonical source: ~/workspace/ai-business-lineup/design-system/
   Requires tokens.css (loaded first). Class prefix: ds-.
   Bar: 44pt targets, spring motion, skeleton loading, no native popups,
   no dead ends, no silent no-ops. Products may add layout glue in their own
   stylesheets; shared components change HERE only.
   ========================================================================== */

/* ---------- Buttons ---------- */
.ds-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ds-touch); padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--ds-line);
  background: var(--ds-bg-elev); color: var(--ds-text);
  font-family: var(--ds-font-text); font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: transform var(--ds-dur-instant) var(--ds-spring),
    background var(--ds-dur-fast), border-color var(--ds-dur-fast), opacity var(--ds-dur-fast);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ds-btn:active{ transform: scale(.97); }
.ds-btn:hover{ border-color: var(--ds-text-faint); }
.ds-btn.primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
.ds-btn.primary:hover{ background: var(--accent-2); border-color: var(--accent-2); }
.ds-btn.danger{ background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; }
.ds-btn.ghost{ border-color: transparent; background: transparent; color: var(--accent); }
.ds-btn.block{ width: 100%; }
.ds-btn:disabled{ opacity: .5; cursor: default; transform: none; }
.ds-btn.small{ min-height: 38px; padding: 7px 14px; font-size: 13.5px; }

.ds-icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ds-touch); height: var(--ds-touch); border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--ds-text-soft);
  cursor: pointer; flex: none; transition: background var(--ds-dur-fast), color var(--ds-dur-fast), transform var(--ds-dur-instant) var(--ds-spring);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ds-icon-btn:active{ transform: scale(.92); }
.ds-icon-btn:hover{ background: var(--ds-bg-soft); color: var(--ds-text); }
.ds-icon-btn svg{ width: 20px; height: 20px; }

/* ---------- Fields ---------- */
.ds-field{ margin-bottom: 14px; }
.ds-field label{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ds-text-soft); }
.ds-field input, .ds-field select, .ds-field textarea{
  width: 100%; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm);
  padding: 12px 14px; font-size: 15.5px; background: var(--ds-bg); color: var(--ds-text);
  outline: none; font-family: var(--ds-font-text); min-height: var(--ds-touch);
  transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast);
}
.ds-field textarea{ min-height: 76px; resize: vertical; }
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ds-form-error{
  background: var(--ds-danger-bg); color: var(--ds-danger-text);
  border: 1px solid var(--ds-danger-line); border-radius: var(--ds-radius-sm);
  padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.45;
}

/* ---------- Card ---------- */
.ds-card{
  background: var(--ds-bg-elev); border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius); padding: 18px; margin-bottom: 16px;
}
.ds-card h3{ margin: 0 0 4px; font-size: 16px; font-family: var(--ds-font-display); letter-spacing: var(--ds-tracking-display); }
.ds-card p{ margin: 0; color: var(--ds-text-soft); font-size: 14px; line-height: 1.55; }

/* ---------- Banner (in-app notice, e.g. watcher due banner) ---------- */
.ds-banner{
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--ds-radius-sm); padding: 12px 14px;
  font-size: 14px; line-height: 1.5; margin-bottom: 14px;
  border: 1px solid var(--ds-warn-line); background: var(--ds-warn-bg); color: var(--ds-warn-text);
  animation: ds-rise var(--ds-dur-view) var(--ds-spring);
}
.ds-banner.danger{ border-color: var(--ds-danger-line); background: var(--ds-overdue-bg); color: var(--ds-danger-text); }
.ds-banner b{ text-transform: uppercase; font-size: 11px; letter-spacing: .06em; display: block; margin-bottom: 2px; }
.ds-banner .ds-banner-action{ margin-left: auto; flex: none; font-weight: 700; color: inherit; background: none; border: 0; cursor: pointer; font-size: 14px; min-height: var(--ds-touch); padding: 0 4px; }

/* ---------- Sheet (iOS-style sliding panel) ---------- */
.ds-scrim{
  position: fixed; inset: 0; background: rgba(10, 10, 16, .45); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity var(--ds-dur-fast);
}
.ds-scrim.show{ opacity: 1; pointer-events: auto; }
.ds-sheet-wrap{
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
}
@media (min-width: 640px){ .ds-sheet-wrap{ align-items: center; padding: 20px; } }
.ds-sheet{
  background: var(--ds-bg-elev); width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto;
  border-radius: var(--ds-radius-sheet) var(--ds-radius-sheet) 0 0; box-shadow: var(--ds-shadow-sheet);
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(24px); opacity: 0; pointer-events: none;
  transition: transform var(--ds-dur-sheet) var(--ds-spring), opacity var(--ds-dur-fast);
}
@media (min-width: 640px){ .ds-sheet{ border-radius: var(--ds-radius-sheet); } }
.ds-sheet-wrap.show .ds-sheet{ transform: none; opacity: 1; pointer-events: auto; }
.ds-sheet .ds-grab{ width: 38px; height: 5px; border-radius: 999px; background: var(--ds-line); margin: 2px auto 14px; }
.ds-sheet h3{ margin: 0 0 8px; font-size: 19px; font-family: var(--ds-font-display); letter-spacing: var(--ds-tracking-display); }
.ds-sheet .ds-sheet-sub{ margin: 0 0 18px; color: var(--ds-text-soft); font-size: 14px; line-height: 1.55; }
.ds-sheet .ds-row{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Bucket list (watcher) ---------- */
.ds-bucket{ margin-bottom: 26px; }
.ds-bucket-head{ display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; }
.ds-bucket-head h3{
  margin: 0; font-size: 15px; font-family: var(--ds-font-display); letter-spacing: .01em;
  text-transform: uppercase; font-size: 12.5px; letter-spacing: .07em; color: var(--ds-text-soft);
}
.ds-bucket-head .ds-count{
  font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700;
  background: var(--ds-bg-soft); border: 1px solid var(--ds-line-soft); color: var(--ds-text-soft);
  border-radius: 999px; padding: 1px 9px;
}
.ds-bucket.overdue .ds-bucket-head h3{ color: var(--ds-overdue); }
.ds-bucket.overdue .ds-count{ background: var(--ds-overdue-bg); color: var(--ds-overdue); border-color: var(--ds-danger-line); }
.ds-bucket-empty{ color: var(--ds-text-faint); font-size: 14px; padding: 4px 2px 0; }

.ds-ob{
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ds-bg-elev); border: 1px solid var(--ds-line); border-radius: 14px;
  padding: 14px; margin-bottom: 10px;
  animation: ds-rise var(--ds-dur-view) var(--ds-spring);
}
.ds-ob .ds-ob-main{ flex: 1; min-width: 0; }
.ds-ob .ds-ob-title{ font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ds-ob .ds-ob-meta{ font-size: 13px; color: var(--ds-text-soft); margin-top: 3px; line-height: 1.5; }
.ds-ob .ds-ob-meta .ds-due{ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ds-text); }
.ds-ob.overdue{ border-color: var(--ds-danger-line); }
.ds-ob.overdue .ds-ob-meta .ds-due{ color: var(--ds-overdue); }
.ds-ob .ds-ob-src{ font-size: 12.5px; color: var(--ds-text-faint); margin-top: 3px; overflow-wrap: anywhere; }
.ds-ob .ds-ob-actions{ display: flex; gap: 6px; flex: none; }
.ds-ob .ds-ob-actions .ds-btn{ min-height: 38px; padding: 6px 12px; font-size: 13px; }

.ds-flag{
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px;
  background: var(--ds-bg-soft); color: var(--ds-text-soft); border: 1px solid var(--ds-line-soft);
}
.ds-flag.warn{ background: var(--ds-warn-bg); color: var(--ds-warn-text); border-color: var(--ds-warn-line); }
.ds-flag.hold{ background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---------- Queue item (approval inbox / outbox) ---------- */
.ds-queue-item{
  background: var(--ds-bg-elev); border: 1px solid var(--ds-line); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; animation: ds-rise var(--ds-dur-view) var(--ds-spring);
}
.ds-queue-item .ds-q-head{ display: flex; align-items: baseline; gap: 8px; }
.ds-queue-item .ds-q-kind{
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.ds-queue-item .ds-q-when{ margin-left: auto; font-size: 12.5px; color: var(--ds-text-faint); font-variant-numeric: tabular-nums; flex: none; }
.ds-queue-item .ds-q-title{ font-size: 15px; font-weight: 600; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.ds-queue-item .ds-q-detail{ font-size: 14px; color: var(--ds-text-soft); line-height: 1.55; margin-top: 4px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ds-queue-item .ds-q-evidence{ font-size: 12.5px; color: var(--ds-text-faint); margin-top: 6px; overflow-wrap: anywhere; }
.ds-queue-item .ds-q-actions{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ds-queue-item .ds-q-status{ font-size: 13px; font-weight: 600; margin-top: 10px; }
.ds-queue-item .ds-q-status.fired{ color: var(--ds-ok); }
.ds-queue-item .ds-q-status.rejected, .ds-queue-item .ds-q-status.undone{ color: var(--ds-text-faint); }

/* ---------- Segmented control ---------- */
.ds-seg{ display: flex; background: var(--ds-bg-soft); border-radius: 999px; padding: 3px; }
.ds-seg button{
  border: 0; background: transparent; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ds-text-soft); cursor: pointer; min-height: 38px;
  font-family: var(--ds-font-text);
}
.ds-seg button.active{ background: var(--ds-bg-elev); color: var(--ds-text); box-shadow: 0 1px 5px rgba(0, 0, 0, .1); }

/* ---------- Switch ---------- */
.ds-switch{ position: relative; width: 46px; height: 27px; flex: none; }
.ds-switch input{ opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.ds-switch .track{ position: absolute; inset: 0; background: var(--ds-line); border-radius: 999px; transition: background var(--ds-dur-fast); }
.ds-switch .track::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left var(--ds-dur-fast) var(--ds-spring); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.ds-switch input:checked + .track{ background: var(--accent); }
.ds-switch input:checked + .track::after{ left: 22px; }

/* ---------- Setting row ---------- */
.ds-setting-row{ display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ds-line-soft); }
.ds-setting-row:last-child{ border-bottom: 0; }
.ds-setting-row .grow{ flex: 1; min-width: 0; }
.ds-setting-row .grow b{ font-size: 14.5px; display: block; }
.ds-setting-row .grow span{ font-size: 13px; color: var(--ds-text-soft); line-height: 1.45; display: block; margin-top: 2px; }

/* ---------- Skeleton loading (never spinners-on-blank) ---------- */
.ds-skeleton{ border-radius: 12px; background: linear-gradient(100deg, var(--ds-bg-soft) 40%, var(--ds-line-soft) 50%, var(--ds-bg-soft) 60%); background-size: 200% 100%; animation: ds-shimmer 1.3s infinite; }
.ds-skeleton.line{ height: 14px; margin-bottom: 10px; }
.ds-skeleton.card{ height: 86px; margin-bottom: 10px; }
@keyframes ds-shimmer{ to{ background-position: -200% 0; } }

@keyframes ds-rise{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .ds-banner, .ds-ob, .ds-queue-item{ animation: none; }
  .ds-sheet{ transition: opacity var(--ds-dur-fast); }
}