/* Collapsed "About this page" guide — see templates/_page_guide.html. Deliberately quiet: a single thin strip under the page heading that reads as help, not as a banner. Nothing here overrides --blue (app pages set their own scoped copy of it); the guide carries its own colours so it looks identical on every page regardless of that page's local variables. */ .page-guide { margin: 0 0 1.1rem; border: 1px solid #dde1e7; border-left: 3px solid #003DA5; border-radius: 6px; background: #fbfcfd; font-size: 0.83rem; line-height: 1.5; color: #333; } .page-guide-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 600; color: #002D72; list-style: none; user-select: none; } /* Replace the native disclosure triangle with one we control on both engines. */ .page-guide-summary::-webkit-details-marker { display: none; } .page-guide-summary::after { content: '▸'; margin-left: auto; font-size: 0.78rem; color: #6b7280; transition: transform 0.15s ease; } .page-guide[open] > .page-guide-summary::after { transform: rotate(90deg); } .page-guide-summary:hover { background: #f4f7fb; } .page-guide-summary:focus-visible { outline: 2px solid #003DA5; outline-offset: -2px; } .page-guide-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; border-radius: 50%; background: #003DA5; color: #fff; font-size: 0.7rem; font-weight: 700; } .page-guide-tabname { margin-left: 0.15rem; padding: 0.05rem 0.4rem; border-radius: 3px; background: #e8eef7; color: #002D72; font-size: 0.72rem; font-weight: 600; } .page-guide-body { padding: 0.1rem 0.9rem 0.7rem 2.25rem; border-top: 1px solid #eceff3; } .page-guide-body > p:first-child { margin-top: 0.6rem; } .page-guide-body p { margin: 0 0 0.5rem; } .page-guide-body ul { margin: 0 0 0.5rem; padding-left: 1.05rem; } .page-guide-body li { margin-bottom: 0.28rem; } .page-guide-body b { color: #1a1a2e; } .page-guide-body a { color: #003DA5; } .page-guide-body code { padding: 0.05rem 0.3rem; border-radius: 3px; background: #eef1f5; font-size: 0.94em; } .page-guide-meta { margin: 0.55rem 0 0 !important; font-size: 0.71rem; color: #8a9099; } /* Admin-only "no guide yet" stub. */ .page-guide-missing { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-left-color: #f59e0b; background: #fffbeb; color: #7c5b12; } .page-guide-missing .page-guide-badge { background: #f59e0b; } /* Phones: the strip stays full width; pull the body indent back in so the text is not squeezed into a narrow column. */ @media (max-width: 640px) { .page-guide-body { padding-left: 0.9rem; } .page-guide { font-size: 0.86rem; } } @media print { .page-guide { display: none; } } /* Dark theme. The portal sets data-theme on (see base.html), so key off that rather than prefers-color-scheme — the user's toggle has to win. */ [data-theme="dark"] .page-guide { border-color: #2f3746; border-left-color: #4f8ef7; background: #1b2130; color: #c9d1de; } [data-theme="dark"] .page-guide-summary { color: #9dc2ff; } [data-theme="dark"] .page-guide-summary:hover { background: #232b3b; } [data-theme="dark"] .page-guide-summary:focus-visible { outline-color: #7ab3ff; } [data-theme="dark"] .page-guide-summary::after { color: #8b95a5; } [data-theme="dark"] .page-guide-badge { background: #4f8ef7; color: #0f1420; } [data-theme="dark"] .page-guide-tabname { background: #2a3446; color: #9dc2ff; } [data-theme="dark"] .page-guide-body { border-top-color: #2a3140; } [data-theme="dark"] .page-guide-body b { color: #e6ebf3; } [data-theme="dark"] .page-guide-body a { color: #7ab3ff; } [data-theme="dark"] .page-guide-body code { background: #262e3d; } [data-theme="dark"] .page-guide-meta { color: #6f7887; } [data-theme="dark"] .page-guide-missing { border-left-color: #d19b2b; background: #2a2417; color: #e0c07a; } [data-theme="dark"] .page-guide-missing .page-guide-badge { background: #d19b2b; color: #221c0d; }