/* The site's look: the App Store banner for "My Spiritual Toolkit AA Steps" (the app icon's royal blue fading into dark
   slate) with the feel of Apple's iOS Human Interface Guidelines. Bootstrap 5.3 is the minified dist only (no Sass), so
   everything here is a custom-property override, loaded after bootstrap.min.css and before site.css, which keeps the
   component rules. docs/plans/theme.md

   Two blues. #456fe8 is the icon tile (wwwroot/images/mst-mark.svg, the iOS MSToolkit icon); it is 4.47:1 on white, just
   under WCAG AA for text, so text, links and button fills use the 6 % darker "ink" #3b63db (5.26:1 on white, 4.71:1 on
   the grouped grey). The tile blue stays for large surfaces. The mark's yellow #fff95b is only ever placed on the blue. */
:root {
  --mst-blue: #456fe8;
  --mst-ink: #3b63db;
  --mst-ink-rgb: 59, 99, 219;
  --mst-ink-hover: #3254ba;
  --mst-ink-hover-rgb: 50, 84, 186;
  --mst-yellow: #fff95b;
  --mst-accent: var(--mst-yellow);   /* the one brand accent on the web: under the active navbar link */
  --mst-surface: #fff;               /* cards, list groups, menus, the modal */
  --mst-surface-rgb: 255, 255, 255;
  --mst-fill: #3b63db;               /* a solid fill under white text (the active sidebar row, pills): the .btn-primary ink, kept in dark mode */

  /* Bootstrap's primary and links */
  --bs-primary: var(--mst-ink);
  --bs-primary-rgb: var(--mst-ink-rgb);
  --bs-primary-text-emphasis: #1c2c5d;
  --bs-primary-bg-subtle: #dae2fb;
  --bs-primary-border-subtle: #a2b8f3;
  --bs-link-color: var(--mst-ink);
  --bs-link-color-rgb: var(--mst-ink-rgb);
  --bs-link-hover-color: var(--mst-ink-hover);
  --bs-link-hover-color-rgb: var(--mst-ink-hover-rgb);
  --bs-focus-ring-color: rgba(var(--mst-ink-rgb), 0.35);

  /* iOS light: systemGroupedBackground page, label / secondaryLabel text (secondaryLabel at Apple's .6 is 3.44:1 on
     white; .72 clears AA at 4.72:1), the separator colour, 12 px corners, the app's soft card shadow. */
  --bs-body-bg: #f2f2f7;
  --bs-body-bg-rgb: 242, 242, 247;
  --bs-body-color: #1c1c1e;
  --bs-body-color-rgb: 28, 28, 30;
  --bs-secondary-color: rgba(60, 60, 67, 0.72);
  --bs-secondary-color-rgb: 60, 60, 67;
  --bs-tertiary-color: rgba(60, 60, 67, 0.3);
  --bs-secondary-bg: #e5e5ea;
  --bs-tertiary-bg: #f2f2f7;
  --bs-border-color: rgba(60, 60, 67, 0.29);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Dark mode, like the app's: iOS's black page with #1c1c1e cells, and the link blue lightened to #6f8ff0 (6.9:1 on
   black, 5.6:1 on the cells). The head script in _Layout sets data-bs-theme from the OS preference; this block comes
   after Bootstrap's own [data-bs-theme=dark] and wins on order. Button fills keep the light-mode ink (see .btn-primary). */
[data-bs-theme=dark] {
  --mst-ink: #6f8ff0;
  --mst-ink-rgb: 111, 143, 240;
  --mst-ink-hover: #8aa3f4;
  --mst-ink-hover-rgb: 138, 163, 244;
  --mst-surface: #1c1c1e;
  --mst-surface-rgb: 28, 28, 30;

  --bs-primary: var(--mst-ink);
  --bs-primary-rgb: var(--mst-ink-rgb);
  --bs-primary-text-emphasis: #8fa5f2;
  --bs-primary-bg-subtle: #0e162e;
  --bs-primary-border-subtle: #29438b;
  --bs-link-color: var(--mst-ink);
  --bs-link-color-rgb: var(--mst-ink-rgb);
  --bs-link-hover-color: var(--mst-ink-hover);
  --bs-link-hover-color-rgb: var(--mst-ink-hover-rgb);
  --bs-focus-ring-color: rgba(var(--mst-ink-rgb), 0.45);

  --bs-body-bg: #000;
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #f2f2f7;
  --bs-body-color-rgb: 242, 242, 247;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(235, 235, 245, 0.6);
  --bs-secondary-color-rgb: 235, 235, 245;
  --bs-tertiary-color: rgba(235, 235, 245, 0.3);
  --bs-secondary-bg: #3a3a3c;
  --bs-tertiary-bg: #2c2c2e;
  --bs-border-color: rgba(84, 84, 88, 0.65);
  --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* The OA Toolkit (<html data-toolkit="oat">, from the login dropdown or the signed-in claim): its app icon's navy
   #344359 ground, teal #4aaba6 band and coral #ef715c ring. The navy is the ink (10:1 on white); the teal and coral
   are 2.7:1 and 2.9:1 on white, so neither can carry text: the teal is the header's second colour (deepened to #3a8a86
   where white text sits on it) and the coral takes the accent role the yellow has under MST. Every other toolkit is
   the MST brand. The row icons stay the app's in every toolkit. */
[data-toolkit=oat] {
  --mst-blue: #344359;
  --mst-ink: #344359;
  --mst-ink-rgb: 52, 67, 89;
  --mst-ink-hover: #263346;
  --mst-ink-hover-rgb: 38, 51, 70;
  --mst-accent: #ef715c;
  --mst-fill: #344359;
  --bs-primary-text-emphasis: #1a2230;
  --bs-primary-bg-subtle: #dfe4ec;
  --bs-primary-border-subtle: #aab6c8;
}

[data-toolkit=oat][data-bs-theme=dark] {
  --mst-ink: #7ccbc6;
  --mst-ink-rgb: 124, 203, 198;
  --mst-ink-hover: #9adcd8;
  --mst-ink-hover-rgb: 154, 220, 216;
  --mst-fill: #4a5d7a;               /* the OAT dark-mode button fill: 6.7:1 under white, off the black page */
  --bs-primary-text-emphasis: #9adcd8;
  --bs-primary-bg-subtle: #0f2a29;
  --bs-primary-border-subtle: #256b67;
}

/* Bootstrap compiles the primary colour into each component's own variables, so :root alone recolours nothing below. */
.btn {
  --bs-btn-font-weight: 600;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-focus-shadow-rgb: var(--mst-ink-rgb);
}

/* Fills stay #3b63db in dark mode too: white on the lighter dark-mode link blue would be 3.1:1. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3b63db;
  --bs-btn-border-color: #3b63db;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3254ba;
  --bs-btn-hover-border-color: #2f4faf;
  --bs-btn-focus-shadow-rgb: 59, 99, 219;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2f4faf;
  --bs-btn-active-border-color: #2c4aa4;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3b63db;
  --bs-btn-disabled-border-color: #3b63db;
}

/* OAT buttons: the navy in light mode (10:1 under white), a lighter navy in dark mode so they stand off the black. */
[data-toolkit=oat] .btn-primary {
  --bs-btn-bg: #344359;
  --bs-btn-border-color: #344359;
  --bs-btn-hover-bg: #263346;
  --bs-btn-hover-border-color: #1f2a3a;
  --bs-btn-focus-shadow-rgb: 52, 67, 89;
  --bs-btn-active-bg: #1f2a3a;
  --bs-btn-active-border-color: #182131;
  --bs-btn-disabled-bg: #344359;
  --bs-btn-disabled-border-color: #344359;
}

[data-toolkit=oat][data-bs-theme=dark] .btn-primary {
  --bs-btn-bg: #4a5d7a;
  --bs-btn-border-color: #4a5d7a;
  --bs-btn-hover-bg: #566b8a;
  --bs-btn-hover-border-color: #566b8a;
  --bs-btn-focus-shadow-rgb: 124, 203, 198;
  --bs-btn-active-bg: #3f5069;
  --bs-btn-active-border-color: #3f5069;
  --bs-btn-disabled-bg: #4a5d7a;
  --bs-btn-disabled-border-color: #4a5d7a;
}

.btn-outline-primary {
  --bs-btn-color: var(--mst-ink);
  --bs-btn-border-color: var(--mst-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3b63db;
  --bs-btn-hover-border-color: #3b63db;
  --bs-btn-focus-shadow-rgb: var(--mst-ink-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2f4faf;
  --bs-btn-active-border-color: #2c4aa4;
  --bs-btn-disabled-color: var(--mst-ink);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--mst-ink);
}

/* Not variables in Bootstrap 5.3: the form focus state, the checked box, the nav-link ring, the X's ring. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--mst-ink);
  border-color: var(--mst-ink);
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* iOS dark fields are a shade above the cell, not the page's black. */
[data-bs-theme=dark] :is(.form-control, .form-select) {
  background-color: #2c2c2e;
}

[data-bs-theme=dark] .form-check-input {
  --bs-form-check-bg: #2c2c2e;
}

/* Solid fills under white text take --mst-fill, not the ink: in dark mode the ink is the lighter link blue, on which
   white is 3.1:1 (the reason .btn-primary keeps its literal fills). The active sidebar row is the one that shows it. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--mst-fill);
}

.list-group {
  --bs-list-group-bg: var(--mst-surface);
  --bs-list-group-active-bg: var(--mst-fill);
  --bs-list-group-active-border-color: var(--mst-fill);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--mst-surface);
  --bs-dropdown-link-active-bg: var(--mst-ink);
  --bs-dropdown-header-color: var(--bs-secondary-color);
}

/* iOS inset grouped cards: no border, the shadow does the lifting (.shadow-sm in the markup, --bs-box-shadow-sm above).
   The border-width 0 also removes the header and footer rules, restored as hairlines for the Search page's cards. */
.card {
  --bs-card-bg: var(--mst-surface);
  --bs-card-border-width: 0;
  --bs-card-cap-bg: transparent;
}

.card-header {
  border-bottom: 1px solid var(--bs-border-color);
}

.card-footer {
  border-top: 1px solid var(--bs-border-color);
}

.modal {
  --bs-modal-bg: var(--mst-surface);
  --bs-modal-border-color: transparent;
}

.pagination {
  --bs-pagination-active-bg: var(--mst-ink);
  --bs-pagination-active-border-color: var(--mst-ink);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.progress {
  --bs-progress-bar-bg: var(--mst-ink);
}

.tooltip {
  --bs-tooltip-border-radius: var(--bs-border-radius-sm);
}

/* Bootstrap Icons through the <bi> tag helper (TagHelpers/BootstrapIconTagHelper.cs): sits on the text baseline like
   the icon font would, and never shrinks in a flex row. */
.bi {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* The app's row icons (Models/RowIcon.cs), in its colours. A tile is HomeView's filled rounded square with a white
   symbol (green sobriety date, indigo Daily Reflection, orange On Awakening, purple prayers); a ring is ToolsView's
   symbol in a circle of its own colour at 15 % (red Spot Check, teal Journal, indigo Nightly Inventory, gold Gratitude);
   a glyph is SettingsView's plain symbol in the tint colour. All three take the same 28 px slot so row text lines up. */
.mst-tile,
.mst-ring,
.mst-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.mst-tile .bi,
.mst-ring .bi {
  width: 1.0625rem;
  height: 1.0625rem;
}

.mst-glyph .bi {
  width: 1.125rem;
  height: 1.125rem;
}

.mst-tile {
  border-radius: 8px;
  color: #fff;
}

.mst-tile-green { background-color: #339959; }
.mst-tile-indigo { background-color: #5c52d6; }
.mst-tile-orange { background-color: #e69926; }
.mst-tile-purple { background-color: #8c59bf; }

.mst-ring {
  border-radius: 50%;
  background-color: rgba(var(--ring), 0.15);
  color: rgb(var(--ring));
}

.mst-ring-red { --ring: 214, 92, 92; }
.mst-ring-teal { --ring: 48, 176, 199; }
.mst-ring-indigo { --ring: 88, 86, 214; }
.mst-ring-gold { --ring: 232, 179, 51; }
/* The Search row's magnifier: the phones' Tools screen purple (SwiftUI .purple, Kotlin 0xFFAF52DE). docs/plans/search.md */
.mst-ring-purple { --ring: 175, 82, 222; }

/* The app's warning banner (ManageMyDataView: an orange triangle on orange at 15 %), in the On Awakening tile's orange.
   The text keeps the body colour in both modes; the orange carries no text. docs/plans/delete-my-data.md */
.mst-warning {
  --bs-alert-bg: rgba(230, 153, 38, 0.15);
  --bs-alert-border-color: rgba(230, 153, 38, 0.4);
  --bs-alert-color: var(--bs-body-color);
}

.mst-warning .mst-warning-icon {
  color: #e69926;
}

.mst-glyph {
  color: var(--mst-ink);
}

/* On an active row (the sidebar's current page, filled with the ink) the glyph takes the row's white text; in the ink
   it vanished into the fill (Change Email, Privacy Policy). docs/plans/change-email.md */
.list-group-item.active .mst-glyph {
  color: inherit;
}

/* The App Store banner behind the navbar (Views/Shared/_Layout.cshtml): the icon blue fading into dark slate, the same
   in dark mode. White on the icon blue is 4.47:1, so the nav row adds a 12 % dark scrim, which lifts white text to 5.5:1
   at the gradient's lightest point. Bootstrap's own navbar variables do the white links and hamburger; data-bs-theme=dark
   on the nav would also have turned the Feedback dropdown and the search suggestions dark in light mode. */
.site-header {
  background: linear-gradient(135deg, #456fe8 0%, #456fe8 25%, #3a4d7a 70%, #2f3f52 100%);
  color: #fff;
}

/* OAT: the icon's diagonal, teal at the top-left into navy. The teal end is the deepened #3a8a86 (white on it under
   the nav row's scrim is 5.1:1; the icon's #4aaba6 would be 3.2:1), the navy is the icon's own. */
[data-toolkit=oat] .site-header {
  background: linear-gradient(135deg, #3a8a86 0%, #37687a 30%, #344359 60%, #2a3648 100%);
}

.site-header .navbar {
  background: rgba(0, 0, 0, 0.12);
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.5);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.3);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* The one place the brand accent belongs on the web (the mark's yellow; OAT's coral): under the page's own link, and
   under a hovered one. */
.site-header .nav-link.active,
.site-header .nav-link:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--mst-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-header :is(.nav-link, .btn, .navbar-toggler):focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5);
}

/* The search box on the gradient: translucent white, solid while typing. Its suggestion list is a normal menu. */
.site-header .site-search-input {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: transparent;
  color: #fff;
}

.site-header .site-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.site-header .site-search-input:focus {
  background-color: #fff;
  color: #1c1c1e;
  border-color: transparent;
}

/* The signed-in Home / Tools / Settings tabs (Views/Shared/_SecureTabs.cshtml): one list of three links as an iOS
   segmented control at every width, the grey track with the selected segment lifted in white (a shade of grey in dark
   mode). Since 2026-09-10 the primary navigation: a band across the top of the signed-in page above the sidebar and
   the body, one size up from the 13 px strip it was (16 px text, 10 rem segments, the glyph following the font), the
   sidebar under it holding the tab's own pages (docs/plans/side-nav.md decision 13). The phone tab bar of 2026-09-06
   (fixed to the bottom below lg) was retired 2026-09-09: the web is for the desktop, phones have the apps. The active
   tab is [aria-current=page]. */
.secure-tabs-list {
  list-style: none;
  margin: 0;
  padding: 3px;
  display: inline-flex;
  border-radius: 0.6875rem;
  background-color: rgba(118, 118, 128, 0.12);
}

[data-bs-theme=dark] .secure-tabs-list {
  background-color: rgba(118, 118, 128, 0.24);
}

.secure-tabs-list > li {
  display: flex;
}

.secure-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 10rem;
  padding: 0.5rem 1.5rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--bs-body-color);
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
}

/* The glyph follows the font (14 px root below md, 16 from it): the tag helper writes width="16" height="16", which
   CSS overrides on an svg. */
.secure-tab .bi {
  width: 1.25em;
  height: 1.25em;
}

.secure-tab:hover {
  color: var(--mst-ink);
}

.secure-tab:focus-visible {
  outline: 2px solid var(--mst-ink);
  outline-offset: 2px;
}

.secure-tab[aria-current=page] {
  background-color: var(--mst-surface);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

[data-bs-theme=dark] .secure-tab[aria-current=page] {
  background-color: #636366;
}

/* A narrow window: the three segments share the width instead of overflowing it. */
@media (max-width: 575.98px) {
  .secure-tabs-list {
    display: flex;
  }

  .secure-tabs-list > li {
    flex: 1 1 0;
  }

  .secure-tab {
    flex: 1;
    min-width: 0;
    padding-inline: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secure-tab {
    transition: none;
  }
}

@media print {
  .site-header {
    background: #fff !important;
    color: #000;
  }

  .site-header .navbar {
    background: none;
    --bs-navbar-color: #000;
    --bs-navbar-active-color: #000;
    --bs-navbar-brand-color: #000;
  }
}