/* Great Tasks — app-specific styles layered on the great-apps framework. */

.header-actions {
  display: flex;
  gap: 8px;
}

/* ── Auth view ─────────────────────────────────────────────── */
.auth-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}
.auth-brand {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-tag {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-align: center;
}
#auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--accent); }
.auth-error {
  color: #f06a6a;
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}
.auth-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px;
}

/* ── Project switcher ──────────────────────────────────────── */
.project-select {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  max-width: 60vw;
}

/* ── Account menu ──────────────────────────────────────────── */
.account-menu {
  position: absolute;
  right: 16px;
  top: 56px;
  z-index: 20;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.account-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  word-break: break-all;
}
.menu-item {
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}
.menu-item:hover { background: var(--bg); }
.menu-item.danger { color: #f06a6a; }

/* ── Members / share view ──────────────────────────────────── */
.members-head { margin-bottom: 18px; }
.members-head h2 { margin: 0 0 4px; font-size: 1.3rem; }
.members-sub { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.invite-form { margin-bottom: 20px; }
.invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-row input {
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
}
.invite-row input:focus { border-color: var(--accent); }
.invite-row select {
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
}
.invite-btn { flex: 0 0 auto; }
.invite-hint { font-size: 0.72rem; color: var(--text-muted); margin: 8px 0 0; }
.members-list { display: flex; flex-direction: column; gap: 8px; }
.members-loading { color: var(--text-muted); font-size: 0.85rem; }
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.member-info { display: flex; flex-direction: column; min-width: 0; }
.member-name { font-size: 0.92rem; font-weight: 600; }
.member-email { font-size: 0.75rem; color: var(--text-muted); word-break: break-all; }
.member-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.member-role {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: capitalize;
}
.member-role.owner { color: var(--accent); font-weight: 700; }
.member-role-select {
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
}
.member-remove {
  background: none;
  border: 1px solid var(--border);
  color: #f06a6a;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Reorder projects ──────────────────────────────────────── */
.reorder-list { display: flex; flex-direction: column; gap: 8px; }
.reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.reorder-name {
  font-size: 0.92rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reorder-ctrls { display: flex; gap: 6px; flex-shrink: 0; }
.reorder-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}
.reorder-btn:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.reorder-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Editor read-only note ─────────────────────────────────── */
.editor-readonly {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  margin: 0;
}

/* ── Toast & offline banner ────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 50;
  max-width: 88vw;
  text-align: center;
}
.toast.toast-error { border-color: color-mix(in srgb, #f06a6a 55%, var(--border)); }
.offline-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3a2a12;
  color: #f0b45f;
  text-align: center;
  padding: 8px;
  font-size: 0.8rem;
  z-index: 40;
}

/* ── Filter / sort / search panel ──────────────────────────── */
/* All sort, filter, and search controls live behind the header's sliders
   button. The panel toggles open in place (where the search bar used to be) and
   holds the search box plus the full controls row. */
.filter-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-panel .controls-row { margin-top: 0; }

.filter-search {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.filter-search:focus { border-color: var(--accent); }
.filter-search::placeholder { color: var(--text-muted); }

/* Filled knobs sit on the slider tracks (bg matches the header so the line
   reads as interrupted), and the button lights up while the panel is open. */
#filter-toggle svg circle { fill: var(--bg-surface); }
#filter-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--text);
}

/* ── Controls row ──────────────────────────────────────────── */
.controls-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.controls-row select {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}

.dir-btn {
  width: 34px;
  height: 34px;
}

.dir-btn.asc svg {
  transform: rotate(180deg);
}

.toggle-pill {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  margin-left: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ── Task rows ─────────────────────────────────────────────── */
.task-row-wrap {
  position: relative;
  overflow: hidden;
}
.task-row {
  align-items: center;
  gap: 12px;
  background: var(--bg);
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Titles wrap to multiple lines instead of truncating with an ellipsis.
   (Explicit override so it applies even while the CDN framework.css is cached.) */
.task-row .item-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: break-word;
}
.task-row .item-title-row { align-items: flex-start; }

/* Keep the row opaque even when a task is done, so the swipe-to-delete
   affordance behind it stays hidden until the row is actually dragged. */
.task-row.is-done { opacity: 1; }
.task-row.is-done .score-chip,
.task-row.is-done .item-info { opacity: 0.5; }

.task-row.is-done .item-title {
  text-decoration: line-through;
}

.score-chip {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dim-badges {
  display: flex;
  gap: 5px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.dim-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.dim-badge b {
  font-weight: 800;
}

/* ── Level color scale (1 low → 5 high) ────────────────────── */
.lvl-1 { --lvl: #5b6b7a; }
.lvl-2 { --lvl: #2f9e6b; }
.lvl-3 { --lvl: #c9a227; }
.lvl-4 { --lvl: #d97a2b; }
.lvl-5 { --lvl: #d94b4b; }

.dim-badge.lvl-1, .dim-badge.lvl-2, .dim-badge.lvl-3,
.dim-badge.lvl-4, .dim-badge.lvl-5 {
  border-color: color-mix(in srgb, var(--lvl) 55%, transparent);
  background: color-mix(in srgb, var(--lvl) 18%, var(--bg-surface));
}

.dim-badge b { color: var(--lvl); }

.lvl-score-1 { background: #5b6b7a; }
.lvl-score-2 { background: #2f9e6b; }
.lvl-score-3 { background: #c9a227; }
.lvl-score-4 { background: #d97a2b; }
.lvl-score-5 { background: #d94b4b; }

.slider-value.lvl-1 { color: #8aa0b3; }
.slider-value.lvl-2 { color: #3fbf85; }
.slider-value.lvl-3 { color: #e0b93a; }
.slider-value.lvl-4 { color: #f0913f; }
.slider-value.lvl-5 { color: #f06a6a; }

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px;
  text-align: center;
}

.empty-title {
  font-size: 1.1rem;
  color: var(--text);
}

.empty-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Editor form ───────────────────────────────────────────── */
#task-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field input[type="text"],
.field textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}

.field input[type="text"]:focus,
.field textarea:focus {
  border-color: var(--accent);
}

/* ── Labels autocomplete ───────────────────────────────────── */
.labels-input-wrap { position: relative; }
.labels-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-height: 208px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.labels-suggest li {
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.labels-suggest li.active { background: var(--accent); color: #fff; }
.labels-suggest li .lbl-match { font-weight: 700; }
.labels-suggest li.active .lbl-match { text-decoration: underline; }

/* ── Elastic overscroll affordance ─────────────────────────── */
/* The framework's inner scroller (#task-list / .item-list) only rubber-bands on
   iOS/Android when its content actually overflows. A task list that fits the
   screen has scrollHeight === clientHeight, so the OS gives no elastic
   springback and the list can feel frozen. Force a hairline (1px) of scrollable
   overflow with an invisible, absolutely-positioned spacer so the native
   overscroll bounce is always available at top and bottom, however few tasks are
   shown. Once the element is scrollable at all, the OS provides the full elastic
   drag — the 1px only flips it into scrollable mode. Scoped to touch pointers so
   desktop never shows a scrollbar for a short list, and left untouched when the
   list genuinely overflows (native scrolling takes over). */
@media (hover: none) and (pointer: coarse) {
  #task-list { position: relative; }
  #task-list::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: -1px; /* extend 1px past the scrollport bottom */
    width: 1px;
    pointer-events: none;
  }
}

/* ── Sliders ───────────────────────────────────────────────── */
#sliders {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slider-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.slider-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.slider-value {
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #5b6b7a, #2f9e6b, #c9a227, #d97a2b, #d94b4b);
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--bg);
  cursor: pointer;
}

.slider-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Done toggle ───────────────────────────────────────────── */
.done-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  cursor: pointer;
}

.done-field input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

/* ── Score preview ─────────────────────────────────────────── */
.score-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.score-preview-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-preview-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.score-preview-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Buttons ───────────────────────────────────────────────── */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn {
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-surface);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  flex: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-dim);
}

.btn-danger {
  color: #f06a6a;
  border-color: color-mix(in srgb, #f06a6a 45%, transparent);
}

.btn-danger:hover {
  background: color-mix(in srgb, #f06a6a 15%, var(--bg-surface));
}

.count-label {
  font-size: 0.72rem;
}

/* ── Star toggle (inline) ──────────────────────────────────── */
.star-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.star-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.star-btn.on { color: #e8b93a; }
.star-btn.on svg { fill: #e8b93a; stroke: #e8b93a; }
.task-row.is-starred .item-title { font-weight: 600; }

/* ── Inline done checkbox ──────────────────────────────────── */
.row-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.row-check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.row-check-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 6px;
  display: inline-block;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.row-check-input:checked + .row-check-box {
  background: var(--accent);
  border-color: var(--accent);
}
.row-check-input:checked + .row-check-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.row-check-input:disabled + .row-check-box { opacity: 0.4; }

/* ── Label chips ───────────────────────────────────────────── */
.label-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.label-chip {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--text);
  background: rgba(124, 111, 255, 0.15);
  border: 1px solid rgba(124, 111, 255, 0.35);
}

/* ── Swipe affordances (delete right, complete left) ───────── */
.row-delete,
.row-complete {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.row-delete {
  right: 0;
  background: #c0392b;
}
.row-complete {
  left: 0;
  background: #1f9d55;
}
.task-row-wrap:has(.task-row.swiping) .row-delete,
.task-row-wrap:has(.task-row.revealed) .row-delete,
.task-row-wrap:has(.task-row.swiping) .row-complete,
.task-row-wrap:has(.task-row.revealed) .row-complete { opacity: 1; }


/* ── Controls: starred pill + label filter ─────────────────── */
.star-pill.pill-accent {
  color: #e8b93a;
  border-color: color-mix(in srgb, #e8b93a 50%, transparent);
  background: color-mix(in srgb, #e8b93a 16%, var(--bg-surface));
}
.label-filter-wrap select { max-width: 132px; }

/* ── Account menu toggle ───────────────────────────────────── */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
}
.menu-toggle:hover { background: var(--bg); }
.menu-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ── Editor flag row + ghost button ────────────────────────── */
.flag-fields { display: flex; gap: 24px; flex-wrap: wrap; }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }

/* ── Long-press action sheet ───────────────────────────────── */
.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.16s;
}
.action-sheet.open { opacity: 1; }
.sheet-panel {
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(100%);
  transition: transform 0.2s ease;
}
.action-sheet.open .sheet-panel { transform: translateY(0); }
.sheet-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-item {
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 14px 12px;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
}
.sheet-item:hover { background: var(--bg); }
.sheet-item.danger { color: #f06a6a; }
.sheet-cancel {
  text-align: center;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 600;
}

/* ── Outbox ────────────────────────────────────────────────── */
.outbox-btn { position: relative; }
.outbox-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.outbox-btn.has-failed .outbox-badge { background: #d94b4b; }

.outbox-online {
  background: #3a2a12;
  color: #f0b45f;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.outbox-retry { align-self: flex-start; margin-bottom: 12px; }
.outbox-list { display: flex; flex-direction: column; gap: 8px; }

.ob-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ob-kind {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
}
.ob-kind.op-create { background: #2f9e6b; }
.ob-kind.op-update { background: #c9922b; }
.ob-kind.op-delete { background: #d94b4b; }
.ob-info { flex: 1; min-width: 0; }
.ob-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ob-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.ob-status.failed { color: #f06a6a; font-weight: 600; }
.ob-discard {
  flex: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  line-height: 0;
}
.ob-discard:hover { background: var(--bg); color: #f06a6a; }