/* memyselfand.io components for the new frame.
   Part 1 is design-system/components/bundle.css (2026-10-05, sha256 9927ca91...) with two changes:
   the Google Fonts @import is a <link> in design/base.html, and the bundle's older flat
   .ms-header rules are left out because the header follows page-designs/Nav.dc.html (Part 2).
   Part 2 adds what the Django frame needs and the bundle lacks. Tokens only, no hex values. */


/* memyselfand.io components: plain CSS classes for Django templates. Every value comes from a token. */
body { font-family: var(--font-sans); color: var(--foreground); background: var(--background); }
.ms-num { font-variant-numeric: tabular-nums; }
:where(.ms-btn, .ms-input, .ms-header a, .ms-chip-btn):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Button */
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding-inline: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 500 15px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ms-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.ms-btn--primary:hover { filter: brightness(1.08); }
.ms-btn--secondary { background: var(--card); color: var(--foreground); border-color: var(--input); }
.ms-btn--secondary:hover { background: var(--muted); }
.ms-btn--ghost { background: transparent; color: var(--primary); }
.ms-btn--ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.ms-btn--danger { background: var(--card); color: var(--danger); border-color: var(--danger); }
.ms-btn--danger:hover { background: var(--danger-soft); }
.ms-btn--sm { height: 32px; padding-inline: var(--space-3); font-size: 13px; }
.ms-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Status pill: always a dot AND a word */
.ms-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px 2px 8px; border-radius: var(--radius-full); font: 500 13px/20px var(--font-sans); white-space: nowrap; background: var(--muted); color: var(--muted-foreground); }
.ms-pill::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.ms-pill[data-tone="info"] { background: var(--info-soft); color: var(--info); }
.ms-pill[data-tone="running"] { background: var(--accent); color: var(--primary); }
.ms-pill[data-tone="running"]::before { animation: ms-pulse 1.6s ease-in-out infinite; }
.ms-pill[data-tone="success"] { background: var(--success-soft); color: var(--success); }
.ms-pill[data-tone="warning"] { background: var(--warning-soft); color: var(--warning); }
.ms-pill[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
@keyframes ms-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ms-pill[data-tone="running"]::before { animation: none; } }

/* Progress: track, fill, and the line under it */
.ms-progress { display: grid; gap: var(--space-1); font-family: var(--font-sans); }
.ms-progress__track { height: 8px; border-radius: var(--radius-full); background: var(--muted); overflow: hidden; }
.ms-progress__fill { height: 100%; border-radius: var(--radius-full); background: var(--primary); }
.ms-progress__fill[data-indeterminate] { width: 30% !important; animation: ms-slide 1.8s ease-in-out infinite; }
@keyframes ms-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .ms-progress__fill[data-indeterminate] { animation: none; } }
.ms-progress__meta { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 20px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ms-progress__meta strong { color: var(--foreground); font-weight: 500; }

/* Source chip */
.ms-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--foreground); font: 500 13px/20px var(--font-sans); white-space: nowrap; }
.ms-chip__count { color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-weight: 400; }
.ms-chip[data-off] { color: var(--muted-foreground); background: var(--muted); }

/* Panel */
.ms-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-6); display: grid; gap: var(--space-4); }
.ms-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ms-panel__title { margin: 0; font: 600 18px/26px var(--font-sans); color: var(--foreground); }
.ms-panel__hint { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
@media (max-width: 600px) { .ms-panel { padding: var(--space-4); } }

/* Activity feed: the plain-language live log */
.ms-feed { list-style: none; margin: 0; padding: 0; display: grid; font-family: var(--font-sans); }
.ms-feed__item { display: grid; grid-template-columns: 56px 16px 1fr; gap: var(--space-3); align-items: start; padding-block: var(--space-2); }
.ms-feed__time { font-size: 13px; line-height: 20px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.ms-feed__dot { position: relative; height: 100%; }
.ms-feed__dot::before { content: ""; position: absolute; top: 6px; left: 4px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--input); }
.ms-feed__item:not(:last-child) .ms-feed__dot::after { content: ""; position: absolute; top: 18px; bottom: -14px; left: 7.5px; width: 1px; background: var(--border); }
.ms-feed__item[data-tone="current"] .ms-feed__dot::before { background: var(--primary); box-shadow: 0 0 0 3px var(--accent); }
.ms-feed__item[data-tone="success"] .ms-feed__dot::before { background: var(--success); }
.ms-feed__item[data-tone="warning"] .ms-feed__dot::before { background: var(--warning); }
.ms-feed__text { font-size: 15px; line-height: 20px; color: var(--foreground); }
.ms-feed__text small { display: block; font-size: 13px; color: var(--muted-foreground); }

/* Field */
.ms-field { display: grid; gap: var(--space-1); font-family: var(--font-sans); }
.ms-field__label { font: 500 13px/20px var(--font-sans); color: var(--foreground); }
.ms-input { height: var(--control-height); padding-inline: var(--space-3); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); font: 400 15px/24px var(--font-sans); width: 100%; box-sizing: border-box; }
.ms-input::placeholder { color: var(--muted-foreground); }
.ms-field__help { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.ms-field[data-invalid] .ms-input { border-color: var(--danger); }
.ms-field[data-invalid] .ms-field__help { color: var(--danger); }

/* ==== Part 2: additions for the Django frame (not in bundle.css) ==== */

/* Base: the new frame loads no Bootstrap, so it sets its own small reset. */
*, *::before, *::after { box-sizing: border-box; }
/* The vertical scrollbar is always there (an empty track when the page is short), so a page that
   gets shorter does not shift sideways. scrollbar-gutter: stable did that too, but left a blank
   strip in the page colour beside the header. With overlay scrollbars (Mac trackpads) nothing shows. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-y: scroll; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: var(--type-body); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
a { color: var(--primary); }
button { font: inherit; color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ms-icon { flex: none; vertical-align: -3px; }
.ms-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-skip-link { position: absolute; top: calc(-1 * var(--space-16)); left: var(--space-4); z-index: 100; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); }
/* The shadow only while shown: off screen it would still reach into a page without a header. */
.ms-skip-link:focus { top: var(--space-2); box-shadow: var(--shadow-md); }
.ms-field { align-content: start; }
.ms-input:disabled { background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; }

/* Page: content at most content-max wide, gutters space-6 (space-4 on phones). */
.ms-page { flex: 1; width: 100%; max-width: calc(var(--content-max) + 2 * var(--space-6)); margin-inline: auto; padding: var(--space-12) var(--space-6); display: grid; gap: var(--space-8); align-content: start; }
.ms-page:focus { outline: none; }

/* Site header (page-designs/Nav.dc.html) */
.ms-header { position: relative; z-index: 20; display: flex; align-items: center; gap: var(--space-6); min-height: var(--space-16); padding-inline: var(--space-6); background: var(--card); border-bottom: 1px solid var(--border); color: var(--foreground); font-family: var(--font-sans); }
.ms-header__home { display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-md); color: var(--foreground); text-decoration: none; }
.ms-header__logo { display: block; width: var(--logo-size); height: var(--logo-size); }
.ms-header__greeting { font-size: 15px; color: var(--muted-foreground); white-space: nowrap; }
.ms-header__name { color: var(--foreground); font-weight: 600; }
.ms-header__current, .ms-header__menu-button { display: none; }
.ms-nav { margin-left: auto; }
.ms-nav__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ms-nav__item { position: relative; }
.ms-nav__button, .ms-nav__link { display: flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; font: 400 15px/var(--control-height) var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; }
.ms-nav__button { color: var(--foreground); }
.ms-nav__link { color: var(--muted-foreground); }
.ms-nav__button:hover, .ms-nav__link:hover, .ms-nav__button[aria-expanded="true"] { background: var(--muted); color: var(--foreground); }
.ms-nav__button[aria-current="true"] { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.ms-nav__chevron { color: var(--muted-foreground); }
.ms-nav__icon--sourcesweep { color: var(--area-sourcesweep); }
.ms-nav__icon--automap { color: var(--area-automap); }
.ms-nav__icon--admin { color: var(--area-admin); }
.ms-nav__icon--settings { color: var(--area-settings); }
.ms-nav__link--area { color: var(--foreground); }   /* a top-level area without a menu (QualiFinder) */
.ms-nav__icon--qualifinder { color: var(--primary); }

/* Dropdown menu (Nav.dc.html): a list of links under its button */
.ms-menu { position: absolute; top: calc(100% + var(--menu-offset)); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 2px; min-width: var(--menu-min-width); margin: 0; padding: var(--menu-inset); list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ms-menu[hidden] { display: none; }
.ms-menu__link { display: flex; align-items: center; gap: var(--menu-item-inset); width: 100%; padding: var(--space-2) var(--menu-item-inset); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); font: var(--type-menu); text-align: left; text-decoration: none; }
a.ms-menu__link, button.ms-menu__link { cursor: pointer; }
a.ms-menu__link:hover, button.ms-menu__link:hover { background: var(--muted); }
.ms-menu__link[aria-current="page"] { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.ms-menu__link[aria-disabled="true"] { flex-wrap: wrap; row-gap: 0; color: var(--muted-foreground); cursor: not-allowed; }
.ms-menu__note { flex-basis: 100%; font: var(--type-small); }
.ms-menu__badge, .ms-menu__end { margin-left: auto; }
.ms-menu__badge { padding: 1px 6px; border-radius: var(--radius-full); background: var(--accent); color: var(--primary); font: var(--type-badge); }
.ms-menu__end { color: var(--muted-foreground); }
.ms-menu .ms-theme__row > .ms-icon:first-child { color: var(--area-settings); }
/* Hover bridge: covers the gap between a button and its menu so the pointer can cross it. */
@media (min-width: 960px) { .ms-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--menu-offset) + 1px); } }
.ms-menu__section { margin-top: var(--menu-inset); padding-top: var(--menu-inset); border-top: 1px solid var(--border); }
.ms-menu__heading { display: block; padding: var(--space-1) var(--menu-item-inset) 2px; color: var(--muted-foreground); font: var(--type-small); font-weight: 600; }

/* Header motion, ported from the old header (templates/snippets/header.html): menus fade in
   and rise 4px in 120 ms with ease, and fade out the same way; hover fills ease in 150 ms
   (100 ms inside menus). The chevron turns in 120 ms (Nav.dc.html). On wide screens a closed
   menu stays laid out but invisible, as the old header did, so closing animates too;
   visibility hides it from pointer, keyboard and screen readers, like display: none.
   Below 960px menus and the phone panel only animate in. Nothing moves with reduced motion. */
.ms-nav__button, .ms-nav__link { transition: background-color 150ms ease, color 150ms ease; }
.ms-menu__link { transition: background-color 100ms ease; }
.ms-nav__chevron { transition: transform 120ms ease; }
.ms-nav__button[aria-expanded="true"] .ms-nav__chevron { transform: rotate(180deg); }
.ms-nav__link[aria-current="page"] { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
@media (min-width: 960px) {
  .ms-menu { transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 0s; }
  .ms-menu[hidden] { display: flex; visibility: hidden; opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms; }
}
@media (max-width: 959.98px) {
  .ms-header[data-nav-open] .ms-nav, .ms-menu:not([hidden]) { animation: ms-drop-in 120ms ease; }
}
@keyframes ms-drop-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .ms-nav__button, .ms-nav__link, .ms-menu__link, .ms-nav__chevron, .ms-menu, .ms-menu[hidden] { transition: none; }
  .ms-header[data-nav-open] .ms-nav, .ms-menu:not([hidden]) { animation: none; }
}

/* Theme choice: rows in the Settings menu, a segmented control elsewhere (Main.dc.html filter tabs) */
.ms-theme { display: grid; gap: var(--space-1); }
.ms-theme__label { padding: var(--space-1) var(--menu-item-inset) 0; font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--muted-foreground); }
.ms-segment .ms-theme__label, .ms-theme--segment .ms-theme__label { padding: 0; }
.ms-theme__rows { display: grid; gap: 2px; }  /* 2px between items, so two filled items never touch */
.ms-theme__check { color: var(--primary); }
.ms-theme__row[aria-pressed="false"] .ms-theme__check { visibility: hidden; }
.ms-theme__row .ms-theme__check { margin-left: auto; }
.ms-theme--segment { gap: var(--space-2); justify-items: start; }  /* the segment hugs its buttons, not the grid's width */
.ms-segment { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--muted); }
.ms-segment__option { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--segment-height); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-segment); background: transparent; color: var(--foreground); font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
.ms-segment__option:hover { color: var(--primary); }
.ms-segment__option[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

/* Notice: flash messages. Status colours on their soft fill, always with words. */
.ms-messages { display: grid; gap: var(--space-2); }
.ms-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--info-soft); color: var(--foreground); font: var(--type-body); }
.ms-notice__icon { margin-top: 2px; color: var(--info); }
.ms-notice__body { flex: 1; min-width: 0; }
.ms-notice__close { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin: -4px 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); cursor: pointer; }
.ms-notice__close:hover { background: var(--card); color: var(--foreground); }
.ms-notice[data-tone="success"] { background: var(--success-soft); }
.ms-notice[data-tone="success"] .ms-notice__icon { color: var(--success); }
.ms-notice[data-tone="warning"] { background: var(--warning-soft); }
.ms-notice[data-tone="warning"] .ms-notice__icon { color: var(--warning); }
.ms-notice[data-tone="danger"] { background: var(--danger-soft); }
.ms-notice[data-tone="danger"] .ms-notice__icon { color: var(--danger); }

/* Maintenance banner: full width under the header */
.ms-banner { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-6); background: var(--warning-soft); border-bottom: 1px solid var(--border); color: var(--foreground); font: var(--type-small); }
.ms-banner__icon { margin-top: 2px; color: var(--warning); }
.ms-banner__text { max-width: var(--content-max); font-weight: 500; }
.ms-banner__note { color: var(--muted-foreground); font-weight: 400; }

/* Dialog: a small confirm, opened with showModal() so focus stays inside and Esc closes it. Same look as
   the Stop and Delete confirms (searches.css). It rises 4px as it fades in, 120 ms; closing is at once. */
.ms-dialog { width: min(400px, calc(100vw - 2 * var(--space-4))); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-md); }
.ms-dialog::backdrop { background: rgb(0 0 0 / .4); }
.ms-dialog[open] { animation: ms-dialog-in 120ms ease; }
.ms-dialog[open]::backdrop { animation: ms-fade-in 120ms ease; }
@keyframes ms-dialog-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes ms-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-dialog[open], .ms-dialog[open]::backdrop { animation: none; } }
.ms-dialog__form { display: grid; gap: var(--space-6); padding: var(--space-6); }
.ms-dialog__title { font: var(--type-heading); color: var(--foreground); }
.ms-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

/* Confirm page: the dialog's question on a page of its own, for visitors without script. */
.ms-page.ms-confirm-page { align-content: center; justify-items: center; padding-block: var(--space-16); }
.ms-confirm { display: grid; justify-items: center; gap: var(--space-6); }
.ms-confirm__title { font: var(--type-title); letter-spacing: var(--type-title-tracking); color: var(--foreground); }
.ms-confirm__text { font: var(--type-body); color: var(--muted-foreground); }
.ms-confirm__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
@media (max-width: 600px) { .ms-page.ms-confirm-page { padding-block: var(--space-12); } }

/* Footer */
.ms-footer { border-top: 1px solid var(--border); color: var(--muted-foreground); font: var(--type-small); }
.ms-footer__inner { display: flex; justify-content: space-between; gap: var(--space-3); max-width: calc(var(--content-max) + 2 * var(--space-6)); margin-inline: auto; padding: var(--space-6); }

/* Below 960px the nav collapses behind the Menu button; the logo and the current area stay. */
@media (max-width: 959.98px) {
  .ms-header { flex-wrap: wrap; gap: var(--space-3); }
  .ms-header__home { min-height: var(--space-16); }
  .ms-header__current { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; font-weight: 600; white-space: nowrap; }
  .ms-header__menu-button { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); margin-left: auto; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); cursor: pointer; }
  .ms-header__current ~ .ms-header__menu-button { margin-left: 0; }
  .ms-header__menu-button[aria-expanded="true"] { background: var(--muted); }
  .ms-nav:not(.ms-nav--guest) { display: none; flex: 0 0 calc(100% + 2 * var(--space-6)); margin: 0 calc(-1 * var(--space-6)); padding: var(--space-2) var(--space-4) var(--space-4); border-top: 1px solid var(--border); }
  .ms-header[data-nav-open] .ms-nav { display: block; }
  .ms-nav__list { flex-direction: column; align-items: stretch; }
  .ms-nav__button, .ms-nav__link { width: 100%; }
  .ms-nav__chevron { margin-left: auto; }
  .ms-menu { position: static; min-width: 0; margin: var(--space-1) 0 var(--space-2) var(--space-6); padding: 0 0 0 var(--space-2); border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; }
}

@media (max-width: 600px) {
  .ms-page { padding: var(--space-8) var(--space-4); }
  .ms-header { padding-inline: var(--space-4); }
  .ms-header__greeting { display: none; }
  .ms-nav:not(.ms-nav--guest) { flex-basis: calc(100% + 2 * var(--space-4)); margin-inline: calc(-1 * var(--space-4)); }
  .ms-banner { padding-inline: var(--space-4); }
  .ms-footer__inner { padding: var(--space-4); }
}