/* kit/take-back/take-back.css
   Styles for sentLine, stepBackToast and invitePicker (take-it-back.md). Colours come from the
   product's look (looks.css tokens) with plain fallbacks; nothing here fixes a palette. */
.tb-sent { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; position: relative;
  padding: 6px 0 10px; font: inherit; color: var(--muted, inherit); }
.tb-sent-text { opacity: .85; }
.tb-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: var(--radius, 10px);
  border: 1px solid var(--line, currentColor); background: var(--glass, transparent); color: inherit;
  font: inherit; cursor: pointer; }
.tb-btn:focus-visible { outline: 2px solid var(--look-accent, currentColor); outline-offset: 2px; }
.tb-btn:disabled { opacity: .45; cursor: default; }
.tb-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px;
  background: var(--line, rgba(127,127,127,.25)); overflow: hidden; }
.tb-line-fill { height: 100%; transform-origin: left; background: var(--look-accent, currentColor);
  transition: transform .25s linear; }
.tb-stepped .tb-line-fill { transition: none; }           /* prefers-reduced-motion: steps once a second */
.tb-released .tb-sent-text::before { content: "✓ "; }
.tb-taken-back .tb-sent-text { text-decoration: line-through; }

/* step-back toast: sits like a product's own toast, at the bottom middle */
.tb-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 60; max-width: min(480px, calc(100vw - 32px)); padding: 10px 14px 14px;
  border-radius: var(--radius, 12px); background: var(--solid, #222); color: var(--text, #fff);
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.35)); }
.tb-toast .tb-sent-text { opacity: 1; }
.tb-toast .tb-line { left: 14px; right: 14px; bottom: 6px; }

/* the two-panel invite picker */
.tb-picker { display: grid; gap: 12px; padding: 12px; border-radius: var(--radius, 12px);
  background: var(--solid, inherit); color: var(--text, inherit); }
.tb-picker-title { margin: 0; font: inherit; font-weight: 600; }
.tb-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .tb-panels { grid-template-columns: 1fr; } }
.tb-panel { display: grid; gap: 8px; align-content: start; min-height: 160px; padding: 8px;
  border: 1px solid var(--line, currentColor); border-radius: var(--radius, 10px); background: var(--glass, transparent); }
.tb-search { min-height: 44px; padding: 8px 10px; border-radius: var(--radius, 10px); border: 1px solid var(--line, currentColor);
  background: transparent; color: inherit; font: inherit; }
.tb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow: auto; }
.tb-person { display: block; width: 100%; min-height: 44px; padding: 8px 12px; text-align: start;
  border-radius: var(--radius, 10px); border: 1px solid var(--line, currentColor); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.tb-person[data-side="right"] { border-color: var(--look-accent, currentColor); }
.tb-empty { opacity: .6; padding: 10px 12px; font-style: italic; }
.tb-picker-row { display: flex; justify-content: flex-end; gap: 8px; }
.tb-send { min-height: 48px; padding: 10px 18px; background: var(--look-accent, currentColor); color: var(--on-accent, #000); border-color: transparent; }