/* Tell Me About A Time - tell-me-about-a-time.css
 * Tool styles for /things/tell-me-about-a-time/
 * Uses :root tokens from main.css. Skin driven by html[data-skin] attribute.
 * Dark (office) is the default. Workshop (light) overrides via data-skin.
 * Sibling to voice-trainer.css — same skin-token approach, tmt- prefix.
 */

/* ── Skin tokens ────────────────────────────────────────────────────────────── */

/* Default: Office — dark elevated card, light text, amber accent */
.tmt-wrap {
  --tmt-surface:     var(--slate);
  --tmt-text:        var(--off-white);
  --tmt-muted:       var(--office-mist);
  --tmt-border:      rgba(248, 249, 247, 0.12);
  --tmt-accent:      var(--amber);
  --tmt-accent-bg:   rgba(181, 133, 58, 0.10);
  --tmt-ground-text: var(--off-white);

  background: var(--office-bg);
  color:      var(--off-white);
}

/* Workshop (light) — cream ground, white cards, sage accent */
html[data-skin="workshop"] .tmt-wrap {
  --tmt-surface:     #ffffff;
  --tmt-text:        var(--slate);
  --tmt-muted:       var(--slate-mid);
  --tmt-border:      var(--rule);
  --tmt-accent:      var(--sage);
  --tmt-accent-bg:   rgba(92, 138, 122, 0.10);
  --tmt-ground-text: var(--slate);

  background: var(--off-white);
  color:      var(--tmt-text);
}

/* thing-stage override: content aligns to top, not vertically centred */
.thing-stage { justify-content: flex-start; }

/* ── Shell surface overrides ─────────────────────────────────────────────────── */

/* Office: close the seam between var(--slate) shell and var(--office-bg) content */
body.skin-office .thing-shell,
body.skin-office .thing-shell .footer { background: var(--office-bg); }

/* Workshop: flip entire surface to light */
html[data-skin="workshop"] .thing-shell {
  background: var(--off-white);
  color:      var(--slate);
}

html[data-skin="workshop"] .thing-shell .footer     { background: var(--off-white); }
html[data-skin="workshop"] .thing-shell .footer a   { color: var(--slate-muted); border-bottom-color: var(--rule); }
html[data-skin="workshop"] .thing-shell .footer a:hover { color: var(--slate); }

html[data-skin="workshop"] .nav                     { background: var(--off-white); }
html[data-skin="workshop"] .nav-wordmark            { color: var(--slate); }
html[data-skin="workshop"] .nav-back                { color: var(--slate-muted); }
html[data-skin="workshop"] .nav-back:hover          { color: var(--slate); }

/* ── Skin slider in nav ──────────────────────────────────────────────────────── */

/* Office (default): dark nav — active side = accent, inactive = mist */
.nav .toggle-label--left  { color: var(--office-mist); }
.nav .toggle-label--right { color: var(--amber); }

/* Workshop: light nav — active side = sage, inactive = slate-muted */
html[data-skin="workshop"] .nav .toggle-label--left  { color: var(--sage); }
html[data-skin="workshop"] .nav .toggle-label--right { color: var(--slate-muted); }

/* Mute thumb shadow — reduces double-amber against the Office nav top rule */
.nav .toggle-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.tmt-wrap {
  width:           100%;
  max-width:       600px;
  display:         flex;
  flex-direction:  column;
  gap:             24px;
  padding-bottom:  48px;
}

/* Practicing runs a wide two column layout on desktop; the tool's
   usual reading-width wrap only cramped it. Scoped to that one screen
   so the rest of the tool, built for a single narrow column, holds its
   width. The shared nav is 68px tall, measured live rather than
   guessed, since a mismatch here would gap or overlap it. */
@media (min-width: 900px) {
  .tmt-wrap:has(#tmt-rep:not([hidden])) {
    max-width: 960px;
  }
}

.tmt-sticky-head {
  position:   sticky;
  top:        68px;
  z-index:    10;
  background: inherit;
  padding-top: 4px;
}

/* ── Screens ────────────────────────────────────────────────────────────────── */

.tmt-screen {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.tmt-screen[hidden] { display: none; }

/* ── Card ───────────────────────────────────────────────────────────────────── */

.tmt-card {
  background:     var(--tmt-surface);
  border:         1px solid var(--tmt-border);
  border-radius:  8px;
  padding:        24px;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

/* ── Tool title, persistent past the entrance ──────────────────────────────── */

.tmt-tool-title {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      18px;
  letter-spacing: -0.01em;
  color:          var(--tmt-ground-text);
  padding:        4px 0 0;
}

/* ── Stepper ────────────────────────────────────────────────────────────────── */
/* This tool's own chrome, not shared Drawer header. Confirming, Sorting,
   Practicing. Confirming is always free to tap (back is free). Sorting is
   only enabled once the account seam has been crossed. Practicing
   unlocks once a story has been told; until then it stays a disabled
   button wearing the Soon badge. */

.tmt-stepper {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     4px 0 8px;
}

.tmt-stepper[hidden] { display: none; }

.tmt-stepper-stage {
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          var(--tmt-muted);
  background:     transparent;
  border:         none;
  padding:        4px 2px;
  cursor:         default;
  opacity:        0.55;
  transition:     color 0.15s, opacity 0.15s;
}

button.tmt-stepper-stage:not(:disabled) {
  cursor:  pointer;
  opacity: 0.85;
}

button.tmt-stepper-stage:not(:disabled):hover { color: var(--tmt-text); opacity: 1; }

.tmt-stepper-stage.is-current {
  color:         var(--tmt-accent);
  opacity:       1;
  font-weight:   500;
  background:    var(--tmt-accent-bg);
  border-radius: 999px;
  padding:       4px 12px;
}

.tmt-stepper-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

.tmt-stepper-stage.is-current .tmt-stepper-dot {
  box-shadow: 0 0 0 3px var(--tmt-accent-bg);
}

.tmt-stepper-connector {
  flex:      1 1 auto;
  height:    1px;
  background: var(--tmt-border);
  min-width: 12px;
}

@media (max-width: 420px) {
  .tmt-stepper-label { font-size: 10px; }
}

/* ── Entrance screen ────────────────────────────────────────────────────────── */

.tmt-header { text-align: center; padding: 8px 0; }

.tmt-title {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      clamp(32px, 8vw, 46px);
  letter-spacing: -0.02em;
  color:          var(--tmt-ground-text);
  line-height:    1.1;
  text-align:     center;
}

.tmt-entrance-copy {
  font-size:   14px;
  color:       var(--tmt-muted);
  line-height: 1.65;
  text-align:  left;
}

.tmt-entrance-copy--emphasis {
  color:       var(--tmt-text);
  font-weight: 500;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.tmt-btn-primary {
  font-family:      var(--sans);
  font-size:        14px;
  font-weight:      500;
  /* White on the accent in both skins, the same treatment
     vt-btn-primary uses: slate text held up on Office's amber but went
     dark-on-sage in Workshop. */
  color:            var(--white);
  background:       var(--tmt-accent);
  border:           none;
  border-radius:    6px;
  padding:          12px 20px;
  cursor:           pointer;
  transition:       opacity 0.15s;
  align-self:       center;
  min-width:        140px;
  text-align:       center;
}

.tmt-btn-primary:hover { opacity: 0.85; }

.tmt-btn-secondary {
  font-family:   var(--sans);
  font-size:     14px;
  font-weight:   400;
  color:         var(--tmt-muted);
  background:    transparent;
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  padding:       12px 20px;
  cursor:        pointer;
  transition:    color 0.15s, border-color 0.15s;
  align-self:    center;
  min-width:     140px;
  text-align:    center;
}

.tmt-btn-secondary:hover { color: var(--tmt-text); border-color: var(--tmt-text); }

/* ── Intake screen ──────────────────────────────────────────────────────────── */

.tmt-intake-doors {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

.tmt-door-btn {
  flex:          1 1 160px;
  font-family:   var(--sans);
  font-size:     14px;
  font-weight:   400;
  color:         var(--tmt-text);
  background:    transparent;
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       16px;
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s;
  text-align:    center;
}

.tmt-door-btn:hover     { border-color: var(--tmt-accent); background: var(--tmt-accent-bg); }
.tmt-door-btn.is-active { border-color: var(--tmt-accent); background: var(--tmt-accent-bg); }

/* The demo door reads as the lighter-weight option: dashed, muted,
   never competing with the two real doors for attention. */
.tmt-door-btn--demo {
  flex-basis:  100%;
  border-style: dashed;
  color:        var(--tmt-muted);
  font-size:    13px;
}

.tmt-door-btn--demo:hover { color: var(--tmt-text); }

/* ── Demo preview overlay ──────────────────────────────────────────────────── */

.tmt-demo-overlay {
  position:        fixed;
  inset:           0;
  z-index:         50;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  background:      rgba(0, 0, 0, 0.5);
}

.tmt-demo-overlay[hidden] { display: none; }

.tmt-demo-modal {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  width:          100%;
  max-width:      560px;
  max-height:     90vh;
  background:     var(--tmt-surface);
  border:         1px solid var(--tmt-border);
  border-radius:  10px;
  padding:        20px;
  overflow-y:     auto;
}

.tmt-demo-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   19px;
  color:       var(--tmt-ground-text);
}

.tmt-demo-intro {
  font-size:   13px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

.tmt-demo-frame {
  width:         100%;
  height:        45vh;
  min-height:    280px;
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  background:    var(--tmt-accent-bg);
}

.tmt-privacy-line {
  font-size:   12px;
  color:       var(--tmt-muted);
  text-align:  center;
  font-style:  italic;
}

.tmt-upload-panel,
.tmt-paste-panel {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  align-items:    center;
}

.tmt-paste-textarea {
  width:         100%;
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-text);
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  padding:       12px;
  resize:        vertical;
  line-height:   1.5;
}

.tmt-file-name {
  font-size:  12px;
  color:      var(--tmt-muted);
}

.tmt-intake-error {
  font-size:  13px;
  color:      var(--rose);
  text-align: center;
  line-height: 1.5;
}

.tmt-intake-success {
  font-size:  13px;
  color:      var(--tmt-accent);
  text-align: center;
}

.tmt-intake-success a {
  color:           inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tmt-intake-loading {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--tmt-muted);
}

.tmt-loading-dot {
  width:            8px;
  height:           8px;
  border-radius:    50%;
  background:       var(--tmt-accent);
  animation:        tmt-pulse 1s ease-in-out infinite;
}

@keyframes tmt-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}

/* ── Confirm screen: bullet list with instant pre-flags ────────────────────── */

.tmt-read-length-note {
  font-size:   13px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

.tmt-read-retry {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.tmt-read-retry[hidden] { display: none; }

.tmt-read-retry-line {
  font-size: 13px;
  color:     var(--tmt-muted);
}

.tmt-read-retry-btn {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   500;
  color:         var(--tmt-accent);
  background:    transparent;
  border:        1px solid var(--tmt-accent);
  border-radius: 6px;
  padding:       5px 12px;
  cursor:        pointer;
}

.tmt-read-retry-btn:hover { background: var(--tmt-accent-bg); }

.tmt-retone-loading {
  font-size:  13px;
  color:      var(--tmt-muted);
  font-style: italic;
}

.tmt-confirm-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.tmt-confirm-add-missed {
  align-self:    flex-start;
  font-family:   var(--sans);
  font-size:     13px;
  font-weight:   400;
  color:         var(--tmt-muted);
  background:    transparent;
  border:        none;
  padding:       4px 0;
  cursor:        pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:    color 0.12s;
}

.tmt-confirm-add-missed:hover { color: var(--tmt-text); }

.tmt-confirm-start-over {
  align-self:    flex-start;
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   400;
  color:         var(--tmt-muted);
  background:    transparent;
  border:        none;
  padding:       0;
  cursor:        pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:    color 0.12s;
}

.tmt-confirm-start-over:hover { color: var(--tmt-text); }

.tmt-confirm-item {
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       14px;
  display:       flex;
  flex-direction: column;
  gap:           10px;
}

.tmt-confirm-item-head {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
}

.tmt-preflag {
  flex-shrink:     0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  font-size:       12px;
  margin-top:      1px;
}

.tmt-preflag--tick {
  background: var(--tmt-accent-bg);
  color:      var(--tmt-accent);
}

.tmt-preflag--flag {
  background: rgba(181, 110, 110, 0.12);
  color:      var(--rose);
}

.tmt-confirm-text {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

/* One-line challenge, always plain register, never re-toned by the dial */
.tmt-confirm-challenge {
  border-left:   2px solid var(--tmt-accent);
  padding-left:  12px;
  margin-left:   30px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
}

.tmt-confirm-critique {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

.tmt-confirm-suggestion {
  font-size:   13px;
  color:       var(--tmt-accent);
  line-height: 1.5;
}

/* Per-bullet controls, shared by the local flag and the read challenge */
.tmt-strengthen-actions {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.tmt-strengthen-actions button {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   400;
  color:         var(--tmt-muted);
  background:    transparent;
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  padding:       6px 12px;
  cursor:        pointer;
  transition:    color 0.12s, border-color 0.12s;
}

.tmt-strengthen-actions button:hover { color: var(--tmt-text); border-color: var(--tmt-text); }

.tmt-strengthen-add-form {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-items:    flex-start;
}

.tmt-strengthen-add-input {
  width:         100%;
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-text);
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  padding:       10px 12px;
  line-height:   1.5;
  resize:        vertical;
}

.tmt-strengthen-add-form .tmt-btn-primary {
  min-width: auto;
  padding:   8px 14px;
  font-size: 12px;
}

.tmt-strengthen-note {
  font-size:  12px;
  color:      var(--tmt-accent);
}

/* Edit form: same shape as the strengthen add-form, replaces the text
   itself rather than appending to it. */
.tmt-confirm-edit-form {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-items:    flex-start;
}

.tmt-confirm-edit-input {
  width:         100%;
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-text);
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  padding:       10px 12px;
  line-height:   1.5;
  resize:        vertical;
}

.tmt-confirm-edit-form .tmt-btn-primary,
.tmt-confirm-edit-form .tmt-btn-secondary {
  min-width: auto;
  padding:   8px 14px;
  font-size: 12px;
}

/* Quiet controls: on every bullet, lighter than the strengthen row so a
   green item that only needs edit and remove stays visually quiet. */
.tmt-confirm-quiet-actions {
  display:   flex;
  gap:       8px;
}

.tmt-confirm-quiet-actions button {
  font-family: var(--sans);
  font-size:   11px;
  font-weight: 400;
  color:       var(--tmt-muted);
  background:  transparent;
  border:      none;
  padding:     2px 0;
  cursor:      pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:  color 0.12s;
}

.tmt-confirm-quiet-actions button:hover { color: var(--tmt-text); }

/* ── Progress indicator ─────────────────────────────────────────────────────── */

.tmt-progress-indicator {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  font-size:      13px;
  color:          var(--tmt-muted);
  transition:     opacity 0.6s ease;
}

.tmt-progress-indicator--done {
  opacity: 0;
}

.tmt-progress-lead {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0;
}

.tmt-progress-sub {
  margin:    0;
  font-size: 12px;
}

.tmt-progress-dots {
  display: inline-flex;
  gap:     4px;
}

.tmt-progress-dots span {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--tmt-accent);
  animation:     tmt-bounce 1s ease-in-out infinite;
}

.tmt-progress-dots span:nth-child(2) { animation-delay: 0.15s; }
.tmt-progress-dots span:nth-child(3) { animation-delay: 0.3s;  }

@keyframes tmt-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ── Portfolio verdict, dial-governed ──────────────────────────────────────── */

/* Three equal cards, one row wide, one stacked column narrow. Persistent and
   always clickable, no separate picker step and no softer/harder pair. */
.tmt-dial-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
}

@media (max-width: 520px) {
  .tmt-dial-grid { grid-template-columns: 1fr; }
}

.tmt-dial-btn {
  display:       flex;
  flex-direction: column;
  gap:           4px;
  font-family:   var(--sans);
  font-size:     13px;
  font-weight:   500;
  color:         var(--tmt-text);
  background:    var(--tmt-surface);
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       12px;
  cursor:        pointer;
  transition:    border-color 0.15s;
  text-align:    left;
}

/* Sage on both skins: it is already the workshop accent, and on the
   office slate it reads as the active state without the amber shout. */
.tmt-dial-btn:hover,
.tmt-dial-btn.is-active {
  border-color: var(--sage);
}

.tmt-dial-sub {
  font-size:   11px;
  font-weight: 300;
  color:       var(--tmt-muted);
}

/* Set apart from the bullet list above and the save panel below with its
   own shade and header, so the cards visibly govern the text beneath them. */
.tmt-portfolio-verdict {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  background:     var(--tmt-accent-bg);
  border:         1px solid var(--tmt-border);
  border-radius:  8px;
  padding:        18px;
}

.tmt-portfolio-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   17px;
  color:       var(--tmt-ground-text);
}

.tmt-read-opening {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.6;
}

.tmt-read-cluster-line {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.6;
  margin-bottom: 6px;
}

.tmt-read-portfolio-note {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.6;
  margin-top:  10px;
}

/* The frame under the verdict: interview prep, never resume advice. */
.tmt-read-purpose {
  font-size:   12.5px;
  color:       var(--tmt-muted);
  line-height: 1.55;
  margin-top:  12px;
}

.tmt-dial-rerun-line {
  font-size:  11px;
  color:      var(--tmt-muted);
  opacity:    0.75;
  text-align: center;
}

/* ── Story step ─────────────────────────────────────────────────────────────── */

.tmt-story-progress {
  font-size:      10px;
  font-weight:    400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
  opacity:        0.7;
}

.tmt-story-bullet {
  font-size:   15px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

/* The existing filing, shown under the bullet when tags are already on
   it: the fork acknowledges what has been done before asking for more. */
.tmt-story-filed {
  font-family: var(--sans);
  font-size:   12.5px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

/* Navigation, not exit: kept visually and verbally distinct from Save
   and come back below. */
.tmt-story-back {
  align-self:  flex-start;
  font-family: var(--sans);
  font-size:   12px;
  color:       var(--tmt-muted);
  background:  transparent;
  border:      none;
  padding:     0;
  cursor:      pointer;
}

.tmt-story-back:hover { color: var(--tmt-text); }

.tmt-depth-fork {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.tmt-depth-required-note {
  font-size:  13px;
  color:      var(--tmt-accent);
  line-height: 1.5;
}

.tmt-depth-actions {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

.tmt-depth-actions button { flex: 1 1 160px; }

.tmt-story-questions {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.tmt-story-q-label {
  font-size:   13px;
  color:       var(--tmt-text);
  margin-top:  8px;
}

.tmt-story-q-help {
  font-size: 12px;
  color:     var(--tmt-muted);
}

.tmt-story-any-note {
  font-size:   12px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

.tmt-story-q-input {
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-text);
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 6px;
  padding:       10px 12px;
  resize:        vertical;
  line-height:   1.5;
}

.tmt-story-error {
  font-size:  13px;
  color:      var(--rose);
}

.tmt-story-loading {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  color:       var(--tmt-muted);
}

/* ── Tag picker ─────────────────────────────────────────────────────────────── */

.tmt-tag-picker {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.tmt-tag-prompt {
  font-size: 14px;
  color:     var(--tmt-text);
}

/* The story played back next to the proposal it produced, folded, with
   the way back to edit it. */
.tmt-tag-said summary {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--tmt-accent);
  cursor:         pointer;
}

.tmt-tag-said-body {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  margin-top:     10px;
}

.tmt-tag-said-label {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
  margin-top:     7px;
}

.tmt-tag-said-label:first-child { margin-top: 0; }

.tmt-tag-said-text {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

.tmt-tag-said-edit {
  font-family:     var(--sans);
  font-size:       12px;
  color:           var(--tmt-accent);
  background:      transparent;
  border:          none;
  padding:         0;
  margin-top:      10px;
  cursor:          pointer;
  text-decoration: underline;
}

.tmt-tag-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   8px;
}

@media (max-width: 480px) {
  .tmt-tag-grid { grid-template-columns: 1fr; }
}

.tmt-tag-grid.is-full-shake { animation: tmt-tag-shake 320ms ease; }

@keyframes tmt-tag-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.tmt-tag-btn {
  position:      relative;
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-family:   var(--sans);
  font-size:     13px;
  font-weight:   400;
  color:         var(--tmt-text);
  background:    transparent;
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       10px 12px;
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s;
  text-align:    left;
}

.tmt-tag-btn:hover { border-color: var(--tmt-accent); }

/* Unselected chips stay neutral, only the dot carries the cluster's
   colour. Selected chips fill with a muted wash of that same colour,
   the quiet dash described in the brief, not a flat highlight. */
.tmt-tag-btn.is-selected {
  border-color: var(--tmt-cluster-accent, var(--tmt-accent));
  background:   var(--tmt-cluster-wash, var(--tmt-accent-bg));
}

.tmt-tag-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--tmt-cluster-accent, var(--tmt-muted));
  flex-shrink:   0;
}

.tmt-tag-rank {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  border-radius:   50%;
  background:      var(--tmt-accent);
  color:           var(--white);
  font-size:       11px;
  font-weight:     500;
  flex-shrink:     0;
}

.tmt-tag-error {
  font-size: 13px;
  color:     var(--rose);
}

/* The full-picker swap message reuses this element but is not an error,
   it is teaching a swap, so it drops the alarm colour for the same
   plain text tone the rest of this screen uses. */
.tmt-tag-error.tmt-tag-error--full {
  color: var(--tmt-text);
}

/* ── The quiet saved note on the hub ────────────────────────────────────────── */

.tmt-coverage-saved-note {
  font-size:  12.5px;
  color:      var(--tmt-muted);
  text-align: center;
}

/* ── Save panel: the account gate, only at the save step ───────────────────── */

.tmt-save-panel {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  border-top:     1px solid var(--tmt-border);
  padding-top:    16px;
}

.tmt-save-line {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

.tmt-confirm-continue-error {
  font-size:  13px;
  color:      var(--rose);
  text-align: center;
}

/* ── Re-entry, on the entrance screen ───────────────────────────────────────── */
/* One link into the shared auth modal; the modal brings its own styles. */

.tmt-reentry-toggle {
  font-family:     var(--sans);
  font-size:       12px;
  font-weight:     300;
  color:           var(--tmt-muted);
  background:      transparent;
  border:          none;
  padding:         0;
  cursor:          pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:      color 0.12s;
  align-self:      center;
}

.tmt-reentry-toggle:hover { color: var(--tmt-text); }

/* ── Sorting intro, shown once before the hub ──────────────────────────────── */

/* Same reasoning as .tmt-hub-main below: this wrapper sets its own
   display, so [hidden] needs the same companion override every other
   screen-level element in this file already carries, or hiding beat one
   would get silently overridden by this rule instead. */
.tmt-sorting-intro-beat {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.tmt-sorting-intro-beat[hidden] { display: none; }

.tmt-sorting-intro-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   24px;
  color:       var(--tmt-ground-text);
}

.tmt-sorting-intro-body {
  font-size:   14px;
  color:       var(--tmt-text);
  line-height: 1.6;
}

/* ── Coverage map, the Sorting hub ─────────────────────────────────────────── */

/* .tmt-card already gives its direct children a 16px gap; wrapping the
   hub's main view in its own element (so the gap picker can swap in as a
   sibling) means this has to reproduce that same rhythm itself. */
.tmt-hub-main {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.tmt-coverage-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   24px;
  color:       var(--tmt-ground-text);
}

.tmt-coverage-narrative {
  font-size:   14px;
  color:       var(--tmt-text);
  line-height: 1.6;
}

/* A pointer, not an alarm: the accent tokens already used across this
   screen, not the rose warning colour. */
.tmt-coverage-failure-alert {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  align-items:    flex-start;
  border:         1px solid var(--tmt-accent);
  background:     var(--tmt-accent-bg);
  border-radius:  8px;
  padding:        14px 16px;
}

.tmt-coverage-failure-alert p {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.55;
}

.tmt-pointer-kicker {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
}

.tmt-map-heading {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
}

.tmt-map-subhead {
  font-size: 12px;
  color:     var(--tmt-muted);
}

.tmt-cluster-grid {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.tmt-cluster-row {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        10px 12px;
  border:         1px solid var(--tmt-border);
  border-radius:  6px;
  transition:     background 0.2s, border-color 0.2s;
}

/* Covered rows fill with the cluster's own muted wash, the same colour
   the tag chip carries, so the two visibly match. */
.tmt-cluster-row.is-covered {
  border-color: var(--tmt-cluster-accent, var(--tmt-border));
  background:   var(--tmt-cluster-wash, transparent);
}

.tmt-cluster-row.is-popping { animation: tmt-row-pop 280ms ease; }

/* Same timing as the Bucket List's bl-check-pop, defined locally since
   bucket-list.css is not loaded on this page. */
@keyframes tmt-row-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Label and state on one line regardless of label length; Fill this
   sits below as its own block, so every row holds the same shape. */
.tmt-cluster-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  width:           100%;
}

.tmt-cluster-label-wrap {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.tmt-cluster-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--tmt-cluster-accent, var(--tmt-muted));
  flex-shrink:   0;
}

.tmt-cluster-label {
  font-size: 13px;
  color:     var(--tmt-text);
}

.tmt-cluster-state {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
  white-space:    nowrap;
}

.tmt-cluster-state.is-covered { color: var(--tmt-cluster-accent, var(--tmt-accent)); }

/* Matched sits between nothing and covered: brighter than the muted
   empty state, never the covered accent, since the story is still owed. */
.tmt-cluster-state.is-matched { color: var(--tmt-text); }

.tmt-cluster-fill-btn {
  align-self:    flex-start;
  margin-top:    2px;
  font-family:   var(--sans);
  font-size:     11px;
  font-weight:   500;
  color:         var(--tmt-accent);
  background:    transparent;
  border:        1px solid var(--tmt-accent);
  border-radius: 6px;
  padding:       5px 10px;
  cursor:        pointer;
  white-space:   nowrap;
}

.tmt-cluster-fill-btn:hover { background: var(--tmt-accent-bg); }

/* ── Gap picker ─────────────────────────────────────────────────────────────── */

.tmt-gap-picker {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.tmt-gap-picker-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   24px;
  color:       var(--tmt-ground-text);
}

.tmt-gap-picker-about summary {
  font-family: var(--sans);
  font-size:   13px;
  color:       var(--tmt-muted);
  cursor:      pointer;
}

.tmt-gap-picker-about p {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.55;
  margin-top:  8px;
}

.tmt-gap-picker-instruction {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

.tmt-gap-picker-cap-note {
  font-size: 12px;
  color:     var(--tmt-muted);
}

.tmt-gap-picker-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

/* Group headers inside the picker list, so the count on the map row
   and the list it opens visibly agree. */
.tmt-gap-picker-group {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
  margin-top:     10px;
}

.tmt-gap-picker-group:first-child { margin-top: 0; }

/* The unmatched bulk of the bank, folded so the counted matches stay in
   front. */
.tmt-gap-picker-rest summary {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--tmt-accent);
  cursor:         pointer;
  margin-top:     10px;
}

.tmt-gap-picker-rest .tmt-gap-picker-list { margin-top: 8px; }

.tmt-gap-picker-item {
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-text);
  background:    var(--tmt-surface);
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       10px 12px;
  text-align:    left;
  cursor:        pointer;
  transition:    border-color 0.15s;
}

.tmt-gap-picker-item:hover { border-color: var(--tmt-accent); }

.tmt-gap-picker-empty {
  font-size:  13px;
  color:      var(--tmt-muted);
  line-height: 1.55;
}

/* ── Fast-tag the rest ─────────────────────────────────────────────────────── */

.tmt-hub-fasttag {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  border-top:     1px solid var(--tmt-border);
  padding-top:    16px;
}

.tmt-hub-fasttag-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   15px;
  color:       var(--tmt-ground-text);
}

.tmt-hub-fasttag-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.tmt-hub-fasttag-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         8px 12px;
  border:          1px solid var(--tmt-border);
  border-radius:   6px;
}

.tmt-hub-fasttag-text {
  font-size:      13px;
  color:          var(--tmt-text);
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.tmt-hub-fasttag-btn {
  flex-shrink: 0;
  min-width:   auto;
  padding:     8px 14px;
  font-size:   12px;
}

.tmt-coverage-nudge {
  border:        1px solid var(--tmt-accent);
  background:    var(--tmt-accent-bg);
  border-radius: 8px;
  padding:       16px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
}

.tmt-coverage-nudge-line {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.55;
}

.tmt-coverage-nudge-bullet {
  font-size:  12px;
  color:      var(--tmt-muted);
  font-style: italic;
}

.tmt-coverage-nudge-actions {
  display: flex;
  gap:     10px;
  flex-wrap: wrap;
}

/* One-shot save confirmation at the top of the hub. Its own opaque
   green, the same family as the Banked pill, so it reads as a done
   thing on both skins and never twins with the accent NEXT card that
   sits right below it. */
.tmt-save-banner {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  border:         1px solid #5c8a7a;
  background:     #e4efe8;
  border-radius:  8px;
  padding:        13px 15px;
}

.tmt-save-banner[hidden] { display: none; }

.tmt-save-banner-line {
  font-size:   13.5px;
  font-weight: 500;
  color:       #3d6655;
  line-height: 1.5;
}

.tmt-save-banner-note {
  font-size:   13px;
  color:       #3d6655;
  line-height: 1.55;
}

/* The door to Practicing, shown once the minimum exists */
.tmt-hub-practice {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-items:    center;
  border-top:     1px solid var(--tmt-border);
  padding-top:    16px;
}

.tmt-hub-practice[hidden] { display: none; }

.tmt-hub-practice-note {
  font-size: 12px;
  color:     var(--tmt-muted);
  text-align: center;
}

/* The start-over pointer: present, never promoted. */
.tmt-hub-startover {
  font-size:   12px;
  color:       var(--tmt-muted);
  line-height: 1.5;
  text-align:  center;
}

.tmt-hub-startover-link {
  font-family: var(--sans);
  font-size:   12px;
  color:       var(--tmt-muted);
  background:  transparent;
  border:      none;
  padding:     0;
  cursor:      pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:  color 0.12s;
}

.tmt-hub-startover-link:hover { color: var(--tmt-text); }

/* ── Practicing ─────────────────────────────────────────────────────────────── */

.tmt-rep-start,
.tmt-rep-run,
.tmt-rep-debrief {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.tmt-rep-start[hidden],
.tmt-rep-run[hidden],
.tmt-rep-debrief[hidden] { display: none; }

/* The run's three wrappers stack in source order on a phone. On desktop
   the grid moves the support panels into a right column beside the
   question and the box, so reading them never pushes the work down. */
.tmt-rep-lead,
.tmt-rep-work {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.tmt-rep-side {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

@media (min-width: 900px) {
  .tmt-rep-run:not([hidden]) {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:   "lead side" "work side";
    gap:                   14px 26px;
    align-items:           start;
  }
  .tmt-rep-lead { grid-area: lead; }
  .tmt-rep-side { grid-area: side; }
  .tmt-rep-work { grid-area: work; }
}

/* One line under the counter it explains. */
.tmt-rep-banked-note {
  font-family: var(--sans);
  font-size:   12px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

.tmt-rep-clear {
  margin-left:     auto;
  font-family:     var(--sans);
  font-size:       12px;
  color:           var(--tmt-muted);
  background:      transparent;
  border:          none;
  padding:         0;
  cursor:          pointer;
  text-decoration: underline;
}

.tmt-rep-kicker {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--tmt-accent);
}

.tmt-rep-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   30px;
  line-height: 1.08;
  color:       var(--tmt-ground-text);
}

.tmt-rep-lede {
  font-size:   14px;
  color:       var(--tmt-muted);
  line-height: 1.6;
}

.tmt-rep-bank-note {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.55;
}

/* The banked list on the start screen: every cold answer, one tap from
   a rehearsal. */
.tmt-rep-banked {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     10px;
  padding-top:    16px;
  border-top:     1px solid var(--tmt-border);
}

.tmt-rep-banked-blurb {
  font-size: 12.5px;
  color:     var(--tmt-muted);
}

.tmt-rep-banked-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.tmt-rep-banked-item {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  text-align:     left;
  font-family:    var(--sans);
  background:     var(--tmt-surface);
  border:         1px solid var(--tmt-border);
  border-radius:  8px;
  padding:        10px 12px;
  cursor:         pointer;
  transition:     border-color 0.15s;
}

.tmt-rep-banked-item:hover { border-color: var(--tmt-accent); }

.tmt-rep-banked-item-skill {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
}

.tmt-rep-banked-item-text {
  font-size: 13px;
  color:     var(--tmt-text);
}

.tmt-rep-role-input {
  font-family:   var(--sans);
  font-size:     14px;
  color:         var(--tmt-text);
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       11px 13px;
}

.tmt-rep-voices {
  display: flex;
  gap:     8px;
}

.tmt-rep-voice {
  flex:          1 1 0;
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-muted);
  background:    transparent;
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       10px;
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s, color 0.15s;
}

.tmt-rep-voice.is-selected {
  border-color: var(--tmt-accent);
  background:   var(--tmt-accent-bg);
  color:        var(--tmt-text);
}

/* The sample circle: tap to hear the voice without selecting it. */
.tmt-rep-voice-sample {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  margin-left:     7px;
  border:          1px solid currentColor;
  border-radius:   50%;
  font-size:       8px;
  line-height:     1;
  vertical-align:  middle;
}

.tmt-rep-sr-note {
  font-size:  12px;
  color:      var(--tmt-muted);
  text-align: center;
}

.tmt-rep-run-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
}

.tmt-rep-meta {
  font-size: 13px;
  color:     var(--tmt-muted);
}

.tmt-rep-question {
  font-family: var(--serif);
  font-weight: 700;
  font-size:   24px;
  line-height: 1.15;
  color:       var(--tmt-ground-text);
}

.tmt-rep-hear {
  align-self:  flex-start;
  font-family: var(--sans);
  font-size:   12px;
  color:       var(--tmt-accent);
  background:  transparent;
  border:      none;
  padding:     0;
  cursor:      pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Your material: the bank's own bullets and story beats beside the
   answer box, never inside it. */
.tmt-rep-material {
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       12px 14px;
}

.tmt-rep-material summary {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--tmt-accent);
  cursor:         pointer;
}

.tmt-rep-shape {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
  margin-top:  10px;
}

.tmt-rep-material-body {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     10px;
}

.tmt-rep-material-row {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.tmt-rep-material-label {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--tmt-muted);
}

.tmt-rep-material-text {
  font-size:   13px;
  color:       var(--tmt-text);
  line-height: 1.5;
}

.tmt-rep-material-note {
  font-size:   12.5px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

/* The two small controls under the answer box: the coach's draft on
   the left, clear on the right. */
.tmt-rep-answer-tools {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
}

.tmt-rep-draft,
.tmt-rep-edit {
  font-family:     var(--sans);
  font-size:       12px;
  color:           var(--tmt-accent);
  background:      transparent;
  border:          none;
  padding:         0;
  cursor:          pointer;
  text-decoration: underline;
}

/* A rehearsal holds the banked answer read-only until Edit unlocks it. */
.tmt-rep-answer.is-locked {
  background: var(--tmt-accent-bg);
  cursor:     default;
}

.tmt-rep-draft:disabled {
  cursor:          default;
  text-decoration: none;
  opacity:         0.7;
}

/* The writing is happening: the control breathes until the draft
   lands, so a several second wait never reads as a dead tap. */
.tmt-rep-draft.is-writing {
  animation: tmt-draft-pulse 1.1s ease-in-out infinite;
}

@keyframes tmt-draft-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.tmt-rep-answer {
  font-family:   var(--sans);
  font-size:     14px;
  color:         var(--tmt-text);
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       12px 14px;
  resize:        vertical;
  line-height:   1.6;
}

.tmt-rep-error {
  font-size: 13px;
  color:     var(--rose);
}

.tmt-rep-actions {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

.tmt-rep-mic {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-family:   var(--sans);
  font-size:     13px;
  color:         var(--tmt-accent);
  background:    transparent;
  border:        1px solid var(--tmt-accent);
  border-radius: 8px;
  padding:       11px 16px;
  cursor:        pointer;
}

.tmt-rep-mic-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--tmt-accent);
  flex-shrink:   0;
}

.tmt-rep-mic.is-listening {
  color:        var(--rose);
  border-color: var(--rose);
}

.tmt-rep-mic.is-listening .tmt-rep-mic-dot {
  background: var(--rose);
  animation:  tmt-mic-pulse 1s infinite;
}

@keyframes tmt-mic-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.tmt-rep-leave {
  margin-left: auto;
  font-family: var(--sans);
  font-size:   13px;
  color:       var(--tmt-muted);
  background:  transparent;
  border:      none;
  padding:     0;
  cursor:      pointer;
}

.tmt-rep-leave:hover { color: var(--tmt-text); }

.tmt-rep-result {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  border-top:     1px solid var(--tmt-border);
  padding-top:    18px;
}

.tmt-rep-band-row {
  display:     flex;
  align-items: center;
  gap:         12px;
}

/* Band pills carry their own opaque backgrounds so they read the same
   on both skins. */
.tmt-rep-band {
  font-family:    var(--sans);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        5px 13px;
  border-radius:  999px;
  white-space:    nowrap;
}

.tmt-rep-band--banked { color: #3d6655; background: #e4efe8; }
.tmt-rep-band--close  { color: #a97e2e; background: #f7efd4; }
.tmt-rep-band--rework { color: #a85f43; background: #f4e4db; }

.tmt-rep-band-note {
  font-size: 13px;
  color:     var(--tmt-muted);
}

.tmt-rep-block {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.tmt-rep-block[hidden] { display: none; }

.tmt-rep-fix {
  font-size:   14.5px;
  color:       var(--tmt-text);
  line-height: 1.55;
}

.tmt-rep-opening-wrap {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  background:     var(--tmt-accent-bg);
  border-radius:  10px;
  padding:        13px 15px;
}

.tmt-rep-opening-wrap[hidden] { display: none; }

.tmt-rep-opening {
  font-family: var(--serif);
  font-size:   17px;
  line-height: 1.35;
  color:       var(--tmt-text);
}

.tmt-rep-followup {
  font-size:   14px;
  color:       var(--tmt-muted);
  line-height: 1.5;
}

.tmt-rep-result-actions {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.tmt-rep-history {
  display: grid;
  gap:     8px;
}

.tmt-rep-history-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  border:          1px solid var(--tmt-border);
  border-radius:   8px;
  padding:         11px 13px;
}

.tmt-rep-history-question {
  font-size: 13.5px;
  color:     var(--tmt-text);
  flex:      1 1 auto;
}

.tmt-rep-history-empty {
  font-size: 14px;
  color:     var(--tmt-muted);
}

/* ── Disclosure ─────────────────────────────────────────────────────────────── */

.tmt-disclosure { margin-bottom: 8px; }

.tmt-disclosure-trigger {
  font-family: var(--sans);
  font-size:   12px;
  font-weight: 300;
  color:       var(--tmt-muted);
  background:  transparent;
  border:      none;
  padding:     0;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  gap:         6px;
  transition:  color 0.12s;
}

.tmt-disclosure-trigger:hover { color: var(--tmt-text); }

.tmt-disclosure-arrow {
  font-size:  9px;
  display:    inline-block;
  transition: transform 0.2s ease;
}

.tmt-disclosure-trigger[aria-expanded="true"] .tmt-disclosure-arrow { transform: rotate(90deg); }

.tmt-disclosure-panel {
  margin-top:    16px;
  background:    var(--tmt-accent-bg);
  border:        1px solid var(--tmt-border);
  border-radius: 8px;
  padding:       20px;
}

.tmt-disclosure-panel p {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       var(--tmt-muted);
  line-height: 1.65;
  margin:      0 0 10px;
}

.tmt-disclosure-panel p:last-child { margin-bottom: 0; }

/* ── Scrub button ───────────────────────────────────────────────────────────── */

.tmt-scrub-area { margin: 16px 0 0; }

.tmt-scrub-btn {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   400;
  color:         var(--rose);
  background:    transparent;
  border:        1px solid rgba(181, 110, 110, 0.4);
  border-radius: 6px;
  padding:       8px 16px;
  cursor:        pointer;
  transition:    border-color 0.12s, background 0.12s;
}

.tmt-scrub-btn:hover {
  border-color: var(--rose);
  background:   rgba(181, 110, 110, 0.08);
}

.tmt-scrub-confirm { margin-top: 14px; }

.tmt-scrub-confirm-msg {
  font-family: var(--sans);
  font-size:   13px;
  font-weight: 300;
  color:       var(--tmt-muted);
  line-height: 1.55;
  margin:      0 0 12px;
}

.tmt-scrub-confirm-btns {
  display:     flex;
  gap:         10px;
  align-items: center;
  flex-wrap:   wrap;
}

.tmt-scrub-confirm-yes {
  font-family:   var(--sans);
  font-size:     12px;
  font-weight:   400;
  color:         var(--white);
  background:    var(--rose);
  border:        none;
  border-radius: 6px;
  padding:       8px 16px;
  cursor:        pointer;
  transition:    opacity 0.12s;
}

.tmt-scrub-confirm-yes:hover:not(:disabled) { opacity: 0.82; }
.tmt-scrub-confirm-yes:disabled             { opacity: 0.45; cursor: default; }

.tmt-scrub-cancel-btn {
  font-family:        var(--sans);
  font-size:           12px;
  font-weight:         300;
  color:               var(--tmt-muted);
  background:          transparent;
  border:              none;
  padding:             0;
  cursor:              pointer;
  text-decoration:     underline;
  text-underline-offset: 2px;
  transition:          color 0.12s;
}

.tmt-scrub-cancel-btn:hover { color: var(--tmt-text); }

.tmt-scrub-done {
  font-family:  var(--sans);
  font-size:    13px;
  font-weight:  300;
  color:        var(--tmt-muted);
  margin:       12px 0 0;
  font-style:   italic;
}

/* ── Footer credit ──────────────────────────────────────────────────────────── */

.tmt-rule {
  border:      none;
  border-top:  1px solid var(--tmt-border);
  margin:      8px 0 0;
}

.tmt-credit {
  text-align: center;
  font-size:  12px;
}

.tmt-credit a {
  color:           var(--tmt-muted);
  text-decoration: none;
  border-bottom:   1px solid transparent;
  transition:      color 0.15s, border-color 0.15s;
}

.tmt-credit a:hover { color: var(--tmt-text); border-bottom-color: var(--tmt-border); }

/* ── Feedback widget ────────────────────────────────────────────────────────── */

.tmt-feedback-host { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .tmt-card { padding: 18px 16px; }
}