/*
 * Portal Trail UI (spec docs/superpowers/specs/2026-09-28-portal-trail-ui-design.md).
 * Linked from templates/base.html on every page (R944, R970).
 * Every selector starts with .tm-ui and every rule is inside @media screen
 * (R945, R948); tests/test_portal_trail_css.py enforces both.
 */
@media screen {
  /* Tokens and type (R949, R950) */
  .tm-ui {
    --ui-serif: "Young Serif", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
    --ui-sans: "Figtree", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
    --cq-font-heading: var(--ui-serif);
    --cq-font-body: var(--ui-sans);
    --bs-body-font-family: var(--ui-sans);
    --bs-body-color: var(--tm-ink);
    --bs-emphasis-color: var(--tm-ink);
    --bs-secondary-color: var(--tm-muted);
    --bs-border-color: var(--tm-line);
    --ui-focus: 0 0 0 2px var(--tm-ink), 0 0 0 5px color-mix(in srgb, var(--cq-fill-primary) 35%, transparent);
    min-height: 100vh;
    background: var(--tm-paper);
    color: var(--tm-ink);
    font-family: var(--ui-sans);
  }
  .tm-ui h1, .tm-ui .h1, .tm-ui h2, .tm-ui .h2 { font-family: var(--ui-serif); font-weight: 400; text-wrap: balance; }
  .tm-ui h3, .tm-ui h4, .tm-ui h5, .tm-ui h6, .tm-ui .h3, .tm-ui .h4, .tm-ui .h5, .tm-ui .h6 { font-family: var(--ui-sans); font-weight: 700; }
  /* An <h1> stays serif even when it also carries a Bootstrap .h2-.h6 size utility
   * (e.g. <h1 class="h3 fw-bold">, common for page titles). (0,2,1) beats both the
   * (0,1,1) h1/h2 rule above and the (0,2,0) .h3-.h6 rule above regardless of source
   * order, so h2-h6 elements are untouched. Fix round 1, 2026-09-28. */
  .tm-ui h1.h1, .tm-ui h1.h2, .tm-ui h1.h3, .tm-ui h1.h4, .tm-ui h1.h5, .tm-ui h1.h6 { font-family: var(--ui-serif); font-weight: 400; }
  .tm-ui .text-muted { color: var(--tm-muted) !important; }

  /* Links (R952) */
  /* Fix round 2, 2026-09-28: without :not(.page-link)/:not(.alert-link) this
   * (0,6,1) rule beat Bootstrap's `.active > .page-link` color (headless
   * Chrome measured the active pagination number at 1.34:1 on its own
   * background) and would similarly repaint `.alert-link`'s inherited alert
   * color. Both are excluded, same as the other structural Bootstrap link
   * classes already listed here. */
  .tm-ui a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.navbar-brand):not(.page-link):not(.alert-link) {
    color: var(--cq-link);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Focus: ink outline plus org halo, never the highlight color (R950) */
  .tm-ui :focus-visible { outline: none; box-shadow: var(--ui-focus) !important; }
  .tm-ui .form-control:focus, .tm-ui .form-select:focus, .tm-ui .form-check-input:focus { border-color: var(--tm-ink); box-shadow: var(--ui-focus); }

  /* Top navigation bar */
  .tm-ui .cq-navbar { background-color: var(--cq-fill-primary) !important; box-shadow: none; }
  .tm-ui .cq-navbar .navbar-brand, .tm-ui .cq-navbar .nav-link, .tm-ui .cq-navbar .nav-link:hover, .tm-ui .cq-navbar .nav-link:focus, .tm-ui .cq-navbar .nav-link.active { color: var(--cq-on-primary) !important; }
  /* Fix round 1, 2026-09-28: base.html's brand text and any Bootstrap .bg-primary
   * surface (e.g. central dashboard stat tiles) set Bootstrap's own
   * `.text-white { color: #fff !important; }`, which the org-fill background rules
   * above don't reach. Bootstrap's rule is !important, so ours must be too, and it
   * must be more specific: (0,3,0) for the navbar case, (0,2,0)/(0,2,0) for the
   * bg-primary case, both above Bootstrap's (0,1,0). Descendant .text-white-50/
   * .opacity-75 elements are left to inherit, which reads fine against a pale fill. */
  .tm-ui .cq-navbar .text-white,
  .tm-ui .bg-primary.text-white,
  .tm-ui .bg-primary .text-white {
    color: var(--cq-on-primary) !important;
  }
  /* Bootstrap's toggler-icon is a hard-coded white SVG (no !important; main.css's
   * own .cq-navbar override at main.css:253 also hard-codes white, no !important),
   * invisible on a pale fill. Recolor it with a mask instead of overriding
   * background-image with another fixed color, so it always matches --cq-on-primary. */
  .tm-ui .cq-navbar .navbar-toggler {
    border-color: color-mix(in srgb, var(--cq-on-primary) 40%, transparent);
  }
  .tm-ui .cq-navbar .navbar-toggler-icon {
    background-image: none;
    background-color: var(--cq-on-primary);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
  }

  /* Badges keep their design-system meanings; colors never come from the org (R953) */
  .tm-ui .badge { border-radius: 999px; font-weight: 700; padding: .3em .7em; }
  .tm-ui .badge.bg-success { background-color: #e2ecd9 !important; color: #2f4a25 !important; }
  .tm-ui .badge.bg-warning { background-color: #f6e6c4 !important; color: #6d4a0e !important; }
  .tm-ui .badge.bg-danger { background-color: #f5ddd3 !important; color: #83361c !important; }
  .tm-ui .badge.bg-secondary, .tm-ui .badge.bg-primary { background-color: #ebe6db !important; color: #545c50 !important; }
  .tm-ui .badge.bg-info { background-color: transparent !important; color: #2c4a5a !important; border: 1.5px solid #6d8fa0; }

  /* Sticky day headings on the attendee schedule sit on the page paper, not Bootstrap's white */
  .tm-ui .sched-day-heading { background-color: var(--tm-paper); }

  /* ---------- Roomy (R954) ---------- */
  .tm-ui.tm-roomy {
    background-color: var(--tm-paper);
    background-image: radial-gradient(color-mix(in srgb, var(--cq-fill-primary) 10%, transparent) 1px, transparent 1.5px);
    background-size: 22px 22px;
    font-size: 16px;
  }
  .tm-ui.tm-roomy .card { background: var(--tm-card); border: 1.5px solid var(--tm-ink); border-radius: 16px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--cq-fill-primary) 55%, var(--tm-ink)); }
  .tm-ui.tm-roomy .card-header { background: transparent; border-bottom: 1px solid var(--tm-line); font-family: var(--ui-serif); font-size: 1.25rem; }
  .tm-ui.tm-roomy .form-control, .tm-ui.tm-roomy .form-select { min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--tm-chip); border-radius: 12px; background-color: #fff; font-size: 16px; }
  .tm-ui.tm-roomy textarea.form-control { min-height: 96px; }
  .tm-ui.tm-roomy .form-label { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
  .tm-ui.tm-roomy .btn { border-radius: 999px; font-weight: 700; padding: 10px 20px; }
  .tm-ui.tm-roomy .btn-primary { box-shadow: 3px 3px 0 var(--tm-ink) !important; }
  /* Fix round 2, 2026-09-28: this rule's own box-shadow is (0,3,0), which beats
   * the global `.tm-ui :focus-visible` focus-ring rule ((0,2,0)) on a focused
   * button, replacing the ring with the plain drop-shadow (headless Chrome
   * measured `rgb(34,48,31) 3px 3px 0px`, outline none). Naming :focus-visible
   * here makes this (0,4,0) and layers the ring back in via a second shadow
   * rather than dropping the drop-shadow. */
  .tm-ui.tm-roomy .btn-primary:focus-visible { box-shadow: var(--ui-focus), 3px 3px 0 var(--tm-ink) !important; }
  .tm-ui.tm-roomy .alert { border-radius: 14px; border-width: 1.5px; }

  /* ---------- Compact (R955) ---------- */
  .tm-ui.tm-compact { font-size: 14px; }
  .tm-ui.tm-compact h1, .tm-ui.tm-compact .h1 { font-size: 1.6rem; }
  .tm-ui.tm-compact h2, .tm-ui.tm-compact .h2, .tm-ui.tm-compact .card-header, .tm-ui.tm-compact .card-title { font-family: var(--ui-sans); font-weight: 700; }
  .tm-ui.tm-compact .card { background: var(--tm-card); border: 1px solid #cfc6b1; border-radius: 12px; box-shadow: none; }
  .tm-ui.tm-compact .card-header { background: #f8f5ee; border-bottom: 1px solid var(--tm-line); }
  .tm-ui.tm-compact .form-control, .tm-ui.tm-compact .form-select { min-height: 34px; border: 1px solid var(--tm-chip); border-radius: 8px; font-size: 14px; }
  .tm-ui.tm-compact input[type="search"].form-control { border-radius: 999px; padding-inline: 14px; }
  .tm-ui.tm-compact .btn { border-radius: 999px; font-weight: 600; }
  .tm-ui.tm-compact .btn-primary { box-shadow: 2px 2px 0 var(--tm-ink) !important; }
  /* Fix round 2, 2026-09-28: compact equivalent of the roomy :focus-visible fix
   * above -- same (0,3,0) vs (0,2,0) collision with the global focus-ring rule. */
  .tm-ui.tm-compact .btn-primary:focus-visible { box-shadow: var(--ui-focus), 2px 2px 0 var(--tm-ink) !important; }
  .tm-ui.tm-compact .table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; font-variant-numeric: tabular-nums; }
  .tm-ui.tm-compact .table > thead th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); background: #f8f5ee; border-bottom: 1px solid var(--tm-line); }
  .tm-ui.tm-compact .table > tbody td { border-top: 1px solid #ece6d8; }
  .tm-ui.tm-compact .table-hover > tbody > tr:hover > *, .tm-ui.tm-compact .table > tbody > tr:hover > * { background: #f8f5ee; }
  .tm-ui.tm-compact .cq-sidebar-nav .list-group-item.active { background-color: var(--tm-card) !important; color: var(--tm-ink) !important; border-left-color: var(--cq-fill-primary) !important; box-shadow: inset 3px 0 0 var(--cq-fill-primary); }

  /* ---------- Both densities: buttons over main.css's !important sites (R956) ---------- */
  /* Fix round 2, 2026-09-28: main.css's `.btn-primary:focus` is (0,2,0) (class +
   * pseudo-class), the same specificity as the fill rule below on its own
   * ((0,2,0), two classes) -- a load-order tie, which the owner ruling
   * (strictly-higher-specificity only, no ties) forbids relying on. Naming
   * `:focus` here directly makes this selector (0,3,0), so it wins outright
   * on a plain mouse-click focus, not just on :hover/:focus-visible below. */
  .tm-ui .btn-primary, .tm-ui .btn-primary:focus { background-color: var(--cq-fill-primary) !important; border-color: var(--tm-ink) !important; color: var(--cq-on-primary) !important; }
  .tm-ui .btn-primary:hover, .tm-ui .btn-primary:focus-visible { filter: brightness(.94); background-color: var(--cq-fill-primary) !important; border-color: var(--tm-ink) !important; }
  .tm-ui .btn-primary:active { transform: translate(1px, 1px); background-color: var(--cq-fill-primary) !important; border-color: var(--tm-ink) !important; color: var(--cq-on-primary) !important; }
  .tm-ui .btn-outline-secondary { color: var(--tm-ink) !important; border-color: var(--tm-chip) !important; background: var(--tm-card); }
  .tm-ui .btn-outline-secondary:hover { background: #ebe6db !important; color: var(--tm-ink) !important; border-color: var(--tm-chip) !important; }
  .tm-ui .bg-primary:not(.badge) { background-color: var(--cq-fill-primary) !important; color: var(--cq-on-primary); }
  .tm-ui .alert-success { background: #eef4e8; border-color: #6b8f55; color: #2f4a25; }
  .tm-ui .alert-warning { background: #fbf1dc; border-color: #c98a2b; color: #6d4a0e; }
  .tm-ui .alert-danger { background: #fbeee8; border-color: #a8492a; color: #83361c; }
  .tm-ui .alert-info { background: #eef3f5; border-color: #6d8fa0; color: #2c4a5a; }

  /* ---------- Both densities: gaps on elements the rules above already style (R956) ----------
   * .btn-secondary (main.css lines 155-157, 163-164) keeps main.css's --cq-secondary fill
   * on purpose (owner ruling, 2026-09-28: org colors stay in force) — no rule needed here;
   * its shape already comes from the .tm-ui .btn pill rules above.
   * .cq-sidebar-nav and .cq-sidebar-central share the same .list-group-item.active markup
   * (main.css lines 372-374, 389-391) but the compact rule above only names .cq-sidebar-nav,
   * and neither density has a roomy rule for either sidebar. The two sidebars stay visually
   * distinct (owner ruling, 2026-09-28): affiliate nav keeps the org primary accent, central
   * keeps its own --cq-secondary accent, same as main.css did. */
  .tm-ui .cq-sidebar-nav .list-group-item.active {
    background-color: var(--tm-card) !important;
    color: var(--tm-ink) !important;
    border-left-color: var(--cq-fill-primary) !important;
  }
  .tm-ui .cq-sidebar-central .list-group-item.active {
    background-color: var(--tm-card) !important;
    color: var(--tm-ink) !important;
    border-left-color: var(--cq-secondary) !important;
  }

  /* ---------- ui- partials (R958-R961) ---------- */
  .tm-ui .ui-req { color: var(--cq-link); }
  .tm-ui .ui-opt { color: var(--tm-muted); font-weight: 500; }
  .tm-ui .ui-error { color: #8e2a12; font-weight: 700; }
  .tm-ui .ui-chip { border-radius: 999px !important; border: 1.5px solid var(--tm-chip) !important; background: #fff; color: var(--tm-ink) !important; font-weight: 600; }
  /* Bootstrap's .btn-check + .btn:hover (0,3,0) resets an outline button's
   * background to transparent, beating .tm-ui .ui-chip (0,2,0); this (0,4,0)
   * rule keeps the white fill. Border and color are already !important above,
   * and setting border here would hide the invalid-state border on hover. It
   * sits before :checked, which ties it at (0,4,0) and must win. */
  .tm-ui .btn-check + .ui-chip:hover { background: #fff; }
  .tm-ui .btn-check:checked + .ui-chip { background: var(--cq-fill-primary) !important; border-color: var(--cq-fill-primary) !important; color: var(--cq-on-primary) !important; }
  .tm-ui .btn-check:focus-visible + .ui-chip { box-shadow: var(--ui-focus); }
  /* Task 8: Task 7's chips fieldset carries a ui-field-invalid class when the
   * field has errors, but nothing painted it -- the only invalid-state cue was
   * the error text below, so the chips themselves looked no different from a
   * valid field. Recolor their border so the state isn't conveyed by text alone. */
  .tm-ui .ui-field-invalid .ui-chip { border-color: #8e2a12 !important; }
  .tm-ui .ui-section { padding: 0; }
  .tm-ui .ui-section-title { float: none; width: 100%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 20px 24px 0; font-family: var(--ui-serif); font-size: 1.4rem; font-weight: 400; }
  .tm-ui .ui-step { margin: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--cq-fill-primary); color: var(--cq-on-primary); display: inline-flex; align-items: center; justify-content: center; font: 700 15px var(--ui-sans); flex-shrink: 0; }
  .tm-ui .ui-error-summary { background: #fbeee8; border: 1.5px solid #8e2a12; color: var(--tm-ink); }
  .tm-ui .ui-error-summary a { color: #8e2a12; font-weight: 600; }
  .tm-ui .ui-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cq-link); }
  .tm-ui .ui-title { font-family: var(--ui-serif); font-weight: 400 !important; }
  .tm-ui.tm-roomy .ui-title { font-size: 2.1rem; }
  .tm-ui .ui-aside { background: color-mix(in srgb, var(--cq-fill-primary) 8%, var(--tm-card)) !important; border: 1.5px dashed color-mix(in srgb, var(--cq-fill-primary) 45%, var(--tm-line)) !important; box-shadow: none !important; }
  .tm-ui .ui-aside-title { font-family: var(--ui-serif); font-weight: 400 !important; font-size: 1.1rem; }
  .tm-ui.tm-compact .ui-section-title { font-family: var(--ui-sans); font-weight: 700; font-size: 1.05rem; padding: 14px 16px 0; }
  .tm-ui.tm-compact .ui-step { width: 28px; height: 28px; font-size: 13px; }
}