*/
/* is itself a scroll container for long lines; positioning the */
/* button inside would make it drift with horizontal scroll. */
/* copy-code.js wraps each in a .pre-wrap div, and we position the */
/* button against that wrapper so the button stays fixed in the corner */
/* regardless of where the user has scrolled the 's content. */
/* ------------------------------------------------------------------------ */
.pre-wrap {
position: relative;
}
/* Injected by /static/copy-code.js. */
.pre-wrap .copy-btn {
position: absolute;
top: 0.35rem;
right: 0.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
color: var(--text-light);
/* Match background + border so the button blends into the block;
hover/focus brings the theme color in for affordance. */
background: var(--accent-bg);
border: var(--border-width) solid var(--border);
border-radius: var(--standard-border-radius);
cursor: pointer;
}
.pre-wrap .copy-btn:hover,
.pre-wrap .copy-btn:focus-visible {
/* Hold the background -- simple.css's `button:enabled:hover` would
otherwise repaint to var(--accent-hover) and the button would flash
solid blue. Affordance comes from the icon + border tinting to the
theme color. */
background: var(--accent-bg);
color: var(--accent-hover);
border-color: var(--accent-hover);
}
/* ------------------------------------------------------------------------ */
/* STATUS PAGE */
/* Pulsing dot affordance next to the heading while a fit is in progress; */
/* status card highlights the live currentStatus message. */
/* ------------------------------------------------------------------------ */
/* Flex layout on the heading gives reliable vertical centering between the
dot and the heading text regardless of font metrics. Inline-only
vertical-align values (middle, text-top) end up looking high or low at
h2 scale because they snap to glyph-metric reference points, not the
visual center of the text block. */
.working-heading {
display: flex;
align-items: center;
gap: 0.4em;
}
.status-dot {
display: inline-block;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: var(--accent);
animation: status-pulse 2s ease-in-out infinite;
flex: 0 0 auto;
}
@keyframes status-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.1; }
}
@media (prefers-reduced-motion: reduce) {
.status-dot { animation: none; }
}
/* The LRP writes server-side HTML into currentStatus (rendered inside
the simple.css .notice block), sometimes including tables — e.g.
FunctionFinder's per-family progress grid. simple.css's default
table chrome (borders, padding, zebra) doubles up against the
notice background and makes the block much taller than needed.
Strip the chrome so the table reads as a flat compact list. */
.notice table,
.notice table tr,
.notice table th,
.notice table td {
background: transparent;
border: none;
}
.notice table {
margin: 0;
}
.notice table th,
.notice table td {
padding: 0.1rem 0.6rem;
}
.notice table td:first-child,
.notice table th:first-child {
padding-left: 0;
}
/* ------------------------------------------------------------------------ */
/* DEMO MODE WATERMARK */
/* Active only under (set by the base template */
/* when settings.DEMO_MODE is on). A faint repeating diagonal "DEMO" tile */
/* painted BEHIND the main content. `main` gets an explicit z-index so it */
/* establishes a stacking context, scoping the z-index:-1 overlay to sit */
/* behind main's own content but above its background box. The overlay is */
/* pointer-events:none so it never intercepts clicks or typing. */
/* ------------------------------------------------------------------------ */
body.demo-mode main {
position: relative;
z-index: 0;
}
body.demo-mode main::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.08;
background-repeat: repeat;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='160'%3E%3Ctext%20x='10'%20y='95'%20transform='rotate(-30%20120%2080)'%20font-family='Arial,sans-serif'%20font-size='44'%20font-weight='700'%20fill='%23000000'%3EDEMO%3C/text%3E%3C/svg%3E");
}