/*
#######################################################################
# 🐢 TRTL UX — Turtle Accounts Skin
# File: /assets/css/ta.css
# Version: v1.0.0-TA  (inherits TRTL Global + Home)
# Notes:
# - TA-specific layout adjustments ONLY.
# - Uses TMVP Classic (same family as About, Login, TSSO).
# - Non-destructive: never overrides Turtle global tokens.
#######################################################################
*/

/* ------------------------------------------------------
   TMVP PAGE CONTAINER (matches About/Login TMVP behavior)
------------------------------------------------------- */
.ta-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------
   MAIN CONTENT AREA
   - Respect left-rail width (72 → 240)
   - Maintain TMVP "viewport-centered" card canvas
------------------------------------------------------- */
.ta-main {
  flex: 1;
  padding: 32px 24px;
  max-width: 960px;                /* TMVP sweet spot */
  margin-left: calc(72px + 24px);  /* collapsed rail */
  transition: margin-left .20s cubic-bezier(.2,0,0,1);
}

/* When rail expands */
#t-leftrail.open ~ .ta-grid .ta-main,
#t-leftrail.open ~ .ta-main {
  margin-left: calc(240px + 24px);
}

/* ------------------------------------------------------
   TA GRID WRAPPER (optional, matches About Turtle)
------------------------------------------------------- */
.ta-grid {
  display: flex;
  flex-direction: row;
}

/* ------------------------------------------------------
   MULTIVIEW CARD SYSTEM (TMVP-PURE)
------------------------------------------------------- */
.ta-view {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}

.ta-view.ta-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.ta-view.ta-hidden {
  display: none !important;
}

/* ------------------------------------------------------
   TA HEADERS / SECTION TITLES
------------------------------------------------------- */
.ta-title-xl {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--t-fg);
  margin-bottom: 12px;
}

.ta-subtle {
  color: var(--t-muted);
  font-size: 15px;
  margin-bottom: 24px;
}

/* ------------------------------------------------------
   TA CARDS (inherits Turtle cards but tighter spacing)
------------------------------------------------------- */
.ta-card {
  background: var(--t-bg);
  border: 1px solid var(--t-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--t-shadow-sm);
  margin-bottom: 24px;
}

.ta-card h2 {
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--t-fg);
}

.ta-card p {
  margin: 0 0 12px;
  color: var(--t-muted);
}

/* Button consistency with Turtle tokens */
.ta-card .btn,
.ta-main .btn {
  border-radius: 999px;
  font-weight: 600;
}

/* Ensure TA green button uses Turtle Green */
.btn-green {
  background: var(--t-green) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ------------------------------------------------------
   FOOTER SPACING FIX
   - Ensures left-rail never overlaps footer
------------------------------------------------------- */
.tn-footer,
.ftr {
  padding-left: calc(72px + 24px);
  transition: padding-left .20s cubic-bezier(.2,0,0,1);
}

#t-leftrail.open ~ .tn-footer,
#t-leftrail.open ~ .ftr {
  padding-left: calc(240px + 24px);
}

/* ------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */
@media (max-width: 860px) {

  .ta-main {
    margin-left: 0 !important;   /* rail becomes overlay on mobile */
    padding: 24px 16px;
    max-width: 100%;
  }

  .tn-footer,
  .ftr {
    padding-left: 16px !important;
  }
}