/* ==========================================================================
   TruField Portal — Frontend Stylesheet
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────────*/
:root {
  --tf-green:        #2d7a3c;
  --tf-green-light:  #eaf5ec;
  --tf-gold:         #c5910a;
  --tf-gold-light:   #fdf4d9;
  --tf-red:          #c0392b;
  --tf-red-light:    #fdf0ee;
  --tf-grey-900:     #1a1a2e;
  --tf-grey-700:     #444;
  --tf-grey-400:     #999;
  --tf-grey-100:     #f5f6fa;
  --tf-white:        #fff;
  --tf-border:       #dde1e9;
  --tf-radius:       8px;
  --tf-shadow:       0 2px 8px rgba(0,0,0,.08);
  --tf-shadow-lg:    0 4px 20px rgba(0,0,0,.12);
  --tf-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tf-mono:         ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
html { background: var(--tf-white); overflow-x: clip; }
body { margin: 0; overflow-x: clip; font-family: var(--tf-font); background: var(--tf-grey-100); color: var(--tf-grey-900); line-height: 1.6; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--tf-green); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
.tf-portal-wrap [hidden] { display: none !important; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.tf-portal-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.tf-main        { flex: 1 1 auto; padding: 2rem 0; }
.tf-container   { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.tf-header { background: var(--tf-white); border-bottom: 1px solid var(--tf-border); box-shadow: var(--tf-shadow); position: sticky; top: 0; z-index: 100; }
.tf-header__inner { max-width: 1100px; margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.tf-header__logo { font-size: 1.2rem; font-weight: 700; color: var(--tf-green); display: flex; align-items: center; gap: .5rem; }
.tf-header__logo:hover { text-decoration: none; }
.tf-header__portal-badge { font-size: .7rem; background: var(--tf-green); color: var(--tf-white); padding: .15em .5em; border-radius: 20px; font-weight: 600; letter-spacing: .03em; }
.tf-header--public-auth {
  position: static;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.tf-header--public-auth .tf-header__inner {
  justify-content: center;
  padding: 1.4rem 1.25rem;
}
.tf-header__logo--auth {
  justify-content: center;
  color: inherit;
}
.tf-brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.tf-brand-wordmark__name {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--tf-green);
}
.tf-brand-wordmark__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .25rem .9rem;
  border-radius: 999px;
  background: var(--tf-green);
  color: var(--tf-white);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 700;
  letter-spacing: .01em;
}
.tf-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .5rem;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  background: var(--tf-white);
  color: var(--tf-grey-700);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tf-nav-toggle:hover { background: var(--tf-grey-100); }
.tf-nav-toggle:focus-visible {
  outline: 2px solid var(--tf-green);
  outline-offset: 2px;
}
.tf-nav-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
.tf-nav-toggle__icon span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .15s ease, opacity .15s ease;
}
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__icon span:nth-child(2) { opacity: 0; }
.tf-nav-toggle[aria-expanded="true"] .tf-nav-toggle__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.tf-nav { display: flex; gap: 1.25rem; margin-left: auto; }
.tf-nav__link { font-weight: 500; color: var(--tf-grey-700); padding: .25rem 0; border-bottom: 2px solid transparent; }
.tf-nav__link--active,
.tf-nav__link:hover { color: var(--tf-green); border-bottom-color: var(--tf-green); text-decoration: none; }
.tf-nav__link--logout { display: none; }
.tf-header__user { display: flex; align-items: center; gap: 1rem; font-size: .875rem; color: var(--tf-grey-700); white-space: nowrap; }
.tf-header__greeting { font-weight: 600; color: var(--tf-grey-900); }

body.admin-bar .tf-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .tf-header {
    top: 0;
  }
}

@media (max-width: 1100px) {
  .tf-header__inner {
    gap: .9rem;
  }
  .tf-nav {
    gap: .85rem;
  }
  .tf-nav__link {
    font-size: .92rem;
  }
  .tf-header__user {
    min-width: 0;
    gap: .7rem;
    flex-shrink: 1;
  }
  .tf-header__greeting {
    display: inline-block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.tf-footer { background: var(--tf-white); border-top: 1px solid var(--tf-border); padding: 1rem 0; }
.tf-footer__inner { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; text-align: center; font-size: .8rem; color: var(--tf-grey-400); }
.tf-footer--public-auth {
  background: transparent;
  border-top-color: #263238;
}
.tf-footer--public-auth .tf-footer__inner {
  padding: 1.25rem;
  color: var(--tf-grey-700);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .55rem 1.2rem; border-radius: var(--tf-radius);
  font-size: .9rem; font-weight: 600; cursor: pointer; border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.tf-btn--primary { background: var(--tf-green); color: var(--tf-white); }
.tf-btn--primary:hover { background: #235f2e; color: var(--tf-white); text-decoration: none; }
.tf-btn--secondary { background: var(--tf-white); color: var(--tf-green); border-color: var(--tf-green); }
.tf-btn--secondary:hover { background: var(--tf-green-light); text-decoration: none; }
.tf-btn--ghost { background: transparent; color: var(--tf-grey-700); border-color: var(--tf-border); }
.tf-btn--ghost:hover { background: var(--tf-grey-100); text-decoration: none; }
.tf-btn--sm { padding: .3rem .75rem; font-size: .8rem; }
.tf-btn--full { width: 100%; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.tf-alert { padding: .75rem 1rem; border-radius: var(--tf-radius); margin-bottom: 1.25rem; font-size: .9rem; }
.tf-alert--success { background: var(--tf-green-light); color: var(--tf-green); border-left: 4px solid var(--tf-green); }
.tf-alert--error   { background: var(--tf-red-light); color: var(--tf-red); border-left: 4px solid var(--tf-red); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.tf-field-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.tf-field-group,
.tf-field-group > * {
  min-width: 0;
  max-width: 100%;
}
.tf-field-group label { font-weight: 600; font-size: .875rem; color: var(--tf-grey-700); }
.tf-field-group label small { font-weight: 400; color: var(--tf-grey-400); margin-left: .25rem; }
.tf-input, .tf-textarea, .tf-select {
  padding: .55rem .8rem; border: 1px solid var(--tf-border); border-radius: var(--tf-radius);
  font-size: .95rem; font-family: var(--tf-font); background: var(--tf-white);
  color: #000;
  -webkit-text-fill-color: #000;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.tf-input::placeholder, .tf-textarea::placeholder { color: #8a9099; opacity: 1; }
.tf-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #000;
  -webkit-text-fill-color: #000;
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 14px 14px;
}
.tf-input,
.tf-textarea,
.tf-select,
.tf-input option,
.tf-select option {
  color: #000;
  -webkit-text-fill-color: #000;
}
.tf-input--date {
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 2V5M17 2V5M3 9H21M5 4H19C20.1046 4 21 4.89543 21 6V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V6C3 4.89543 3.89543 4 5 4Z' stroke='%23556273' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 16px 16px;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-input--date::-webkit-datetime-edit,
.tf-input--date::-webkit-datetime-edit-fields-wrapper,
.tf-input--date::-webkit-date-and-time-value {
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
.tf-input--date::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}
.tf-input:focus, .tf-textarea:focus, .tf-select:focus {
  outline: none; border-color: var(--tf-green); box-shadow: 0 0 0 3px rgba(45,122,60,.15);
}
.tf-textarea { resize: vertical; }
.tf-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.5rem; }
.tf-form-grid > * { min-width: 0; }
.tf-field-group--inline { flex-direction: row; align-items: center; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.tf-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tf-table th, .tf-table td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--tf-border); }
.tf-table th { font-weight: 600; background: var(--tf-grey-100); color: var(--tf-grey-700); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tf-table tbody tr:hover { background: rgba(45,122,60,.04); }
.tf-table__rank { width: 60px; text-align: center; }
.tf-table__num  { text-align: right; }
.tf-table__num--highlight { color: var(--tf-green); }
.tf-table__num--muted { color: var(--tf-grey-400); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.tf-badge { display: inline-block; padding: .2em .55em; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.tf-badge--gold   { background: #fef9e7; color: #b7860b; }
.tf-badge--silver { background: #f0f0f0; color: #666; }
.tf-badge--bronze { background: #fdf2ea; color: #a0522d; }
.tf-badge--me     { background: var(--tf-green-light); color: var(--tf-green); margin-left: .4rem; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.tf-status-badge { display: inline-block; padding: .2em .6em; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.tf-status-badge--active   { background: var(--tf-green-light); color: var(--tf-green); }
.tf-status-badge--archived { background: #f0f0f0; color: #888; }
.tf-status-badge--on_hold  { background: var(--tf-red-light); color: var(--tf-red); }

/* ── Login page ──────────────────────────────────────────────────────────── */
.tf-auth-shell {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 3.5rem 1rem 4rem;
}
.tf-auth-card {
  width: min(100%, 760px);
  padding: 3rem 2.75rem 2.25rem;
  border: 1px solid #263238;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 36px rgba(15,23,42,.08);
}
.tf-auth-card--login {
  max-width: 720px;
}
.tf-auth-card__header {
  max-width: 420px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.tf-auth-card__title {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.tf-auth-card__intro {
  margin: 1rem auto 0;
  max-width: 30rem;
  color: var(--tf-grey-700);
  font-size: 1rem;
  line-height: 1.55;
}
.tf-login-form {
  max-width: 420px;
  margin: 0 auto;
}
.tf-auth-card .tf-field-group {
  margin-bottom: .85rem;
}
.tf-auth-card .tf-input {
  min-height: 3.35rem;
  padding: .85rem 1rem;
  border: 1.5px solid #263238;
  border-radius: 0;
  font-size: 1rem;
}
.tf-auth-card .tf-input::placeholder {
  color: #4f5b62;
}
.tf-auth-card .tf-input:focus {
  border-color: var(--tf-green);
  box-shadow: 0 0 0 3px rgba(45,122,60,.12);
}
.tf-auth-card__submit {
  width: auto;
  min-width: 8.25rem;
  margin: 1.15rem auto 0;
  padding: .8rem 1.6rem;
  border: 1.5px solid #263238;
  border-radius: 0;
  background: var(--tf-white);
  color: var(--tf-grey-900);
  box-shadow: none;
}
.tf-auth-card__submit:hover {
  background: var(--tf-grey-100);
  color: var(--tf-grey-900);
}
.tf-auth-card__links {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 2rem;
  font-size: .96rem;
}
.tf-auth-card__links--stacked {
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.tf-auth-card__links a {
  color: #5c61d6;
  text-decoration: underline;
  text-underline-offset: .12em;
}
.tf-auth-card__links--stacked a:last-child {
  color: var(--tf-grey-700);
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.tf-dashboard-page { max-width: 1100px; }
.tf-dashboard-shell { display: flex; flex-direction: column; gap: 1.25rem; }
.tf-dashboard-hero { display: flex; flex-direction: column; gap: .85rem; }
.tf-dashboard-hero__heading h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.02; letter-spacing: -.04em; }
.tf-dashboard-hero__support { margin: .45rem 0 0; max-width: 44rem; color: var(--tf-grey-700); font-size: .92rem; }
.tf-dashboard-topline { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.tf-dashboard-overview {
  padding: 1rem;
  border: 1px solid rgba(38,50,56,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.98));
  box-shadow: var(--tf-shadow-lg);
}
.tf-dashboard-overview__eyebrow,
.tf-dashboard-trials__eyebrow {
  margin: 0 0 .25rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tf-green);
}
.tf-dashboard-overview__title,
.tf-dashboard-trials__title {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.1;
}
.tf-dashboard-overview__copy { margin: .45rem 0 0; max-width: 38rem; color: var(--tf-grey-700); font-size: .9rem; }
.tf-dashboard-overview__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .9rem;
}
.tf-dashboard-stat {
  padding: .75rem .75rem .8rem;
  border: 1px solid rgba(38,50,56,.12);
  background: rgba(255,255,255,.92);
}
.tf-dashboard-stat__label { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-grey-400); }
.tf-dashboard-stat__value { display: block; margin-top: .4rem; font-size: 1.2rem; line-height: 1; color: var(--tf-grey-900); }
.tf-dashboard-overview__actions { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .9rem; align-items: center; }
.tf-dashboard-overview__actions .tf-btn,
.tf-field-card__cta {
  min-height: 2.65rem;
  padding: .65rem 1rem;
}
.tf-dashboard-trials {
  padding: 1rem;
  border: 1px solid rgba(38,50,56,.16);
  background: rgba(255,255,255,.96);
  box-shadow: var(--tf-shadow);
}
.tf-dashboard-trials__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.tf-dashboard-trials__heading { min-width: 0; }
.tf-dashboard-trials__copy { margin: .4rem 0 0; max-width: 34rem; color: var(--tf-grey-700); font-size: .9rem; }
.tf-trial-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  align-items: start;
  margin-bottom: 1rem;
  padding: .95rem 1rem;
  border: 1px solid rgba(38,50,56,.08);
  background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.96));
}
.tf-trial-filter-form {
  display: grid;
  gap: .45rem;
  align-items: start;
  margin: 0;
}
.tf-trial-filter-form__label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tf-green); }
.tf-trial-filter-form__controls { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.tf-trial-filter-form__select {
  min-height: 48px;
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  border-color: rgba(45,122,60,.14);
  background: rgba(255,255,255,.96);
}
.tf-trial-search {
  margin-top: 0;
  max-width: none;
  min-width: 0;
}
.tf-trial-search__label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tf-green); }
.tf-trial-search__input { min-height: 48px; border-radius: 14px; border-color: rgba(45,122,60,.14); background: rgba(255,255,255,.9); }
.tf-trial-search__hint { margin: .45rem 0 0; font-size: .85rem; color: var(--tf-grey-400); }
.tf-dashboard-header__count { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .35rem .75rem; border: 1px solid rgba(38,50,56,.14); background: rgba(247,249,252,.95); color: var(--tf-grey-700); font-size: .84rem; line-height: 1.2; letter-spacing: .01em; }
.tf-create-panel {
  width: 100%;
  padding: .95rem;
  border: 1px solid rgba(45,122,60,.12);
  border-radius: 0;
  background:
    radial-gradient(circle at top right, rgba(234,245,236,.95), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.98));
  box-shadow: var(--tf-shadow-lg);
}
.tf-create-panel__header { margin-bottom: .9rem; }
.tf-create-panel__eyebrow {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tf-green);
}
.tf-create-panel__title { margin: 0; font-size: 1.35rem; line-height: 1.1; }
.tf-create-panel__copy { margin: .35rem 0 0; color: var(--tf-grey-700); font-size: .9rem; }
.tf-quick-create-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(180px, 1fr)) auto;
  gap: .6rem;
  width: 100%;
  padding: .2rem;
  align-items: end;
}
.tf-quick-create-form__field {
  margin-bottom: 0;
}
.tf-quick-create-form__input {
  min-width: 0;
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border-color: rgba(45,122,60,.14);
  background: rgba(255,255,255,.92);
  font-size: 1rem;
}
.tf-quick-create-form .tf-btn {
  min-height: 50px;
  padding-inline: 1rem;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(45,122,60,.12);
}

.tf-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; }
.tf-field-grid--dashboard { gap: 1rem; }
.tf-field-grid[data-tf-trial-view-mode="list"] { grid-template-columns: 1fr; gap: .85rem; }
.tf-empty-state { text-align: center; padding: 3rem 1rem; color: var(--tf-grey-400); }
.tf-empty-state p { max-width: 40rem; margin: 0 auto; }
.tf-empty-state--search {
  margin-top: 1.25rem;
  border: 1px dashed rgba(45,122,60,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
}

.tf-dashboard-trials__meta { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; justify-content: flex-end; }
.tf-trial-view-toggle { display: inline-flex; align-items: center; gap: .65rem; }
.tf-trial-view-toggle__label { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tf-grey-400); }
.tf-trial-view-toggle__buttons { display: inline-flex; align-items: center; padding: .2rem; border: 1px solid rgba(38,50,56,.14); background: rgba(255,255,255,.92); }
.tf-trial-view-toggle__button { appearance: none; border: 0; background: transparent; color: var(--tf-grey-700); font: inherit; font-size: .84rem; font-weight: 600; padding: .45rem .8rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tf-trial-view-toggle__button:hover,
.tf-trial-view-toggle__button:focus-visible { background: rgba(45,122,60,.08); color: var(--tf-green); outline: none; }
.tf-trial-view-toggle__button.is-active { background: var(--tf-green); color: var(--tf-white); }

/* ── Field card ──────────────────────────────────────────────────────────── */
.tf-field-card { background: var(--tf-white); border: 1px solid rgba(38,50,56,.16); border-radius: 0; box-shadow: var(--tf-shadow); transition: box-shadow .15s, transform .1s; }
.tf-field-card:hover { box-shadow: var(--tf-shadow-lg); transform: translateY(-2px); }
.tf-field-card--archived { opacity: .65; }
.tf-field-card__body { display: flex; flex-direction: column; gap: .7rem; padding: .9rem; min-height: 100%; }
.tf-field-card__header { display: flex; align-items: center; gap: .75rem; margin-bottom: .55rem; }
.tf-field-card__title { margin: 0; font-size: 1rem; flex: 1; line-height: 1.3; }
.tf-field-card__details { display: grid; gap: .4rem; margin: 0; }
.tf-field-card__detail-row { display: grid; grid-template-columns: minmax(72px, auto) 1fr; gap: .5rem; font-size: .84rem; }
.tf-field-card__detail-row dt { margin: 0; font-weight: 700; color: var(--tf-grey-400); }
.tf-field-card__detail-row dd { margin: 0; color: var(--tf-grey-900); min-width: 0; word-break: break-word; }
.tf-field-card__detail-row--workflow { align-items: start; }
.tf-field-card__phases { display: flex; gap: .4rem; flex-wrap: wrap; }
.tf-phase-pip { font-size: .8rem; display: flex; align-items: center; gap: .2rem; padding: .2em .5em; border-radius: 4px; font-weight: 600; }
.tf-phase-pip--pending     { background: var(--tf-grey-100); color: var(--tf-grey-400); }
.tf-phase-pip--in_progress { background: var(--tf-gold-light); color: var(--tf-gold); }
.tf-phase-pip--completed   { background: var(--tf-green-light); color: var(--tf-green); }
.tf-phase-pip--verified    { background: rgba(234,245,236,.92); color: var(--tf-green); }
.tf-field-card__summary { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--tf-grey-700); min-height: 2.5em; }
.tf-field-card__footer { margin-top: auto; padding-top: .15rem; }
.tf-field-card__cta { min-width: 7.6rem; }
.tf-field-card__score { font-size: .85rem; color: var(--tf-grey-700); }
.tf-field-card__score-num { font-weight: 700; color: var(--tf-green); }
.tf-field-card__score-pending { color: var(--tf-grey-400); margin-left: .4rem; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__body { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1.6fr) minmax(0, 1.15fr) auto; align-items: center; gap: .75rem 1.15rem; padding: .7rem .9rem; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__header { grid-column: 1; grid-row: 1; margin-bottom: 0; align-self: center; min-width: 0; justify-content: center; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__details { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; justify-content: center; min-width: 0; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__detail-row { display: inline-flex; grid-template-columns: none; gap: .35rem; align-items: center; justify-content: center; font-size: .78rem; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__detail-row dt { white-space: nowrap; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__summary { grid-column: 3; grid-row: 1; min-height: 0; margin: 0; font-size: .8rem; line-height: 1.35; text-align: center; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__footer { grid-column: 4; grid-row: 1; margin-top: 0; padding-top: 0; display: flex; justify-content: flex-end; align-items: center; }
.tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__cta { white-space: nowrap; }

/* ── Single plant field ──────────────────────────────────────────────────── */
.tf-back-link { font-size: .85rem; color: var(--tf-grey-400); display: inline-block; margin-bottom: .75rem; }
.tf-record-header { margin-bottom: 2rem; }
.tf-record-header__eyebrow { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-green); }
.tf-record-header__title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tf-record-header__title-row h1 { margin: 0; font-size: 1.8rem; }
.tf-record-header__support { margin: .6rem 0 0; max-width: 54rem; color: var(--tf-grey-700); }
.tf-record-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: .9rem; margin: .75rem 0; color: var(--tf-grey-700); }
.tf-record-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.tf-phase-status-panel { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(45,122,60,.16); border-radius: var(--tf-radius); background: linear-gradient(180deg, rgba(234,245,236,.92), rgba(255,255,255,.98)); }
.tf-phase-status-panel__eyebrow { margin: 0 0 .3rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tf-green); }
.tf-phase-status-panel__title { margin: 0; font-size: 1.05rem; }
.tf-phase-status-panel__copy,
.tf-phase-status-panel__note { margin: .45rem 0 0; }
.tf-phase-status-panel__copy { color: var(--tf-grey-700); }
.tf-phase-status-panel__note { font-size: .88rem; color: var(--tf-grey-400); }
.tf-score-summary { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.tf-score-summary__verified { font-size: 1.1rem; color: var(--tf-green); }
.tf-score-summary__verified strong { font-size: 1.5rem; }
.tf-score-summary__pending { font-size: .9rem; color: var(--tf-grey-400); }

/* ── Phase sections ──────────────────────────────────────────────────────── */
.tf-section { background: var(--tf-white); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); box-shadow: var(--tf-shadow); padding: 1.5rem; margin-bottom: 1.25rem; }
.tf-section--growers { margin-bottom: 1.5rem; }
.tf-phase__header { margin-bottom: 1rem; }
.tf-phase__title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tf-phase__title { margin: 0; font-size: 1.1rem; }
.tf-phase__status { font-size: .8rem; font-weight: 700; padding: .2em .6em; border-radius: 20px; }
.tf-phase__status--pending     { background: var(--tf-grey-100); color: var(--tf-grey-400); }
.tf-phase__status--in_progress { background: var(--tf-gold-light); color: var(--tf-gold); }
.tf-phase__status--completed   { background: var(--tf-green-light); color: var(--tf-green); }
.tf-phase__points { font-size: .8rem; color: var(--tf-grey-400); margin-left: auto; }
.tf-phase__intro {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(45,122,60,.12);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(234,245,236,.72), rgba(255,255,255,.98));
}
.tf-phase__intro-copy { margin: 0 0 .75rem; color: var(--tf-grey-700); max-width: 56rem; }
.tf-assigned-details {
  margin: 0 0 .9rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(26,60,47,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.88);
}
.tf-assigned-details__title {
  margin: 0 0 .55rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tf-grey-400);
}
.tf-assigned-details__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .55rem .9rem;
  margin: 0;
}
.tf-assigned-details__list dt {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--tf-grey-400);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tf-assigned-details__list dd {
  margin: .12rem 0 0;
  color: var(--tf-grey-700);
  font-size: .92rem;
}
.tf-phase__helper-notes { display: flex; flex-wrap: wrap; gap: .5rem; }
.tf-phase__helper-note { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; background: var(--tf-grey-100); color: var(--tf-grey-700); font-size: .8rem; }
.tf-phase-disclosures {
  display: grid;
  gap: .8rem;
  margin-bottom: 1rem;
}
.tf-phase-disclosure {
  border: 1px solid rgba(38,50,56,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  overflow: hidden;
}
.tf-phase-disclosure__summary {
  list-style: none;
  cursor: pointer;
  padding: .9rem 1rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--tf-grey-900);
}
.tf-phase-disclosure__summary::-webkit-details-marker { display: none; }
.tf-phase-disclosure__summary::after {
  content: '+';
  float: right;
  color: var(--tf-green);
  font-size: 1rem;
  line-height: 1;
}
.tf-phase-disclosure[open] .tf-phase-disclosure__summary::after { content: '-'; }
.tf-phase-disclosure__content {
  padding: 0 1rem 1rem;
}
.tf-phase-disclosure--warning {
  border-color: rgba(197,145,10,.26);
  background: rgba(255,250,239,.92);
}
.tf-phase-disclosure--warning .tf-phase-disclosure__summary {
  color: #996b00;
}
.tf-phase__completed-at { font-size: .8rem; color: var(--tf-grey-400); margin: .25rem 0 0; }
.tf-phase__blocked-note { font-size: .85rem; color: var(--tf-gold); margin: .5rem 0 0; }
.tf-phase__readonly-note { margin: 0 0 .9rem; padding: .75rem .9rem; border-radius: var(--tf-radius); background: var(--tf-grey-100); color: var(--tf-grey-700); font-size: .9rem; }
.tf-phase__empty { color: var(--tf-grey-400); font-size: .9rem; }
.tf-upload-field {
  display: grid;
  gap: .8rem;
}
.tf-upload-field__preview {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: .9rem;
  border: 1px solid var(--tf-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(244,249,245,.9), rgba(255,255,255,.98));
}
.tf-upload-field__image-link {
  display: block;
}
.tf-upload-field__image,
.tf-readonly-photo__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(26,60,47,.08);
  background: var(--tf-grey-100);
}
.tf-upload-field__meta {
  display: grid;
  gap: .55rem;
  align-content: start;
}
.tf-upload-field__prompt {
  margin: 0 0 .1rem;
  font-size: .82rem;
  color: var(--tf-grey-700);
}
.tf-upload-field__link {
  font-weight: 600;
}
.tf-upload-field__caption {
  font-size: .82rem;
  color: var(--tf-grey-400);
}
.tf-upload-field__remove {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--tf-grey-700);
}
.tf-input--file {
  padding: .75rem .85rem;
}
.tf-readonly-photo {
  display: grid;
  gap: .6rem;
  max-width: 320px;
}
.tf-phase-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tf-phase-form .tf-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.tf-phase-form .tf-field-group {
  margin-bottom: 0;
  min-width: 0;
}
.tf-retailer-picker__manual {
  display: grid;
  gap: .35rem;
  margin-top: .6rem;
}
.tf-phase-location {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tf-phase-location__intro {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.tf-phase-location__label {
  display: inline-block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--tf-grey-900);
}
.tf-phase-location__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.2rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.tf-phase-location__header label {
  min-height: 0;
}
.tf-phase-location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  align-items: start;
}
.tf-phase-location__address-wrap {
  display: grid;
  gap: .8rem;
}
.tf-phase-location__address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.tf-phase-location__verify {
  justify-self: start;
  min-width: 210px;
  min-height: 3.2rem;
  white-space: nowrap;
  border-radius: 18px;
}
.tf-phase-location__coords {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1rem;
  border: 1px solid rgba(38,50,56,.18);
  border-radius: 0;
  background: rgba(244,244,244,.92);
}
.tf-phase-location.is-locked .tf-phase-location__coords {
  border-radius: 0;
}
.tf-phase-location.is-locked .tf-phase-location__coords .tf-field-group {
  opacity: .82;
}
.tf-phase-location__help {
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--tf-grey-700);
  max-width: 40rem;
}
.tf-phase-location__toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  font-size: .85rem;
  color: var(--tf-grey-700);
  line-height: 1.4;
  box-shadow: none;
}
.tf-phase-location__toggle input {
  margin: .1rem 0 0;
  accent-color: var(--tf-green);
  width: 1.2rem;
  height: 1.2rem;
}
.tf-phase-location__status {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--tf-grey-400);
}
.tf-phase-location__lock-note {
  display: block;
  margin-top: -.15rem;
  font-size: .8rem;
  color: var(--tf-grey-400);
}
.tf-phase-location__map-wrap {
  display: grid;
  gap: .45rem;
}
.tf-phase-location__map {
  min-height: 260px;
  border: 1px solid #d5dee9;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(45,122,60,.08), rgba(197,145,10,.08)),
    linear-gradient(180deg, #f8fafc, #eef3f8);
  overflow: hidden;
}
.tf-phase-location__map-frame {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 0;
}
.tf-phase-location__map-note {
  font-size: .82rem;
  color: var(--tf-grey-400);
}
.tf-phase-substeps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tf-phase-substeps__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-phase-substeps__nav-item {
  display: flex;
}
.tf-phase-substeps[data-phase="2"] .tf-phase-substeps__nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tf-phase-substeps__tab {
  width: 100%;
  min-height: 5.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .8rem .65rem;
  border: 1px solid rgba(38,50,56,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  color: var(--tf-grey-700);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.tf-phase-substeps__tab-dot {
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  font-weight: 700;
}
.tf-phase-substeps__tab-label {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
}
.tf-phase-substeps__tab.is-active {
  border-color: rgba(45,122,60,.26);
  background: linear-gradient(180deg, rgba(234,245,236,.92), rgba(255,255,255,.98));
  color: var(--tf-green);
}
.tf-phase-substeps__tab.is-complete {
  border-color: rgba(45,122,60,.18);
  color: var(--tf-green);
}
.tf-phase-substeps__panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid rgba(38,50,56,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
  min-width: 0;
  overflow-x: clip;
}
.tf-phase-substeps__eyebrow {
  margin: 0 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tf-green);
}
.tf-phase-substeps__panel-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
}
.tf-phase-substeps__panel-copy {
  margin: .4rem 0 0;
  color: var(--tf-grey-700);
  font-size: .92rem;
}
.tf-phase-admin-fields {
  display: grid;
  gap: .85rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(38,50,56,.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.98));
}
.tf-phase-admin-fields__header {
  display: grid;
  gap: .2rem;
}
.tf-phase-admin-fields__eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tf-green);
}
.tf-phase-admin-fields__copy {
  margin: 0;
  color: var(--tf-grey-700);
  font-size: .85rem;
  line-height: 1.45;
}
.tf-phase-form .tf-form-grid--phase-step {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tf-phase-form .tf-form-grid--admin-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
}
.tf-phase-substeps__actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.tf-missing-fields--inline {
  margin-bottom: 0;
}
.tf-phase-disclosure .tf-phase__intro {
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.tf-phase-disclosure .tf-assigned-details {
  margin-bottom: .75rem;
}
.tf-show-more--phase-step {
  margin-top: 0;
}
.tf-phase-location__map-note {
  font-size: .82rem;
  color: var(--tf-grey-400);
}
.tf-phase-location.is-manual .tf-phase-location__lock-note {
  color: #8a5a00;
}
.tf-phase-location .tf-input {
  background: var(--tf-white);
}
.tf-phase-location__status[data-state="verified"] { color: var(--tf-green); }
.tf-phase-location__status[data-state="manual"] { color: #8a5a00; }
.tf-phase-location__status[data-state="warning"] { color: var(--tf-red); }
.tf-phase-location .tf-input:disabled {
  background: linear-gradient(180deg, #f7f9fc, #eef3f8);
  color: #556273;
  cursor: not-allowed;
  opacity: 1;
  border-color: #d5dee9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  pointer-events: none;
  -webkit-text-fill-color: #556273;
}
.tf-phase-location.is-locked .tf-input[data-tf-location-lat],
.tf-phase-location.is-locked .tf-input[data-tf-location-lng] {
  cursor: not-allowed;
  user-select: none;
}
.tf-phase-location.is-manual {
  border-color: rgba(210,156,43,.24);
  background: linear-gradient(180deg, rgba(255,250,238,.98), rgba(255,255,255,.98));
}
.tf-phase-form .tf-field-group label {
  min-height: 2.5em;
  line-height: 1.25;
}
.tf-phase-form .tf-input,
.tf-phase-form .tf-textarea,
.tf-phase-form .tf-select {
  min-height: 3rem;
  border-color: #d6dce6;
  box-shadow: inset 0 1px 2px rgba(26,26,46,.03);
}
.tf-phase-form .tf-textarea {
  min-height: 5.75rem;
}
.tf-phase-form .tf-input[data-tf-stand-count-delta] {
  background: linear-gradient(180deg, #f7f9fc, #eef3f8);
  color: #556273;
  border-color: #d5dee9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.tf-phase-form .tf-input[data-tf-stand-count-delta]::placeholder {
  color: #6c7888;
  opacity: 1;
}
.tf-phase-form__action-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-top: 1rem; }
.tf-phase-form__action-help-item { padding: .8rem .9rem; border: 1px solid var(--tf-border); border-radius: var(--tf-radius); background: var(--tf-grey-100); }
.tf-phase-form__action-help-item strong { display: block; font-size: .88rem; color: var(--tf-grey-900); }
.tf-phase-form__action-help-item span { display: block; margin-top: .2rem; font-size: .82rem; color: var(--tf-grey-700); }
.tf-phase-form__actions { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.tf-phase-form__complete-note { margin: .65rem 0 0; font-size: .85rem; color: var(--tf-grey-400); }

/* ── DL definition lists ─────────────────────────────────────────────────── */
.tf-dl { display: grid; grid-template-columns: 160px 1fr; gap: .35rem 1rem; font-size: .9rem; }
.tf-dl dt { font-weight: 600; color: var(--tf-grey-700); }
.tf-dl dd { margin: 0; }

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.tf-leaderboard-page {
  max-width: 980px;
}
.tf-leaderboard-hero {
  margin-bottom: 2rem;
  text-align: center;
}
.tf-leaderboard-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.tf-leaderboard-hero__copy {
  max-width: 40rem;
  margin: .9rem auto 0;
  color: var(--tf-grey-700);
}
.tf-leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.tf-leaderboard-podium__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 220px;
  padding: 1.4rem 1rem;
  border: 1px solid #263238;
  background: var(--tf-white);
  text-align: center;
}
.tf-leaderboard-podium__card--me {
  background: linear-gradient(180deg, rgba(234,245,236,.82), rgba(255,255,255,.98));
}
.tf-leaderboard-podium__medal {
  width: 54px;
  height: 54px;
  border: 1px solid #263238;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
}
.tf-leaderboard-podium__name,
.tf-leaderboard-podium__designation,
.tf-leaderboard-podium__points,
.tf-leaderboard-podium__rank-label {
  margin: 0;
}
.tf-leaderboard-podium__name {
  font-size: 1rem;
  font-weight: 700;
}
.tf-leaderboard-podium__designation {
  color: var(--tf-grey-700);
  font-size: .82rem;
}
.tf-leaderboard-podium__points {
  width: 100%;
  padding-top: .9rem;
  border-top: 2px solid rgba(38,50,56,.18);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
}
.tf-leaderboard-podium__rank-label {
  width: 100%;
  padding-top: .9rem;
  border-top: 2px solid rgba(38,50,56,.18);
  font-weight: 700;
}
.tf-leaderboard-board {
  border: 1px solid #263238;
  background: var(--tf-white);
}
.tf-leaderboard-filters {
  display: grid;
  gap: .55rem;
  margin: 0 0 1rem;
}
.tf-leaderboard-filters__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
}
.tf-leaderboard-filters__field {
  display: grid;
  gap: .3rem;
  min-width: min(100%, 320px);
}
.tf-leaderboard-filters__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tf-grey-800);
}
.tf-leaderboard-filters__select {
  min-height: 2.45rem;
}
.tf-leaderboard-filters__summary {
  margin: 0;
  font-size: .92rem;
  color: var(--tf-grey-800);
}
.tf-leaderboard-search {
  padding: .75rem;
  border-bottom: 1px solid #263238;
}
.tf-leaderboard-search__input {
  max-width: 320px;
  min-height: 2.45rem;
  padding: .45rem .75rem;
  border: 1px solid #263238;
  border-radius: 0;
  font-size: .9rem;
}
.tf-leaderboard-search__input:focus {
  border-color: var(--tf-green);
}
.tf-leaderboard {
  overflow-x: auto;
}
.tf-leaderboard__row--me td {
  background: var(--tf-green-light);
}
.tf-table--leaderboard {
  min-width: 620px;
}
.tf-table--leaderboard th,
.tf-table--leaderboard td {
  border-bottom: 1px solid rgba(38,50,56,.18);
}
.tf-table--leaderboard th {
  background: var(--tf-white);
  color: var(--tf-grey-900);
  font-size: .76rem;
}
.tf-table--leaderboard tbody tr:hover {
  background: rgba(45,122,60,.04);
}
.tf-empty-state--leaderboard {
  border: 1px dashed rgba(38,50,56,.24);
  background: rgba(255,255,255,.82);
}
.tf-empty-state--leaderboard-search {
  margin-top: 0;
  border-top: 1px solid rgba(38,50,56,.18);
  border-radius: 0;
}

/* ── Grower search suggestions ───────────────────────────────────────────── */
.tf-grower-hint { font-size: .8rem; color: var(--tf-grey-400); margin-top: .25rem; }
.tf-grower-suggestions { list-style: none; margin: .25rem 0 0; padding: 0; border: 1px solid var(--tf-border); border-radius: var(--tf-radius); background: var(--tf-white); box-shadow: var(--tf-shadow); max-height: 160px; overflow-y: auto; display: none; }
.tf-grower-suggestions.is-open { display: block; }
.tf-grower-suggestions li { padding: .5rem .8rem; cursor: pointer; font-size: .9rem; }
.tf-grower-suggestions li:hover { background: var(--tf-grey-100); }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.tf-404 { text-align: center; padding: 4rem 1rem; }

@media (max-width: 980px) {
  .tf-phase-substeps[data-phase="2"] .tf-phase-substeps__nav {
    grid-template-columns: 1fr;
  }
  .tf-phase-substeps[data-phase="2"] .tf-form-grid--phase-step,
  .tf-phase-substeps[data-phase="2"] .tf-form-grid--admin-fields {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .tf-phase-form .tf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-phase-location__coords { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-phase-form .tf-form-grid--phase-step,
  .tf-phase-form .tf-form-grid--admin-fields {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .tf-phase-form .tf-field-group label {
    min-height: 0;
  }
  .tf-phase-substeps__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tf-phase-substeps__actions .tf-btn {
    width: 100%;
  }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__body {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__header,
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__details,
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__summary,
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__footer {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
    text-align: left;
  }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__details {
    display: grid;
    gap: .4rem;
  }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__detail-row {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    justify-content: flex-start;
    font-size: .84rem;
  }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__summary {
    min-height: 0;
  }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__footer {
    display: flex;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .tf-main { padding: 1rem 0 1.5rem; }
  .tf-container { padding: 0 .85rem; }
  .tf-header { position: sticky; }
  .tf-header__inner {
    flex-wrap: wrap;
    gap: .65rem;
    padding: .65rem .85rem;
  }
  .tf-header__logo {
    order: 2;
    margin: 0 auto;
    font-size: 1.05rem;
  }
  .tf-header__portal-badge { font-size: .62rem; }
  .tf-nav-toggle {
    display: inline-flex;
    order: 1;
    margin-left: 0;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: .45rem;
  }
  .tf-nav {
    display: none;
    order: 4;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    margin-top: .1rem;
    padding-top: .25rem;
    border-top: 1px solid var(--tf-border);
  }
  .tf-nav.is-open { display: flex; }
  .tf-nav__link {
    padding: .8rem 0;
    border-bottom: 1px solid var(--tf-border);
  }
  .tf-nav__link:last-child { border-bottom: 0; }
  .tf-nav__link--logout {
    display: block;
    margin-top: .25rem;
    font-weight: 700;
  }
  .tf-header__user {
    order: 3;
    width: auto;
    margin-left: 0;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    white-space: nowrap;
    font-size: .8rem;
  }
  .tf-header__greeting {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tf-header__logout {
    display: none;
  }
  .tf-section {
    padding: 1rem;
    border-radius: 14px;
    margin-bottom: 1rem;
  }
  .tf-record-header { margin-bottom: 1.25rem; }
  .tf-record-header__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }
  .tf-record-header__title-row h1 {
    font-size: 1.45rem;
    line-height: 1.15;
  }
  .tf-record-header__support {
    font-size: .92rem;
    margin-top: .5rem;
  }
  .tf-record-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    margin-top: .85rem;
  }
  .tf-phase-status-panel {
    padding: .9rem .95rem;
    border-radius: 14px;
  }
  .tf-phase__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }
  .tf-phase__title { font-size: 1rem; }
  .tf-phase__intro {
    padding: .9rem;
    border-radius: 14px;
  }
  .tf-phase__intro-copy,
  .tf-required-note,
  .tf-missing-fields,
  .tf-phase-form__complete-note {
    font-size: .88rem;
    line-height: 1.45;
  }
  .tf-phase__helper-notes { flex-direction: column; align-items: stretch; }
  .tf-phase__helper-note {
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px;
    padding: .55rem .7rem;
  }
  .tf-assigned-details {
    padding: .8rem .85rem;
    border-radius: 14px;
  }
  .tf-assigned-details__list { grid-template-columns: 1fr; }
  .tf-form-grid,
  .tf-phase-form .tf-form-grid { grid-template-columns: 1fr; gap: .85rem; }
  .tf-phase-form .tf-field-group label {
    min-height: 0;
    font-size: .82rem;
  }
  .tf-phase-form .tf-input,
  .tf-phase-form .tf-textarea,
  .tf-phase-form .tf-select {
    min-height: 2.8rem;
    font-size: .95rem;
  }
  .tf-phase-form .tf-input--date {
    padding-right: .8rem;
    background-image: none;
    font-size: 16px;
    appearance: auto;
    -webkit-appearance: auto;
  }
  .tf-phase-form .tf-input--date::-webkit-date-and-time-value {
    text-align: left;
  }
  .tf-phase-form .tf-input--date::-webkit-calendar-picker-indicator {
    opacity: 1;
  }
  .tf-phase-form .tf-input[data-tf-stand-count-delta] {
    padding: .5rem .7rem;
    font-size: .84rem;
    line-height: 1.25;
  }
  .tf-phase-location {
    padding: 0;
    border-radius: 0;
  }
  .tf-phase-location__address-row { grid-template-columns: 1fr; gap: .65rem; }
  .tf-phase-location__verify {
    width: 100%;
    min-height: 2.8rem;
  }
  .tf-phase-location__coords { grid-template-columns: 1fr; padding: 1rem .9rem; }
  .tf-phase-location__map-wrap { gap: .35rem; }
  .tf-phase-location__map,
  .tf-phase-location__map-frame { min-height: 180px; }
  .tf-phase-disclosures {
    gap: .65rem;
    margin-bottom: .9rem;
  }
  .tf-phase-disclosure__summary {
    padding: .8rem .9rem;
    font-size: .88rem;
  }
  .tf-phase-disclosure__content {
    padding: 0 .9rem .9rem;
  }
  .tf-phase-substeps__nav {
    gap: .5rem;
  }
  .tf-phase-substeps__tab {
    min-height: 5rem;
    padding: .7rem .45rem;
    border-radius: 14px;
  }
  .tf-phase-substeps__tab-dot {
    width: 28px;
    height: 28px;
    font-size: .78rem;
  }
  .tf-phase-substeps__tab-label {
    font-size: .75rem;
  }
  .tf-phase-substeps__panel {
    padding: 1rem .9rem;
    border-radius: 16px;
  }
  .tf-phase-substeps__panel-title {
    font-size: 1.05rem;
  }
  .tf-phase-substeps__panel-copy {
    font-size: .88rem;
  }
  .tf-phase-admin-fields {
    padding: .9rem;
    border-radius: 14px;
  }
  .tf-phase-admin-fields__copy {
    font-size: .82rem;
  }
  .tf-phase-form .tf-form-grid--phase-step {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .tf-phase-form .tf-form-grid--admin-fields {
    grid-template-columns: 1fr;
  }
  .tf-phase-substeps__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tf-phase-substeps__actions .tf-btn {
    width: 100%;
  }
  .tf-upload-field__preview { grid-template-columns: 1fr; }
  .tf-show-more {
    margin-top: 1rem;
    padding-top: .85rem;
  }
  .tf-show-more__toggle {
    width: 100%;
    justify-content: center;
    padding: .75rem .9rem;
  }
  .tf-show-more__content {
    padding: .85rem;
    border-radius: 14px;
  }
  .tf-phase-form__action-help { grid-template-columns: 1fr; gap: .6rem; }
  .tf-phase-form__action-help-item {
    padding: .75rem .8rem;
    border-radius: 12px;
  }
  .tf-phase-form__actions {
    flex-direction: column;
    gap: .65rem;
    margin-top: 1rem;
  }
  .tf-phase-form__actions .tf-btn { width: 100%; }
  .tf-dl { grid-template-columns: 1fr; }
  .tf-dl dt { margin-top: .5rem; }
  .tf-steps {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    margin: .9rem 0 1.2rem;
    padding: .85rem;
    border: 1px solid rgba(26,60,47,.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
  }
  .tf-step {
    flex-direction: row;
    align-items: flex-start;
    gap: .8rem;
    flex: 0 0 auto;
    width: 100%;
    padding: .8rem .85rem;
    border: 1px solid rgba(221,225,233,.95);
    border-radius: 14px;
    background: var(--tf-white);
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  .tf-step__label {
    margin-top: .1rem;
    text-align: left;
    min-width: 0;
  }
  .tf-step__num { font-size: .66rem; }
  .tf-step__name { font-size: .84rem; line-height: 1.25; }
  .tf-step__note { font-size: .7rem; line-height: 1.35; }
  .tf-step__connector {
    width: 2px;
    min-width: 2px;
    height: 12px;
    margin: .1rem 0 .1rem 19px;
  }
  .tf-step--active {
    border-color: rgba(41,128,185,.22);
    background: linear-gradient(180deg, rgba(240,248,255,.96), rgba(255,255,255,.98));
  }
  .tf-step--completed-verified {
    border-color: rgba(45,122,60,.16);
    background: linear-gradient(180deg, rgba(234,245,236,.9), rgba(255,255,255,.98));
  }
  .tf-step--completed-pending {
    border-color: rgba(197,145,10,.22);
    background: linear-gradient(180deg, rgba(253,244,217,.88), rgba(255,255,255,.98));
  }
  .tf-step--upcoming {
    background: rgba(250,251,252,.92);
  }
  .tf-dashboard-topline { grid-template-columns: 1fr; }
  .tf-dashboard-overview {
    padding: .95rem .9rem;
  }
  .tf-dashboard-overview__title,
  .tf-dashboard-trials__title {
    font-size: 1.2rem;
  }
  .tf-dashboard-trials__copy {
    font-size: .88rem;
  }
  .tf-dashboard-overview__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-dashboard-overview__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tf-dashboard-overview__actions .tf-btn { width: 100%; }
  .tf-dashboard-trials {
    padding: 1rem .85rem;
  }
  .tf-dashboard-trials__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .tf-trial-filters {
    grid-template-columns: 1fr;
    gap: .9rem;
    padding: .85rem;
  }
  .tf-trial-filter-form__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .tf-trial-filter-form__select {
    max-width: none;
    width: 100%;
  }
  .tf-trial-search { max-width: none; width: 100%; }
  .tf-dashboard-header__count { align-self: flex-start; }
  .tf-create-panel { width: 100%; }
  .tf-quick-create-form { width: 100%; grid-template-columns: 1fr; }
  .tf-quick-create-form__input { width: 100%; min-width: 0; }
  .tf-dashboard-trials__meta { width: 100%; justify-content: space-between; }
  .tf-trial-view-toggle { width: 100%; justify-content: space-between; }
  .tf-field-grid { grid-template-columns: 1fr; }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__body { grid-template-columns: 1fr; }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__header,
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__summary,
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__footer { justify-content: flex-start; text-align: left; }
  .tf-field-grid[data-tf-trial-view-mode="list"] .tf-field-card__details { grid-template-columns: 1fr; }
  .tf-field-card__detail-row {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
  .tf-field-card__cta { width: 100%; }
  .tf-leaderboard-page {
    max-width: none;
  }
  .tf-leaderboard-hero {
    margin-bottom: 1.5rem;
  }
  .tf-leaderboard-hero__title {
    font-size: 2.25rem;
  }
  .tf-leaderboard-hero__copy {
    font-size: .92rem;
  }
  .tf-leaderboard-podium {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .tf-leaderboard-podium__card {
    min-height: 0;
    padding: 1.2rem .95rem;
  }
  .tf-leaderboard-search {
    padding: .65rem;
  }
  .tf-leaderboard-filters__form {
    flex-direction: column;
    align-items: stretch;
  }
  .tf-leaderboard-filters__field {
    min-width: 0;
  }
  .tf-leaderboard-search__input {
    max-width: none;
    width: 100%;
  }
  .tf-header--public-auth { position: static; }
  .tf-header--public-auth .tf-header__inner {
    padding: 1rem .85rem;
  }
  .tf-brand-wordmark {
    gap: .5rem;
  }
  .tf-brand-wordmark__name {
    font-size: 2rem;
  }
  .tf-brand-wordmark__badge {
    min-height: 2.35rem;
    padding: .2rem .75rem;
    font-size: .95rem;
  }
  .tf-auth-shell {
    padding: 2rem .85rem 2.5rem;
  }
  .tf-auth-card {
    padding: 2rem 1.25rem 1.5rem;
  }
  .tf-auth-card__title {
    font-size: 2.2rem;
  }
  .tf-auth-card__intro {
    font-size: .95rem;
  }
  .tf-auth-card__submit {
    width: 100%;
  }
  .tf-auth-card__links {
    flex-direction: column;
    gap: .7rem;
  }
}

@media (max-width: 420px) {
  .tf-container { padding: 0 .7rem; }
  .tf-header__inner { padding: .6rem .7rem; }
  .tf-section { padding: .85rem; }
  .tf-record-header__title-row h1 { font-size: 1.3rem; }
  .tf-phase-location,
  .tf-phase__intro,
  .tf-assigned-details,
  .tf-show-more__content,
  .tf-phase-status-panel,
  .tf-required-note,
  .tf-missing-fields { padding-left: .8rem; padding-right: .8rem; }
  .tf-steps {
    padding: .7rem;
    border-radius: 14px;
  }
  .tf-step {
    padding: .72rem .75rem;
    gap: .7rem;
    border-radius: 12px;
  }
  .tf-step__circle {
    width: 36px;
    height: 36px;
    font-size: .92rem;
  }
  .tf-step__connector { margin-left: 17px; }
  .tf-header--public-auth .tf-header__inner {
    padding: .85rem .7rem;
  }
  .tf-brand-wordmark__name {
    font-size: 1.7rem;
  }
  .tf-brand-wordmark__badge {
    min-height: 2rem;
    padding-inline: .68rem;
    font-size: .86rem;
  }
  .tf-auth-card {
    padding: 1.6rem 1rem 1.35rem;
  }
}

/* ── Info alert ──────────────────────────────────────────────────────────── */
.tf-alert--info { background: #e8f4fd; color: #1a5276; border-left: 4px solid #2980b9; }
.tf-dev-reset-alert strong { display: block; margin-bottom: .35rem; }
.tf-dev-reset-alert p { margin: 0 0 .85rem; }
.tf-dev-reset-alert__link { width: 100%; }

/* ── 3-Step progress indicator ───────────────────────────────────────────── */
.tf-steps { display: flex; align-items: flex-start; gap: 0; margin: 1.5rem 0 2rem; }
.tf-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.tf-step__circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; border: 2px solid;
  position: relative; z-index: 1; background: var(--tf-white);
}
.tf-step__label { text-align: center; margin-top: .5rem; }
.tf-step__num { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tf-grey-400); }
.tf-step__name { display: block; font-size: .8rem; font-weight: 600; color: var(--tf-grey-700); }
.tf-step__note { display: block; font-size: .72rem; color: var(--tf-gold); margin-top: .2rem; }
.tf-step__connector {
  flex: 1; height: 2px; margin-top: 20px;
  background: var(--tf-border);
  min-width: 20px;
}

/* Step states */
.tf-step--completed-verified .tf-step__circle { background: var(--tf-green); border-color: var(--tf-green); color: var(--tf-white); }
.tf-step--completed-verified .tf-step__num, .tf-step--completed-verified .tf-step__name { color: var(--tf-green); }
.tf-step--completed-pending .tf-step__circle { background: var(--tf-gold-light); border-color: var(--tf-gold); color: var(--tf-gold); }
.tf-step--completed-pending .tf-step__num, .tf-step--completed-pending .tf-step__name { color: var(--tf-gold); }
.tf-step--active .tf-step__circle { background: var(--tf-white); border-color: #2980b9; color: #2980b9; }
.tf-step--active .tf-step__num, .tf-step--active .tf-step__name { color: #2980b9; }
.tf-step--locked .tf-step__circle { background: var(--tf-grey-100); border-color: var(--tf-border); color: var(--tf-grey-400); }
.tf-step--locked .tf-step__num, .tf-step--locked .tf-step__name { color: var(--tf-grey-400); }

/* Connected steps: line between active/done */
.tf-step--completed-verified + .tf-step__connector,
.tf-step--completed-pending + .tf-step__connector { background: var(--tf-green); }

/* ── Verified phase badge ────────────────────────────────────────────────── */
.tf-phase__verified-badge { display: inline-flex; align-items: center; gap: .3rem; background: var(--tf-green-light); color: var(--tf-green); padding: .25em .7em; border-radius: 20px; font-size: .78rem; font-weight: 700; margin-top: .35rem; }
.tf-phase__awaiting-badge { display: inline-flex; align-items: center; gap: .3rem; background: var(--tf-gold-light); color: var(--tf-gold); padding: .25em .7em; border-radius: 20px; font-size: .78rem; font-weight: 600; margin-top: .35rem; }

/* ── Show More section ───────────────────────────────────────────────────── */
.tf-show-more { margin-top: 1.25rem; border-top: 1px solid var(--tf-border); padding-top: 1rem; }
.tf-show-more__toggle {
  background: var(--tf-white);
  border: 1px solid var(--tf-border);
  cursor: pointer;
  color: var(--tf-green);
  font-size: .875rem;
  font-weight: 600;
  padding: .65rem .9rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  box-shadow: var(--tf-shadow);
}
.tf-show-more__toggle:hover { text-decoration: none; background: var(--tf-green-light); }
.tf-show-more__icon { font-size: .75rem; transition: transform .2s; display: inline-block; }
.tf-show-more__toggle[aria-expanded="true"] .tf-show-more__icon { transform: rotate(180deg); }
.tf-show-more__content {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  background: rgba(245,246,250,.55);
}

/* ── Required field indicator ───────────────────────────────────────────── */
.tf-required { color: var(--tf-red); margin-left: .15em; }
.tf-required-note {
  font-size: .9rem;
  color: var(--tf-grey-700);
  margin: 0;
  padding: .8rem .95rem;
  border-radius: 10px;
  background: rgba(245,246,250,.8);
  border: 1px solid var(--tf-border);
}

/* ── Missing fields warning ─────────────────────────────────────────────── */
.tf-missing-fields {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: linear-gradient(180deg, rgba(253,244,217,.92), rgba(255,250,239,.98));
  border: 1px solid rgba(197,145,10,.28);
  border-left: 4px solid var(--tf-gold);
  padding: 1rem 1.05rem;
  border-radius: 10px;
  font-size: .9rem;
  color: var(--tf-grey-700);
  margin-bottom: 0;
}
.tf-missing-fields strong { color: #996b00; font-size: .93rem; }
.tf-missing-fields__note { color: var(--tf-grey-700); font-size: .84rem; }
.tf-missing-fields__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.tf-missing-fields__link,
.tf-missing-fields__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(197,145,10,.24);
  background: rgba(255,255,255,.72);
  color: #7a5400;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
.tf-missing-fields__link:hover,
.tf-missing-fields__link:focus-visible {
  border-color: rgba(153,107,0,.42);
  background: rgba(255,255,255,.95);
  color: #5f4200;
}
.tf-missing-fields__link--needs_yes,
.tf-missing-fields__chip--needs_yes {
  border-color: rgba(32,97,173,.24);
  background: rgba(239,246,255,.92);
  color: #1f5f9a;
}
.tf-missing-fields__link--needs_yes:hover,
.tf-missing-fields__link--needs_yes:focus-visible {
  border-color: rgba(32,97,173,.42);
  background: rgba(244,249,255,.98);
  color: #184a78;
}

.tf-alert__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.tf-alert__hint {
  margin: .8rem 0 0;
  font-size: .9rem;
  color: inherit;
}

.tf-field-group.is-missing {
  padding: .9rem;
  border: 1px solid rgba(197,145,10,.28);
  border-radius: 12px;
  background: rgba(255,247,228,.85);
}
.tf-field-group__missing-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: rgba(197,145,10,.14);
  color: #996b00;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.tf-field-group__missing-indicator--needs_yes {
  background: rgba(32,97,173,.12);
  color: #1f5f9a;
}
.tf-field-group.is-missing-focus {
  border-color: rgba(41,106,56,.55);
  box-shadow: 0 0 0 4px rgba(39,124,60,.14);
}

/* ── Phase card phase pips update ───────────────────────────────────────── */
.tf-phase-pip--completed { background: var(--tf-gold-light); color: var(--tf-gold); }
.tf-phase-pip--verified  { background: var(--tf-green-light); color: var(--tf-green); }
.tf-phase-pip--upcoming  { background: rgba(245,246,250,.8); color: var(--tf-grey-400); font-style: italic; letter-spacing: .01em; opacity: .72; }

/* ── Upcoming (future) step & phase states ──────────────────────────────── */
.tf-step--upcoming .tf-step__circle { background: var(--tf-grey-100); border-color: var(--tf-border); border-style: dashed; color: var(--tf-grey-400); }
.tf-step--upcoming .tf-step__num,
.tf-step--upcoming .tf-step__name  { color: var(--tf-grey-400); }
.tf-step--upcoming .tf-step__note  { color: var(--tf-grey-400); font-style: italic; }

.tf-phase--upcoming { opacity: .72; border-style: dashed; box-shadow: none; }
.tf-phase__status--upcoming { background: var(--tf-grey-100); color: var(--tf-grey-400); }
.tf-phase__upcoming-note { font-size: .875rem; color: var(--tf-grey-400); font-style: italic; margin: .5rem 0 0; max-width: 44rem; }

/* ── Leaderboard updates ────────────────────────────────────────────────── */
.tf-leaderboard-placeholder { margin-bottom: 1.5rem; }


/* ── Auth support ─────────────────────────────────────────────────────────── */
.tf-login-card__intro { margin: 0 0 1rem; text-align: center; color: var(--tf-grey-700); font-size: .92rem; }
.tf-login-card__back { text-align: center; margin-top: 1rem; }
.tf-login-card__back .tf-back-link { margin-bottom: 0; color: var(--tf-grey-700); }