/* ========================================================================== */
/* TrailPlanner Design System — components.css                                */
/* Shared buttons, cards, forms, tables and app surfaces                     */
/* ========================================================================== */

:where(.btn, .button, button.button, a.button, .tp-button) {
  --tp-button-bg:var(--tp-theme-surface);
  --tp-button-bg-hover:var(--tp-theme-surface-muted);
  --tp-button-bg-active:var(--tp-theme-surface-muted);
  --tp-button-border:var(--tp-theme-border);
  --tp-button-color:var(--tp-theme-text);
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  gap:var(--tp-space-2);
  min-height:2.7rem;
  padding:.72rem 1.05rem;
  border:1px solid var(--tp-button-border);
  border-radius:var(--tp-radius-md);
  background:var(--tp-button-bg);
  color:var(--tp-button-color);
  font-size:var(--tp-text-sm);
  font-weight:var(--fw-bold);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

:where(.btn, .button, button.button, a.button, .tp-button):hover {
  background:var(--tp-button-bg-hover);
  color:var(--tp-button-color);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

:where(.btn, .button, button.button, a.button, .tp-button):active {
  background:var(--tp-button-bg-active);
  transform:none;
  box-shadow:var(--shadow-xs);
}

:where(.btn, .button, button.button, a.button, .tp-button):disabled,
.button:disabled,
:where(.btn, .button, button.button, a.button, .tp-button)[disabled],
:where(.btn, .button, button.button, a.button, .tp-button)[aria-disabled="true"],
button:disabled {
  --tp-button-bg:color-mix(in srgb, var(--tp-theme-surface-muted) 72%, var(--tp-theme-bg));
  --tp-button-bg-hover:color-mix(in srgb, var(--tp-theme-surface-muted) 72%, var(--tp-theme-bg));
  --tp-button-bg-active:color-mix(in srgb, var(--tp-theme-surface-muted) 72%, var(--tp-theme-bg));
  --tp-button-border:color-mix(in srgb, var(--tp-theme-border) 70%, transparent);
  --tp-button-color:color-mix(in srgb, var(--tp-theme-text-muted) 72%, transparent);
  opacity:.72;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}


.button.danger,
.tp-button-danger,
.tp-button.danger {
  --tp-button-bg:rgba(220, 38, 38, .08);
  --tp-button-bg-hover:rgba(220, 38, 38, .14);
  --tp-button-bg-active:rgba(220, 38, 38, .18);
  --tp-button-border:rgba(220, 38, 38, .22);
  --tp-button-color:var(--tp-danger);
}

.btn-small,
.compact-button{
  min-height:2.15rem;
  padding:.52rem .82rem;
  border-radius:var(--tp-radius-sm);
  font-size:var(--tp-text-xs);
}

.btn-large {
  min-height:3rem;
  padding:.92rem 1.34rem;
  border-radius:var(--tp-radius-lg);
  font-size:var(--tp-text-base);
}


.tp-card-soft {
  background:linear-gradient(180deg, color-mix(in srgb, var(--tp-theme-surface-muted) 96%, transparent), color-mix(in srgb, var(--tp-theme-bg-soft) 92%, transparent));
}

body.tp-public-shell .tp-card-soft,
body.tp-public-page .tp-card-soft {
  background:linear-gradient(180deg, rgb(20 40 59 / .88), rgb(13 28 43 / .84));
}

.tp-card-elevated {
  box-shadow:var(--tp-shadow-elevated);
}

.tp-card-header,
.settings-card-header,
.auth-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--tp-space-4);
  flex-wrap:wrap;
}

.tp-card-header .tp-section-header,
.settings-card-header .tp-section-header,
.auth-card-head .tp-section-header {
  max-width:none;
}

.tp-toolbar,
.toolbar-card {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--tp-space-4);
  padding:var(--tp-space-4);
}

.toolbar-main {
  display:grid;
  grid-template-columns:minmax(260px, 1fr) 190px auto;
  align-items:end;
  gap:var(--tp-space-3);
  flex:1;
}

.hero-actions,
.settings-actions,
.form-actions,
.public-action-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:var(--tp-space-3);
}

:where(.page-hero, .app-page-header, .settings-hero) {
  padding:clamp(1.2rem, 2vw, 1.65rem);
  border:1px solid var(--tp-theme-border);
  border-radius:var(--tp-radius-xl);
  background:
    radial-gradient(circle at top right, rgb(37 99 235 / .18), transparent 18rem),
    radial-gradient(circle at top left, rgb(42 194 122 / .12), transparent 14rem),
    linear-gradient(135deg,
      color-mix(in srgb, var(--tp-theme-surface) 94%, var(--tp-theme-bg)),
      color-mix(in srgb, var(--tp-theme-surface-muted) 82%, var(--tp-theme-bg))
    );
  color:var(--tp-theme-text);
  box-shadow:var(--tp-shadow-card);
}

:where(.page-hero, .app-page-header, .settings-hero) .tp-section-header {
  max-width:42rem;
}

body.tp-app-shell :where(.page-hero, .app-page-header, .settings-hero) .tp-title,
body.tp-app-page :where(.page-hero, .app-page-header, .settings-hero) .tp-title {
  font-size:clamp(1.72rem, 1.3rem + 1.4vw, 2.55rem);
}

body.tp-public-shell :where(.page-hero, .app-page-header, .settings-hero),
body.tp-public-page :where(.page-hero, .app-page-header, .settings-hero) {
  border-color:var(--tp-public-border);
  background:
    radial-gradient(circle at top right, rgb(34 211 238 / .16), transparent 18rem),
    radial-gradient(circle at top left, rgb(42 194 122 / .14), transparent 14rem),
    linear-gradient(135deg, rgb(15 31 49 / .94), rgb(11 23 36 / .92));
}

body.tp-public-shell :where(.page-hero, .app-page-header, .settings-hero) .tp-title,
body.tp-public-page :where(.page-hero, .app-page-header, .settings-hero) .tp-title,
body.tp-public-shell :where(.page-hero, .app-page-header, .settings-hero) p,
body.tp-public-page :where(.page-hero, .app-page-header, .settings-hero) p {
  color:var(--tp-public-text);
}

/* Connected page contract and shared settings primitives ------------------- */
section.tp-page--standard,
section.tp-page--wide,
section.tp-page--dashboard {
  width:min(100%, 1120px);
  margin-inline:auto;
  display:grid;
  gap:16px;
  min-height:0;
  align-content:start;
}

section.tp-page > .tp-page-hero {
  min-height:0;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem, 2vw, 1.5rem);
  flex-wrap:wrap;
  padding:20px 24px;
  border:1px solid var(--tp-theme-border);
  border-radius:var(--tp-radius-xl);
  background:
    radial-gradient(circle at top right, rgb(37 99 235 / .18), transparent 18rem),
    radial-gradient(circle at top left, rgb(42 194 122 / .12), transparent 14rem),
    linear-gradient(135deg,
      color-mix(in srgb, var(--tp-theme-surface) 94%, var(--tp-theme-bg)),
      color-mix(in srgb, var(--tp-theme-surface-muted) 82%, var(--tp-theme-bg))
    );
  color:var(--tp-theme-text);
  box-shadow:var(--tp-shadow-card);
}

section.tp-page > .tp-page-hero .tp-page-hero-main {
  min-width:0;
  max-width:44rem;
  display:grid;
  gap:.26rem;
}

.tp-page-hero-main > :where(.eyebrow, .tp-kicker, p, h1),
.tp-page-hero-actions > * {
  margin-top:0;
  margin-bottom:0;
}

body.tp-shell-v2-page .tp-page-hero .tp-title,
body.tp-shell-v2-page .tp-page-hero h1 {
  font-size:clamp(1.72rem, 1.3rem + 1.4vw, 2.55rem);
}

.tp-page-hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--tp-space-3);
  margin-left:auto;
}

.tp-page-stack,
.tp-page-section {
  min-width:0;
  display:grid;
  gap:16px;
}

@media (max-width: 760px) {
  .tp-page-hero,
  .tp-page-hero-actions {
    align-items:flex-start;
    justify-content:flex-start;
  }

  .tp-page-hero {
    flex-direction:column;
  }

  .tp-page-hero-actions {
    margin-left:0;
  }
}

.settings-card {
  min-width:0;
  display:grid;
  gap:16px;
  padding:clamp(1rem, 1.6vw, 1.35rem);
  border:1px solid var(--tp-theme-border);
  border-radius:20px;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 26rem),
    linear-gradient(180deg,
      color-mix(in srgb, var(--tp-theme-surface) 96%, var(--tp-theme-bg)),
      color-mix(in srgb, var(--tp-theme-surface-muted) 76%, var(--tp-theme-bg))
    );
  color:var(--tp-theme-text);
  box-shadow:0 18px 46px rgba(2, 8, 23, .22);
}

.settings-card h2,
.settings-card h3,
.settings-card p {
  margin-top:0;
}

.settings-card h2 {
  margin-bottom:.35rem;
  color:var(--tp-theme-text);
  font-size:clamp(1.25rem, 1rem + .8vw, 1.65rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.settings-card h3 {
  margin-bottom:.55rem;
  color:var(--tp-theme-text);
  font-size:1rem;
  line-height:1.15;
}

.settings-table-shell {
  width:100%;
  overflow:auto;
  border:1px solid var(--tp-theme-border);
  border-radius:16px;
  background:color-mix(in srgb, var(--tp-theme-surface) 92%, var(--tp-theme-bg));
  box-shadow:inset 0 1px 0 rgba(148, 163, 184, .08);
  -webkit-overflow-scrolling:touch;
}

.settings-table-shell.compact {
  border-radius:14px;
}

.settings-table {
  width:100%;
  min-width:0;
  border-collapse:collapse;
  color:var(--tp-theme-text);
  font-size:.88rem;
}

.settings-table th,
.settings-table td {
  padding:.62rem .68rem;
  border-bottom:1px solid color-mix(in srgb, var(--tp-theme-border) 76%, transparent);
  text-align:left;
  vertical-align:middle;
}

.settings-table th {
  background:color-mix(in srgb, var(--tp-theme-surface-muted) 92%, var(--tp-theme-bg));
  color:var(--tp-theme-text-muted);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.settings-table tr:last-child td {
  border-bottom:0;
}

.settings-table tbody tr {
  background:color-mix(in srgb, var(--tp-theme-surface) 94%, var(--tp-theme-bg));
}

.settings-table tbody tr:nth-child(even),
.settings-table .new-row {
  background:color-mix(in srgb, var(--tp-theme-surface-muted) 74%, var(--tp-theme-bg));
}

.settings-table input,
.settings-table select,
.settings-table textarea,
.settings-field-grid input,
.settings-field-grid select,
.settings-field-grid textarea {
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb, var(--tp-theme-border) 86%, transparent);
  border-radius:10px;
  padding:.55rem .62rem;
  background:color-mix(in srgb, var(--tp-theme-bg) 88%, var(--tp-theme-surface));
  color:var(--tp-theme-text);
  font:inherit;
  font-weight:750;
  box-shadow:inset 0 1px 0 rgba(148, 163, 184, .08);
}

.settings-table input:focus,
.settings-table select:focus,
.settings-table textarea:focus,
.settings-field-grid input:focus,
.settings-field-grid select:focus,
.settings-field-grid textarea:focus {
  border-color:color-mix(in srgb, var(--tp-primary) 58%, var(--tp-theme-border));
  outline:2px solid color-mix(in srgb, var(--tp-primary) 28%, transparent);
  outline-offset:1px;
}

.settings-field-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(145px, 1fr));
  gap:12px;
}

.settings-field-grid.two-cols {
  grid-template-columns:repeat(2, minmax(180px, 1fr));
}

.settings-field-grid label {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.settings-field-grid span {
  color:var(--tp-theme-text-muted);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.settings-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}

.settings-actions.split-actions {
  justify-content:flex-end;
}

.nutrition-preview-card {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:2px;
}

.nutrition-preview-card div {
  min-width:0;
  display:grid;
  gap:4px;
  padding:13px;
  border:1px solid color-mix(in srgb, var(--tp-primary) 28%, var(--tp-theme-border));
  border-radius:16px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--tp-primary) 16%, var(--tp-theme-surface)),
    color-mix(in srgb, var(--tp-theme-surface-muted) 82%, var(--tp-theme-bg))
  );
}

.nutrition-preview-card span {
  color:color-mix(in srgb, var(--tp-primary) 62%, var(--tp-theme-text));
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.nutrition-preview-card strong {
  color:var(--tp-theme-text);
  font-size:1rem;
}

.effort-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.effort-section {
  min-width:0;
  display:grid;
  gap:10px;
  margin:0;
  padding:12px;
  border:1px solid color-mix(in srgb, var(--tp-theme-border) 86%, transparent);
  border-radius:14px;
  background:color-mix(in srgb, var(--tp-theme-surface-muted) 80%, var(--tp-theme-bg));
}

.effort-table input {
  min-width:72px;
}

.ok-total,
.warn-total {
  font-weight:850;
}

.ok-total {
  color:#86efac;
}

.warn-total {
  color:#fecaca;
  background:color-mix(in srgb, #ef4444 18%, var(--tp-theme-surface));
}

.settings-note {
  margin:0;
  padding:12px;
  border:1px solid color-mix(in srgb, var(--tp-primary) 34%, var(--tp-theme-border));
  border-radius:14px;
  background:color-mix(in srgb, var(--tp-primary) 14%, var(--tp-theme-surface));
  color:var(--tp-theme-text-muted);
  font-size:.88rem;
  line-height:1.45;
}

.settings-note strong,
.settings-note code {
  color:var(--tp-theme-text);
}

.compact-note {
  margin:0;
  font-size:.82rem;
}

@media (max-width:1100px) {
  .settings-field-grid,
  .nutrition-preview-card {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:720px) {
  .settings-field-grid,
  .settings-field-grid.two-cols,
  .nutrition-preview-card {
    grid-template-columns:1fr;
  }
}

.tp-form {
  display:grid;
  gap:var(--tp-space-4);
}

.tp-field,
.toolbar-field,
.tp-form label,
.auth-form label,
.settings-card label,
.nutrition-control label {
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.tp-label,
.toolbar-field span,
.tp-form label span,
.auth-form label span span,
.settings-card label span,
.nutrition-control label span span {
  color:var(--tp-theme-text-muted);
  font-size:var(--tp-text-xs);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--letter-wider);
  text-transform:uppercase;
}

.tp-check-row,
.tp-form label.tp-check-row,
.settings-card label.tp-check-row {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:var(--tp-space-2);
  min-height:2.7rem;
}

.tp-check-row input[type="checkbox"] {
  flex:0 0 auto;
  width:1rem;
  height:1rem;
  margin:0;
}

.tp-check-row span {
  line-height:1.2;
}


input[type="file"] {
  color:var(--tp-theme-text-muted);
}

input[type="file"]::file-selector-button {
  margin-right:.8rem;
  padding:.66rem .9rem;
  border:1px solid var(--tp-theme-border);
  border-radius:var(--tp-radius-md);
  background:var(--tp-theme-surface-muted);
  color:var(--tp-theme-text);
  font-weight:var(--fw-bold);
  cursor:pointer;
}

.tp-form-card,
.auth-card {
  padding:var(--tp-space-6);
}

.auth-helper-note,
.settings-note{
  color:var(--tp-theme-text-muted);
  font-size:var(--tp-text-sm);
  line-height:var(--lh-relaxed);
}


.alert {
  padding:var(--tp-space-4);
  border:1px solid transparent;
  border-radius:var(--tp-radius-lg);
  margin:var(--tp-space-3) 0;
}

.alert.warning,
.badge.warning{
  border-color:rgba(217, 119, 6, .26);
  background:rgba(217, 119, 6, .14);
  color:#fdba74;
}

body.tp-public-shell .alert.warning,
body.tp-public-page .alert.warning{
  border-color:rgba(255, 209, 102, .16);
  background:rgba(217, 119, 6, .14);
  color:#f6d089;
}

.alert.success{
  border:1px solid rgba(5, 150, 105, .24);
  background:rgba(5, 150, 105, .14);
  color:#86efac;
}

.alert.info,
.badge.info{
  border-color:rgba(56, 189, 248, .24);
  background:rgba(37, 99, 235, .14);
  color:#bfdbfe;
}

.alert.danger,
.badge.danger{
  border-color:rgba(220, 38, 38, .24);
  background:rgba(220, 38, 38, .14);
  color:#fecaca;
}

body.tp-public-shell .alert.success,
body.tp-public-page .alert.success{
  color:#a7f3d0;
}

.tp-empty-state,
.empty-card {
  padding:var(--tp-space-6);
  text-align:center;
  color:var(--tp-theme-text-muted);
}

.kpi-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(18rem, .78fr);
  gap:var(--tp-space-4);
  margin:var(--tp-space-4) 0;
}

.kpi-card {
  min-height:8.25rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:var(--tp-space-5);
  border-radius:var(--tp-radius-xl);
  overflow:hidden;
}

.kpi-title,
.metric-label {
  color:var(--tp-theme-text-muted);
  font-size:var(--tp-text-xs);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--letter-wider);
  text-transform:uppercase;
}

.metric-value {
  color:var(--tp-theme-text);
  font-size:clamp(1.2rem, 1.7vw, 1.75rem);
  font-weight:var(--fw-extrabold);
  line-height:var(--lh-tight);
  letter-spacing:var(--letter-tight);
  font-variant-numeric:tabular-nums;
}

.tp-table-wrap,
.table-wrap,
.settings-table-shell{
  width:100%;
  overflow:auto;
  border:1px solid var(--tp-theme-border);
  border-radius:var(--tp-radius-xl);
  background:var(--tp-theme-surface);
  box-shadow:var(--tp-shadow-sm);
  -webkit-overflow-scrolling:touch;
}


.badge{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  border-radius:var(--tp-radius-pill);
  padding:.36rem .68rem;
  border:1px solid color-mix(in srgb, var(--tp-primary) 18%, var(--tp-theme-border) 82%);
  background:color-mix(in srgb, var(--tp-primary) 10%, transparent);
  color:var(--tp-primary);
  font-size:var(--tp-text-xs);
  font-weight:var(--fw-bold);
}


.view-tabs {
  display:flex;
  flex-wrap:nowrap;
  overflow-x:visible;
  overflow-y:visible;
  white-space:nowrap;
  gap:6px;
  margin:0 0 var(--tp-space-4);
  padding:0 0 var(--tp-space-2);
  border-bottom:1px solid var(--tp-theme-border);
}

.side-panel-shell .view-tabs {
  margin:calc(-1 * var(--tp-space-5)) calc(-1 * var(--tp-space-5)) var(--tp-space-4);
  padding:var(--tp-space-4) var(--tp-space-4) var(--tp-space-3);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tp-theme-surface-muted) 94%, transparent), color-mix(in srgb, var(--tp-theme-surface) 92%, transparent));
  border-radius:var(--tp-radius-xl) var(--tp-radius-xl) 0 0;
}

.tab-button {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.58rem .82rem;
  border:1px solid transparent;
  border-radius:var(--tp-radius-pill);
  background:transparent;
  color:var(--tp-theme-text-muted);
  cursor:pointer;
  font-weight:var(--fw-bold);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.tab-button:hover {
  background:var(--tp-theme-surface-muted);
  color:var(--tp-theme-text);
  border-color:var(--tp-theme-border);
}

.tab-button.is-active,
.tab-button[aria-current="page"] {
  background:linear-gradient(135deg, var(--tp-primary), var(--tp-accent-cyan));
  color:#ffffff;
  box-shadow:0 12px 24px rgb(37 99 235 / .18);
}

@media (max-width:900px) {
  .view-tabs {
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
  }
}

.danger-menu {
  position:relative;
}

.danger-menu > summary {
  list-style:none;
}

.danger-menu > summary::-webkit-details-marker {
  display:none;
}

.danger-menu-trigger {
  min-width:42px;
}

.danger-menu-panel {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:40;
  min-width:190px;
  padding:10px;
  border:1px solid rgba(220, 38, 38, .2);
  border-radius:var(--tp-radius-lg);
  background:var(--tp-theme-surface);
  box-shadow:var(--tp-shadow-elevated);
}

body.tp-public-shell .danger-menu-panel,
body.tp-public-page .danger-menu-panel {
  background:rgb(15 31 49 / .96);
}

.course-card-menu .danger-menu-panel {
  right:0;
}

.danger-menu-panel .button.danger {
  width:100%;
}

@media (max-width:1100px) {
  .toolbar-main,
.kpi-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px) {
  .tp-toolbar,
.toolbar-card,
.settings-card-header,
.tp-card-header,
.auth-card-head{
    align-items:stretch;
  }

  .hero-actions .button,
.hero-actions .btn,
.settings-actions .button,
.public-action-row .button{
    width:100%;
  }

  .kpi-row {
    grid-template-columns:1fr;
  }
}

/* Onboarding and preparation guidance */
.tp-v2-user-pill {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  max-width:220px;
  padding:5px 9px 5px 5px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  background:rgba(15,29,49,.72);
  color:#f8fafc;
}
.tp-v2-user-avatar {
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#e0f2fe,#bfdbfe);
  color:#0f172a;
  font-size:11px;
  font-weight:950;
  letter-spacing:-.04em;
}
.tp-v2-user-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.tp-v2-user-copy strong {
  max-width:145px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:900;
}
.tp-v2-user-copy small {
  margin-top:2px;
  color:#94a3b8;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}


@media (max-width: 980px) {
  .tp-v2-user-copy { display:none; }
  .tp-v2-user-pill { padding:4px; }
  
  
  
}


/* Shared utility primitives ------------------------------------------------ */
.button.secondary,
a.button.secondary,
button.button.secondary,
.btn-secondary,
.tp-button.secondary,
.button.ghost {
  --tp-button-bg:color-mix(in srgb, var(--tp-theme-surface-muted) 78%, var(--tp-theme-bg));
  --tp-button-bg-hover:color-mix(in srgb, var(--tp-primary) 18%, var(--tp-theme-surface));
  --tp-button-bg-active:color-mix(in srgb, var(--tp-primary) 24%, var(--tp-theme-surface-muted));
  --tp-button-border:var(--tp-theme-border);
  --tp-button-color:var(--tp-theme-text);
}

.button.secondary:hover,
a.button.secondary:hover,
button.button.secondary:hover,
.btn-secondary:hover,
.tp-button.secondary:hover,
.button.ghost:hover {
  --tp-button-border:color-mix(in srgb, var(--tp-primary) 46%, var(--tp-theme-border));
  --tp-button-color:var(--tp-theme-text);
}

.compact-button,
.icon-button {
  --tp-button-bg:color-mix(in srgb, var(--tp-theme-surface-muted) 78%, var(--tp-theme-bg));
  --tp-button-bg-hover:color-mix(in srgb, var(--tp-primary) 18%, var(--tp-theme-surface));
  --tp-button-border:var(--tp-theme-border);
  --tp-button-color:var(--tp-theme-text);
}

.button.danger:hover,
.button.secondary.danger:hover {
  --tp-button-bg-hover:rgba(220, 38, 38, .14);
  --tp-button-border:rgba(220, 38, 38, .28);
  --tp-button-color:var(--tp-danger);
}

.empty-card.compact {
  padding:var(--tp-space-3);
  border-radius:var(--tp-radius-lg);
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.search-field {
  min-width:min(420px, 100%);
}

.website-button {
  white-space:nowrap;
}

.inline-form {
  display:inline-flex;
  margin:0;
}

.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline:3px solid rgba(37, 99, 235, .28);
  outline-offset:2px;
}

input[disabled],
select[disabled],
button[disabled],
.htmx-request.button,
.htmx-request .button {
  opacity:.58;
  cursor:wait;
}

/* ========================================================================== */
/* Ravitos / waypoints editor                                                 */
/* ========================================================================== */
/* Compact editable points de passage table */
.ravito-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.ravito-summary-grid > div {
  min-width: 0;
  border: 1px solid var(--tp-ravito-editor-field-border, var(--tp-theme-border));
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tp-ravito-editor-field-bg, var(--tp-theme-surface)) 96%, var(--tp-theme-bg)),
    color-mix(in srgb, var(--tp-ravito-editor-row-bg-alt, var(--tp-theme-surface-muted)) 88%, var(--tp-theme-bg))
  );
  padding: 10px 12px;
  box-shadow: 0 14px 32px rgba(2, 8, 23, .16);
}

.ravito-summary-grid span {
  display: block;
  color: var(--tp-theme-text-muted, #667085);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

.ravito-summary-grid strong {
  display: block;
  color: var(--tp-theme-text, #0f172a);
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ravito-timeline {
  position: relative;
  min-height: 96px;
  overflow: visible;
  border: 1px solid var(--tp-ravito-editor-field-border, var(--tp-theme-border));
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tp-ravito-editor-row-bg-alt, var(--tp-theme-surface-muted)) 90%, var(--tp-theme-bg)),
    color-mix(in srgb, var(--tp-ravito-editor-field-bg, var(--tp-theme-surface)) 84%, var(--tp-theme-bg))
  );
  padding: 0 18px 12px;
  margin-bottom: 16px;
  --ravito-timeline-edge-offset: 9px;
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, .08);
}

.ravito-timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 30px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tp-ravito-editor-field-border, var(--tp-theme-border)) 72%, transparent);
}

.ravito-timeline-point {
  --ravito-timeline-accent: #94a3b8;
  position: absolute;
  left: var(--ravito-pos, 0%);
  top: 12px;
  width: 124px;
  transform: translateX(-50%);
  color: var(--tp-theme-text, #0f172a);
  text-align: center;
}

.ravito-timeline-point.start {
  --ravito-timeline-accent: #22c55e;
  left: var(--ravito-timeline-edge-offset, 9px);
  transform: none;
  text-align: left;
}

.ravito-timeline-point.water {
  --ravito-timeline-accent: #38bdf8;
}

.ravito-timeline-point.complete {
  --ravito-timeline-accent: #f59e0b;
}

.ravito-timeline-point.dropbag {
  --ravito-timeline-accent: #fb923c;
}

.ravito-timeline-point.assistance {
  --ravito-timeline-accent: #2dd4bf;
}

.ravito-timeline-point.dropbag_assistance {
  --ravito-timeline-accent: #ef4444;
}

.ravito-timeline-point.passage {
  --ravito-timeline-accent: #94a3b8;
  opacity: .92;
}

.ravito-timeline-point.finish {
  --ravito-timeline-accent: #111827;
  left: auto;
  right: var(--ravito-timeline-edge-offset, 9px);
  transform: none;
  text-align: right;
}

.ravito-timeline-point::before,
.ravito-timeline.ravito-timeline-sequence .ravito-timeline-point::after {
  display: none;
  content: none;
}

.ravito-timeline-point .ravito-timeline-icon,
.ravito-timeline-point .tp-point-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  margin: 0 auto 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ravito-timeline-accent) 34%, transparent);
  background: color-mix(in srgb, var(--ravito-timeline-accent) 16%, var(--tp-ravito-editor-field-bg, var(--tp-theme-surface)) 84%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ravito-timeline-accent) 12%, transparent), 0 8px 18px rgba(2, 8, 23, .14);
}

.ravito-timeline-point.start .ravito-timeline-icon,
.ravito-timeline-point.start .tp-point-icon {
  margin-left: 0;
}

.ravito-timeline-point.finish .ravito-timeline-icon,
.ravito-timeline-point.finish .tp-point-icon {
  margin-right: 0;
}

.ravito-timeline-point .tp-point-icon__glyph {
  width: 15px;
  height: 15px;
}

.ravito-timeline-point strong,
.ravito-timeline-point em {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ravito-timeline-point strong {
  font-size: 12px;
  line-height: 1.15;
  font-weight: 950;
}

.ravito-timeline-point em {
  margin-top: 2px;
  color: var(--tp-theme-text-muted, #64748b);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

.ravito-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.ravito-editor-title {
  margin: 0 0 4px;
  color: var(--tp-theme-text, #0f172a);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 900;
}

.ravito-editor-hint {
  margin: 0;
  color: var(--tp-theme-text-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
}

.ravito-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.ravito-editor-footer .form-actions {
  margin-left: auto;
  justify-content: flex-end;
}


.ravito-delete-button,
.ravito-undo-button {
  border: 1px solid var(--tp-ravito-editor-field-border, var(--tp-theme-border));
  background: color-mix(in srgb, var(--tp-ravito-editor-field-bg, var(--tp-theme-surface)) 92%, var(--tp-theme-bg));
  color: var(--tp-theme-text, #0f172a);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, .08);
}

.ravito-add-row-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ravito-add-row-button span[aria-hidden="true"] {
  font-size: 16px;
  line-height: 1;
}

.ravito-delete-button:hover,
.ravito-undo-button:hover {
  background: var(--tp-ravito-editor-row-hover, color-mix(in srgb, var(--tp-primary) 14%, var(--tp-theme-surface)));
  border-color: color-mix(in srgb, var(--tp-ravito-editor-accent, #f59e0b) 32%, var(--tp-ravito-editor-field-border, var(--tp-theme-border)));
}

.ravito-delete-button:focus-visible,
.ravito-undo-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tp-ravito-editor-accent, #f59e0b) 42%, transparent);
  outline-offset: 2px;
}

.ravitos-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  border: 1px solid var(--tp-theme-border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tp-theme-surface) 95%, var(--tp-theme-bg)),
    color-mix(in srgb, var(--tp-theme-surface-muted) 88%, var(--tp-theme-bg))
  );
  box-shadow: 0 16px 36px rgba(2, 8, 23, .16);
}

.ravitos-table {
  table-layout: fixed;
  width: 100%;
  min-width: 920px;
  background: transparent;
}

.ravitos-table th,
.ravitos-table td {
  padding: 6px 7px;
  white-space: nowrap;
  overflow: visible;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--tp-theme-border) 78%, transparent);
  background: transparent;
}

.ravitos-table th {
  background: color-mix(in srgb, var(--tp-theme-surface-muted) 92%, var(--tp-theme-bg));
  color: var(--tp-theme-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ravitos-table .ravito-col-name { width: 180px; }
.ravitos-table .ravito-col-km { width: 88px; }
.ravitos-table .ravito-col-stop { width: 92px; }
.ravitos-table .ravito-col-type { width: 170px; }
.ravitos-table .ravito-col-notes { width: auto; }
.ravitos-table .ravito-col-action { width: 124px; }

.ravitos-table input,
.ravitos-table select {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 38px;
  padding: 7px 8px;
  font-size: 13px;
  border: 1px solid var(--tp-theme-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tp-theme-bg) 92%, var(--tp-theme-surface) 8%);
  color: var(--tp-theme-text);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, .08);
}

.ravitos-table input[name="km"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ravitos-table input[name="stop_min"] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ravito-type-cell {
  vertical-align: middle;
}

.ravitos-table .ravito-action-cell {
  text-align: center;
  overflow: visible;
}

.ravito-delete-button,
.ravito-undo-button {
  min-height: 34px;
  padding: 0 10px;
}

.ravito-delete-button {
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ravito-delete-button span[aria-hidden="true"] {
  font-size: 14px;
  line-height: 1;
}

.ravito-undo-button {
  min-height: 30px;
  padding: 0 10px;
}

.ravito-delete-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ravito-delete-pending span {
  color: var(--tp-theme-text-muted, #64748b);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 750;
  text-align: center;
}

.ravitos-editor-table tbody tr.ravito-editor-row--aid {
  --tp-ravito-editor-row-bg: var(--tp-plan-aid-row-bg, rgba(245, 158, 11, .10));
  --tp-ravito-editor-row-bg-alt: var(--tp-plan-aid-row-bg, rgba(245, 158, 11, .10));
  --tp-ravito-editor-row-hover: var(--tp-plan-aid-row-hover, rgba(245, 158, 11, .16));
  --tp-ravito-editor-row-focus: var(--tp-plan-aid-row-hover, rgba(245, 158, 11, .16));
  --tp-ravito-editor-accent: var(--tp-plan-aid-row-text, #f59e0b);
}

.ravitos-editor-table tbody tr.ravito-editor-row--point {
  --tp-ravito-editor-accent: var(--tp-accent-cyan, #5db6ff);
}

.ravitos-editor-table tbody tr.ravito-editor-row--pending-delete {
  --tp-ravito-editor-row-bg: var(--tp-ravito-editor-row-delete-bg, rgba(239, 68, 68, .055));
  --tp-ravito-editor-row-bg-alt: var(--tp-ravito-editor-row-delete-bg, rgba(239, 68, 68, .055));
  --tp-ravito-editor-row-hover: var(--tp-ravito-editor-row-delete-bg, rgba(239, 68, 68, .075));
  --tp-ravito-editor-row-focus: var(--tp-ravito-editor-row-delete-bg, rgba(239, 68, 68, .075));
}


.ravitos-table input:focus,
.ravitos-table select:focus {
  outline:2px solid color-mix(in srgb, var(--tp-ravito-editor-accent, #f59e0b) 30%, transparent);
  border-color:color-mix(in srgb, var(--tp-ravito-editor-accent, #f59e0b) 55%, var(--tp-ravito-editor-field-border, var(--tp-theme-border)));
}

.ravitos-table th,
.ravitos-table td {
  text-align:left;
}

.ravitos-table .new-row {
  background:var(--tp-ravito-editor-row-bg-alt, color-mix(in srgb, var(--tp-theme-surface-muted) 88%, var(--tp-theme-bg)));
}

.ravito-editor-row,
.ravitos-editor-table tbody tr {
  background: color-mix(in srgb, var(--tp-theme-surface) 92%, var(--tp-theme-bg));
}

.nutrition-alert {
  margin-top:8px;
  display:inline-flex;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:900;
}

.nutrition-alert.ok {
  background:#dcfce7;
  color:#166534;
}

.nutrition-alert.warn {
  background:rgba(245, 158, 11, .14);
  color:#92400e;
}

.effort-profile-matrix-shell {
  overflow:auto;
}

.tp-footer {
  width:min(100%, var(--tp-footer-max-width, 1280px));
  margin:clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid color-mix(in srgb, var(--tp-theme-border) 68%, transparent);
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--tp-theme-surface-muted) 72%, var(--tp-theme-bg)),
    color-mix(in srgb, var(--tp-theme-bg) 94%, #020617)
  );
  color:var(--tp-theme-text-muted);
}

.tp-footer p {
  margin:0;
  color:inherit;
}

.tp-footer-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem 1rem;
}

.tp-footer a {
  color:var(--tp-theme-text);
  text-decoration:none;
  font-weight:800;
}

.tp-footer a:hover,
.tp-footer a:focus-visible {
  color:var(--tp-primary);
  text-decoration:underline;
  text-underline-offset:.18em;
}

@media (max-width:720px) {
  .tp-footer {
    align-items:flex-start;
    flex-direction:column;
  }

  .tp-footer-links {
    justify-content:flex-start;
  }
}

/* Shared compact date/time display for data tables. */
.tp-date-time {
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.12rem;
  min-width:max-content;
  line-height:1.05;
}

.tp-date-main {
  color:var(--tp-theme-text);
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
}

.tp-time-main {
  color:var(--tp-theme-text-muted);
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}

.tp-date-time--inline {
  flex-direction:row;
  align-items:center;
  gap:.35rem;
}

.tp-date-time--inline .tp-time-main::before {
  content:"·";
  margin-right:.35rem;
  color:var(--tp-theme-text-muted);
}

.effort-profile-matrix {
  min-width:760px;
}

.effort-profile-matrix th,
.effort-profile-matrix td {
  vertical-align:middle;
}

.effort-profile-matrix input {
  min-width:70px;
  max-width:110px;
}

.effort-profile-rule {
  color:var(--tp-theme-text-muted);
  font-size:.78rem;
  min-width:160px;
}

@media (max-width: 1200px) {
  .ravito-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ravito-editor-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ravito-editor-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .ravito-editor-footer .form-actions {
    margin-left: 0;
    justify-content: stretch;
  }

  .ravito-editor-footer .form-actions > * {
    flex: 1 1 0;
  }

  .ravito-add-row-button {
    justify-content: center;
    align-self: flex-start;
  }

  .ravitos-table {
    font-size: 12.5px;
  }

  .ravitos-table th,
  .ravitos-table td {
    padding: 5px 4px;
  }

  .ravitos-table input,
  .ravitos-table select {
    padding: 6px 5px;
    font-size: 12.5px;
  }
}

@media (max-width: 760px) {
  .ravito-summary-grid {
    grid-template-columns: 1fr;
  }

  .ravito-timeline-point {
    width: 94px;
  }

  .ravito-timeline-point strong {
    font-size: 11px;
  }

  .ravito-timeline-point em {
    font-size: 10px;
  }
}