/* app.css -- Moved to Act app layer, loaded after movedtoact-brand.css.
   Uses only shared tokens (tokens.css); adds the story/action components,
   forms and the phone tab bar approved for this site (decision A4, 2026-10-03). */

.mta-main { padding-bottom: calc(var(--space-16, 4rem) + env(safe-area-inset-bottom)); }
.mta-flash { margin: var(--space-4) 0; }
.mta-small { font-size: var(--text-sm); color: var(--text-soft); }
.mta-inline { display: inline; }

/* stories: one row per story, the story in the left two-thirds and its
   actions in the right third above 900px (redesign 2026-10-04) */
.mta-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  background: var(--bg-card); border: 1px solid var(--card-border, var(--rule));
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-sm);
  margin: 0 0 var(--space-7, 28px); overflow: hidden; scroll-margin-top: calc(var(--nav-height, 64px) + 16px);
}
.mta-story { padding: var(--space-7, 28px) var(--space-8, 32px) var(--space-6, 24px); min-width: 0; }
.mta-story-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-md, 8px); margin: 0 0 var(--space-4); }
.mta-kindrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: baseline; margin: 0 0 var(--space-2); }
.mta-kind { font-family: var(--font-chrome); font-size: var(--text-xs, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 0; }
.mta-fill { color: var(--text-soft); }
details.why { font-family: var(--font-chrome); font-size: var(--text-sm); }
details.why summary { cursor: pointer; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; list-style: none; }
details.why summary::-webkit-details-marker { display: none; }
details.why[open] { flex-basis: 100%; }
details.why > div { margin-top: var(--space-2); padding: 10px 12px; border-radius: var(--radius-sm, 6px); background: var(--navy-pale); color: var(--text); line-height: 1.5; }
.mta-story-title { font-family: var(--font-display); font-size: var(--text-2xl, 1.5rem); line-height: 1.25; margin: 0 0 var(--space-3); text-wrap: balance; }
.mta-story-title a { color: inherit; text-decoration: none; }
.mta-story-title a:hover { text-decoration: underline; }
.mta-story-body p { margin: 0 0 var(--space-3); line-height: 1.7; }
.mta-source { font-family: var(--font-chrome); font-size: var(--text-sm); color: var(--text-soft); margin: var(--space-1) 0; }
.mta-moved-wrap { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--rule); }
.mta-moved { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-family: var(--font-chrome); }
.mta-moved-q { font-weight: 700; margin-right: var(--space-1); }
.mta-moved-stop small { display: block; margin-top: 6px; color: var(--text-soft); font-family: var(--font-chrome); font-size: var(--text-sm); }
.mta-linkish { border: 0; background: none; padding: 0; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.mta-side { background: var(--teal-pale); border-left: 1px solid var(--rule); padding: var(--space-7, 28px) var(--space-6, 24px); display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.mta-pair { display: flex; flex-direction: column; gap: var(--space-2); }
.mta-pair + .mta-pair { border-top: 1px solid var(--teal-soft); padding-top: var(--space-5); }
.mta-pair-label { font-family: var(--font-chrome); font-size: var(--text-xs, .75rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0; }
.mta-pair-title { font-family: var(--font-display); font-size: var(--text-lg, 1.15rem); line-height: 1.3; margin: 0; }
.mta-pair-title a { color: inherit; }
.mta-pair-meta { font-family: var(--font-chrome); font-size: var(--text-sm); color: var(--text-soft); margin: 0; }
.mta-pair-sum { margin: 0; line-height: 1.6; }
.mta-pair-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-1); }
.mta-pair-btns.one { grid-template-columns: 1fr; }
.mta-pair-btns form { margin: 0; display: contents; }
.mta-pair-btns .cta-button, .mta-pair-btns .btn { width: 100%; margin: 0; padding: .7rem .4rem; font-size: var(--text-sm); letter-spacing: .02em; text-align: center; white-space: normal; line-height: 1.25; }
/* The two choices are equal in size and weight; the second is outlined. */
.mta-pair-btns .cta-button, .mta-pair-btns .btn { text-transform: none; font-family: var(--font-chrome); font-weight: 700; border-radius: var(--radius-sm, 4px); min-height: 44px; }
.mta-pair-btns .btn-secondary, .mta-do-btns .btn-secondary { background: var(--bg-card); color: var(--teal-deep); border: 1.5px solid var(--teal); }
.mta-pair-btns .btn-secondary:hover, .mta-do-btns .btn-secondary:hover { background: var(--teal-pale); color: var(--teal-deep); }
.mta-side .mta-linkish, .mta-moved-stop .mta-linkish { font-family: var(--font-chrome); font-size: var(--text-sm); }
.mta-do-btns { max-width: 460px; }
.mta-note { font-family: var(--font-chrome); font-size: var(--text-sm); line-height: 1.5; background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-sm, 6px); padding: 10px 12px; }
.mta-end, .mta-open, .mta-do {
  margin: var(--space-8) 0; padding: var(--space-6);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-strip); border: 1px solid var(--rule);
}
.mta-do { background: var(--teal-pale); border-color: var(--teal-soft); }
.mta-open { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); }
.mta-open ul { margin: var(--space-2) 0; }

/* Today: index of the day's stories, and the boxes above the rows */
.mta-index-wrap { margin: 0 0 var(--space-6); }
.mta-index-wrap .section-label { margin-bottom: var(--space-1); }
.mta-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; counter-reset: ix; }
.mta-index li { counter-increment: ix; }
.mta-index a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: .55rem .2rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--text); font-family: var(--font-chrome); font-size: var(--text-sm); }
.mta-index a::before { content: counter(ix); font-weight: 700; color: var(--gold); }
.mta-index a:hover .mta-index-t { text-decoration: underline; }
.mta-index-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mta-state { font-family: var(--font-chrome); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-pill, 999px); white-space: nowrap; }
.mta-state.committed { background: var(--teal-soft); color: var(--teal-deep); }
.mta-state.saved { background: var(--gold-soft); color: var(--text); }
.mta-state.done { background: var(--teal); color: #fff; }
.mta-asides { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 18px; }
.mta-aside { border: 1px solid var(--teal); border-radius: var(--radius-md, 8px); padding: var(--space-4) 18px; margin: 0 0 18px; background: var(--bg-card); }
.mta-aside-saved { border-color: var(--gold); }
.mta-aside-saved .section-label { color: var(--gold); }
.mta-aside p { margin: 0 0 .6rem; }
.mta-inline-btns { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 .6rem; }
.mta-inline-btns form { margin: 0; }

/* landing: plain intro band (replaces the hero carousel) */
.mta-intro { border-bottom: 1px solid var(--rule); background: var(--bg-strip); }
.mta-intro-inner { max-width: var(--max-width, 1200px); margin: 0 auto; padding: clamp(2.2rem, 5vw, 3.4rem) var(--space-6, 1.5rem); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.mta-intro .section-label { color: var(--gold); }
.mta-intro h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 var(--space-4); text-wrap: balance; }
.mta-intro-lead { font-size: var(--text-lg, 1.15rem); line-height: 1.65; color: var(--text-soft); max-width: 62ch; margin: 0; }
.mta-intro-act { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mta-intro-act p { margin: 0; }

/* record page cards and settings */
.mta-card { background: var(--bg-card); border: 1px solid var(--card-border, var(--rule)); border-radius: var(--radius-lg, 10px); padding: 20px 22px !important; margin-top: 0; margin-bottom: 18px; }
.mta-card-title { font-family: var(--font-display); font-size: var(--text-xl, 1.25rem); margin: 0 0 .6rem; }
.mta-card .mta-commit:last-of-type { border-bottom: 0; }
.mta-choice { display: flex; gap: 10px; align-items: flex-start; padding: .55rem 0; line-height: 1.45; }
.mta-choice input { margin-top: 4px; }
.mta-choice small { display: block; color: var(--text-soft); font-size: var(--text-sm); }
.mta-field { display: flex; flex-direction: column; gap: 6px; margin: .6rem 0; max-width: 320px; font-weight: 600; }
.mta-field select { min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm, 6px); border: 1px solid var(--card-border, #c9d0d8); background: var(--bg-card); color: inherit; font: inherit; font-weight: 400; }
.mta-private-note { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }

/* actions */
.mta-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin: var(--space-4) 0; }
.mta-filters label { display: flex; flex-direction: column; font-size: var(--text-sm); gap: 4px; }
.mta-filters select, .mta-filters input { min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm, 6px); border: 1px solid var(--card-border, var(--rule)); background: var(--bg-card); color: inherit; }
.mta-action-list { display: grid; gap: var(--space-2); }
.mta-action-row {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md, 8px);
  border: 1px solid var(--rule); text-decoration: none; color: inherit;
}
.mta-action-row:hover { border-color: var(--teal, #2a8a8a); }
.mta-action-row .badge { grid-row: span 2; align-self: center; }
.mta-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
.mta-facts div { padding: var(--space-3); border-radius: var(--radius-md, 8px); background: var(--bg-strip); }
.mta-facts dt { font-size: var(--text-xs, .75rem); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.mta-facts dd { margin: 4px 0 0; }

/* record */
.mta-commit { padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.mta-commit h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg, 1.15rem); }
.mta-evidence { max-width: 240px; border-radius: var(--radius-md, 8px); margin: var(--space-2) 0; }
.mta-copy { width: 100%; font-family: var(--font-mono, monospace); font-size: var(--text-sm); padding: var(--space-2); border-radius: var(--radius-sm, 6px); border: 1px solid var(--card-border, var(--rule)); background: var(--bg-card); color: inherit; }
.mta-thanks { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--gold, #d99838); background: var(--bg-strip); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; }
.mta-thanks footer { font-size: var(--text-sm); color: var(--text-soft); margin-top: var(--space-2); }
.mta-notes { list-style: none; padding: 0; }
.mta-notes li { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.mta-notes li.is-new { font-weight: 600; }
.mta-update { margin: var(--space-3) 0; }

/* forms (house .account-request vocabulary) */
.account-request .ar-field { display: block; margin: 0 0 var(--space-4); border: 0; padding: 0; }
.account-request .ar-field > span, .account-request legend { display: block; font-weight: 600; margin-bottom: 6px; }
.account-request input[type=text], .account-request input:not([type]), .account-request input[type=email],
.account-request input[type=url], .account-request textarea, .account-request select {
  width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--card-border, var(--rule)); background: var(--bg-card); color: inherit; font: inherit;
}
.account-request .ar-opt, .account-request .ar-consent { display: block; margin: var(--space-2) 0; line-height: 1.5; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* landing */
.mta-steps { padding-left: 1.2em; line-height: 1.6; }
.mta-steps li { margin-bottom: var(--space-3); }
.mta-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }
.mta-two > div { padding: var(--space-5); border-radius: var(--radius-lg, 12px); background: var(--bg-strip); }

/* phone tab bar */
.mta-tabbar { display: none; }
@media (max-width: 760px) {
  .mta-story, .mta-side { padding: var(--space-5) var(--space-4); }
  .mta-story-title { font-size: var(--text-xl, 1.3rem); }
  .mta-index { grid-template-columns: minmax(0, 1fr); }
  .mta-end { padding: var(--space-5) var(--space-4); }
  body.is-member .back-to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.is-member #footer-placeholder { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mta-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--navy, #1d2d40); border-top: 1px solid rgba(255,255,255,.08);
  }
  .mta-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
                  font-size: 11px; color: rgba(255,255,255,.72); text-decoration: none; min-height: 44px; justify-content: center; }
  .mta-tabbar a.is-active { color: #fff; }
  .mta-tabbar a.is-active .mta-ico { color: var(--gold, #d99838); }
  .mta-ico { font-size: 18px; line-height: 1; }
}
[data-theme="dark"] .mta-tabbar { background: #0f1824; }

/* [NEEDS: ...] markers in draft copy, visible until the operator fills them */
.mta-needs { background: #fff2c2; color: #5a4300; padding: 0 3px; border-radius: 3px; }
[data-theme="dark"] .mta-needs { background: #5a4300; color: #fff2c2; }

/* A plain dot on the Thanks tab when something is new: never a number (design 6.3). */
.mta-newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); vertical-align: middle; margin-left: 2px; }

/* Keep app content in the same centred column as the house page-intro.
   Today and the landing page use the wide column for the index and rows. */
.mta-main.content-page > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.mta-main.content-page > .mta-row, .mta-main.content-page > .mta-index-wrap, .mta-main.content-page > .mta-asides,
.mta-main.content-page > .mta-intro, .mta-main.content-page > .mta-sample,
.mta-main.mta-home > .page-intro, .mta-main.mta-home > .mta-end { max-width: var(--max-width, 1200px); }
.mta-main.content-page > .mta-intro { padding-left: 0; padding-right: 0; }
.mta-main.mta-home > .mta-row, .mta-main.mta-home > .mta-index-wrap, .mta-main.mta-home > .mta-asides,
.mta-main.mta-home > .page-intro { padding-left: var(--space-6, 1.5rem); padding-right: var(--space-6, 1.5rem); }
.mta-main.mta-home > .mta-row, .mta-main.content-page > .mta-sample > .mta-row { padding: 0; }
.mta-main.mta-home > .mta-row, .mta-main.mta-home > .mta-end { max-width: calc(var(--max-width, 1200px) - 2 * var(--space-6, 1.5rem)); }
@media (max-width: 760px) { .mta-main.mta-home > .mta-row { margin-left: var(--space-3, 12px); margin-right: var(--space-3, 12px); } }
@media (max-width: 1024px) { .mta-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .mta-row { grid-template-columns: minmax(0, 1fr); }
  .mta-side { border-left: 0; border-top: 1px solid var(--rule); }
  .mta-intro-inner { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}
.mta-main.content-page > .mta-action-list,
.mta-main.content-page > .mta-filters { max-width: 46rem; }
@media (max-width: 760px) { .mta-main.content-page > * { padding-left: var(--space-4); padding-right: var(--space-4); } .mta-main.content-page > .mta-story { padding-left: var(--space-4); padding-right: var(--space-4); margin-left: var(--space-3); margin-right: var(--space-3); } }
/* Crews and missions (Part 2, D3) */
.mta-mission { padding: var(--space-4); border-radius: var(--radius-md, 8px); background: var(--bg-strip); margin: 0 0 var(--space-4); }
.mta-mission.is-closed { opacity: .75; }
.mta-mission h3 { margin: 0 0 4px; font-size: var(--text-lg, 1.125rem); }
.mta-progress { height: 10px; border-radius: 5px; background: var(--rule); overflow: hidden; margin: var(--space-2, 8px) 0 4px; }
.mta-progress span { display: block; height: 100%; background: var(--teal, #2a8a8a); }
.mta-people { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.mta-people li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.mta-copy { width: 100%; max-width: 100%; font: inherit; font-size: var(--text-sm); padding: 8px; border-radius: 6px; border: 1px solid var(--card-border, var(--rule)); background: transparent; color: inherit; }
[data-theme="dark"] .mta-progress { background: rgba(255,255,255,.15); }
[data-theme="dark"] .mta-people li { border-color: rgba(255,255,255,.1); }
/* Week-later question (Part 2, D6) */
.mta-reflect { padding: var(--space-4); border-radius: var(--radius-md, 8px); border: 1px solid var(--teal, #2a8a8a); margin: var(--space-4) 0; }
.mta-reflect p { margin: 0 0 var(--space-2, 8px); }
/* Check-ins (Part 2, D7) */
.mta-survey .mta-q { border: 0; border-bottom: 1px solid rgba(29,45,64,.1); padding: var(--space-3, 12px) 0; margin: 0; }
.mta-survey legend { font-weight: 600; margin-bottom: 6px; }
.mta-choices { display: flex; flex-direction: column; gap: 4px; }
.mta-choices label { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.mta-choices-row { flex-direction: row; justify-content: space-between; max-width: 22rem; }
.mta-scale-ends { display: flex; justify-content: space-between; max-width: 22rem; }
.mta-score b { font-size: 3rem; line-height: 1; }
.mta-credit { margin-top: var(--space-6, 24px); }
[data-theme="dark"] .mta-survey .mta-q { border-color: rgba(255,255,255,.12); }

/* Community spaces (design 16; switched off at install): plain posts with no
   avatars, reactions or counts. */
.mta-post { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.mta-post:last-of-type { border-bottom: 0; }
.mta-post p { margin: 0 0 6px; }
.mta-post-who { font-family: var(--font-chrome); font-size: var(--text-sm); color: var(--text-soft); }
.mta-post-links { font-family: var(--font-chrome); font-size: var(--text-sm); color: var(--text-faint); }
.mta-post-links form, .mta-report { display: inline; }
.mta-report summary, .mta-reply summary { display: inline; cursor: pointer; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.mta-report summary::-webkit-details-marker, .mta-reply summary::-webkit-details-marker { display: none; }
.mta-report[open] form { display: block; margin-top: 6px; }
.mta-post-reply { margin-left: 22px; padding-left: 14px; border-left: 3px solid var(--teal-soft); border-bottom: 0; }
.mta-reply { font-family: var(--font-chrome); font-size: var(--text-sm); margin-top: 4px; }

/* Dark theme: the brand's dark-mode teal (#5cb8b8) is too light for white
   button text (about 2.3:1), so filled buttons use the darker teal there, as
   the hero buttons in movedtoact-brand.css already do. */
[data-theme="dark"] .cta-button, [data-theme="dark"] .btn-secondary { background: #1a5f5f; border-color: #1a5f5f; color: #fff; }
[data-theme="dark"] .cta-button:hover, [data-theme="dark"] .btn-secondary:hover { background: #227575; border-color: #227575; color: #fff; }
[data-theme="dark"] .mta-pair-btns .btn-secondary, [data-theme="dark"] .mta-do-btns .btn-secondary { background: var(--bg-card); color: var(--teal); border-color: var(--teal); }
[data-theme="dark"] .mta-state.done { background: #1a5f5f; }
.mta-intro-act .cta-button, .mta-intro-act .btn { min-width: 12rem; text-align: center; padding: .85rem 1.7rem; font-size: var(--text-sm); }
.mta-just-done .mta-private-note { box-shadow: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--space-3) 0 0; background: transparent; max-width: none; margin: var(--space-3) 0 0; }
@media (max-width: 760px) { .mta-index { grid-template-columns: minmax(0, 1fr); } .mta-intro-act .cta-button, .mta-intro-act .btn { width: 100%; } }
/* Footer links that sit on navy: teal there is too dark to read (about 2:1). */
.site-footer .footer-contact-link, .site-footer .footer-bottom a { color: #e8b45c; text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .site-footer .footer-contact-link, [data-theme="dark"] .site-footer .footer-bottom a { color: #fff; }

/* ===== 2026-10-05: change list (/root/0up/movedtoact-change-list.md) ===== */

/* 4.4 Contrast. Small orange text uses a darker orange (5.2:1 on the cream page);
   the brighter --gold stays for large text, icons and borders. Buttons and small
   teal labels use the darker teal (5.6:1). Links inside running text are underlined. */
:root { --gold-text: #9a5a00; }
[data-theme="dark"] { --gold-text: var(--gold); }
.mta-kind, .mta-intro .section-label, .page-intro .section-label, .mta-aside-saved .section-label,
.nav-submenu .nav-submenu-highlight { color: var(--gold-text); }
.section-label, .mta-pair-label { color: var(--teal-deep, #1f6e6e); }
[data-theme="dark"] .section-label, [data-theme="dark"] .mta-pair-label { color: var(--teal); }
.cta-button { background: var(--teal-deep, #1f6e6e); }
.cta-button:hover { background: #185a5a; }
.nav-help { background: var(--teal-deep, #1f6e6e); }
.section-body p a, .section-body li a, .mta-story-body a, .mta-source a, .mta-small a, .page-intro p a,
.mta-note a, .mta-join-two p a, .alert a, .mta-howto a, .mta-pair-why a, .mta-end p a, .mta-welcome-back a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
/* Dark mode: the outlined Sign in button is filled so it shows on the nav. */
[data-theme="dark"] .nav-signin { background: var(--teal-deep, #1f6e6e); color: #fff; box-shadow: none; }

/* 3.6 Phone first screen: a smaller headline and side-by-side buttons, so the top of
   the first story shows above the fold. */
.mta-intro-btns { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); }
.mta-sample-head .mta-small { margin-top: 0; }
@media (max-width: 760px) {
  .mta-intro { padding-top: var(--space-4, 1rem); padding-bottom: var(--space-3, .75rem); }
  .mta-intro h1 { font-size: 1.55rem; line-height: 1.2; margin-bottom: .5rem; }
  .mta-intro-lead { font-size: .95rem; margin-bottom: .5rem; }
  .mta-intro-btns { flex-wrap: nowrap; }
  .mta-intro-act .mta-intro-btns .cta-button, .mta-intro-act .mta-intro-btns .btn { width: auto; min-width: 0; flex: 1 1 50%; padding: .7rem .5rem; }
  .mta-intro-act .mta-small { font-size: .8rem; margin: .5rem 0 0; }
  .mta-sample { padding-top: var(--space-3, .75rem); }
}

/* 3.5 Display control and 5.7 member menu in the header. */
.display-wrap, .nav-member { position: relative; display: inline-block; }
.display-trigger { display: inline-flex; align-items: center; gap: .35rem; }
.display-label { font-family: var(--font-chrome); font-size: .8rem; font-weight: 700; }
.display-panel, .nav-member-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 13rem; padding: .75rem;
  background: var(--bg-card, #fff); color: var(--text); border: 1px solid var(--card-border, #d0d6dc); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.display-panel[hidden], .nav-member-menu[hidden] { display: none; }
.display-h { font-family: var(--font-chrome); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: .25rem 0 .4rem; color: var(--text-soft); }
.display-panel .font-controls { display: flex; gap: .3rem; margin-bottom: .6rem; }
.display-panel .font-btn { color: var(--text); border: 1px solid var(--card-border, #d0d6dc); border-radius: 4px; padding: .25rem .6rem; }
.theme-choices { display: flex; flex-wrap: wrap; gap: .3rem; }
.theme-choice { font: inherit; font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--card-border, #d0d6dc); border-radius: 4px; background: transparent; color: var(--text); cursor: pointer; }
.theme-choice[aria-pressed="true"], .display-panel .font-btn-active { background: var(--teal-deep, #1f6e6e); color: #fff; border-color: var(--teal-deep, #1f6e6e); }
.nav-account { display: inline-flex; align-items: center; gap: .4rem; }
.nav-record::before { content: none; }
.nav-member-btn { font-family: var(--font-chrome); font-size: .8rem; font-weight: 700; padding: .45rem .7rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; border: 1.5px solid currentColor; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-member-menu { list-style: none; min-width: 10rem; padding: .4rem 0; }
.nav-member-menu a { display: block; padding: .45rem .9rem; color: var(--text); text-decoration: none; }
.nav-member-menu a:hover, .nav-member-menu a:focus { background: var(--teal-pale, #f0f7f7); }
@media (max-width: 1024px) {
  .display-panel, .nav-member-menu { position: static; box-shadow: none; margin-top: .4rem; }
  .nav-account { flex-wrap: wrap; width: 100%; }
}

/* 4.6 Footer mark: the same logo as the header. */
.footer-logo { width: 28px; height: 28px; vertical-align: middle; margin-right: .35rem; border-radius: 50%; }

/* Story rows, story pages and the record. */
.mta-pair-why { font-size: var(--text-sm); color: var(--text-soft); margin: .4rem 0; }
.mta-pair-link { margin: .5rem 0 0; }
.mta-pair-link .btn { width: 100%; text-align: center; }
.mta-story-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: var(--space-4, 1rem) 0; font-family: var(--font-chrome); font-weight: 700; }
.mta-welcome-back { margin-top: .75rem; padding: .6rem .9rem; border-left: 4px solid var(--gold); background: var(--bg-strip); }
.mta-moved-note { margin: 0 0 var(--space-3, .75rem); }
.mta-copy-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mta-copy-row .mta-copy { flex: 1 1 16rem; min-width: 0; }
.mta-suggest { padding: .6rem .8rem; background: var(--bg-strip); border-radius: 6px; font-size: var(--text-sm); }
.mta-thanklink { margin: .5rem 0; }
.mta-howto ol { padding-left: 1.4rem; }
.mta-howto li { margin-bottom: .4rem; }
.mta-member-panel { margin: var(--space-4, 1rem) 0; padding: var(--space-4, 1rem); border: 1px solid var(--card-border, #d0d6dc); border-radius: 8px; }
.mta-member-panel .section-title { text-align: left; font-size: 1.3rem; }
.mta-field-msg { color: #a33a1c; margin: -.25rem 0 .5rem; }
[data-theme="dark"] .mta-field-msg { color: #ffb59e; }
.mta-welcome-list li { margin-bottom: .5rem; }
.mta-crew-rules { margin-bottom: var(--space-3, .75rem); }
/* The outlined Sign in keeps its own look over the darker .nav-help fill above. */
.nav-help.nav-signin { background: transparent; color: var(--teal-deep, #1f6e6e); box-shadow: inset 0 0 0 1.5px var(--teal-deep, #1f6e6e); }
.nav-help.nav-signin:hover { background: var(--teal-deep, #1f6e6e); color: #fff; }
.main-nav .nav-help.nav-signin { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
[data-theme="dark"] .nav-help.nav-signin { background: var(--teal-deep, #1f6e6e); color: #fff; box-shadow: none; }
/* Secondary buttons: the darker teal too, for 4.5:1 white text (4.4). */
.btn-secondary { background: var(--teal-deep, #1f6e6e); border-color: var(--teal-deep, #1f6e6e); color: #fff; }
.btn-secondary:hover { background: #185a5a; border-color: #185a5a; color: #fff; }
.main-nav .nav-member-btn { color: #fff; border-color: rgba(255,255,255,.8); }
@media (max-width: 1024px) { .main-nav .nav-member-btn { width: 100%; max-width: none; } }

/* Dark-mode navy bars (ledger R-4, 2026-10-06). The shared EFI token --navy is #5a7da0
   in dark mode, which leaves white text at about 4.3:1. These bars use #46658a
   (6.0:1) on Moved to Act only; the token itself is unchanged, since it is also used
   as a text colour on dark backgrounds. */
[data-theme="dark"] .main-nav.scrolled,
[data-theme="dark"] #member-nav .gated-subheader.scrolled,
[data-theme="dark"] .skip-link { background: #46658a; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .main-nav.scrolled, :root:not([data-theme]) .main-nav.scrolled,
  [data-theme="system"] #member-nav .gated-subheader.scrolled, :root:not([data-theme]) #member-nav .gated-subheader.scrolled,
  [data-theme="system"] .skip-link, :root:not([data-theme]) .skip-link { background: #46658a; }
}