/* ===========================================================================
   Service documents — Privacy, Terms, Help Center
   Layout: layouts/_default/support-doc.html

   Page-specific composition only. Every token, plate, module, label and control
   comes from assets/css/te-system.css, which must be loaded first. Nothing here
   redefines a colour or a radius; if you need a new one, it belongs in the
   system file, not here.
   =========================================================================== */

/* ── 01  MASTHEAD ─────────────────────────────────────────────────────────── */

.mfte .te-doc__masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 258px;
  gap: 48px;
  align-items: start;
}

.mfte .te-doc__title { max-width: 16ch; }

.mfte .te-doc__synopsis {
  margin-top: 18px;
  max-width: 52ch;
}

.mfte .te-doc__synopsis p {
  margin: 0 0 0.8em;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--te-fg-soft);
}

.mfte .te-doc__synopsis p:last-child { margin-bottom: 0; }

/* Document status panel. Values are mono, labels are mono, because this is a
   spec block and reads as one. */
.mfte .te-doc__status { padding: 18px 18px 16px; }

.mfte .te-doc__meta { margin: 0; }

.mfte .te-doc__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--te-plate-edge);
}

.mfte .te-doc__meta-row:last-child { border-bottom: 0; padding-bottom: 0; }

.mfte .te-doc__meta dt,
.mfte .te-doc__meta dd {
  margin: 0;
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.mfte .te-doc__meta dt {
  text-transform: lowercase;
  color: var(--te-fg-mute);
}

.mfte .te-doc__meta dd {
  color: var(--te-heading);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ── 02  QUICK PATHS (Help Center) ────────────────────────────────────────── */

.mfte .te-doc__section-title { max-width: 20ch; }

.mfte .te-doc__paths {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mfte .te-doc__paths a {
  display: block;
  text-decoration: none;
}

.mfte .te-doc__path-title {
  display: block;
  margin-bottom: 7px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--te-heading);
}

.mfte .te-doc__paths a:hover .te-doc__path-title { color: var(--te-accent); }

.mfte .te-doc__path-body {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--te-fg-mute);
}

/* ── 03  DOCUMENT ─────────────────────────────────────────────────────────── */

.mfte .te-doc__body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.mfte .te-doc__index .te-label { margin-bottom: 10px; }

/* Hugo emits .TableOfContents as #TableOfContents > ul. The rail styling lives
   in the system's .te-index; only the wrapper offset is set here. */
.mfte .te-doc__index #TableOfContents { margin: 0; }

.mfte .te-doc__content { max-width: var(--te-measure); }

/* ── 04  CONTACT STRIP ────────────────────────────────────────────────────── */

.mfte .te-doc__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.mfte .te-doc__strip-text { margin: 0; }

.mfte .te-doc__strip-text a {
  color: var(--te-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mfte .te-doc__strip-btn {
  padding: 12px 20px;
  font-size: 0.9375rem;
  flex: 0 0 auto;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .mfte .te-doc__paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .mfte .te-doc__masthead-grid,
  .mfte .te-doc__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .mfte .te-doc__title { max-width: 22ch; }

  /* The index stops being a rail and becomes a header block, so it must not
     stick to the viewport while the reader scrolls the document under it. */
  .mfte .te-index {
    position: static;
    padding-bottom: 8px;
  }
}

@media (max-width: 767px) {
  .mfte .te-doc__paths { grid-template-columns: minmax(0, 1fr); }

  .mfte .te-doc__strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .mfte .te-doc__strip-btn { width: 100%; justify-content: center; }
}