/* ==========================================================================
 * Settings and account
 * --------------------------------------------------------------------------
 * These pages carried a full set of classes - account-panel, account-btn,
 * account-hero - defined in style.css, which base_app.html never loads. Every
 * one of those rules was dead, so the pages rendered as unstyled documents:
 * flush-left text, no surfaces, and whatever buttons Bootstrap gave them,
 * which is why they looked like a different product.
 *
 * This is their definition, in the language the rest of the app already uses:
 * warm surfaces, one hairline, one radius, one accent.
 *
 * Scoped on data-app-page rather than a body class: every standalone template
 * sets the attribute, while help.html never set the class and so was excluded
 * from its own styling.
 * ======================================================================== */

body[data-app-page="standalone"] {
  --st-ink: #0B1433;
  --st-ink-soft: #3B4860;
  --st-ink-muted: #959FB2;
  --st-line: #DEDCD6;
  --st-surface: #FFFFFF;
  --st-raise: #F7F6F2;
  --st-accent: #0B1F4D;
  --st-accent-deep: #0B1433;
}

/* ── Page ──────────────────────────────────────────────────────────────── */
body[data-app-page="standalone"] .account-content,
body[data-app-page="standalone"] .account-body,
body[data-app-page="standalone"] .connectors-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

/* ── Identity header ───────────────────────────────────────────────────── */
body[data-app-page="standalone"] .account-hero { padding: 1.25rem 0 0; }
body[data-app-page="standalone"] .account-hero .container { max-width: 860px; padding: 0 1.25rem; }

body[data-app-page="standalone"] .account-hero__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--st-line);
  border-radius: 16px;
  background: var(--st-surface);
  box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04);
}

body[data-app-page="standalone"] .account-hero__avatar {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 31, 77, 0.14);
  color: var(--st-accent-deep);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body[data-app-page="standalone"] .account-hero__badge {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-ink-muted);
}
body[data-app-page="standalone"] .account-hero__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--st-ink);
  overflow-wrap: anywhere;
}

body[data-app-page="standalone"] .account-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--st-raise);
  color: var(--st-ink-soft);
  font-size: 0.8rem;
}
body[data-app-page="standalone"] .account-hero__meta-item i { color: var(--st-ink-muted); font-size: 0.76rem; }

/* ── Panels ────────────────────────────────────────────────────────────── */
body[data-app-page="standalone"] .account-panel {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem 1.4rem;
  border: 1px solid var(--st-line);
  border-radius: 16px;
  background: var(--st-surface);
  box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04);
}

body[data-app-page="standalone"] .account-panel__header {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
body[data-app-page="standalone"] .account-panel__header h2,
body[data-app-page="standalone"] .account-panel__header h3 {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--st-ink);
}
body[data-app-page="standalone"] .account-panel__header p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--st-ink-muted);
}

body[data-app-page="standalone"] .account-panel__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--st-raise);
  color: var(--st-ink-soft);
  font-size: 0.9rem;
}
body[data-app-page="standalone"] .account-panel__icon--amber {
  background: rgba(11, 31, 77, 0.12);
  color: var(--st-accent-deep);
}

body[data-app-page="standalone"] .account-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ── Fields ────────────────────────────────────────────────────────────── */
body[data-app-page="standalone"] .account-field {
  display: block;
  margin-bottom: 0.9rem;
}
body[data-app-page="standalone"] .account-field > label,
body[data-app-page="standalone"] .account-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--st-ink-soft);
}
body[data-app-page="standalone"] .account-form .form-control,
body[data-app-page="standalone"] .account-form .form-select,
body[data-app-page="standalone"] .account-input-wrap .form-control,
body[data-app-page="standalone"] .account-field input,
body[data-app-page="standalone"] .account-field select {
  width: 100%;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--st-line);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--st-ink);
  font-size: 0.9rem;
}
body[data-app-page="standalone"] .account-form .form-control:focus,
body[data-app-page="standalone"] .account-field input:focus,
body[data-app-page="standalone"] .account-field select:focus {
  outline: none;
  border-color: var(--st-accent);
  box-shadow: 0 0 0 3px rgba(11, 31, 77, 0.16);
}
body[data-app-page="standalone"] .account-input-wrap {
  position: relative;
  display: block;
}

/* The icon marks the field rather than sitting beside it: as a flex sibling it
   took a column of its own and pushed the input off the left edge of the row. */
body[data-app-page="standalone"] .account-input-wrap > i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-ink-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

body[data-app-page="standalone"] .account-input-wrap .form-control,
body[data-app-page="standalone"] .account-input-wrap input {
  padding-left: 2.4rem;
}

/* A select and the chevron drawn over it. Without a position on the wrapper
   the chevron fell out of the box to wherever it would have sat in the flow,
   which was a line below the field. */
body[data-app-page="standalone"] .account-select {
  position: relative;
  display: block;
}

body[data-app-page="standalone"] .account-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
}

body[data-app-page="standalone"] .account-select__icon {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-ink-muted);
  font-size: 0.8rem;
  pointer-events: none;
}
body[data-app-page="standalone"] .account-form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

body[data-app-page="standalone"] .account-muted,
body[data-app-page="standalone"] .account-password-rule {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--st-ink-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* One accent. These were navy in a terracotta product. */
body[data-app-page="standalone"] .account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--st-accent);
  border-radius: 10px;
  background: var(--st-accent);
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out,
    color 150ms ease-out, transform 100ms ease-out;
}
body[data-app-page="standalone"] .account-btn:hover {
  background: var(--st-accent-deep);
  border-color: var(--st-accent-deep);
  color: #FFFFFF;
}
body[data-app-page="standalone"] .account-btn:active { transform: scale(0.98); }
body[data-app-page="standalone"] .account-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 31, 77, 0.24);
}
body[data-app-page="standalone"] .account-btn--full { width: 100%; }

body[data-app-page="standalone"] .account-btn--ghost {
  border-color: var(--st-line);
  background: #FFFFFF;
  color: var(--st-ink-soft);
}
body[data-app-page="standalone"] .account-btn--ghost:hover {
  border-color: var(--st-accent);
  background: rgba(11, 31, 77, 0.06);
  color: var(--st-ink);
}

/* ── Status, alerts, lists ─────────────────────────────────────────────── */
body[data-app-page="standalone"] .account-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--st-raise);
  color: var(--st-ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
}

body[data-app-page="standalone"] .account-alert {
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 11px;
  background: rgba(11, 31, 77, 0.08);
  color: #846305;
  font-size: 0.87rem;
  line-height: 1.5;
}

body[data-app-page="standalone"] .account-connector-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-app-page="standalone"] .account-connector-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  background: #FFFFFF;
}

/* ── Page chrome shared by every standalone page ───────────────────────── */
body[data-app-page="standalone"] .page-title,
body[data-app-page="standalone"] h1.page-title {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--st-ink);
}

@media (max-width: 620px) {
  body[data-app-page="standalone"] .account-hero__card { flex-direction: column; align-items: flex-start; }
  body[data-app-page="standalone"] .account-panel { padding: 1.1rem 1rem 1.2rem; }
  body[data-app-page="standalone"] .account-form--inline { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
 * Pages built from Bootstrap primitives
 * --------------------------------------------------------------------------
 * Help and a few others use plain .card / .btn rather than the account-*
 * classes, so they inherited Bootstrap's navy and its underline inputs. The
 * same surfaces and the same accent apply here; a page should not announce
 * which components it happens to be built from.
 * ======================================================================== */
body[data-app-page="standalone"] .card,
body[data-app-page="standalone"] .card.border-0 {
  border: 1px solid var(--st-line);
  border-radius: 16px;
  background: var(--st-surface);
  box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04);
}
body[data-app-page="standalone"] .card-body { padding: 1.35rem 1.5rem; }
body[data-app-page="standalone"] .card h2,
body[data-app-page="standalone"] .card .h5 {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--st-ink);
}

body[data-app-page="standalone"] .form-control,
body[data-app-page="standalone"] .form-select,
body[data-app-page="standalone"] textarea.form-control {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--st-line);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--st-ink);
  font-size: 0.9rem;
}
body[data-app-page="standalone"] textarea.form-control { min-height: 110px; }
body[data-app-page="standalone"] .form-control:focus,
body[data-app-page="standalone"] .form-select:focus {
  border-color: var(--st-accent);
  box-shadow: 0 0 0 3px rgba(11, 31, 77, 0.16);
}
body[data-app-page="standalone"] .form-label,
body[data-app-page="standalone"] label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--st-ink-soft);
}

body[data-app-page="standalone"] .btn-primary,
body[data-app-page="standalone"] button[type="submit"].btn:not(.btn-outline-secondary):not(.conn-btn):not(.account-btn) {
  border: 1px solid var(--st-accent);
  border-radius: 10px;
  background: var(--st-accent);
  color: #FFFFFF;
  font-weight: 600;
}
body[data-app-page="standalone"] .btn-primary:hover,
body[data-app-page="standalone"] button[type="submit"].btn:not(.btn-outline-secondary):not(.conn-btn):not(.account-btn):hover {
  background: var(--st-accent-deep);
  border-color: var(--st-accent-deep);
  color: #FFFFFF;
}

body[data-app-page="standalone"] .btn-outline-secondary {
  border: 1px solid var(--st-line);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--st-ink-soft);
  font-weight: 600;
}
body[data-app-page="standalone"] .btn-outline-secondary:hover {
  border-color: var(--st-accent);
  background: rgba(11, 31, 77, 0.06);
  color: var(--st-ink);
}

/* Links inside the page only. Colouring every anchor on the body turned the
   sidebar's navigation orange, and that chrome is shared with the app. */
body[data-app-page="standalone"] .card a,
body[data-app-page="standalone"] .account-panel a,
body[data-app-page="standalone"] .account-content a,
body[data-app-page="standalone"] .conn-page a:not(.btn):not(.conn-btn) {
  color: var(--st-accent-deep);
}
body[data-app-page="standalone"] .card a:hover,
body[data-app-page="standalone"] .account-panel a:hover,
body[data-app-page="standalone"] .account-content a:hover,
body[data-app-page="standalone"] .conn-page a:not(.btn):not(.conn-btn):hover {
  color: var(--st-accent);
}

body[data-app-page="standalone"] .form-check-input:checked {
  background-color: var(--st-accent);
  border-color: var(--st-accent);
}

/* ── The contact form on Aide ──────────────────────────────────────────────
 * Its field styles live in public.css, which base_app.html does not load, so
 * on Assistance the icons sat outside the inputs and the inputs kept whatever
 * width Bootstrap gave them. Same shape as the rest of the settings pages.
 * ======================================================================== */
body[data-app-page="standalone"] .contact-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body[data-app-page="standalone"] .contact-form .form-field {
  margin-bottom: 1rem;
  min-width: 0;
}

body[data-app-page="standalone"] .contact-form .form-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--st-ink-soft);
}

body[data-app-page="standalone"] .contact-form .input-with-icon,
body[data-app-page="standalone"] .contact-form .textarea-with-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.85rem;
  min-height: 40px;
  border: 1px solid var(--st-line);
  border-radius: 10px;
  background: var(--st-surface);
}

body[data-app-page="standalone"] .contact-form .textarea-with-icon {
  align-items: flex-start;
  padding: 0.6rem 0.85rem;
}

body[data-app-page="standalone"] .contact-form .input-with-icon:focus-within,
body[data-app-page="standalone"] .contact-form .textarea-with-icon:focus-within {
  border-color: var(--st-accent);
  box-shadow: 0 0 0 3px rgba(11, 31, 77, 0.12);
}

body[data-app-page="standalone"] .contact-form .input-with-icon i,
body[data-app-page="standalone"] .contact-form .textarea-with-icon i {
  flex: 0 0 auto;
  color: var(--st-ink-muted);
  font-size: 0.85rem;
}

body[data-app-page="standalone"] .contact-form .textarea-with-icon i {
  margin-top: 0.35rem;
}

body[data-app-page="standalone"] .contact-form input,
body[data-app-page="standalone"] .contact-form textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--st-ink);
  box-shadow: none;
}

body[data-app-page="standalone"] .contact-form textarea {
  min-height: 7rem;
  resize: vertical;
}

body[data-app-page="standalone"] .contact-form input:focus,
body[data-app-page="standalone"] .contact-form textarea:focus {
  outline: none;
  box-shadow: none;
}

body[data-app-page="standalone"] .contact-form .privacy-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  font-size: 0.9rem;
  color: var(--st-ink-soft);
}

/* The box is a box: as a flex child with nothing holding it back it stretched
   to 405px and the sentence beside it wrapped onto two lines. */
body[data-app-page="standalone"] .contact-form .privacy-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--st-line);
  border-radius: 4px;
  background: var(--st-surface);
  cursor: pointer;
}

body[data-app-page="standalone"] .contact-form .privacy-check input[type="checkbox"]:checked {
  background: var(--st-accent);
  border-color: var(--st-accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}

body[data-app-page="standalone"] .contact-form .privacy-check label {
  margin: 0;
}

@media (max-width: 767.98px) {
  body[data-app-page="standalone"] .contact-form .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Who the message will be from.
 *
 * Signed in, the form no longer asks for a name or an address; it says which
 * ones it will use. That is a statement, not a field, so it reads as one: the
 * tint of the interface, the icon aligned with the first line rather than
 * floating before it, and the address quiet beside the name.
 */
body[data-app-page="standalone"] .contact-as {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: var(--t-tint, #F3F7FF);
  color: var(--st-ink, #0B1433);
  font-size: 0.9rem;
  line-height: 1.45;
}

body[data-app-page="standalone"] .contact-as i {
  color: var(--st-accent);
  flex: 0 0 auto;
}

body[data-app-page="standalone"] .contact-as strong { font-weight: 600; }

/* The three channels on the left were Bootstrap blue - the one colour this
   interface does not use. */
body[data-app-page="standalone"] .help-channel i,
body[data-app-page="standalone"] .help-card i {
  color: var(--st-accent);
}

/* ============================================================
   The account page as a page, not a column
   ------------------------------------------------------------
   Six cards of equal weight stacked down an 860px column is a
   list you scroll until you find the thing, and nothing on
   screen says what else is on the page. A standing index on the
   left says it before you scroll, and the column beside it can
   be wider because it no longer has to be the whole page.
   ============================================================ */
body[data-app-page="standalone"] .account-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 2.25rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

/* The body keeps its own rules for the panels; the width and the
   centring now belong to the grid above it. */
body[data-app-page="standalone"] .account-layout .account-body {
  max-width: none;
  margin: 0;
  padding: 0;
}

body[data-app-page="standalone"] .account-nav {
  position: sticky;
  top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

body[data-app-page="standalone"] .account-nav__eyebrow {
  margin: 0 0 0.6rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-faint, #959FB2);
}

body[data-app-page="standalone"] .account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

body[data-app-page="standalone"] .account-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--st-ink-soft, #3B4860);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
body[data-app-page="standalone"] .account-nav a i {
  width: 1rem;
  font-size: 0.85rem;
  color: var(--st-faint, #959FB2);
}
body[data-app-page="standalone"] .account-nav a:hover {
  background: rgba(11, 31, 77, 0.06);
  color: var(--st-navy, #0B1F4D);
}
body[data-app-page="standalone"] .account-nav a:hover i { color: var(--st-navy, #0B1F4D); }

body[data-app-page="standalone"] .account-nav__logout {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.5rem 0.65rem;
  border-top: 1px solid var(--st-line, #DEDCD6);
  padding-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #C32324;
  text-decoration: none;
}
body[data-app-page="standalone"] .account-nav__logout:hover { color: #9B1F1D; }

/* The first panel should not be pushed down by a margin meant to
   separate it from the one above, because there isn't one. */
body[data-app-page="standalone"] .account-body > .account-panel:first-of-type { margin-top: 0; }

/* ── Sessions ─────────────────────────────────────────────────
   Rows, not cards: these are peers, and a frame round each one
   would be the same mistake the rest of the product just undid.
   ============================================================ */
body[data-app-page="standalone"] .session-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body[data-app-page="standalone"] .session-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--st-line, #DEDCD6);
}
body[data-app-page="standalone"] .session-row:first-child { border-top: 0; padding-top: 0; }

body[data-app-page="standalone"] .session-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(11, 31, 77, 0.07);
  color: var(--st-navy, #0B1F4D);
  font-size: 0.85rem;
}

body[data-app-page="standalone"] .session-row__body { flex: 1 1 auto; min-width: 0; }

body[data-app-page="standalone"] .session-row__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--st-ink, #0B1433);
}

body[data-app-page="standalone"] .session-row__badge {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(11, 31, 77, 0.09);
  color: var(--st-navy, #0B1F4D);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-app-page="standalone"] .session-row__meta {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: var(--st-muted, #596378);
}

/* Something the person has to act on to change, said in the colour the rest
   of the page uses for that, without a box around it. */
body[data-app-page="standalone"] .session-row__note {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #9B1F1D;
}

body[data-app-page="standalone"] .session-row__action { margin: 0; flex-shrink: 0; }

body[data-app-page="standalone"] .session-row__end {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--st-line, #DEDCD6);
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--st-ink-soft, #3B4860);
}
body[data-app-page="standalone"] .session-row__end:hover {
  border-color: #FFC4BB;
  background: #F7F6F2;
  color: #C32324;
}

/* A session that has ended stays on the list - that is the half of
   the history worth having - but it should not compete with the
   ones that are live. */
body[data-app-page="standalone"] .session-row--ended { opacity: 0.55; }
body[data-app-page="standalone"] .session-row--ended .session-row__icon {
  background: var(--st-surface-soft, #FBFAF7);
  color: var(--st-faint, #959FB2);
}

body[data-app-page="standalone"] .session-list__bulk { margin-top: 1rem; }
body[data-app-page="standalone"] .session-list__note {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  body[data-app-page="standalone"] .account-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  body[data-app-page="standalone"] .account-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }
  body[data-app-page="standalone"] .account-nav__eyebrow { display: none; }
  body[data-app-page="standalone"] .account-nav ul { flex-direction: row; flex-wrap: wrap; }
  body[data-app-page="standalone"] .account-nav__logout {
    margin-top: 0;
    border-top: 0;
    padding-top: 0.5rem;
  }
  body[data-app-page="standalone"] .session-row { flex-wrap: wrap; }
}

/* ── Sections ─────────────────────────────────────────────────
   The index used to scroll a single page, which left every
   setting on screen at once: to reach the language menu you
   read past two-factor authentication and five connectors.
   One at a time is what separates them. `is-sectioned` is added
   by the script, so without JavaScript every panel stays
   visible and the page is the scrolling one it was.
   ============================================================ */
body[data-app-page="standalone"] .account-nav a.is-active {
  background: var(--st-tint, #F3F7FF);
  color: var(--st-navy, #0B1F4D);
}
body[data-app-page="standalone"] .account-nav a.is-active i {
  color: var(--st-navy, #0B1F4D);
}

/* The section's own title, so the column says what it is now that
   the nav no longer sits beside all of it at once. */
body[data-app-page="standalone"] .account-section__title {
  margin: 0 0 1.1rem;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--st-ink, #0B1433);
}
body[data-app-page="standalone"] .account-layout:not(.is-sectioned) .account-section__title {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  body[data-app-page="standalone"] .account-nav a.is-active {
    background: var(--st-tint, #F3F7FF);
  }
}

/* Facts about the account: a list of pairs, not a form and not a
   row of chips in a banner. */
body[data-app-page="standalone"] .account-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.15rem 1.5rem;
  margin: 0 0 1rem;
}
body[data-app-page="standalone"] .account-fact {
  padding: 0.6rem 0;
  border-top: 1px solid var(--st-line, #DEDCD6);
}
body[data-app-page="standalone"] .account-fact dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--st-muted, #596378);
}
body[data-app-page="standalone"] .account-fact dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--st-ink, #0B1433);
  overflow-wrap: anywhere;
}
body[data-app-page="standalone"] .account-fact__none {
  font-weight: 500;
  color: var(--st-muted, #596378);
}

/* On a phone, the sections as wide as the card above them. The page's padding
   and the layout's were both applied, so they were read in 262px of a 390px
   screen; and the index wrapped one link per line after the first two
   (25 September). */
@media (max-width: 900px) {
  body[data-app-page="standalone"] .account-content,
  body[data-app-page="standalone"] .account-layout {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 620px) {
  body[data-app-page="standalone"] .account-nav {
    flex-direction: column;
    align-items: stretch;
  }
  body[data-app-page="standalone"] .account-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
  }
}

body[data-app-page="standalone"] .account-hero__where {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--st-muted, #596378);
}

/* Assistants IA (MCP) panel */
.mcp-caps { margin: 0.25rem 0 1rem; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.mcp-url code { display: inline-block; padding: 0.45rem 0.7rem; border-radius: 8px; background: #F7F6F2; font-size: 0.92rem; user-select: all; }
.mcp-note { font-size: 0.82rem; }
.mcp-subtitle { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #959FB2; margin: 1.5rem 0 0.6rem; }