Files
anonymous_github/public/css/style.css
T
Thomas DurieuxandClaude Opus 5.5 53cac6ac39 feat(ui): follow-up polish from design review rounds 88-91
One-row phone toolbar, errors page opens on server errors, one-row submit
bar, publish warning after a source loads, three-column FAQ with a help
card, queue range control in the Throughput card, shared admin table cards,
dark-mode contrast and a stronger phone code scroll cue.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-08 13:36:59 +00:00

11688 lines
502 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ===== Paper design tokens =====
Editorial minimal — warm neutrals, single indigo accent.
Serif display (Instrument Serif), Inter body, JetBrains Mono. */
.dark-mode {
/* Warm ink canvas — same temperature as the light paper palette so
cards (#25231F) and borders (#33302B) sit on a matching base. */
--canvas-bg-color: #161412;
--sidebar-bg-color: #1C1A17;
--main-bg-color: #161412;
--header-bg-color: #161412;
--hover-bg-color: rgba(255, 255, 255, 0.05);
--header-color: #FAF9F6;
--color: #D6D1C5;
--link-color: #7CC7BE;
--link-hover-color: #A8DDD6;
--border-color: #423D37;
--border-soft: #2A2825;
--btn-color: #FAF9F6;
--input-color: #E6E1D8;
--input-bg: #25231F;
--primary-bg: #FAF9F6;
--primary-hover-bg: #FFFFFF;
--primary-color: #1A1815;
--primary-active-color: #1A1815;
--accent: #7CC7BE;
--accent-soft: rgba(124, 199, 190, 0.12);
/* --ink-muted is used for small text: 6.5:1 on the canvas.
--ink-faint is for non-text (icons, rules, dots), never for copy. */
--ink-muted: #A39D92;
--ink-faint: #8A857C;
--ink-soft: #B5AFA2;
/* Semantic status colours (text/dot/border on canvas ≥ 4.5:1) */
--status-ready: #5FB27A;
--status-progress: #E0A94A;
--status-error: #F08A82;
--status-inactive: #8A857C;
--status-error-soft: rgba(240, 138, 130, 0.08);
--status-error-soft-hover: rgba(240, 138, 130, 0.14);
--admin-nav-bg: #1A1918;
--admin-nav-active: rgba(124, 199, 190, 0.12);
--admin-stat-bg: #25231F;
--paper-card: #2C2925;
--paper-bg-alt: #211E1B;
--highlight: #3A341E;
background-color: var(--canvas-bg-color);
color: var(--color);
}
body {
/* Paper palette */
--canvas-bg-color: #FAF9F6;
--sidebar-bg-color: #FFFFFF;
--header-bg-color: #FAF9F6;
--header-color: #1A1815;
--main-bg-color: #FAF9F6;
--hover-bg-color: rgba(26, 24, 21, 0.05);
--input-color: #1A1815;
--color: #1A1815;
--link-color: #1F6A64;
--link-hover-color: #17544F;
--border-color: #E6E1D8;
--border-soft: #EDE9E1;
--btn-color: #1A1815;
--input-bg: #FFFFFF;
--primary-bg: #1A1815;
--primary-hover-bg: #000000;
--primary-color: #FAF9F6;
--primary-active-color: #FAF9F6;
--accent: #1F6A64;
--accent-soft: #E4F0EE;
/* --ink-muted is used for small text: 5.1:1 on the paper canvas.
--ink-faint is for non-text (icons, rules, dots), never for copy. */
--ink-muted: #6F6A61;
--ink-faint: #8A857C;
--ink-soft: #4A4641;
--paper-bg-alt: #F3F1EC;
--paper-card: #FFFFFF;
--highlight: #FFF3C4;
/* Semantic status colours (text/dot/border on canvas ≥ 4.5:1) */
--status-ready: #2F7A44;
--status-progress: #946512;
--status-error: #B42318;
--status-inactive: #8A857C;
--status-error-soft: rgba(180, 35, 24, 0.04);
--status-error-soft-hover: rgba(180, 35, 24, 0.08);
/* Two-step radius system: controls and surfaces. Chips/badges are pills. */
--radius-control: 6px;
--radius-button: 8px;
--button-height: 36px;
--button-font-size: 14px;
--button-line-height: 20px;
--button-padding-x: 13px;
--button-compact-height: 32px;
--radius-surface: 10px;
--font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
background-color: var(--canvas-bg-color);
color: var(--color);
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: -0.005em;
line-height: 1.5;
}
.fadeIn {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.6s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Keyboard focus: a visible 2px accent ring only when focus came from the
keyboard (:focus-visible); pointer clicks get no ring. The ring is ≥ 3:1
against both canvases (indigo 6.4:1 light, periwinkle 8.7:1 dark). */
.btn:focus,
.btn:active {
box-shadow: none;
}
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.dropdown-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
box-shadow: none;
}
input:hover,
input:active {
box-shadow: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border-color: var(--border-color);
-webkit-text-fill-color: var(--color);
-webkit-box-shadow: none;
transition: background-color 1000s ease-in-out 0s;
}
input:-internal-autofill-selected,
.form-control,
.custom-select {
color: var(--input-color);
background-color: var(--input-bg) !important;
border-color: var(--border-color);
}
.form-control:focus {
border-color: var(--border-color);
}
html,
body {
position: relative;
height: 100%;
overflow-x: hidden;
}
body {
overflow-y: hidden;
}
/* Keep the route view as the scroll container below the header. */
#app { flex: 1 1 auto; min-height: 0; }
.app-header { flex: 0 0 auto; }
/* On the landing and FAQ pages, align the header with the 1140px content column. */
@media (min-width: 992px) {
.app-header.is-contained .navbar {
padding-left: max(40px, calc((100% - 1140px) / 2 + 32px)) !important;
padding-right: max(40px, calc((100% - 1140px) / 2 + 32px)) !important;
}
}
.app-view {
display: block;
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden !important;
overflow-y: auto !important;
max-width: 100%;
}
.markdown-body a,
a {
color: var(--link-color);
}
.markdown-body a:hover,
a:hover {
text-decoration: none;
color: var(--link-hover-color);
}
.dropdown-menu a.dropdown-item {
color: var(--color);
}
.dropdown-menu a.dropdown-item:hover {
color: var(--color);
text-decoration: none;
}
.markdown-body .emoji {
height: 1.3em;
margin: 0;
vertical-align: -0.1em;
}
.navbar.navbar-expand-lg {
background: var(--header-bg-color) !important;
border-bottom: 1px solid var(--border-color);
transition: background-color 0.5s ease;
padding: 10px max(20px, calc((100vw - 1200px) / 2));
font-family: var(--font-sans);
}
.navbar-toggler {
border: 1px solid var(--border-color) !important;
color: var(--color) !important;
width: 44px;
height: 40px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-control) !important;
}
.navbar-toggler .navbar-toggler-icon { width: 22px; height: 22px; }
.navbar-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='%231A1815' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E") !important;
}
.navbar .navbar-nav {
align-items: center;
}
.navbar .nav-link {
display: inline-flex;
align-items: center;
font-size: 13px;
color: var(--ink-muted) !important;
padding: 6px 0 !important;
margin: 0 12px;
border-bottom: 1px solid transparent;
letter-spacing: -0.005em;
line-height: 1;
}
.navbar .nav-link:hover {
color: var(--color) !important;
}
.navbar .nav-link.active {
color: var(--color) !important;
border-bottom-color: var(--color);
}
.navbar .nav-link.nav-icon {
padding: 0 !important;
margin: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
.navbar .nav-link .fa,
.navbar .nav-link .fab {
font-size: 15px;
line-height: 1;
}
.navbar #navbarSupportedContent {
align-items: center;
}
.navbar-brand {
font-family: var(--font-serif) !important;
font-size: 20px !important;
letter-spacing: -0.01em;
color: var(--color) !important;
padding-right: 18px;
margin-right: 12px;
border-right: 1px solid var(--border-color);
}
.navbar-brand em,
.navbar-brand i {
font-style: italic;
font-weight: 400;
}
.navbar-dark .navbar-toggler {
border-color: var(--border-color);
color: var(--color);
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='%231A1815' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar .btn-signin {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px !important;
margin-left: 6px;
border: 1px solid var(--border-color);
background: var(--paper-card);
color: var(--color) !important;
border-radius: var(--radius-control);
font-size: 13px;
font-weight: 500;
line-height: 1;
}
.dark-mode .navbar .btn-signin { border-color: #5A554D; background: transparent; }
.navbar .btn-signin:hover {
background: var(--hover-bg-color);
border-color: var(--ink-faint);
color: var(--color) !important;
}
.navbar .nav-support {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
order: 3;
gap: 6px;
min-height: 32px;
margin-left: 4px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--radius-control);
color: var(--ink-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
.navbar .nav-support:hover {
background: var(--hover-bg-color);
color: var(--color);
}
.navbar button.nav-link {
background: none;
border: 0;
cursor: pointer;
}
.navbar .nav-link:focus-visible,
.navbar .nav-support:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-control);
}
.navbar .nav-signin-m { display: none; }
@media (min-width: 992px) { .navbar > .nav-support { display: none !important; } }
.navbar .nav-support-inline { display: inline-flex !important; align-items: center; gap: 6px; }
.navbar .nav-support-inline .ui-icon { width: 15px; height: 15px; }
@media (max-width: 991px) {
.navbar .nav-signin-m {
display: inline-flex;
align-items: center;
order: 0;
height: 40px;
padding: 0 14px;
margin-left: 0;
margin-right: 8px;
border: 1px solid var(--border-color);
border-radius: var(--radius-control);
background: var(--paper-card);
color: var(--color);
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
.navbar .nav-support {
order: 0;
width: 44px;
min-height: 44px;
margin: 0 8px 0 auto;
padding: 0;
}
.navbar .nav-support-label { display: none; }
[class*="floatingchat-container-wrap"],
iframe.floatingchat-container { display: none !important; }
}
.navbar .user-chip {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 4px 12px 4px 6px !important;
margin-left: 6px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--sidebar-bg-color);
font-size: 12.5px;
color: var(--color) !important;
}
.navbar .user-chip:hover {
background: var(--hover-bg-color);
}
.navbar .user-chip img {
width: 22px;
height: 22px;
}
.navbar .user-chip .user-chip-name {
color: var(--color);
font-weight: 500;
}
.navbar .user-chip::after {
color: var(--ink-muted);
}
#navbarSupportedContent {
padding-right: 0;
}
.generalMessage {
display: block;
text-align: center;
color: var(--header-color);
}
.rgba-gradient {
background: var(--canvas-bg-color);
color: var(--color);
}
/* ===== Paper landing =====
Copy-first hero with the product on the right, a flat proof and stats
strip, the before/after example, one screenshot with three tabs, and a
FAQ teaser. Everything sits in .paper-wrap (1140px) and uses the theme
tokens, so dark mode is free. */
.paper-landing {
overflow-x: clip;
}
.paper-wrap {
/* Width instead of padding so section rules end at the content edge. */
width: min(1076px, calc(100% - 64px));
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
.paper-eyebrow {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 500;
}
/* Hero */
.paper-hero {
max-width: 1140px;
margin: 0 auto;
padding: 40px 32px 0;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.paper-hero h1.hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.6rem, 5.4vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 14px 0 0;
color: var(--color);
text-wrap: balance;
}
.paper-hero h1 .accent {
color: var(--accent);
font-style: italic;
}
.hero-subtitle {
margin-top: 18px;
font-size: 17px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 30em;
text-wrap: pretty;
}
.paper-cta-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
margin-top: 26px;
}
.btn-hero {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
border: 1px solid var(--color);
background: var(--color);
color: var(--canvas-bg-color);
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-control);
letter-spacing: -0.005em;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-hero:hover {
background: var(--primary-hover-bg);
border-color: var(--primary-hover-bg);
color: var(--canvas-bg-color);
text-decoration: none;
transform: translateY(-1px);
}
.btn-hero-ghost {
background: transparent;
border: 1px solid var(--border-color);
color: var(--color);
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-control);
}
.btn-hero-ghost:hover {
background: var(--hover-bg-color);
border-color: var(--color);
color: var(--color);
}
.paper-link-arrow {
font-size: 14px;
color: var(--ink-soft);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--border-color);
}
.paper-link-arrow:hover {
color: var(--color);
text-decoration-color: var(--color);
}
.paper-reassure {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
font-size: 13px;
color: var(--ink-muted);
}
.paper-reassure li { white-space: nowrap; }
@media (min-width: 1100px) { .paper-reassure { flex-wrap: nowrap; } }
.paper-reassure li::before {
content: "\2713";
color: var(--status-ready);
margin-right: 7px;
font-size: 14px;
font-weight: 600;
}
/* Browser frame around screenshots */
.paper-frame {
border-radius: var(--radius-surface);
background: var(--paper-card);
border: 1px solid var(--border-color);
box-shadow: 0 24px 60px rgba(26, 24, 21, 0.10), 0 2px 6px rgba(26, 24, 21, 0.04);
overflow: hidden;
}
.dark-mode .paper-frame {
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.paper-frame-bar {
display: flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 12px;
border-bottom: 1px solid var(--border-soft);
background: var(--paper-bg-alt);
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
}
.paper-frame-bar .dots {
display: flex;
gap: 5px;
}
.paper-frame-bar .dots i {
width: 9px;
height: 9px;
border-radius: 50%;
background: color-mix(in srgb, var(--ink-faint) 45%, transparent);
}
.paper-frame-bar .url {
flex: 1;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paper-frame img {
display: block;
width: 100%;
height: auto;
}
.paper-hero-shot .paper-frame {
width: 100%;
}
/* Hero mock: a live, themable miniature of the reviewer view. */
.hero-mock {
display: grid;
grid-template-columns: 168px 1fr;
min-height: 360px;
font-family: var(--font-sans);
text-align: left;
}
.hero-mock-tree {
background: var(--paper-bg-alt);
border-right: 1px solid var(--border-soft);
padding: 12px 8px;
}
.hero-mock-tree-title {
font-size: 11px;
font-weight: 600;
color: var(--ink-muted);
padding: 0 8px 8px;
}
.hero-mock-row {
display: flex;
align-items: center;
gap: 7px;
height: 26px;
padding: 0 8px;
border-radius: var(--radius-control);
font-size: 12.5px;
color: var(--ink-soft);
white-space: nowrap;
}
.hero-mock-row svg {
width: 14px;
height: 14px;
flex-shrink: 0;
fill: none;
stroke: var(--ink-muted);
stroke-width: 1.2;
stroke-linejoin: round;
}
.hero-mock-row.is-active {
background: rgba(128, 128, 128, 0.15);
color: var(--color);
font-weight: 500;
}
.hero-mock-doc { min-width: 0; background: var(--paper-card); }
.hero-mock-doc-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 18px;
border-bottom: 1px solid var(--border-soft);
font-size: 13px;
}
.hero-mock-doc-bar span { font-size: 12px; color: var(--ink-muted); }
.hero-mock-doc-body {
padding: 18px 22px 22px;
font-size: 13.5px;
line-height: 1.6;
color: var(--color);
}
.hero-mock-doc-body p { margin: 0 0 10px; }
.hero-mock-h1 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--border-soft);
}
.hero-mock-h2 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.hero-mock-doc-body pre {
margin: 0 0 12px;
padding: 10px 12px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-soft);
border-radius: var(--radius-control);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
color: var(--color);
}
.hero-mock .redact {
background: var(--accent-soft);
color: var(--accent);
border-radius: 4px;
padding: 1px 5px;
font-family: var(--font-mono);
font-size: 0.88em;
}
@media (max-width: 575px) {
.hero-mock { grid-template-columns: 1fr; min-height: 0; }
.hero-mock-tree { display: none; }
}
/* Proof strip */
.paper-proof {
margin-top: 48px;
padding-top: 18px;
padding-bottom: 18px;
border-top: 1px solid var(--border-color);
display: flex;
flex-wrap: wrap;
gap: 12px 30px;
align-items: center;
}
.paper-proof-venues {
display: flex;
gap: 22px;
align-items: center;
font-family: var(--font-serif);
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink-soft);
}
.paper-proof-venues i {
font-style: normal;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink-faint);
}
/* Stats: one hairline strip, no cards */
.paper-stats {
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
}
.paper-stats-meta-left { display: inline-flex; align-items: center; gap: 8px; }
.paper-stats-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 14px;
}
.paper-stats-meta-right {
display: inline-flex;
align-items: center;
gap: 6px;
}
.paper-stats-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--status-ready);
}
.paper-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.paper-stat-card {
display: flex;
flex-direction: column;
padding: 22px 26px 20px 0;
margin-right: 26px;
border-right: 1px solid var(--border-color);
min-width: 0;
}
.paper-stat-card:last-child {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
.paper-stat-value {
font-size: 44px;
font-weight: 500;
letter-spacing: -0.04em;
line-height: 1;
color: var(--color);
font-variant-numeric: tabular-nums;
}
.paper-stat-label {
margin-top: 6px;
font-size: 13px;
color: var(--ink-soft);
}
.paper-stat-value.is-pending { color: var(--ink-faint); }
.paper-stat-bars {
display: block;
width: 100%;
height: 34px;
margin-top: 18px;
overflow: visible;
}
.paper-stat-bars rect {
fill: color-mix(in srgb, var(--ink-muted) 55%, transparent);
}
.paper-stat-bars rect.is-latest {
fill: var(--accent);
}
.paper-stat-delta {
margin-top: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-muted);
}
/* Section heads */
.paper-section-head {
margin-top: 88px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: start;
}
.paper-section-head > p { padding-top: 34px; }
@media (max-width: 991px) { .paper-section-head > p { padding-top: 0; } }
.paper-section-head h2,
.paper-qa h2 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2rem, 4.2vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 10px 0 0;
color: var(--color);
text-wrap: balance;
}
.paper-section-head h2 em,
.paper-qa h2 em,
.paper-feature-title em {
font-style: italic;
color: var(--accent);
}
.paper-section-head p {
font-size: 15px;
color: var(--ink-soft);
max-width: 32em;
margin: 0;
line-height: 1.6;
}
/* Before / after example */
.paper-preview {
margin-top: 28px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.paper-preview .pane {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface);
overflow: hidden;
min-width: 0;
}
.paper-preview .pane-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border-soft);
}
.paper-preview .pane-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
white-space: nowrap;
}
.paper-preview .pane-url {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.paper-preview .pane-body {
padding: 16px 18px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.9;
color: var(--ink-soft);
}
.paper-preview .pane-body strong {
color: var(--color);
font-weight: 600;
}
.paper-preview .tok {
color: var(--ink-faint);
}
.paper-preview .term {
background: color-mix(in srgb, var(--status-error) 9%, transparent);
color: inherit;
border-radius: 4px;
padding: 0 4px;
text-decoration: line-through;
text-decoration-color: color-mix(in srgb, var(--status-error) 60%, transparent);
}
.dark-mode .paper-preview .term { background: color-mix(in srgb, var(--status-error) 16%, transparent); }
.paper-preview .redact {
background: var(--accent-soft);
color: var(--accent);
border-radius: 4px;
padding: 0 5px;
}
/* Features: vertical tabs on the left, one screenshot on the right */
.paper-features {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid var(--border-color);
display: grid;
grid-template-columns: 5fr 7fr;
gap: 48px;
align-items: start;
}
.paper-features-list {
display: flex;
flex-direction: column;
}
.paper-feature {
border-left: 2px solid var(--border-soft);
padding: 16px 0 16px 20px;
transition: border-color 0.2s;
}
.paper-feature.is-on {
border-left-color: var(--accent);
}
.paper-feature-tab {
all: unset;
display: block;
position: relative;
width: 100%;
cursor: pointer;
color: inherit;
border-radius: 4px;
}
.paper-feature:not(.is-on) .paper-feature-tab::after {
content: "";
position: absolute;
right: 4px;
bottom: 12px;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-muted);
border-bottom: 1.5px solid var(--ink-muted);
transform: rotate(45deg);
}
.paper-feature:not(.is-on) .paper-feature-tab:hover::after { border-color: var(--color); }
.paper-feature.is-on .paper-feature-tab::after {
content: "";
position: absolute;
right: 4px;
bottom: 10px;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--color);
border-bottom: 1.5px solid var(--color);
transform: rotate(-135deg);
}
.paper-feature-tab:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.paper-feature-tab .paper-eyebrow {
display: block;
margin-bottom: 6px;
}
.paper-feature-title {
display: block;
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--color);
transition: color 0.2s;
}
.paper-feature-title em {
color: inherit;
}
.paper-feature-tab:hover .paper-feature-title,
.paper-feature.is-on .paper-feature-title {
color: var(--color);
}
.paper-feature.is-on .paper-feature-title em {
color: var(--accent);
}
.paper-feature-more {
display: none;
}
.paper-feature.is-on .paper-feature-more {
display: block;
}
.paper-feature-more .paper-feature-title-m {
display: none;
}
.paper-feature-more p {
font-size: 14.5px;
color: var(--ink-soft);
line-height: 1.55;
margin: 10px 0 12px;
max-width: 30em;
}
.paper-features-stage {
min-width: 0;
}
.paper-feature-panel {
animation: paper-feature-in 0.25s ease-out;
}
@keyframes paper-feature-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.paper-feature-panel { animation: none; }
}
/* Each crop zooms on the part of the screenshot that carries the message.
Source screenshots are 2880x1800. */
.paper-crop {
position: relative;
height: 380px;
overflow: hidden;
background: var(--paper-card);
}
.paper-crop img {
position: absolute;
left: 0;
top: 0;
max-width: none;
height: auto;
display: block;
}
/* 1:1 crops (the frame is ~600px wide) so screenshot text stays crisp and legible. */
.paper-crop-anonymize img { width: 213%; transform: translate(-1.5%, -18%); }
.paper-crop-review img { width: 213%; transform: translate(0, -6.5%); }
.paper-crop-manage img { width: 213%; transform: translate(-12.3%, -6.5%); }
/* FAQ teaser */
.paper-qa {
margin-top: 88px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: start;
}
.paper-qa h2 {
margin-bottom: 12px;
}
.paper-qa .q {
border-top: 1px solid var(--border-color);
padding: 18px 0;
}
.paper-qa .q:last-child {
border-bottom: 1px solid var(--border-color);
}
.paper-qa .q a::after {
content: none;
display: inline-block;
width: 7px;
height: 7px;
margin-left: 10px;
border-right: 1.5px solid var(--ink-muted);
border-bottom: 1.5px solid var(--ink-muted);
transform: translateY(-2px) rotate(-45deg);
transition: transform 0.15s, border-color 0.15s;
}
.paper-qa .q a:hover::after { border-color: var(--accent); transform: translate(3px, -2px) rotate(-45deg); }
.paper-qa .q a:hover { text-decoration: underline; text-underline-offset: 3px; }
.paper-qa .q a {
display: block;
font-weight: 500;
font-size: 15px;
color: var(--color);
margin-bottom: 6px;
}
.paper-qa .q a:hover {
color: var(--accent);
text-decoration: none;
}
.paper-qa .q p {
margin: 0;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
}
/* Tablet */
@media (max-width: 1100px) {
.paper-hero-shot .paper-frame { width: 100%; }
}
@media (max-width: 991px) {
.paper-hero {
grid-template-columns: 1fr;
gap: 36px;
padding-top: 40px;
}
.paper-section-head,
.paper-qa {
grid-template-columns: 1fr;
gap: 16px;
}
.paper-stats-grid {
grid-template-columns: 1fr 1fr;
}
.paper-stat-card:nth-child(2n) {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
.paper-stat-card:nth-child(-n + 2) {
border-bottom: 1px solid var(--border-color);
}
}
/* Phone */
@media (max-width: 767px) {
.paper-wrap { width: calc(100% - 40px); }
.paper-hero {
padding-left: 20px;
padding-right: 20px;
}
.paper-reassure { flex-direction: column; gap: 6px; }
.paper-hero h1.hero-title {
font-size: clamp(2.4rem, 11vw, 3.25rem);
}
.hero-subtitle {
font-size: 16px;
}
.paper-cta-row .btn-hero {
width: 100%;
justify-content: center;
}
.paper-proof {
margin-top: 48px;
}
.paper-stat-card {
padding: 18px 16px 16px 0;
margin-right: 16px;
}
.paper-stat-value {
font-size: 36px;
}
.paper-section-head,
.paper-qa {
margin-top: 72px;
}
.paper-preview {
grid-template-columns: 1fr;
}
.paper-preview .pane-body {
font-size: 11.5px;
line-height: 1.8;
}
/* Tabs become a strip above the screenshot; the selected description
moves below it. display:contents lets the tab, the panel and the
description reorder as direct children of the section. */
.paper-features {
display: flex;
flex-wrap: wrap;
gap: 0;
padding-top: 0;
border-top: 0;
margin-top: 24px;
}
.paper-features-list,
.paper-feature,
.paper-features-stage {
display: contents;
}
.paper-feature-tab {
order: 1;
flex: 1 1 0;
width: auto;
padding: 12px 0 10px;
border-bottom: 2px solid var(--border-color);
border-radius: 0;
text-align: left;
}
.paper-feature.is-on .paper-feature-tab {
border-bottom-color: var(--color);
}
.paper-feature-tab .paper-eyebrow {
margin: 0;
font-size: 10.5px;
letter-spacing: 0.08em;
}
.paper-feature-tab .paper-feature-title {
display: none;
}
.paper-feature-panel {
order: 2;
width: 100%;
margin-top: 20px;
animation: none;
}
.paper-crop {
height: 240px;
}
.paper-crop-anonymize img { width: 230%; transform: translate(-1.5%, -8%); }
.paper-crop-review img { width: 240%; transform: translate(-1%, -8%); }
.paper-crop-manage img { width: 220%; transform: translate(-3%, -9%); }
.paper-feature-more {
order: 3;
width: 100%;
}
.paper-feature.is-on .paper-feature-more {
margin-top: 18px;
}
.paper-feature-more .paper-feature-title-m {
display: block;
font-size: 26px;
line-height: 1.1;
}
.paper-feature-more p {
max-width: none;
}
.paper-footer-inner > .paper-footer-brand {
grid-column: 1 / -1;
}
.paper-footer-foot {
flex-direction: column;
gap: 6px;
}
}
.dropdown-menu {
background-color: var(--paper-card, var(--main-bg-color)) !important;
color: var(--color) !important;
border: 1px solid var(--border-color) !important;
border-radius: 8px !important;
box-shadow: 0 12px 28px rgba(26, 24, 21, 0.08), 0 2px 6px rgba(26, 24, 21, 0.05) !important;
padding: 6px !important;
font-family: var(--font-sans);
font-size: 13px;
min-width: 11rem;
}
.dropdown-menu .dropdown-item {
color: var(--color) !important;
padding: 7px 10px !important;
border-radius: 5px;
font-size: 13px;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
background: var(--hover-bg-color) !important;
color: var(--color) !important;
}
.dropdown-menu .dropdown-divider {
border-top-color: var(--border-color) !important;
margin: 4px 2px;
}
.dropdown-menu .dropdown-header {
color: var(--ink-muted);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.body,
.file-content,
.markdown-body {
background-color: var(--main-bg-color) !important;
color: var(--color) !important;
}
.markdown-body table tr {
background-color: var(--main-bg-color);
border-top: 1px solid var(--border-color);
}
.markdown-body table tr:nth-child(2n) {
background-color: var(--paper-bg-alt);
}
.markdown-body table td,
.markdown-body table th {
border: 1px solid var(--border-color);
}
.file-content {
padding: 4px 7px;
text-align: left;
min-height: 100%;
}
/* Viewer file card: one frame for code and rendered files, with a GitHub-style header. */
.file-card {
margin: 16px 20px 28px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface);
overflow: clip;
}
.file-card:not(.is-code) .file-card-head { position: sticky; top: 0; z-index: 2; border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
.file-card.is-code {
display: flex;
flex-direction: column;
height: calc(100% - 32px);
margin-bottom: 16px;
}
.file-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
padding: 6px 8px 6px 16px;
border-bottom: 1px solid var(--border-color);
background: var(--paper-card);
}
.dark-mode .file-card-head { background: var(--paper-card); }
.file-card-meta {
font-size: 13px;
color: var(--ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.file-card-meta .sep { margin: 0 8px; color: var(--ink-faint); }
.file-card-head .btn { height: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; padding: 0 10px; }
.file-card-head .btn-seg:not(.view-switch) { gap: 2px; padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--border-color); }
.file-card-head .btn-seg:not(.view-switch) > .btn {
border: 0 !important;
border-radius: var(--radius-control) !important;
margin: 0 !important;
background: transparent !important;
color: var(--ink-soft);
}
.file-card-head .btn-seg:not(.view-switch) > .btn:hover { background: var(--hover-bg-color) !important; color: var(--color); }
.file-card-head .btn-seg:not(.view-switch):has(> .btn:only-child),
.file-card-actions > .btn-seg:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
.file-card-head .btn.btn-icon-only { width: 32px; padding: 0 !important; color: var(--ink-soft); }
.file-card-head .btn.btn-icon-only:hover { color: var(--color); background: var(--hover-bg-color) !important; }
.file-card .file-card-body { flex: 1 1 auto; min-height: 0; }
.file-card-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
/* Desktop: the file card header carries the path, so the separate status bar goes away. */
.file-card-path { display: none; align-items: center; gap: 2px; min-width: 0; }
.file-card-path .paths { overflow: hidden; }
.file-card-path + .file-card-meta,
.file-card-path + .view-switch { margin-left: 8px; }
.status-bar.is-redundant { display: none; }
.file-card-path { display: inline-flex; }
@media (max-width: 767px) {
.file-card-head { flex-wrap: wrap; row-gap: 0; }
.file-card-head .file-card-meta { order: 3; flex-basis: 100%; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; font-size: 12px; color: var(--ink-muted); }
.file-card-head .file-card-meta .meta-extra { display: inline !important; }
.file-card-head .btn-ghost { color: var(--ink-soft); }
.file-card-head .breadcrumb-root, .file-card-head .breadcrumb-root + .breadcrumb-item::before { display: none !important; }
.file-card-head .breadcrumb-item { padding-left: 0; }
.file-card-head { gap: 6px; padding: 6px 8px 6px 16px; }
.file-card-actions { gap: 2px; }
.file-card-actions .btn-seg { margin-left: 4px; }
}
@media (min-width: 992px) {
.file-card-path + .file-card-meta { padding-left: 14px; border-left: 1px solid var(--border-color); }
.file-card { margin-top: 20px; }
.file-card.is-code { height: calc(100% - 36px); }
}
.card-files-btn { margin-right: 4px; }
.leftCol-zip {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
}
.leftCol-zip:hover { color: var(--color); text-decoration: none; }
.leftCol-zip .ui-icon { width: 15px; height: 15px; }
.file-card-actions .btn-seg { margin-left: 6px; }
.file-card-head .btn.btn-find, .file-card-head .btn.btn-goto { padding: 0 10px; gap: 6px; font-weight: 400; }
@media (max-width: 1180px) { .file-card-head .btn-goto .btn-find-label, .file-card-head .btn-find .btn-find-label { display: none; } .file-card-head .btn-goto, .file-card-head .btn-find { width: 32px; padding: 0 !important; } }
@media (max-width: 991px) {
.file-card-head .btn-find { width: 32px; padding: 0 !important; }
.file-card-head .btn-find-label { display: none; }
}
@media (max-width: 767px) { .file-card-head .btn-find { width: 40px; } }
/* Ace find box, restyled to match the app */
.ace_search {
top: 8px !important;
right: 12px !important;
left: auto !important;
background: var(--paper-card) !important;
color: var(--color) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-surface) !important;
box-shadow: 0 8px 24px rgba(26, 24, 21, 0.14);
padding: 6px !important;
font-family: var(--font-sans) !important;
font-size: 13px !important;
}
.ace_search_field {
background: var(--input-bg) !important;
color: var(--input-color) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-control) !important;
margin-right: 4px !important;
height: 28px !important;
padding: 0 8px !important;
font-family: var(--font-sans) !important;
}
.ace_search_field:focus { border-color: var(--ink-muted) !important; outline: none; box-shadow: 0 0 0 3px var(--hover-bg-color); }
.ace_searchbtn, .ace_button {
background: transparent !important;
color: var(--ink-soft) !important;
border: 0 !important;
border-radius: var(--radius-control) !important;
width: 28px;
height: 28px !important;
line-height: 28px !important;
}
.ace_searchbtn:hover, .ace_button:hover { background: var(--hover-bg-color) !important; color: var(--color) !important; }
.ace_button.checked { border-color: var(--accent) !important; color: var(--accent) !important; }
.ace_search_counter { color: var(--ink-soft) !important; font-size: 13px; margin: 0 8px 0 4px !important; font-variant-numeric: tabular-nums; }
.ace_search { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-width: none !important; width: auto !important; }
.dark-mode .ace_search { background: var(--paper-card) !important; }
.ace_search .ace_button.checked { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.ace_search .ace_searchbtn[action="findAll"], .ace_search .ace_button[action="searchInSelection"], .ace_search .ace_replace_form, .ace_search .ace_button[action="toggleReplace"] { display: none !important; }
.ace_search_field { width: 200px !important; }
.ace_search_form { display: flex; align-items: center; margin: 0 !important; float: none !important; }
.ace_search_options { display: flex !important; align-items: center; gap: 4px; margin: 0 !important; float: none !important; text-align: left !important; }
.ace_search_options .ace_button { width: 28px; height: 28px !important; line-height: 26px !important; padding: 0 !important; border-radius: var(--radius-control) !important; font-size: 12px !important; text-align: center; }
.ace_searchbtn_close { position: static !important; margin-left: 2px; }
.ace_editor .ace_marker-layer .ace_selected-word { background: color-mix(in srgb, #E0A94A 30%, transparent) !important; border: 0 !important; border-radius: 2px; }
.ace_editor.ace-chrome .ace_marker-layer .ace_selection,
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: #F2B544 !important; box-shadow: 0 0 0 1px #B7791F; border-radius: 2px; }
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: #B7791F !important; box-shadow: 0 0 0 1px #F2B544; }
.ace_editor .ace_indent-guide-active { background: none !important; box-shadow: inset 1px 0 0 var(--border-color) !important; }
.ace_searchbtn_close { filter: none !important; opacity: 0.6; }
.ace_prompt_container { background: var(--paper-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-surface) !important; box-shadow: 0 12px 32px rgba(26,24,21,0.16) !important; }
.btn.btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--ink-muted); }
.btn.btn-ghost:hover { background: var(--hover-bg-color) !important; color: var(--color); }
.btn.btn-ghost.is-on { color: var(--color); background: var(--hover-bg-color) !important; box-shadow: none; }
.btn.btn-ghost:focus:not(:focus-visible):not(.is-on):not(:hover) { background: transparent !important; box-shadow: none; }
.dark-mode .file-card-head .btn-seg .btn { background: transparent !important; border-color: var(--border-color) !important; color: var(--color); font-weight: 500; }
.file-card-head .btn.btn-goto, .file-card-head .btn.btn-find { color: var(--ink-soft); }
.file-card-head > .view-switch {
gap: 2px;
padding: 2px;
border-radius: calc(var(--radius-control) + 2px);
background: var(--hover-bg-color);
}
.file-card-head > .view-switch .btn {
height: 28px;
min-height: 28px;
margin: 0 !important;
border: 0 !important;
border-radius: var(--radius-control) !important;
background: transparent !important;
color: var(--ink-soft);
font-weight: 500;
}
.file-card-head > .view-switch .btn:hover { color: var(--color); }
.file-card-head > .view-switch .btn.is-on {
background: var(--paper-card) !important;
color: var(--color);
box-shadow: 0 1px 2px rgba(26, 24, 21, 0.10), 0 0 0 1px var(--border-color);
cursor: default;
}
.dark-mode .file-card-head > .view-switch .btn.is-on { background: #3D3934 !important; box-shadow: none; }
.status-bar .btn.btn-ghost.btn-zip { color: var(--ink-soft); }
.copy-path-btn { margin-left: -4px; }
@media (max-width: 767px) {
.file-card-head .btn, .file-card-head .btn.btn-icon-only { height: 40px; min-height: 40px; }
.file-card-head .btn.btn-icon-only { width: 40px; }
.copy-path-btn { display: none !important; }
}
.file-card .ace_editor { height: 100% !important; }
@media (max-width: 767px) {
.file-card { margin: 0; border: 0; border-radius: 0; }
.file-card.is-code { height: 100%; }
.file-card-head { position: sticky; top: 0; z-index: 2; padding-left: 16px; }
}
/* Root file listing above the README, like a repository's front page. */
.dir-card {
margin: 20px 20px 0;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface);
overflow: hidden;
}
.dir-card + .file-card { margin-top: 16px; }
.dir-card-head {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
background: var(--paper-bg-alt);
}
.dark-mode .dir-card-head { background: #35312C; }
.dir-card-title { font-size: 14px; font-weight: 600; color: var(--color); }
.dir-card-sub { font-size: 13px; color: var(--ink-muted); }
.dir-list {
list-style: none;
margin: 0;
padding: 4px 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 0;
}
.dir-row {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 34px;
padding: 0 16px;
border: 0;
background: none;
font: inherit;
font-size: 14px;
color: var(--color);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.dir-row:hover { background: var(--hover-bg-color); color: var(--color); text-decoration: none; }
.dir-row:hover .dir-name { text-decoration: underline; text-underline-offset: 3px; }
.dir-row.is-current .dir-name { font-weight: 600; }
.dir-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--ink-muted); stroke-width: 1.2; stroke-linejoin: round; }
.dir-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-meta { flex-shrink: 0; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dir-list:not(.is-expanded) > li:nth-child(n+9) { display: none; }
.dir-more {
display: block;
width: 100%;
height: 40px;
border: 0;
border-top: 1px solid var(--border-soft);
background: none;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--link-color);
cursor: pointer;
}
.dir-more:hover { background: var(--hover-bg-color); }
@media (max-width: 767px) {
.dir-card { margin: 0; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; }
.dir-list { grid-template-columns: 1fr; }
.dir-card + .file-card { margin-top: 0; }
}
/* Rendered README / markdown in the viewer: a reading column in the app's type. */
.explorer-content .file-card .file-content.markdown-body {
max-width: 920px;
margin: 0;
min-height: 0;
padding: 28px 40px 48px;
background: var(--paper-card) !important;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.65;
}
.explorer-content .markdown-body h1,
.explorer-content .markdown-body h2 {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.3em;
}
.explorer-content .markdown-body h1 { font-size: 28px; margin-top: 0; }
.explorer-content .markdown-body h2 { font-size: 21px; margin-top: 32px; }
.explorer-content .markdown-body h3 { font-size: 17px; font-weight: 600; margin-top: 24px; }
.explorer-content .markdown-body h4 { font-size: 15px; font-weight: 600; }
.explorer-content .markdown-body img {
border-radius: var(--radius-control);
}
.explorer-content .markdown-body p > img:only-child,
.explorer-content .markdown-body p > a:only-child > img {
border: 1px solid var(--border-color);
}
.explorer-content .markdown-body pre,
.explorer-content .markdown-body code {
font-family: var(--font-mono);
font-size: 13px;
}
.explorer-content .markdown-body pre {
background: var(--paper-bg-alt) !important;
border: 1px solid var(--border-soft);
border-radius: var(--radius-control);
padding: 14px 16px;
line-height: 1.55;
}
.explorer-content .markdown-body :not(pre) > code {
background: var(--hover-bg-color);
border-radius: 4px;
padding: 0.15em 0.4em;
font-size: 0.86em;
}
@media (max-width: 767px) {
.explorer-content .file-card .file-content.markdown-body { padding: 20px 16px 72px; font-size: 15px; }
.explorer-content .markdown-body h1 { font-size: 24px; }
}
/* Code viewer (Ace): match the app surface; quiet gutter; GitHub-like syntax palette. */
.ace_editor.ace-chrome,
.ace_editor.ace-nord-dark {
background: var(--paper-card) !important;
color: var(--color) !important;
}
.ace_editor.ace-chrome .ace_gutter,
.ace_editor.ace-nord-dark .ace_gutter {
background: color-mix(in srgb, var(--paper-bg-alt) 55%, var(--paper-card)) !important;
color: var(--ink-muted) !important;
border-right: 1px solid var(--border-soft);
}
.ace_editor .ace_gutter-cell { padding-right: 14px; padding-left: 12px; font-size: 12px; }
@media (max-width: 767px) { .ace_editor .ace_gutter-cell { padding-right: 8px; padding-left: 6px; } }
.ace_editor .ace_gutter-active-line { background: transparent !important; }
.ace_editor .ace_indent-guide { background: none !important; box-shadow: inset 1px 0 0 var(--border-soft); }
.ace_editor .ace_fold-widget { opacity: 0; transition: opacity 0.15s; }
.ace_editor .ace_gutter:hover .ace_fold-widget, .ace_editor .ace_fold-widget.ace_closed { opacity: 0.7; }
.ace_editor .ace_marker-layer .ace_selection { background: var(--accent-soft) !important; }
.ace-chrome .ace_keyword, .ace-chrome .ace_storage { color: #B4362A; }
.ace-chrome .ace_string { color: #2B5A3E; }
.ace-chrome .ace_constant.ace_numeric, .ace-chrome .ace_constant.ace_language, .ace-chrome .ace_support.ace_constant { color: #1F6A64; }
.ace-chrome .ace_comment { color: #7A746A; font-style: italic; }
.ace-chrome .ace_entity.ace_name.ace_function, .ace-chrome .ace_support.ace_function { color: #6B45B8; }
.ace-chrome .ace_variable.ace_parameter { color: #8A5A12; font-style: normal; }
.ace-chrome .ace_meta.ace_tag, .ace-chrome .ace_entity.ace_name.ace_tag { color: #116329; }
.ace-chrome .ace_entity.ace_other.ace_attribute-name { color: #0550AE; }
.ace-chrome .ace_variable, .ace-chrome .ace_identifier, .ace-chrome .ace_paren, .ace-chrome .ace_punctuation { color: var(--color); }
.ace-nord-dark .ace_keyword, .ace-nord-dark .ace_storage { color: #F2897D; }
.ace-nord-dark .ace_string { color: #9DD3A8; }
.ace-nord-dark .ace_constant.ace_numeric, .ace-nord-dark .ace_constant.ace_language, .ace-nord-dark .ace_support.ace_constant { color: #7CC7BE; }
.ace-nord-dark .ace_comment { color: #9A948A; font-style: italic; }
.ace-nord-dark .ace_entity.ace_name.ace_function, .ace-nord-dark .ace_support.ace_function { color: #C9A8F5; }
.ace-nord-dark .ace_variable.ace_parameter { color: #E0A94A; font-style: normal; }
.ace-nord-dark .ace_meta.ace_tag, .ace-nord-dark .ace_entity.ace_name.ace_tag { color: #7EE787; }
.ace-nord-dark .ace_entity.ace_other.ace_attribute-name { color: #79C0FF; }
.ace-nord-dark .ace_variable, .ace-nord-dark .ace_identifier, .ace-nord-dark .ace_paren, .ace-nord-dark .ace_punctuation { color: var(--color); }
.badge {
font-size: 75%;
font-weight: 500;
padding: 3px 8px;
border-radius: 10px;
vertical-align: middle;
}
.warning-feedback {
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
color: #dc8e35;
}
.dropdown-item:focus,
.dropdown-item:hover {
background-color: var(--hover-bg-color);
}
.card-header .btn,
.card-header .btn:hover,
.card-header .btn:focus {
border: none !important;
background: transparent !important;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--button-height);
padding: 7px var(--button-padding-x);
font: 500 var(--button-font-size)/var(--button-line-height) var(--font-sans);
vertical-align: middle;
max-width: 100%;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
color: var(--btn-color);
border: 1px solid var(--border-color);
background: var(--paper-card);
border-radius: var(--radius-button);
white-space: nowrap;
}
.btn:hover,
.btn:active {
color: var(--btn-color);
border: 1px solid var(--border-color);
background-color: var(--hover-bg-color);
box-shadow: none !important;
}
.btn.btn-primary {
color: var(--primary-color);
background-color: var(--primary-bg);
}
.btn.btn-primary:active,
.btn.btn-primary:hover {
color: var(--primary-active-color);
background-color: var(--primary-hover-bg) !important;
}
.btn::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--color);
opacity: 1;
/* Firefox */
}
.white_border {
border: 1px solid white;
color: white;
}
.leftCol {
display: flex;
position: relative;
flex: 0 0 auto;
width: 100%;
z-index: 9;
flex-direction: column;
}
.leftCol,
.sidePanel,
.card {
background-color: var(--sidebar-bg-color);
border: 1px solid var(--border-color);
}
@media (min-width: 768px) {
.leftCol {
flex: 0 0 var(--sidebar-w, 280px);
width: var(--sidebar-w, 280px);
height: 100%;
}
}
/* ===== File tree search & header ===== */
.leftCol-search {
padding: 10px 12px 0;
}
.tree-search-box {
display: flex;
align-items: center;
gap: 8px;
background: var(--canvas-bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 7px 10px;
transition: border-color 0.15s;
}
.tree-search-box:focus-within {
border-color: var(--ink-muted);
}
.tree-search-icon {
font-size: 12px;
color: var(--ink-muted);
flex-shrink: 0;
}
.tree-search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-sans);
font-size: 13px;
color: var(--color);
min-width: 0;
}
.tree-search-input::placeholder {
color: var(--ink-muted);
}
.tree-search-kbd {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-muted);
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 1px 6px;
line-height: 1.4;
flex-shrink: 0;
}
.tree-search-clear {
background: none;
border: none;
color: var(--ink-muted);
font-size: 16px;
cursor: pointer;
padding: 0 2px;
line-height: 1;
}
.tree-search-clear:hover { color: var(--color); }
.leftCol-project-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 4px;
gap: 8px;
}
.project-name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.project-file-count {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-muted);
white-space: nowrap;
flex-shrink: 0;
margin-left: auto;
}
/* ===== File tree ===== */
.files {
position: relative;
display: block;
overflow: auto;
height: 100%;
padding: 4px 6px;
}
.files ul {
list-style: none;
margin: 0;
padding: 0;
}
.files li ul {
padding-left: 8px;
margin-left: 7px;
border-left: 1px solid var(--border-color);
}
.files .folder > ul { display: none; }
.files .folder.open > ul { display: block; }
.files .file,
.files .folder {
position: relative;
color: var(--ink-soft);
cursor: pointer;
word-break: break-all;
}
.files a {
display: flex;
align-items: center;
gap: 5px;
min-height: 26px;
padding: 2px 8px 2px 4px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
border-radius: var(--radius-control);
text-decoration: none;
line-height: 1.5;
position: relative;
}
.files a:hover {
background: var(--hover-bg-color);
color: var(--color);
text-decoration: none;
}
.files:focus { outline: none; }
.files a.tree-focused {
background: var(--hover-bg-color);
color: var(--color);
}
.files .file.active > a::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 0 2px 2px 0;
background: var(--accent);
}
.files .file.active > a {
border-radius: 0 var(--radius-control) var(--radius-control) 0;
background: rgba(128, 128, 128, 0.12);
color: var(--color);
font-weight: 500;
}
.files .file.active > a .tree-icon-file { color: var(--color); }
.files .file.active > a .tree-count { color: var(--ink-muted); }
/* Tree icon shapes */
.tree-icon-folder,
.tree-icon-file {
display: inline-block;
flex-shrink: 0;
}
/* Compact folder outline with a tab; expansion adds a light tint. */
.tree-icon-folder {
width: 14px;
height: 12px;
color: var(--ink-muted);
opacity: 0.75;
}
.tree-icon-folder svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
fill-opacity: 0;
stroke: currentColor;
stroke-width: 1.2;
stroke-linejoin: round;
}
.files .folder.open > a .tree-icon-folder {
color: var(--ink-muted);
opacity: 1;
}
.files .folder.open > a .tree-icon-folder svg {
fill-opacity: 0.12;
}
.tree-icon-file {
width: 16px;
font-size: 14px;
text-align: center;
color: var(--ink-muted);
}
/* Expand/collapse triangle */
.tree-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 14px;
flex-shrink: 0;
opacity: 0.8;
}
.tree-toggle::after {
content: "";
display: block;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-muted);
border-bottom: 1.5px solid var(--ink-muted);
transform: translateX(-1px) rotate(-45deg);
transition: transform 0.12s ease;
}
.files .folder.open > a .tree-toggle::after {
transform: translateY(-2px) rotate(45deg);
}
/* Spacer for nested files to align with folder contents (replaces the toggle arrow width) */
.tree-spacer {
display: inline-block;
width: 12px;
flex-shrink: 0;
}
/* File name and count */
.tree-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.files a:not(:hover):not(.tree-focused) .tree-count { opacity: 0; }
.tree-count {
transition: opacity 0.12s;
font-family: var(--font-sans);
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--ink-muted);
flex-shrink: 0;
margin-left: auto;
padding-left: 8px;
opacity: 0.7;
}
.files .folder > a {
color: var(--color);
}
/* Remove old Font Awesome icon pseudo-elements */
.files .file::before,
.files .folder::before {
display: none;
}
.files .folder > a::after {
display: none;
}
/* Search results */
.tree-search-path {
color: var(--ink-muted);
font-size: 11px;
}
.tree-search-empty {
padding: 16px 12px;
color: var(--ink-muted);
font-size: 12.5px;
font-family: var(--font-sans);
text-align: center;
}
/* ===== Explorer IDE chrome ===== */
.leftCol {
background: var(--paper-bg-alt, #F3F1EC);
border: 0;
border-right: 1px solid var(--border-color);
}
.dark-mode .leftCol { background: var(--paper-bg-alt); }
.dark-mode .explorer-content .markdown-body img { filter: brightness(0.8); }
.dark-mode .hero-mock-tree { background: #1F1D1A; }
.dark-mode .hero-mock-row.is-active { background: rgba(255, 255, 255, 0.10); }
.dark-mode .files .file.active > a { background: rgba(255, 255, 255, 0.10); }
.status-bar {
background: var(--canvas-bg-color);
border-bottom: 1px solid var(--border-color);
padding: 8px 20px;
min-height: 48px;
}
.paths .breadcrumb-item,
.paths .breadcrumb-item a {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink-muted);
letter-spacing: 0;
}
.paths .breadcrumb-root a { color: var(--link-color); }
.paths .breadcrumb-root a:hover { text-decoration: underline; text-underline-offset: 3px; }
.paths .breadcrumb-item.active,
.paths .breadcrumb-item:last-child {
color: var(--color);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}
.status-files-btn { display: none !important; }
.leftCol-resizer { display: none; }
@media (min-width: 992px) {
.leftCol-resizer {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--sidebar-w, 280px) - 3px);
width: 6px;
cursor: col-resize;
z-index: 10;
}
.leftCol-resizer:hover, body.is-resizing .leftCol-resizer { background: color-mix(in srgb, var(--accent) 35%, transparent); }
body.is-resizing { cursor: col-resize; user-select: none; }
}
.leftCol-hide {
display: none;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-right: -6px;
border: 0;
border-radius: var(--radius-control);
background: transparent;
color: var(--ink-muted);
cursor: pointer;
}
.leftCol-hide:hover { background: var(--hover-bg-color); color: var(--color); }
.leftCol-hide .ui-icon { width: 16px; height: 16px; }
@media (min-width: 992px) {
.leftCol-hide { display: inline-flex; }
.explorer-page.files-hidden .leftCol { display: none !important; }
.explorer-page.files-hidden .status-files-btn { display: inline-flex !important; }
}
@media (max-width: 991px) {
.status-files-btn { display: inline-flex !important; flex-shrink: 0; }
.explorer-page .sidebar-toggle { display: none !important; }
}
@media (max-width: 767px) {
.status-bar .btn, .status-bar .btn.btn-icon-only { min-height: 40px; }
.status-bar .btn.btn-icon-only { width: 40px; }
}
.dark-mode .status-bar .btn { background: var(--paper-card); }
.btn-seg { display: inline-flex; }
.btn-seg > .btn { border-radius: 0; margin: 0; }
.btn-seg > .btn + .btn { margin-left: -1px; }
.btn-seg > .btn:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.btn-seg > .btn:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.btn-seg > .btn:hover, .btn-seg > .btn:focus-visible { position: relative; z-index: 1; }
.status-bar .btn { height: 32px; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.status-bar .btn.btn-icon-only { padding-left: 0; padding-right: 0; width: 32px; justify-content: center; }
.status-files-btn { gap: 6px; }
@media (max-width: 991px) { .status-files-btn { height: 40px !important; min-height: 40px !important; padding: 0 12px; border-radius: var(--radius-control); } }
@media (max-width: 767px) {
.file-card.is-code.no-wrap { position: relative; }
.file-card.is-code.no-wrap::after { content: ""; position: absolute; top: 46px; right: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(to right, transparent, var(--paper-card) 85%); z-index: 20; }
.file-card-head .btn-goto { display: none !important; }
}
@media (max-width: 575px) {
.status-bar .btn-zip { display: none !important; }
.navbar .nav-support { display: none !important; }
.navbar .nav-signin-m { margin-left: auto; }
}
.ace_editor .ace_gutter-cell { cursor: pointer; }
.ace_editor .ace_gutter-cell:hover { color: var(--color); }
.status-bar .file-meta {
flex: 0 0 auto;
margin-right: auto;
font-size: 12px;
color: var(--ink-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 575px) { .status-bar .file-meta { display: none; } }
.paths .breadcrumb-item + .breadcrumb-item::before {
content: '/';
color: var(--ink-faint);
padding: 0 6px 0 3px;
}
.last-update {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-muted);
padding: 8px 10px;
border-top: 1px solid var(--border-color);
letter-spacing: 0.02em;
}
.ace_editor {
height: 100%;
}
.ace_scroller {
cursor: default;
}
.status-bar {
display: flex;
align-items: center;
gap: 12px;
background-color: var(--canvas-bg-color);
padding: 10px 14px;
margin: 0;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
flex-shrink: 0;
}
.status-bar-actions {
display: flex;
align-items: center;
margin-left: auto;
gap: 10px;
flex-shrink: 0;
}
.status-bar-actions .btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
border-radius: 6px;
padding: 4px 10px;
font-size: 12.5px;
min-height: 30px;
}
.status-bar-actions .btn:hover {
background: var(--hover-bg-color);
color: var(--color);
}
/* An action that is currently on, e.g. JS execution enabled for this file. */
.status-bar-actions .btn.btn-active {
border-color: currentColor;
font-weight: 600;
}
.paths {
flex: 0 1 auto;
min-width: 0;
padding: 0;
margin: 0;
background-color: initial;
border: none;
border-radius: 0;
align-items: center;
overflow-x: auto;
white-space: nowrap;
flex-wrap: nowrap;
}
.paths::-webkit-scrollbar { display: none; }
.paths a {
color: var(--color);
}
.paths .breadcrumb-item {
padding-left: 3px;
}
.paths .breadcrumb-item::before {
padding-right: 3px;
}
.content {
height: 100%;
overflow: scroll;
padding-top: 42px;
background-color: var(--main-bg-color);
text-align: center;
}
.image-content {
max-width: 100%;
max-height: 100%;
text-align: center;
padding: 4px;
}
/* Rendered PDF: a toolbar above a scrolling column of pages. */
.pdf-viewer {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
background-color: var(--main-bg-color);
}
.pdf-toolbar {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
padding: 4px 8px;
border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
}
.pdf-toolbar-group {
display: inline-flex;
align-items: center;
gap: 4px;
}
.pdf-toolbar-right {
margin-left: auto;
}
.pdf-toolbar-btn {
border: 0;
background: none;
color: inherit;
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
line-height: 1.2;
cursor: pointer;
}
.pdf-toolbar-btn:hover:not(:disabled) {
background-color: rgba(128, 128, 128, 0.18);
}
.pdf-toolbar-btn:disabled {
opacity: 0.4;
cursor: default;
}
.pdf-toolbar-zoom {
min-width: 52px;
font-variant-numeric: tabular-nums;
}
.pdf-toolbar-page {
width: 3.5em;
text-align: right;
padding: 2px 4px;
font-size: 13px;
color: inherit;
background: none;
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
border-radius: 4px;
}
.pdf-toolbar-count {
font-size: 13px;
opacity: 0.75;
font-variant-numeric: tabular-nums;
}
.pdf-pages {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 8px 0;
}
.pdf-viewer-page {
/* Sized to the page's aspect ratio while empty so the scrollbar is honest
and only on-screen pages get rasterised; the canvas takes over once the
page renders. */
margin: 0 auto 12px;
}
.pdf-viewer-page canvas {
display: block;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.pdf-viewer-error {
padding: 24px;
text-align: center;
font-weight: bold;
}
/* Rendered HTML document. Always light: the document brings its own styling
and dark mode can't reach inside a cross-origin frame to adapt it. */
.html-doc {
display: block;
height: 100%;
}
.html-doc-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
background-color: #fff;
}
.file-error {
font-weight: bold;
font-size: 50px;
text-align: center;
}
pdfviewer {
display: block;
padding: 15px;
}
pdfpageviewer {
display: block;
width: 100%;
margin-bottom: 10px;
}
notebook {
display: block;
text-align: left;
padding: 15px;
}
@media (min-width: 768px) {
notebook {
padding-left: 100px;
}
}
.nb-output th,
.nb-output td {
border: 1px solid var(--border-color) !important;
}
/* ===== Paper FAQ (two-col editorial) ===== */
.paper-faq {
max-width: 1140px;
margin: 0 auto;
padding: 48px 32px 80px;
font-family: var(--font-sans);
}
.paper-faq-hero {
padding-bottom: 40px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 36px;
}
.paper-faq-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 32px;
}
.paper-faq-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.6rem, 5.5vw, 4.6rem);
line-height: 1.03;
letter-spacing: -0.02em;
color: var(--color);
margin: 0 0 22px;
max-width: 14em;
}
.paper-faq-title em { font-style: italic; color: var(--color); }
.paper-faq-lede {
color: var(--ink-soft);
font-size: 17px;
line-height: 1.55;
max-width: 38em;
margin: 0;
}
.paper-faq-lede a { color: var(--link-color); border-bottom: 1px solid currentColor; }
.paper-faq-lede a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.paper-faq-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
align-items: start;
}
.paper-faq-toc {
position: sticky;
top: 32px;
font-size: 13.5px;
}
.paper-faq-toc-head {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
padding-bottom: 10px;
margin-bottom: 6px;
border-bottom: 1px solid var(--border-color);
}
.paper-faq-toc nav {
display: flex;
flex-direction: column;
}
.paper-faq-toc nav a {
color: var(--ink-soft);
padding: 8px 0 8px 14px;
border-left: 2px solid transparent;
text-decoration: none;
margin-left: 0;
}
.paper-faq-toc nav a:hover,
.paper-faq-toc nav a.active {
color: var(--color);
border-left-color: var(--color);
}
.faq-section {
min-width: 0;
}
.faq-section > div {
width: 100%;
}
.faq-section h4.faq-cat {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.7rem, 2.6vw, 2.2rem);
letter-spacing: -0.015em;
color: var(--color);
margin: 0 0 6px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-color);
}
.faq-section h4.faq-cat i { display: none; }
.faq-section .panel-group { margin-bottom: 56px; }
.faq-section .panel-default .panel-title a {
display: block;
position: relative;
padding: 22px 0 22px 42px;
font-family: var(--font-serif);
font-weight: 400;
font-size: 20px;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--color);
text-decoration: none;
cursor: pointer;
}
.faq-section .panel-default .panel-title a:hover {
color: var(--accent);
}
.faq-section .panel-heading {
background: transparent;
padding: 0 !important;
border: none;
}
.faq-section .panel-default {
background: transparent;
border: none;
border-bottom: 1px solid var(--border-soft);
border-radius: 0;
margin-bottom: 0 !important;
box-shadow: none;
}
.faq-section .panel-default .panel-title {
margin-bottom: 0;
}
.faq-section .panel-default .panel-title a:after {
content: "−";
position: absolute;
left: 0;
right: auto;
top: 22px;
transform: none;
font-family: var(--font-mono);
font-size: 18px;
line-height: 1.35;
color: var(--ink-muted);
float: none;
margin: 0;
font-weight: 400;
}
.faq-section .panel-default .panel-title a.collapsed:after {
content: "+";
}
.faq-section .panel-default .panel-body {
padding: 0 0 22px 42px !important;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.65;
border-top: none;
max-width: 68ch;
}
.table {
color: var(--color);
}
.table td,
.table th,
hr,
.dropdown-divider {
border-color: var(--border-color);
}
.table.repositories td {
word-break: break-word;
}
loc {
display: block;
position: relative;
width: 100%;
height: 5px;
}
loc .lang {
float: left;
height: 100%;
}
.rounded-circle.fa {
display: inline-block;
font-size: 75px;
height: 140px;
width: 140px;
border: 4px solid;
line-height: 140px;
text-align: center;
}
.featurette-divider {
margin: 4.5rem 0;
border-color: var(--border-color);
}
/* Featurette headings */
.featurette-heading {
font-family: var(--font-serif);
font-weight: 400;
font-size: 2rem;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 14px;
color: var(--color);
}
.dark-mode .shadow {
box-shadow: none;
}
.dark-mode .overflow-auto::-webkit-scrollbar {
width: 10px;
}
.dark-mode .overflow-auto::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: inherit;
border-radius: 0;
}
.dark-mode .overflow-auto::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 1px solid var(--border-color);
background-color: var(--hover-bg-color);
}
.dark-mode .rgba-gradient {
background: linear-gradient(135deg, #2a2d4a, #151728);
}
.section-number {
padding-right: 10px;
font-weight: bold;
font-style: italic;
}
.org-subscript-child {
font-size: 85%;
}
.highlighted-line {
position: absolute;
background: rgba(100, 200, 100, 0.5);
z-index: 20
}
pre,
code {
font-family: "Fira Code", "Courier New", Courier, monospace;
line-height: 1.1;
color: var(--color)
}
.diff-lines,
.diff-file,
.diff-index {
background: rgba(172, 172, 172, 0.5);
}
.diff-add {
background: rgba(100, 200, 100, 0.5);
}
.diff-remove {
background: rgba(200, 100, 100, 0.5);
}
/* ===== Dashboard & List Styles ===== */
.dashboard-title {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Quota bars */
.quota-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
padding: 0;
}
.quota-item {
flex: 1;
min-width: 0;
}
.quota-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.quota-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
opacity: 0.7;
}
.quota-value {
font-size: 0.8rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.quota-progress {
height: 6px;
border-radius: 3px;
background: var(--hover-bg-color);
}
.quota-progress .progress-bar {
border-radius: 3px;
}
/* Filter chips */
.filter-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
font-size: 0.8rem;
font-weight: 500;
background: var(--primary-bg);
color: var(--primary-color);
border-radius: 12px;
line-height: 1.4;
}
.filter-chip-close {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: inherit;
opacity: 0.7;
cursor: pointer;
padding: 0;
/* 24px tap target; negative margin keeps the chip visually compact */
min-width: 24px;
min-height: 24px;
margin: -6px -6px -6px 0;
font-size: 1rem;
line-height: 1;
border-radius: 999px;
}
.filter-chip-close:hover {
opacity: 1;
}
/* Repository/PR list */
.repo-list {
list-style: none;
padding: 0;
margin: 0;
}
.repo-list-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--border-color);
gap: 12px;
}
.repo-list-item:first-child {
border-top: 1px solid var(--border-color);
}
.repo-list-item.repo-inactive {
opacity: 0.6;
}
.repo-list-item-content {
flex: 1;
min-width: 0;
}
.repo-list-item-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.repo-name {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: var(--color);
word-break: break-word;
}
.repo-name:hover {
color: var(--accent);
}
.repo-source {
font-size: 0.85rem;
opacity: 0.8;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.repo-date {
opacity: 0.7;
}
.repo-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
font-size: 0.8rem;
opacity: 0.7;
}
.repo-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.repo-list-item-actions {
flex-shrink: 0;
padding-top: 2px;
margin-left: 14px;
}
.repo-list-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 48px 20px;
opacity: 0.5;
font-size: 0.95rem;
list-style: none;
border-bottom: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
}
.repo-list-empty i {
font-size: 1.8rem;
}
/* Type badges (Repo / PR) */
.type-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
}
.type-badge {
font-family: var(--font-mono);
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: var(--paper-bg-alt, transparent);
}
.type-badge.type-repo,
.type-badge.type-pr {
background: var(--paper-bg-alt);
color: var(--ink-muted);
border-color: var(--border-color);
}
.dark-mode .type-badge.type-repo,
.dark-mode .type-badge.type-pr {
background: rgba(255, 255, 255, 0.06);
color: var(--ink-muted);
border-color: var(--border-color);
}
.type-badge.type-coauthor {
background: rgba(99, 102, 241, 0.12);
color: #4f46e5;
border-color: rgba(99, 102, 241, 0.35);
margin-left: 6px;
}
.dark-mode .type-badge.type-coauthor {
background: rgba(129, 140, 248, 0.18);
color: #7CC7BE;
border-color: rgba(165, 180, 252, 0.45);
}
/* Type filter button group */
.btn-group .btn:not(.btn-primary) {
background: var(--hover-bg-color);
}
/* ===== Anonymize Page Layout ===== */
.anonymize-page {
display: flex;
flex-direction: column;
min-height: 0;
}
/* Landing state: centered URL input */
.anonymize-landing {
flex: 1 1 0;
min-height: min-content;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.anonymize-landing-inner {
width: 100%;
max-width: 600px;
}
.anonymize-landing-inner h2 {
font-weight: 700;
}
/* Anonymize workspace: topbar + split */
.anonymize-workspace {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-height: 0;
background: var(--canvas-bg-color);
}
.anonymize-topbar {
background: var(--paper-card);
border-bottom: 1px solid var(--border-color);
padding: 18px 28px;
flex: 0 0 auto;
}
.anonymize-topbar-inner { max-width: 1400px; margin: 0 auto; }
.anonymize-topbar-head {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.anonymize-topbar-title {
margin: 4px 0 0;
font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.anonymize-split {
flex: 1 1 auto;
display: flex;
min-height: 0;
}
/* Form column (left) */
.anonymize-form-col {
flex: 0 0 auto;
width: 100%;
min-width: 0;
background: var(--canvas-bg-color);
border-right: 1px solid var(--border-color);
overflow-y: auto;
}
.anonymize-form-col .paper-settings-main {
max-width: 720px;
padding: 28px 32px 40px;
margin: 0;
}
.anonymize-form-col .paper-settings-section:first-child { padding-top: 0; }
.anonymize-form-col .anonymize-submit-bar {
position: sticky;
bottom: 0;
background: var(--canvas-bg-color);
padding: 14px 0 0;
border-top: 1px solid var(--border-color);
margin-top: 20px;
}
.anonymize-form-col .anonymize-submit-bar .btn { width: 100%; padding: 12px 16px; font-size: 15px; }
/* Preview column */
.anonymize-preview-col {
flex: 1 1 auto;
min-width: 0;
overflow: auto;
background: var(--paper-bg-alt);
padding: 28px 32px;
}
.anonymize-preview-head {
display: flex;
align-items: baseline;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 20px;
}
.anonymize-preview-head .paper-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.anonymize-preview-sub { color: var(--ink-soft); font-size: 13px; }
.anonymize-preview-body {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 28px 32px;
}
/* Form grids for paired fields */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
@media (max-width: 700px) {
.form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.paper-optional {
font-family: var(--font-sans);
font-weight: 400;
color: var(--ink-muted);
text-transform: none;
letter-spacing: 0;
font-size: 11px;
margin-left: 6px;
}
/* Plan cards */
.paper-plan-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.paper-plan-card {
position: relative;
display: block;
padding: 18px 20px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
margin: 0;
}
.paper-plan-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.paper-plan-card.selected {
border-color: var(--color);
box-shadow: 0 0 0 2px var(--color) inset;
}
.paper-plan-head {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.paper-plan-price {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--color);
margin: 6px 0 4px;
}
.paper-plan-price .paper-plan-per { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); }
.paper-plan-desc { font-size: 13px; color: var(--ink-soft); }
.paper-plan-desc ul { padding-left: 18px; margin: 0; }
.paper-settings-copy { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
.anonymize-section-title {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
margin: 18px 0 8px 0;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-color);
opacity: 0.7;
}
.anonymize-section-title i {
margin-right: 4px;
}
.anonymize-submit-bar {
padding: 12px 0 4px 0;
}
.anonymize-submit-bar .btn {
font-size: 1rem;
padding: 10px 20px;
font-weight: 600;
}
.anonymize-page .form-check {
padding-top: 4px;
padding-bottom: 4px;
}
.anonymize-page .form-check-label {
font-weight: 500;
}
/* Preview column on desktop */
.anonymize-preview-col {
min-height: 0;
min-width: 0;
}
/* PR diff overflow */
.pr-diff pre {
overflow-x: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.anonymize-form-col {
height: 100%;
width: 520px;
flex: 0 0 520px;
}
.anonymize-preview-col {
height: 100%;
flex: 1;
}
}
/* Mobile: stack form above preview, tighten paddings */
@media (max-width: 767px) {
.anonymize-workspace { flex: 0 0 auto; min-height: 0; }
.anonymize-topbar { padding: 14px 16px; }
.anonymize-topbar-title { font-size: 1.6rem; margin-top: 2px; }
.anonymize-split {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.anonymize-form-col {
width: 100% !important;
flex: 0 0 auto !important;
height: auto !important;
border-right: none;
border-bottom: 1px solid var(--border-color);
overflow: visible;
}
.anonymize-form-col .paper-settings-main {
padding: 18px 16px 24px;
max-width: none;
}
.anonymize-form-col .anonymize-submit-bar {
position: sticky;
bottom: 0;
margin: 20px -16px 0;
padding: 12px 16px;
background: var(--canvas-bg-color);
border-top: 1px solid var(--border-color);
z-index: 10;
}
.anonymize-form-col .anonymize-submit-bar .btn {
width: 100%;
padding: 12px 16px;
font-size: 15px;
}
.anonymize-preview-col {
width: 100%;
flex: 0 0 auto;
height: auto !important;
max-height: none;
padding: 18px 16px 24px;
overflow: visible;
}
.anonymize-preview-body {
padding: 16px;
border-radius: 8px;
}
.anonymize-preview-body pre,
.anonymize-preview-body .pr-diff pre {
overflow-x: auto;
max-width: 100%;
}
.anonymize-landing-inner { padding: 16px; }
}
@media (min-width: 1280px) {
.anonymize-form-col {
width: 620px;
flex: 0 0 620px;
}
}
/* ===== Mobile Responsive Improvements ===== */
/* Mobile-friendly touch targets */
@media (max-width: 767px) {
.btn {
min-height: 38px;
padding: 6px 14px;
font-size: 14px;
}
.btn-sm {
min-height: 34px;
padding: 5px 10px;
}
.navbar .nav-link {
padding: 8px 12px;
}
.navbar .nav-link .fa,
.navbar .nav-link .fab {
font-size: 24px;
line-height: 32px;
}
.container.page {
padding-left: 15px;
padding-right: 15px;
max-width: 100%;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
/* Dashboard list items */
.repo-list-item {
flex-direction: column;
}
.repo-list-item-actions {
align-self: flex-start;
}
/* Quota row stacks on mobile */
.quota-row {
flex-direction: column;
gap: 10px;
padding: 10px 12px;
}
/* Dropdown menus right-aligned on mobile */
.dropdown-menu {
position: absolute;
right: 0;
left: auto;
}
/* Form controls spacing */
.form-group {
margin-bottom: 12px;
}
.form-control {
font-size: 16px; /* Prevents iOS zoom */
}
/* Status bar wrapping */
.status-bar {
gap: 6px;
padding: 8px 10px;
}
.status-bar .btn {
font-size: 12px;
padding: 4px 10px;
min-height: 32px;
}
.status-bar .paths {
font-size: 11.5px;
overflow-x: auto;
flex-wrap: nowrap;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.status-bar .paths::-webkit-scrollbar { display: none; }
.status-bar-actions {
flex-shrink: 0;
gap: 4px;
}
/* Home hero section */
#home .display-4 {
font-size: 1.8rem;
}
#home h4.subtext-header {
font-size: 1rem;
}
/* Progress bars on dashboard */
.progress:not(.quota-progress) {
min-width: 120px !important;
}
/* Badge readability */
.badge {
font-size: 70%;
}
/* Search & filter toolbar */
.col-2.input-group {
width: 100% !important;
max-width: 100%;
flex: 0 0 100%;
}
/* Metadata spans wrapping */
.color-text-secondary span {
display: inline-block;
margin-bottom: 2px;
}
/* Ko-fi widget hidden on mobile */
.floatingchat-container-wrap {
display: none !important;
}
/* ---- Anonymize page mobile ---- */
.anonymize-landing {
align-items: flex-start;
padding-top: 60px;
}
.anonymize-page .container-fluid > .row {
height: auto !important;
min-height: 100%;
}
.anonymize-form-col {
width: 100% !important;
flex: 0 0 100% !important;
border-right: none;
border-top: 1px solid var(--border-color);
}
.anonymize-preview-col {
height: auto !important;
max-height: none;
}
.anonymize-section-title {
font-size: 0.8rem;
margin: 12px 0 8px 0;
}
.anonymize-submit-bar {
position: sticky;
bottom: 0;
background: var(--sidebar-bg-color);
padding: 10px 0;
margin: 0 -12px;
padding-left: 12px;
padding-right: 12px;
border-top: 1px solid var(--border-color);
z-index: 10;
}
.anonymize-submit-bar .btn {
font-size: 1rem;
padding: 12px 20px;
}
/* Compact checkboxes on mobile */
.anonymize-page .form-check {
padding-top: 6px;
padding-bottom: 6px;
min-height: 36px;
}
.anonymize-page .form-check-label {
font-size: 0.95rem;
}
.anonymize-page .card-body {
padding: 12px;
}
/* PR preview on mobile */
.pr-title {
font-size: 1.15rem;
}
.pr-diff pre {
font-size: 0.75rem;
}
.pr-comment .mb-1 h5 {
font-size: 1rem;
}
.nav-tabs .nav-link {
padding: 8px 12px;
font-size: 0.9rem;
}
}
/* Tablet tweaks */
@media (min-width: 768px) and (max-width: 991px) {
.container.page {
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.leftCol {
flex: 0 0 250px;
width: 250px;
}
}
/* ===== Explorer page (paper) ===== */
.explorer-page {
display: flex;
height: 100%;
width: 100%;
background: var(--canvas-bg-color);
position: relative;
}
.explorer-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--canvas-bg-color);
}
.explorer-content {
flex: 1 1 auto;
min-height: 0;
width: 100%;
overflow: auto;
}
.leftCol-head,
.leftCol-close {
display: none;
}
.leftCol-body {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
.leftCol-foot {
padding: 8px 12px;
border-top: 1px solid var(--border-color);
background: var(--paper-bg-alt);
}
.leftCol-foot .last-update {
display: block;
border-top: none;
padding: 0;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
color: var(--ink-muted);
}
.leftCol-foot { padding: 10px 14px; }
.leftCol-backdrop { display: none; }
.paper-inline-warning {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 8px;
padding: 10px 12px;
background: rgba(138, 107, 30, 0.08);
border: 1px solid rgba(138, 107, 30, 0.35);
border-radius: 8px;
color: var(--color);
font-size: 12.5px;
line-height: 1.4;
}
.paper-inline-warning i { color: var(--status-progress); margin-top: 2px; flex-shrink: 0; }
.dark-mode .paper-inline-warning i { color: var(--status-progress); }
@media (min-width: 768px) {
.leftCol-body { padding: 8px 4px; }
}
/* Mobile / tablet toggle */
.sidebar-toggle {
display: none;
align-items: center;
gap: 8px;
position: fixed;
bottom: 18px;
right: 18px;
z-index: 1100;
padding: 10px 14px;
background: var(--color);
color: var(--canvas-bg-color);
border: 1px solid var(--color);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
cursor: pointer;
outline: none;
}
.sidebar-toggle:hover { background: var(--primary-hover-bg); }
.sidebar-toggle:focus { outline: none; }
.sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 991px) {
.sidebar-toggle { display: inline-flex; }
/* Sidebar becomes a slide-in drawer */
.leftCol {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(86vw, 340px);
max-width: 340px;
z-index: 1200;
border: none;
border-right: 1px solid var(--border-color);
transform: translateX(0);
transition: transform 0.22s ease;
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
background: var(--sidebar-bg-color);
}
.leftCol.collapsed {
transform: translateX(-105%);
box-shadow: none;
pointer-events: none;
}
.leftCol-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--border-color);
background: var(--paper-bg-alt);
}
.leftCol-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.leftCol-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--ink-muted);
cursor: pointer;
}
.leftCol-close:hover { color: var(--color); border-color: var(--color); }
.leftCol-foot { display: block; }
.leftCol-body { padding: 4px 0; }
.leftCol-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.32);
z-index: 1150;
backdrop-filter: blur(2px);
}
.dark-mode .leftCol-backdrop { background: rgba(0,0,0,0.5); }
}
/* ===== Admin Interface (Paper style) ===== */
.admin-nav {
display: flex;
gap: 4px;
padding: 4px;
margin: 8px 0 20px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
flex-wrap: wrap;
}
.admin-nav a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 7px;
color: var(--ink-muted);
text-decoration: none;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background-color 0.15s, color 0.15s;
white-space: nowrap;
}
.admin-nav a:hover {
background: var(--paper-bg-alt);
color: var(--color);
}
.admin-nav a.active {
background: var(--color);
color: var(--paper-card);
}
.admin-nav a i {
font-size: 12px;
width: 14px;
text-align: center;
}
@media (max-width: 767px) {
.admin-nav {
flex-direction: column;
}
.admin-nav a {
justify-content: flex-start;
}
}
/* Admin stat cards — compact, denser packing for many KPIs */
.admin-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 16px;
}
.admin-stat-card {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 12px;
}
.admin-stat-card .stat-value {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 400;
line-height: 1.1;
color: var(--color);
}
.admin-stat-card .stat-label {
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
/* Admin toolbar — kept as alias to dashboard filter row */
.admin-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 16px 0 12px;
}
.admin-toolbar .form-control {
max-width: 320px;
}
@media (max-width: 767px) {
.admin-toolbar .form-control {
max-width: 100%;
width: 100%;
}
}
.pagination-compact {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-muted);
}
.pagination-compact input {
width: 60px;
text-align: center;
flex-shrink: 0;
}
.pagination-compact .btn {
padding: 4px 10px;
min-height: 34px;
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
flex-shrink: 0;
}
.pagination-compact > span {
white-space: nowrap;
}
/* Admin list items */
.admin-list-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.admin-list-item:last-child {
border-bottom: none;
}
.admin-list-item .item-main {
flex: 1;
min-width: 0;
}
.admin-list-item .item-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
word-break: break-word;
}
.admin-list-item .item-meta {
font-size: 0.85rem;
opacity: 0.8;
}
.admin-list-item .item-meta span {
margin-right: 12px;
display: inline-block;
margin-bottom: 2px;
}
.admin-list-item .item-actions {
flex-shrink: 0;
}
@media (max-width: 767px) {
.admin-list-item {
flex-direction: column;
gap: 8px;
}
.admin-list-item .item-actions {
align-self: flex-start;
}
}
/* Status badge improvements */
.status-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
vertical-align: middle;
}
.status-badge {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.02em;
border: 1px solid transparent;
text-transform: none;
font-size: 11.5px;
padding: 1px 9px 2px;
border-radius: 999px;
}
.status-badge.status-ready {
background: #E8F3EC;
color: #2F7A44;
border-color: #CFE6D6;
}
.status-badge.status-error {
background: #FBE7E7;
color: #B42318;
border-color: #F3C7C7;
}
.status-badge.status-preparing,
.status-badge.status-download {
background: #E4F0EE;
color: #1F6A64;
border-color: #D4D8FA;
}
.status-badge.status-expired,
.status-badge.status-removed,
.status-badge.status-removing,
.status-badge.status-expiring {
background: var(--paper-bg-alt);
color: var(--ink-muted);
border-color: var(--border-color);
}
.status-badge.status-active {
background: #E8F3EC;
color: #2F7A44;
border-color: #CFE6D6;
}
/* Admin queue job cards */
.queue-job-card {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 10px;
}
.queue-job-card .job-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 8px;
}
.queue-job-card .job-id {
font-family: var(--font-mono);
font-size: 0.95rem;
color: var(--color);
word-break: break-all;
display: flex;
align-items: center;
gap: 10px;
}
.queue-job-card .job-timestamps {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-muted);
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.queue-job-card .job-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.queue-job-card .job-actions .btn {
font-size: 12px;
padding: 4px 12px;
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
}
/* Admin section headers */
.admin-section-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.admin-section-header h2 {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.admin-section-header h2 i {
margin-right: 6px;
color: var(--ink-muted);
}
.admin-section-header .section-count {
background: var(--paper-bg-alt);
color: var(--ink-muted);
border: 1px solid var(--border-color);
font-family: var(--font-mono);
font-size: 11px;
padding: 1px 10px;
border-radius: 999px;
}
/* User detail card */
.user-detail-card {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 22px;
margin-bottom: 24px;
}
.user-detail-card .user-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap;
}
.user-detail-card .user-header img {
border-radius: 50%;
}
.user-detail-card .user-header h2 {
margin: 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.6rem;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.user-detail-grid {
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px 20px;
font-size: 0.92rem;
}
.user-detail-grid .detail-label {
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
white-space: nowrap;
padding-top: 2px;
}
.user-detail-grid .detail-value {
word-break: break-all;
color: var(--color);
}
@media (max-width: 767px) {
.user-detail-grid {
grid-template-columns: 1fr;
}
.user-detail-grid .detail-label {
margin-top: 8px;
border-top: 1px solid var(--border-color);
padding-top: 8px;
}
.user-detail-grid .detail-label:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
}
}
/* ===== Paper empty/error states ===== */
.paper-empty {
min-height: calc(100vh - 60px);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
}
.paper-empty-inner {
max-width: 560px;
text-align: left;
}
.paper-empty-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.4rem, 6vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 18px 0 20px;
color: var(--color);
}
.paper-empty-title em {
color: var(--accent);
font-style: italic;
}
.paper-empty-lede {
font-size: 17px;
line-height: 1.55;
color: var(--ink-soft);
text-wrap: pretty;
}
.paper-empty-cta {
display: flex;
gap: 10px;
margin-top: 28px;
flex-wrap: wrap;
}
/* ===== Paper page chrome ===== */
.paper-page {
max-width: 1100px;
margin: 0 auto;
padding: 32px 32px 80px;
}
@media (max-width: 991px) {
.paper-page,
.paper-page.container,
.paper-page.container-fluid { padding: 20px 18px 60px !important; }
.paper-page .row { margin-left: 0; margin-right: 0; }
.paper-page .row > [class*='col'],
.paper-page .row > .w-100 { padding-left: 0; padding-right: 0; }
/* Navbar drawer (mobile + tablet — navbar-expand-lg collapses <992px) */
.navbar.navbar-expand-lg {
padding: 10px 18px !important;
}
.navbar .navbar-collapse {
margin: 10px -18px 0;
padding: 12px 18px 16px;
border-top: 1px solid var(--border-color);
background: var(--header-bg-color);
}
.navbar .navbar-nav {
align-items: stretch !important;
gap: 2px;
}
.navbar .navbar-nav .nav-item,
.navbar .navbar-nav .nav-link {
width: 100%;
}
.navbar .nav-link {
display: flex !important;
align-items: center;
justify-content: flex-start;
margin: 0 !important;
padding: 12px 4px !important;
border-bottom: 1px solid var(--border-color) !important;
border-radius: 0;
font-size: 14px;
line-height: 1.2;
gap: 0;
min-height: 44px;
box-sizing: border-box;
}
.navbar .nav-link:not(.btn-signin):not(.user-chip) {
color: var(--color) !important;
}
.navbar .nav-link .fas,
.navbar .nav-link .fab,
.navbar .nav-link .fa,
.navbar .nav-link i {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 28px;
flex-shrink: 0;
font-size: 16px;
line-height: 1;
margin: 0 10px 0 0 !important;
}
.navbar .navbar-nav .nav-item:last-child .nav-link,
.navbar .navbar-nav > .nav-link:last-child { border-bottom-color: transparent !important; }
.navbar .nav-link.active {
color: var(--color) !important;
border-bottom-color: var(--border-color) !important;
}
/* Items without leading icon: reserve the same 28px icon column so text aligns */
.navbar .nav-item > .nav-link:not(.btn-signin):not(.user-chip)::before {
content: '';
display: inline-block;
width: 28px;
margin-right: 10px;
flex-shrink: 0;
}
.navbar .nav-link:has(> i)::before,
.navbar .nav-link.nav-icon::before { display: none !important; }
.navbar .nav-link.nav-icon {
width: 100% !important;
height: auto !important;
justify-content: flex-start !important;
padding: 12px 4px !important;
}
.navbar .nav-link.nav-icon::after {
content: attr(title);
font-family: var(--font-sans);
font-size: 14px;
color: var(--color);
}
.navbar .btn-signin {
display: inline-flex !important;
width: auto !important;
align-self: flex-start;
justify-content: center;
height: 40px;
padding: 0 18px !important;
margin: 14px 0 0 !important;
border-radius: 8px;
border-bottom: none !important;
}
.navbar .btn-signin i { margin: 0 8px 0 0 !important; width: auto !important; }
/* User chip — integrate into drawer as a normal row */
.navbar .user-chip-wrap { width: 100%; }
.navbar .user-chip {
display: flex !important;
width: 100%;
margin: 0 !important;
padding: 10px 4px !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--border-color) !important;
border-radius: 0 !important;
justify-content: flex-start;
gap: 0;
min-height: 44px;
}
.navbar .user-chip::before { display: none !important; }
.navbar .user-chip img {
width: 28px !important;
height: 28px !important;
margin-right: 10px !important;
flex-shrink: 0;
}
.navbar .user-chip .user-chip-name {
font-size: 14px;
font-weight: 500;
color: var(--color) !important;
}
.navbar .user-chip.dropdown-toggle::after {
margin-left: auto;
color: var(--ink-muted);
}
/* Dropdown menu items render inline, not floating */
.navbar .user-chip-wrap .dropdown-menu {
position: static !important;
float: none;
width: 100%;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
transform: none !important;
}
.navbar .user-chip-wrap .dropdown-menu .dropdown-item {
padding: 10px 4px 10px 42px !important;
font-size: 13.5px;
color: var(--ink-muted) !important;
background: transparent !important;
border-bottom: 1px solid var(--border-color);
text-align: left !important;
}
.navbar .user-chip-wrap .dropdown-menu .dropdown-item:last-child { border-bottom: none; }
.navbar .user-chip-wrap .dropdown-divider { display: none; }
.navbar-brand { border-right: none !important; padding-right: 0 !important; margin-right: 0 !important; }
.dark-mode .navbar .navbar-collapse { background: var(--header-bg-color); border-top-color: var(--border-color); }
.dark-mode .navbar .nav-link { border-bottom-color: var(--border-color) !important; }
.dark-mode .navbar-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E") !important;
}
}
/* Status pill — page header indicator */
.status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Paper progress bar */
/* The track is a pseudo-element so the label below it lives in normal flow
instead of overflowing an 8px-high box into the next section. */
.paper-progress {
position: relative;
height: auto;
background: none;
margin: 18px 0 8px;
}
.paper-progress::before {
content: "";
display: block;
height: 8px;
background: var(--paper-bg-alt);
border-radius: 999px;
}
.paper-progress .paper-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 8px;
background: var(--color);
border-radius: 999px;
transition: width 0.4s ease;
min-width: 4px;
}
.paper-progress .paper-progress-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
}
.paper-progress .paper-progress-pct { color: var(--color); }
.paper-progress.paper-progress-ready .paper-progress-bar { background: var(--color); }
/* Status error card */
.paper-error-card {
margin-top: 18px;
padding: 20px 22px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-left: 3px solid var(--status-error);
border-radius: 10px;
color: var(--color);
}
.dark-mode .paper-error-card { border-left-color: var(--status-error); }
.paper-ratelimit-card {
margin-top: 18px;
padding: 20px 22px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-left: 3px solid var(--status-progress);
border-radius: 10px;
color: var(--color);
}
.dark-mode .paper-ratelimit-card { border-left-color: var(--status-progress); }
.paper-ratelimit-head {
display: flex;
align-items: flex-start;
gap: 14px;
}
.paper-ratelimit-head > i {
font-size: 18px;
color: var(--status-progress);
margin-top: 4px;
flex-shrink: 0;
}
.dark-mode .paper-ratelimit-head > i { color: var(--status-progress); }
.paper-ratelimit-card strong { color: var(--color); }
.paper-ratelimit-card { text-align: left; border-left-color: var(--status-progress); }
.dark-mode .paper-ratelimit-card { border-left-color: var(--status-progress); }
.paper-ratelimit-head > .ui-icon { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--status-progress); }
.paper-ratelimit-card .paper-error-title { font-family: var(--font-sans); font-size: 17px; font-weight: 600; }
.paper-ratelimit-card .paper-error-msg { font-family: var(--font-sans); white-space: normal; margin-left: 32px; }
.paper-ratelimit-card .paper-error-eyebrow { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.status-pill-ratelimit { border-color: var(--status-progress); color: var(--status-progress); }
.dark-mode .status-pill-ratelimit { border-color: var(--status-progress); color: var(--status-progress); }
.status-ratelimit { background: var(--status-progress); }
.dark-mode .status-ratelimit { background: var(--status-progress); }
.paper-error-head {
display: flex;
align-items: flex-start;
gap: 14px;
}
.paper-error-head > i {
font-size: 18px;
color: var(--status-error);
margin-top: 4px;
flex-shrink: 0;
}
.dark-mode .paper-error-head > i { color: var(--status-error); }
.paper-error-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
}
.paper-error-title {
font-family: var(--font-serif);
font-size: 1.4rem;
line-height: 1.2;
margin-top: 2px;
color: var(--color);
}
.paper-error-msg {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
font-family: var(--font-mono);
word-break: break-word;
white-space: pre-wrap;
}
.paper-error-hints {
margin: 14px 0 0;
padding-left: 18px;
color: var(--ink-soft);
font-size: 13.5px;
line-height: 1.6;
}
.paper-error-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
/* Detail grid (status page, generic) */
.paper-detail-grid {
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px 20px;
margin-top: 18px;
font-size: 0.92rem;
}
.paper-detail-grid .detail-label {
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
white-space: nowrap;
padding-top: 2px;
}
.paper-detail-grid .detail-value { word-break: break-all; color: var(--color); }
.paper-detail-grid .detail-value a { color: var(--color); border-bottom: 1px solid var(--border-color); }
.paper-detail-grid .detail-value a:hover { border-bottom-color: var(--color); }
@media (max-width: 700px) {
.paper-detail-grid { grid-template-columns: 1fr; gap: 4px 0; }
.paper-detail-grid .detail-label { padding-top: 8px; }
}
/* Support cards (Contribute / Feedback / Sponsor) */
.paper-support-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin: 18px 0 28px;
}
.paper-support-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
color: var(--color);
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.paper-support-card:hover {
border-color: var(--color);
text-decoration: none;
color: var(--color);
}
.paper-support-card .paper-support-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
}
.paper-support-card p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
}
.paper-support-card .paper-support-cta {
margin-top: auto;
font-size: 13px;
font-weight: 500;
color: var(--color);
display: inline-flex;
align-items: center;
gap: 6px;
}
.paper-support-card:hover .paper-support-cta i { transform: translateX(2px); }
.paper-support-card .paper-support-cta i { transition: transform 0.15s ease; }
/* Ko-fi embed wrapper */
.paper-kofi-wrap {
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
background: var(--paper-card);
}
.paper-kofi-wrap iframe {
border: 0;
width: 100%;
height: 650px;
display: block;
}
.dark-mode .paper-kofi-wrap iframe {
filter: invert(0.88) hue-rotate(180deg) sepia(0.15) saturate(1.2) brightness(1.1) contrast(0.85);
}
@media (max-width: 700px) {
.paper-kofi-wrap iframe { height: 720px; }
}
/* ===== Pull request page (paper) ===== */
.pr-page {
min-height: 100%;
background: var(--canvas-bg-color);
}
.pr-page-inner { padding-top: 24px; padding-bottom: 60px; }
.pr-header {
margin: 6px 0 18px;
}
.pr-title {
margin: 4px 0 10px;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.15;
word-break: break-word;
}
.pr-header-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-muted);
}
.pr-header-meta .pr-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pr-header-meta .pr-meta-item i { color: var(--ink-muted); }
.pr-body-card {
margin: 18px 0 24px;
padding: 20px 22px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
}
.pr-body-card .paper-section-eyebrow { margin-bottom: 12px; }
/* Paper-style tabs */
.paper-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid var(--border-color);
margin: 18px 0 0;
}
.paper-tabs .paper-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
color: var(--ink-muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
margin-bottom: -1px;
}
.paper-tabs .paper-tab:hover { color: var(--color); }
.paper-tabs .paper-tab.active {
color: var(--color);
border-bottom-color: var(--color);
}
.paper-tabs .paper-tab i { color: inherit; opacity: 0.85; }
.paper-tabs .paper-tab:focus,
.paper-tabs .paper-tab:focus-visible,
.paper-tabs .paper-tab:active {
outline: none;
box-shadow: none;
}
.paper-tabs .paper-tab:focus-visible {
color: var(--color);
background: var(--hover-bg-color);
border-radius: 6px 6px 0 0;
}
/* ===== Diff (file-grouped, gutter line numbers) ===== */
.pr-diff {
margin: 16px 0 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.diff-file-block {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
}
.diff-file-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--paper-bg-alt);
border-bottom: 1px solid var(--border-color);
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--color);
}
.diff-file-icon { color: var(--ink-muted); flex-shrink: 0; }
.diff-file-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
.diff-file-status {
flex-shrink: 0;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
border: 1px solid var(--border-color);
color: var(--ink-muted);
background: var(--paper-card);
}
.diff-file-status-added { color: #2F6B3E; border-color: rgba(47,107,62,0.35); background: rgba(47,107,62,0.08); }
.diff-file-status-deleted { color: var(--status-error); border-color: rgba(161,58,46,0.35); background: rgba(161,58,46,0.08); }
.diff-file-status-renamed { color: var(--status-progress); border-color: rgba(138,107,30,0.35); background: rgba(138,107,30,0.08); }
.dark-mode .diff-file-status-added { color: #A7E2A7; border-color: rgba(167,226,167,0.35); background: rgba(167,226,167,0.08); }
.dark-mode .diff-file-status-deleted { color: var(--status-error); border-color: rgba(255,139,123,0.35); background: rgba(255,139,123,0.08); }
.dark-mode .diff-file-status-renamed { color: var(--status-progress); border-color: rgba(255,211,122,0.35); background: rgba(255,211,122,0.08); }
.diff-file-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.55;
table-layout: fixed;
}
.diff-file-table tr.diff-row { vertical-align: top; }
.diff-file-table .diff-gutter {
width: 48px;
padding: 0 10px;
text-align: right;
color: var(--ink-muted);
background: var(--paper-bg-alt);
border-right: 1px solid var(--border-color);
user-select: none;
font-variant-numeric: tabular-nums;
vertical-align: top;
white-space: nowrap;
}
.diff-file-table .diff-gutter-new { border-right: 1px solid var(--border-color); }
.diff-file-table .diff-sign {
width: 18px;
padding: 0 6px;
text-align: center;
color: var(--ink-muted);
background: var(--paper-bg-alt);
user-select: none;
vertical-align: top;
}
.diff-file-table .diff-code {
padding: 1px 12px;
white-space: pre-wrap;
word-break: break-word;
color: var(--color);
}
/* Hunk header row */
.diff-row-hunk td {
background: var(--paper-bg-alt) !important;
color: var(--ink-muted);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
font-size: 12px;
letter-spacing: 0.02em;
padding-top: 6px;
padding-bottom: 6px;
}
.diff-row-hunk .diff-code { color: var(--ink-muted); }
/* Add / remove rows */
.diff-row-add .diff-code {
background: rgba(47,107,62,0.10);
color: #1F4A2A;
}
.diff-row-add .diff-sign,
.diff-row-add .diff-gutter {
background: rgba(47,107,62,0.06);
color: #2F6B3E;
}
.diff-row-remove .diff-code {
background: rgba(161,58,46,0.10);
color: #6E1F1A;
}
.diff-row-remove .diff-sign,
.diff-row-remove .diff-gutter {
background: rgba(161,58,46,0.06);
color: var(--status-error);
}
.dark-mode .diff-row-add .diff-code { background: rgba(167,226,167,0.10); color: #C9F0C9; }
.dark-mode .diff-row-add .diff-sign,
.dark-mode .diff-row-add .diff-gutter { background: rgba(167,226,167,0.06); color: #A7E2A7; }
.dark-mode .diff-row-remove .diff-code { background: rgba(255,139,123,0.10); color: #FFC9C0; }
.dark-mode .diff-row-remove .diff-sign,
.dark-mode .diff-row-remove .diff-gutter { background: rgba(255,139,123,0.06); color: var(--status-error); }
@media (max-width: 700px) {
.diff-file-table { font-size: 11.5px; }
.diff-file-table .diff-gutter { width: 36px; padding: 0 6px; }
.diff-file-table .diff-sign { width: 14px; padding: 0 4px; }
.diff-file-table .diff-code { padding: 1px 8px; }
}
/* Comments */
.pr-comments {
list-style: none;
margin: 16px 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pr-comment {
padding: 16px 18px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
}
.pr-comment-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.pr-comment-author {
font-weight: 600;
color: var(--color);
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.pr-comment-author i { color: var(--ink-muted); font-size: 12px; }
.pr-comment-date {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-muted);
letter-spacing: 0.02em;
}
.pr-comment-body { color: var(--color); font-size: 14px; line-height: 1.6; }
.pr-comment-body :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
.pr-page-inner { padding-top: 14px; padding-bottom: 40px; }
.pr-body-card { padding: 14px 14px; border-radius: 8px; }
.pr-comment { padding: 12px 14px; }
.paper-tabs .paper-tab { padding: 10px 12px; font-size: 13px; }
.pr-diff pre { font-size: 11.5px; padding: 12px; }
}
/* Toasts — paper style, dark-mode aware */
.toast {
background-color: var(--paper-card) !important;
color: var(--color) !important;
border: 1px solid var(--border-color) !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
backdrop-filter: none;
min-width: 280px;
max-width: calc(100vw - 24px);
}
.toast .toast-header {
background: transparent !important;
color: var(--color) !important;
border-bottom: 1px solid var(--border-color) !important;
font-family: var(--font-sans);
padding: 10px 12px;
}
.toast .toast-header strong {
font-weight: 600;
color: var(--color);
letter-spacing: 0.01em;
}
.toast .toast-header .close {
color: var(--ink-muted) !important;
text-shadow: none;
opacity: 0.9;
font-size: 1.2rem;
}
.toast .toast-header .close:hover { color: var(--color) !important; opacity: 1; }
.toast .toast-body {
color: var(--color) !important;
padding: 12px;
font-size: 14px;
line-height: 1.45;
}
.dark-mode .toast { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.paper-crumbs {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-muted);
letter-spacing: 0;
}
.paper-crumbs a, .paper-crumbs .here {
color: var(--color);
text-decoration: none;
}
.paper-page-title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.035em;
margin: 8px 0 6px;
color: var(--color);
}
.paper-page-title em { color: inherit; font-style: normal; }
.paper-page-lede {
color: var(--ink-soft);
font-size: 16px;
max-width: 640px;
line-height: 1.55;
}
.paper-meta-rule {
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
align-items: center;
margin: 22px 0 18px;
padding: 12px 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-muted);
letter-spacing: 0.02em;
}
.paper-meta-rule b { color: var(--color); font-weight: 500; }
.paper-card {
background: var(--paper-card, #fff);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 20px 22px;
}
.dark-mode .paper-card { background: var(--admin-stat-bg); }
.paper-section-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
font-weight: 500;
margin-bottom: 10px;
display: block;
}
.paper-section-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.paper-kbd {
display: inline-block;
font-family: var(--font-mono);
font-size: 10.5px;
padding: 1px 6px;
border: 1px solid var(--border-color);
border-bottom-width: 2px;
border-radius: 3px;
background: var(--paper-card, #fff);
color: var(--color);
}
/* Pill for status / meta */
.paper-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10.5px;
padding: 2px 8px;
border: 1px solid var(--border-color);
border-radius: 999px;
color: var(--ink-soft);
background: var(--paper-card, #fff);
letter-spacing: 0.04em;
}
.paper-pill.accent { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.paper-pill.good { border-color: #2F6B3E; color: #2F6B3E; }
.paper-pill.warn { border-color: var(--status-progress); color: var(--status-progress); }
.paper-pill.bad { border-color: var(--status-error); color: var(--status-error); }
/* Editorial list row */
.paper-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: start;
padding: 18px 0;
border-bottom: 1px solid var(--border-color);
}
.paper-row:first-child { border-top: 1px solid var(--border-color); }
.paper-row .row-title {
font-family: var(--font-serif);
font-size: 20px;
letter-spacing: -0.01em;
line-height: 1.2;
}
.paper-row .row-title a { color: var(--color); }
.paper-row .row-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
letter-spacing: 0.03em;
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.paper-row .row-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Paper form building blocks */
.paper-form-step {
display: grid;
grid-template-columns: 48px 1fr;
gap: 20px;
padding: 22px 0;
border-bottom: 1px solid var(--border-color);
}
.paper-form-step:first-child { border-top: 1px solid var(--border-color); }
.paper-form-step .step-num {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-muted);
padding-top: 4px;
letter-spacing: 0.02em;
}
.paper-form-step .step-title {
font-family: var(--font-serif);
font-size: 22px;
letter-spacing: -0.01em;
line-height: 1.2;
margin-bottom: 4px;
}
.paper-form-step .step-sub {
color: var(--ink-soft);
font-size: 13.5px;
margin-bottom: 14px;
text-wrap: pretty;
}
.paper-field-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color);
margin-bottom: 6px;
display: block;
}
.paper-switch-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
gap: 16px;
}
.paper-switch-row + .paper-switch-row {
border-top: 1px dashed var(--border-soft);
}
.paper-switch-row .sw-label { font-weight: 500; }
.paper-switch-row .sw-sub {
display: block;
font-size: 12.5px;
color: var(--ink-muted);
margin-top: 2px;
}
/* Paper-style form controls reuse Bootstrap classes */
.paper-page .form-control,
.paper-page .custom-select {
border-radius: 6px;
border-color: var(--border-color);
font-size: 14px;
padding: 8px 12px;
height: auto;
background: var(--input-bg);
color: var(--input-color);
}
.paper-page .form-control:focus,
.paper-page .custom-select:focus {
color: var(--input-color);
background: var(--input-bg);
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus,
select:focus {
color: var(--input-color) !important;
background-color: var(--input-bg) !important;
}
.form-control::selection,
input::selection,
textarea::selection {
background: var(--accent-soft);
color: var(--input-color);
}
.dark-mode .form-control::selection,
.dark-mode input::selection,
.dark-mode textarea::selection {
background: rgba(124, 199, 190, 0.30);
color: var(--input-color);
}
/* Primary/accent button variants */
.btn.btn-ink {
background: var(--color);
color: var(--canvas-bg-color);
border: 1px solid var(--color);
font-weight: 500;
border-radius: 6px;
padding: 8px 14px;
}
.btn.btn-ink:hover {
background: var(--primary-hover-bg);
color: var(--canvas-bg-color);
border-color: var(--primary-hover-bg);
}
.btn.btn-accent {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
font-weight: 500;
border-radius: 6px;
}
.btn.btn-accent:hover { background: #17544F; border-color: #17544F; color: #fff; }
/* Paper-style filter row buttons (Sort / Status / type filter) */
.paper-page .dashboard-filter-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin: 18px 0 0;
flex-wrap: wrap;
}
.paper-page .dashboard-filter-row .form-control {
height: 38px;
background: var(--paper-card);
}
.paper-page .dashboard-filter-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.paper-page .dashboard-filter-row .dropdown-toggle,
.paper-page .dashboard-filter-row .btn-group .btn {
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
height: 38px;
padding: 0 14px;
font-size: 14px;
font-weight: 500;
border-radius: var(--radius-control, 6px);
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
}
/* "Sort · Name ↓" style toggles: the label is muted, the value is ink so the
current state reads at a glance. */
.paper-page .dashboard-filter-row .dropdown-toggle .filter-btn-label {
color: var(--ink-muted);
font-weight: 500;
}
.paper-page .dashboard-filter-row .dropdown-toggle .filter-btn-label::after {
content: "·";
margin-left: 6px;
color: var(--ink-faint);
}
.paper-page .dashboard-filter-row .dropdown-toggle .filter-btn-value {
font-weight: 500;
}
.paper-page .dashboard-filter-row .dropdown-toggle .fas {
font-size: 11px;
color: var(--ink-muted);
}
.paper-page .dashboard-filter-row .dropdown-toggle:hover,
.paper-page .dashboard-filter-row .btn-group .btn:hover {
background: var(--hover-bg-color);
border-color: var(--border-color);
color: var(--color);
}
.paper-page .dashboard-filter-row .btn-group {
gap: 0;
}
.paper-page .dashboard-filter-row .btn-group .btn {
border-radius: 0;
border-right-width: 0;
}
.paper-page .dashboard-filter-row .btn-group .btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.paper-page .dashboard-filter-row .btn-group .btn:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-right-width: 1px; }
.paper-page .dashboard-filter-row .btn-group .btn.btn-primary {
background: var(--color);
color: var(--canvas-bg-color);
border-color: var(--color);
}
.paper-page .dashboard-filter-row .search-wrap {
flex: 1 1 280px;
min-width: 220px;
}
/* Quota row refinements */
.paper-page .quota-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin: 24px 0 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}
.paper-page .quota-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
opacity: 1;
}
.paper-page .quota-value {
font-family: var(--font-mono);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--color);
}
.paper-page .quota-value .quota-unlimited-tag {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-muted);
margin-left: 4px;
}
/* Quota bars: ink by default, colour only when a limit is nearly reached.
Unlimited quotas render an empty track (no fill), never a full green bar. */
.paper-page .quota-track {
height: 6px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-radius: 999px;
overflow: hidden;
width: 100%;
min-width: 0;
}
.paper-page .quota-track .quota-fill {
height: 100%;
min-width: 2px;
border-radius: 999px;
background: var(--color);
transition: width 0.3s ease;
}
.paper-page .quota-track.quota-warn .quota-fill { background: var(--status-progress); }
.paper-page .quota-track.quota-danger .quota-fill { background: var(--status-error); }
.paper-page .quota-track.quota-unlimited {
background: repeating-linear-gradient(
-45deg,
var(--paper-bg-alt) 0 4px,
var(--border-soft, var(--border-color)) 4px 6px
);
}
/* Dashboard repo/PR list refinements */
.paper-page .repo-list { margin-top: 8px; }
.paper-page .repo-list-item {
padding: 20px 0;
gap: 16px;
border-bottom: 1px solid var(--border-soft, var(--border-color));
}
.paper-page .repo-list-item:first-child { border-top: none; }
.paper-page .repo-list-item-header { gap: 10px; margin-bottom: 6px; }
.paper-page .repo-name {
font-family: var(--font-mono);
font-size: 15px;
color: var(--color);
}
.paper-page .repo-source {
font-size: 13px;
color: var(--ink-soft);
opacity: 1;
gap: 10px;
}
.paper-page .repo-source a { color: var(--ink-soft); border-bottom: 1px dotted var(--border-color); }
.paper-page .repo-source a:hover { color: var(--color); }
.paper-page .repo-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-muted);
opacity: 1;
gap: 16px;
margin-top: 10px;
}
.paper-page .type-badge {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 8px;
letter-spacing: 0.1em;
}
.paper-page .repo-list-item-actions .dropdown-toggle {
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
border-radius: 6px;
font-size: 13px;
padding: 6px 12px;
height: auto;
}
/* Paper settings (editorial 2-col) */
.paper-settings { max-width: 1180px; margin: 0 auto; padding: 48px 32px 80px; }
.paper-settings .paper-page-title { max-width: 14em; }
.paper-settings-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 60px;
margin-top: 32px;
border-top: 1px solid var(--border-color);
padding-top: 28px;
}
.paper-settings-toc { position: sticky; top: 32px; align-self: start; }
.paper-settings-toc-head {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 12px;
}
.paper-settings-toc nav { display: flex; flex-direction: column; gap: 2px; }
.paper-settings-toc nav a {
padding: 8px 0 8px 14px;
border-left: 2px solid transparent;
color: var(--ink-soft);
font-size: 14px;
text-decoration: none;
}
.paper-settings-toc nav a:hover,
.paper-settings-toc nav a.active {
color: var(--color);
border-left-color: var(--color);
}
.paper-settings-main { min-width: 0; max-width: 720px; }
.paper-settings-section { padding: 28px 0; border-bottom: 1px solid var(--border-soft, var(--border-color)); }
.paper-settings-section:first-child { padding-top: 0; }
.paper-settings-section:last-of-type { border-bottom: none; }
.paper-settings-section .form-group { margin-bottom: 18px; }
.paper-settings-section .form-check { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--border-soft, var(--border-color)); }
.paper-settings-section .form-check:last-child { border-bottom: none; }
/* Checkbox labels are UI text, so they use the sans face like the rest of
the forms; the serif stays reserved for display headings. */
.paper-settings-section .form-check-label { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color); cursor: pointer; }
.paper-settings-section .form-check-input { cursor: pointer; width: 16px; height: 16px; margin-top: 3px; margin-left: -28px; accent-color: var(--color); }
.paper-settings-section .form-text { color: var(--ink-soft); font-size: 13px; margin-top: 4px; max-width: 48em; }
.paper-settings-section .paper-section-copy { margin: -4px 0 14px; }
.paper-settings-footer { padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.paper-settings-footer .btn-ink { align-self: flex-start; }
.paper-settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.paper-settings-hint { font-size: 13px; color: var(--ink-muted); }
/* Inline alerts in the paper palette (Bootstrap's .alert colours clash) */
.paper-inline-alert {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-control, 6px);
border: 1px solid var(--border-color);
background: var(--paper-bg-alt);
font-size: 13px;
color: var(--color);
}
.paper-inline-alert i { margin-top: 2px; color: var(--ink-muted); }
.paper-inline-alert-error { border-color: var(--status-error); background: var(--status-error-soft); }
.paper-inline-alert-error i { color: var(--status-error); }
/* Account card and danger zone on the settings page */
.paper-account-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius-surface, 10px);
background: var(--paper-card);
margin-bottom: 20px;
}
.paper-account-card img { flex-shrink: 0; }
.paper-account-identity { flex: 1 1 auto; min-width: 0; }
.paper-account-name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--color); }
.paper-account-meta { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.paper-danger-zone {
padding: 16px;
border: 1px solid var(--status-error);
border-radius: var(--radius-surface, 10px);
background: var(--status-error-soft);
}
.paper-danger-head { font-weight: 600; font-size: 14px; color: var(--status-error); margin-bottom: 6px; }
.paper-danger-copy { font-size: 13px; color: var(--ink-soft); max-width: 52em; margin-bottom: 12px; }
.paper-danger-zone .paper-inline-alert { margin-bottom: 12px; }
.btn.btn-outline-danger {
background: transparent;
color: var(--status-error);
border: 1px solid var(--status-error);
font-weight: 500;
border-radius: var(--radius-control, 6px);
padding: 8px 14px;
}
.btn.btn-outline-danger:hover { background: var(--status-error); color: #fff; border-color: var(--status-error); }
/* Navbar user menu: two-line items (label + hint) */
.navbar .user-menu { min-width: 260px; }
.navbar .user-menu .dropdown-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px !important; }
.navbar .user-menu .dropdown-item i { width: 16px; margin-top: 3px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.navbar .user-menu .dropdown-item span { display: flex; flex-direction: column; line-height: 1.3; }
.navbar .user-menu .dropdown-item small { font-size: 12px; color: var(--ink-muted); }
.navbar .user-menu .dropdown-header {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
padding: 8px 10px 6px;
}
.paper-field-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color);
margin-bottom: 6px;
display: block;
}
@media (max-width: 900px) {
.paper-settings-body { grid-template-columns: 1fr; gap: 24px; }
.paper-settings-toc { position: static; }
.paper-settings-toc nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.paper-settings-toc nav a { border-left: none; border-bottom: 2px solid transparent; padding: 4px 0; }
.paper-settings-toc nav a.active, .paper-settings-toc nav a:hover { border-bottom-color: var(--color); border-left: none; }
}
/* Paper table (reference grid) */
.paper-table {
display: block;
margin-top: 20px;
background: transparent;
border: none;
border-top: 1px solid var(--border-color);
border-radius: 0;
overflow: visible;
}
.paper-table .paper-table-head,
.paper-table .paper-table-row {
display: grid;
grid-template-columns: minmax(280px, 2.4fr) minmax(140px, 1fr) 140px 90px 140px 52px;
align-items: center;
gap: 18px;
padding: 12px 4px;
}
.paper-table.paper-table-conferences .paper-table-head,
.paper-table.paper-table-conferences .paper-table-row {
grid-template-columns: minmax(280px, 2.4fr) 140px 90px 220px 52px;
}
.paper-table.paper-table-repos .paper-table-head,
.paper-table.paper-table-repos .paper-table-row {
grid-template-columns: minmax(280px, 2.4fr) minmax(140px, 1fr) 90px 140px 52px;
}
.paper-table.paper-table-repos.has-bulk .paper-table-head,
.paper-table.paper-table-repos.has-bulk .paper-table-row {
grid-template-columns: 28px minmax(280px, 2.4fr) minmax(140px, 1fr) 90px 140px 52px;
gap: 12px;
}
.paper-table .admin-users-row {
grid-template-columns: 28px minmax(280px, 2.4fr) 90px 120px 100px 52px !important;
gap: 12px !important;
}
/* Dashboard: conference folded into the name cell, numbers right-aligned. */
.paper-table.paper-table-dashboard .paper-table-head,
.paper-table.paper-table-dashboard .paper-table-row {
grid-template-columns: minmax(320px, 3fr) 190px 90px 170px 52px;
gap: 20px;
/* Two-line rows land at ~60px, close to Carbon's "large" density. */
padding: 8px 4px;
}
.paper-table.paper-table-dashboard .cell-anon .anon-text { gap: 2px; }
.paper-table.paper-table-dashboard .cell-anon .repo-name { padding: 0; }
.paper-table .paper-table-head {
background: transparent;
border-bottom: 1px solid var(--border-color);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-muted);
padding-top: 8px;
padding-bottom: 8px;
}
.paper-table .paper-table-head .sortable {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 6px;
/* Sortable headers are real <button>s for keyboard users. */
background: none;
border: none;
padding: 2px 0;
margin: 0;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
border-radius: 4px;
}
.paper-table .paper-table-head .sortable:hover { color: var(--color); }
.paper-table .paper-table-head .sortable.active { color: var(--color); }
.paper-table .paper-table-head .sortable i { font-size: 10px; }
/* Quantitative columns are right-aligned so digits line up. */
.paper-table .paper-table-head .num,
.paper-table .paper-table-row .num { text-align: right; }
.paper-table .paper-table-head .num .sortable { flex-direction: row-reverse; }
.paper-table .paper-table-row {
border-top: 1px solid var(--border-soft, var(--border-color));
font-size: 14px;
transition: background-color 0.12s ease;
}
.paper-table .paper-table-row:hover {
background: var(--hover-bg-color);
}
/* Rows that open a view on click get a pointer so hover means something. */
.paper-table .paper-table-row.row-clickable { cursor: pointer; }
/* Dim inactive rows through their cells rather than the row itself. Applying
opacity to the row creates a stacking context that traps the actions
dropdown menu (z-index) beneath the rows rendered after it, making its
items unclickable. Leave the actions column at full opacity so it stays
interactive. */
.paper-table .paper-table-row.repo-inactive > *:not(.cell-actions) { opacity: 0.55; }
.paper-table .paper-table-row.repo-error {
background: var(--status-error-soft);
border-left: 2px solid var(--status-error);
padding-left: 6px;
}
.paper-table .paper-table-row.repo-error:hover { background: var(--status-error-soft-hover); }
.paper-table .cell-status .status-sub-error,
.cell-status .status-sub.status-sub-error {
color: var(--status-error);
}
.paper-table .cell-status .status-sub-warn { color: var(--status-progress); }
.paper-table .cell-anon {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.paper-table .cell-anon .type-badge {
flex-shrink: 0;
min-width: 52px;
justify-content: center;
}
.paper-table .cell-anon .anon-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.paper-table .cell-anon .anon-title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.paper-table .cell-anon .anon-title .type-badge { margin-left: 0; }
.paper-table .cell-anon .repo-name {
/* Identifiers stay mono; everything human-readable below is sans. */
font-family: var(--font-mono);
font-size: 14px;
color: var(--color);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
max-width: 100%;
padding: 2px 0;
}
.paper-table .cell-anon .repo-name-static { color: var(--ink-muted); font-style: italic; }
.paper-table .cell-anon .anon-sub {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.paper-table .cell-anon .anon-sub .anon-source {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The conference tag keeps a readable share of the line; the source
truncates first since it is repeated in the name and in the tooltip. */
.paper-table .cell-anon .anon-sub .conf-tag {
flex: 0 1 auto;
min-width: 72px;
max-width: 50%;
}
.paper-table .cell-anon .anon-sub a {
color: var(--ink-muted);
border-bottom: 1px dotted var(--border-color);
/* Taller hit area without changing the line box */
padding: 4px 0;
margin: -4px 0;
}
.paper-table .cell-anon .anon-sub a:hover { color: var(--color); }
.paper-table .cell-anon .anon-sub .commit-hash { font-family: var(--font-mono); font-size: 12px; }
/* Conference shown as a small tag inside the name cell. `.cell-conf` keeps
the clipping rules so a long conference string never bleeds. */
.paper-table .cell-conf {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paper-table .cell-conf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-table .cell-status { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; color: var(--color); min-width: 0; }
.paper-table .cell-status .status-line { display: inline-flex; align-items: center; gap: 8px; }
.paper-table .cell-status .status-sub {
flex-basis: 100%;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.3;
color: var(--ink-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paper-table .cell-views { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color); }
.paper-table .cell-expires { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); }
.paper-table .cell-expires .expires-never { color: var(--ink-muted); }
.paper-table .cell-expires .expires-past { color: var(--ink-muted); }
.paper-table .empty-dash { color: var(--ink-faint); }
.paper-table .cell-actions { display: flex; justify-content: flex-end; }
/* Status dots use the semantic tokens so they stay legible in both themes.
Old status-* class names are kept as aliases for other templates. */
.status-dot {
width: 8px;
height: 8px;
border-radius: 999px;
display: inline-block;
flex-shrink: 0;
background: var(--status-inactive);
}
.status-dot.status-ready { background: var(--status-ready); }
.status-dot.status-error { background: var(--status-error); }
.status-dot.status-progress,
.status-dot.status-preparing { background: var(--status-progress); }
.status-dot.status-expired,
.status-dot.status-removed { background: var(--status-inactive); }
/* ---- Dashboard extras ---------------------------------------------- */
/* Room for the fixed Ko-fi pill so it never covers the last row's actions. */
.dashboard-page { padding-bottom: 96px; }
.dashboard-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin-top: 12px;
font-size: 13px;
color: var(--ink-muted);
}
.dashboard-meta .dashboard-count { font-variant-numeric: tabular-nums; }
.btn-link-inline {
background: none;
border: none;
padding: 2px 4px;
margin: -2px 0;
font: inherit;
color: var(--link-color);
cursor: pointer;
border-radius: 4px;
}
.btn-link-inline:hover { color: var(--link-hover-color); text-decoration: underline; }
.btn.btn-outline-ink {
background: transparent;
color: var(--color);
border: 1px solid var(--border-color);
font-weight: 500;
border-radius: var(--radius-control, 6px);
padding: 8px 14px;
}
.btn.btn-outline-ink:hover { background: var(--hover-bg-color); color: var(--color); border-color: var(--ink-faint); }
.paper-page .dropdown-menu .dropdown-item-danger,
.paper-page .dropdown-menu .dropdown-item-danger i { color: var(--status-error); }
.paper-page .dropdown-menu .dropdown-item-danger:hover,
.paper-page .dropdown-menu .dropdown-item-danger:focus { background: var(--status-error-soft-hover); color: var(--status-error); }
.paper-page .dropdown-menu button.dropdown-item { width: 100%; text-align: left; background: none; border: none; }
.paper-page .dropdown-menu .dropdown-divider { border-top-color: var(--border-soft, var(--border-color)); margin: 4px 0; }
/* Loading skeleton */
.paper-table .paper-table-skeleton { pointer-events: none; }
.skeleton {
display: block;
background: var(--paper-bg-alt);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, var(--hover-bg-color), transparent);
animation: skeleton-shimmer 1.4s infinite;
}
.skeleton-line { height: 12px; }
.skeleton-line + .skeleton-line { margin-top: 8px; }
.skeleton-line-sm { height: 10px; }
.skeleton-badge { width: 52px; height: 22px; border-radius: 999px; flex-shrink: 0; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
/* Empty state with a way out */
.paper-table .paper-table-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 56px 20px;
color: var(--ink-muted);
text-align: center;
border-top: 1px solid var(--border-soft, var(--border-color));
}
.paper-table .paper-table-empty > i { font-size: 1.6rem; color: var(--ink-faint); }
.paper-table .paper-table-empty-actions { display: flex; gap: 8px; margin-top: 8px; }
.bulk-bar {
display: flex;
align-items: center;
gap: 8px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 12px;
margin: 8px 0;
}
/* Tighter admin page header — admin is power-user UI, no need for huge title + lede */
.paper-page.admin-page .paper-page-title { font-size: 1.6rem; margin: 4px 0; }
.paper-page.admin-page .paper-page-lede { display: none; }
.paper-page.admin-page .paper-crumbs { margin-bottom: 4px; }
.paper-page.admin-page .admin-nav { margin: 6px 0 12px; }
/* Admin filter toolbar — single compact line, inline labels (no boxed groups) */
.admin-filter-toolbar {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0 12px;
position: sticky;
top: 0;
z-index: 4;
background: var(--canvas-bg-color);
padding: 6px 0;
border-bottom: 1px solid var(--border-soft, var(--border-color));
box-shadow: 0 1px 0 var(--canvas-bg-color);
}
@media (max-width: 900px) {
.admin-filter-toolbar { position: static; box-shadow: none; }
}
.admin-filter-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.admin-filter-row .search-wrap { flex: 1; min-width: 220px; }
.admin-filter-row .search-wrap .form-control { height: 34px; }
.admin-filter-inline {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--ink-muted);
}
.admin-filter-inline > label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
margin: 0;
white-space: nowrap;
}
.admin-filter-inline .form-control-sm {
height: 28px;
padding: 2px 8px;
font-size: 12px;
}
.admin-filter-inline input[type="text"].form-control-sm,
.admin-filter-inline input[type="search"].form-control-sm { width: 130px; }
.admin-filter-inline input[type="date"].form-control-sm { width: 130px; }
.admin-filter-inline select.form-control-sm { width: auto; min-width: 88px; }
.admin-filter-inline .arrow { color: var(--ink-muted); font-size: 11px; }
.admin-filter-spacer { flex: 1; }
/* Active-filter chips — visually surface what's currently constraining the view */
.admin-active-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
font-size: 12px;
color: var(--ink-muted);
}
.admin-active-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 4px 2px 10px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--hover-bg-color);
font-size: 12px;
color: var(--color);
}
.admin-active-chip .key { color: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-active-chip button {
background: none;
border: none;
cursor: pointer;
padding: 0 4px;
color: var(--ink-muted);
font-size: 12px;
border-radius: 50%;
}
.admin-active-chip button:hover { color: #B42318; }
.admin-search-hint {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
pointer-events: none;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 1px 5px;
background: var(--paper-card);
}
.admin-filter-row .search-wrap { position: relative; }
.admin-filter-row .search-wrap .form-control { padding-right: 40px; }
.paper-table-row.row-selected {
background: rgba(47, 122, 68, 0.06);
}
.queue-state-pills { display: inline-flex; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.queue-state-pills .pill {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: var(--paper-card);
color: var(--ink-muted);
}
.queue-state-pills .pill-active { color: var(--status-progress); border-color: rgba(196,138,46,0.4); }
.queue-state-pills .pill-failed { color: #B42318; border-color: rgba(180,35,24,0.4); }
.queue-state-pills .pill-completed { color: #2F7A44; border-color: rgba(47,122,68,0.3); }
.queue-state-pills .pill-waiting { color: var(--ink-soft); }
.queue-state-pills .pill-delayed { color: var(--ink-muted); }
/* Compact summary bar — replaces stat cards. Each pill is also a filter shortcut. */
.admin-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 8px 0 12px;
font-size: 13px;
}
.admin-summary .summary-total {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--color);
margin-right: 8px;
}
.admin-summary .summary-meta {
color: var(--ink-muted);
font-size: 12px;
margin-right: 8px;
}
.admin-summary .summary-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--border-color);
background: var(--paper-card);
color: var(--ink-muted);
cursor: pointer;
font-size: 12px;
user-select: none;
transition: background-color 0.1s, border-color 0.1s;
}
.admin-summary .summary-pill:hover { background: var(--hover-bg-color); }
.admin-summary .summary-pill .count {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--color);
}
.admin-summary .summary-pill.active {
background: var(--primary-bg);
color: var(--primary-color);
border-color: var(--primary-bg);
}
.admin-summary .summary-pill.active .count { color: inherit; }
.admin-summary .summary-pill.error .count { color: #B42318; }
.admin-summary .summary-pill.warn .count { color: var(--status-progress); }
.admin-summary .summary-pill.ok .count { color: #2F7A44; }
.dark-mode .admin-summary .summary-pill.error .count { color: #F08A82; }
.dark-mode .admin-summary .summary-pill.warn .count { color: var(--status-progress); }
.dark-mode .admin-summary .summary-pill.ok .count { color: #7DC894; }
.dark-mode .queue-state-pills .pill-active { color: var(--status-progress); border-color: rgba(232,185,112,0.4); }
.dark-mode .queue-state-pills .pill-failed { color: #F08A82; border-color: rgba(240,138,130,0.4); }
.dark-mode .queue-state-pills .pill-completed { color: #7DC894; border-color: rgba(125,200,148,0.3); }
.job-progress {
flex: 1;
height: 6px;
background: var(--border-soft, var(--border-color));
border-radius: 999px;
overflow: hidden;
margin-left: 12px;
max-width: 200px;
}
.job-progress-bar { height: 100%; background: #2F7A44; transition: width 0.3s; }
.paper-table-empty {
padding: 48px 4px;
text-align: center;
color: var(--ink-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border-top: 1px solid var(--border-soft, var(--border-color));
}
.paper-table-empty > i { font-size: 1.6rem; }
/* ===== Queue dashboard (redesigned) ===== */
.q-header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 4px;
}
.q-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.q-range-btns {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.q-range-btns .btn {
border: none;
border-radius: 0;
padding: 5px 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
background: var(--paper-card);
}
.q-range-btns .btn + .btn { border-left: 1px solid var(--border-color); }
.q-range-btns .btn.active {
background: var(--color);
color: var(--paper-card);
}
.btn-dark {
background: var(--color) !important;
color: var(--paper-card) !important;
border-color: var(--color) !important;
border-radius: 999px;
padding: 5px 18px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
}
/* Queue overview cards */
.q-cards {
display: flex;
gap: 10px;
margin: 16px 0;
flex-wrap: wrap;
}
.q-card {
flex: 1;
min-width: 140px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 14px 16px;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.q-card:hover { border-color: var(--ink-muted); }
.q-card.selected {
border-color: var(--color);
box-shadow: 0 0 0 1px var(--color);
}
.q-card-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.q-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #2F7A44;
flex-shrink: 0;
}
.q-dot-red { background: #B42318; }
.dark-mode .q-dot { background: #7DC894; }
.dark-mode .q-dot-red { background: #F08A82; }
.q-card-name {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0.04em;
}
.q-card-count {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 400;
line-height: 1.1;
color: var(--color);
margin-bottom: 6px;
}
.q-card-sub {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-muted);
letter-spacing: 0.04em;
}
.q-card-bar {
height: 4px;
background: var(--border-color);
border-radius: 2px;
overflow: hidden;
margin-top: 6px;
}
.q-card-bar-fill {
height: 100%;
background: #1F6A64;
border-radius: 2px;
transition: width 0.3s;
}
.dark-mode .q-card-bar-fill { background: #7CC7BE; }
/* Detail: throughput + stats */
.q-detail {
display: grid;
grid-template-columns: 1fr 320px;
gap: 16px;
margin-bottom: 20px;
}
.q-throughput {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 16px 20px;
}
.q-chart-wrap {
position: relative;
}
.q-throughput canvas {
width: 100%;
display: block;
}
.q-chart-tooltip {
position: absolute;
pointer-events: none;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 6px 10px;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.6;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 10;
}
.q-chart-tooltip .q-tip-time {
color: var(--ink-muted);
margin-bottom: 2px;
}
.q-chart-tooltip .q-tip-completed { color: #1F6A64; }
.q-chart-tooltip .q-tip-failed { color: #B42318; }
.dark-mode .q-chart-tooltip .q-tip-completed { color: #7CC7BE; }
.dark-mode .q-chart-tooltip .q-tip-failed { color: #F08A82; }
.q-chart-crosshair {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: var(--ink-muted);
opacity: 0.3;
pointer-events: none;
z-index: 9;
}
.q-stats-panel {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 16px 20px;
display: flex;
flex-direction: column;
}
.q-section-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-muted);
text-transform: lowercase;
letter-spacing: 0.04em;
margin-bottom: 14px;
}
.q-section-right {
float: right;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.08em;
}
.q-legend-completed { color: #1F6A64; }
.q-legend-failed { color: #B42318; margin-left: 8px; }
.q-legend-exec { color: var(--status-progress); margin-left: 8px; letter-spacing: 2px; }
.dark-mode .q-legend-completed { color: #7CC7BE; }
.dark-mode .q-legend-failed { color: #F08A82; }
.dark-mode .q-legend-exec { color: var(--status-progress); }
.q-chart-tooltip .q-tip-exec { color: var(--status-progress); }
.dark-mode .q-chart-tooltip .q-tip-exec { color: var(--status-progress); }
.q-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 20px;
flex: 1;
}
.q-stat-label {
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 2px;
}
.q-stat-value {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
color: var(--color);
line-height: 1.2;
}
.q-stats-actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-color);
}
.q-stats-actions .btn {
font-family: var(--font-mono);
font-size: 11px;
padding: 6px 14px;
border-radius: 8px;
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
}
/* Jobs section */
.q-jobs {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 16px 20px;
}
.q-jobs-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
/* State filter toggles */
.q-state-filters {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.q-state-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
}
.q-state-toggle input { display: none; }
.q-state-chip {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 10px;
border-radius: 10px;
border: 1px solid var(--border-color);
background: var(--paper-card);
color: var(--ink-muted);
transition: opacity 0.15s, background 0.15s;
text-transform: capitalize;
}
.q-state-toggle input:checked + .q-state-chip {
opacity: 1;
}
.q-state-toggle input:not(:checked) + .q-state-chip {
opacity: 0.4;
text-decoration: line-through;
}
/* State badge colors */
.q-state-badge, .q-state-chip {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.q-state-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 8px;
}
.q-state-active { background: #dbeafe; color: #1d4ed8; }
.q-state-waiting { background: #fef3c7; color: #92400e; }
.q-state-delayed { background: #e0e7ff; color: #4338ca; }
.q-state-failed { background: #fee2e2; color: #b91c1c; }
.q-state-completed { background: #dcfce7; color: #166534; }
.dark-mode .q-state-active { background: rgba(59,130,246,0.2); color: #93bbfd; }
.dark-mode .q-state-waiting { background: rgba(251,191,36,0.15); color: #fbbf24; }
.dark-mode .q-state-delayed { background: rgba(99,102,241,0.2); color: #7CC7BE; }
.dark-mode .q-state-failed { background: rgba(239,68,68,0.2); color: #fca5a5; }
.dark-mode .q-state-completed { background: rgba(34,197,94,0.15); color: #86efac; }
.q-cell-state { width: 120px; }
.q-delay-hint {
display: block;
font-size: 10px;
color: var(--ink-muted);
margin-top: 2px;
font-family: var(--font-mono);
}
.q-search-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.q-search-row .form-control {
max-width: 320px;
height: 34px;
}
.q-auto-refresh {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
white-space: nowrap;
}
/* Jobs table */
.q-table {
width: 100%;
border-collapse: collapse;
}
.q-table thead th {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 8px 10px;
border-bottom: 1px solid var(--border-color);
text-align: left;
white-space: nowrap;
}
.q-table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: background 0.1s;
}
.q-table tbody tr:hover { background: var(--paper-bg-alt); }
.q-table tbody tr:last-child { border-bottom: none; }
.q-table tbody td {
padding: 10px 10px;
font-size: 0.88rem;
vertical-align: middle;
}
.q-cell-id {
font-family: var(--font-mono);
font-size: 12px;
white-space: nowrap;
}
.q-cell-id {
display: flex;
align-items: center;
gap: 8px;
}
.q-chevron {
font-size: 9px;
color: var(--ink-muted);
transition: transform 0.15s;
flex-shrink: 0;
}
.q-chevron-open {
transform: rotate(90deg);
}
.q-cell-id a { color: var(--color); }
.q-cell-payload {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color);
}
.q-payload-detail {
color: var(--ink-muted);
}
.q-cell-num {
font-family: var(--font-mono);
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.q-cell-progress {
min-width: 120px;
}
.q-progress-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.q-progress-bar {
flex: 1;
height: 6px;
border-radius: 3px;
overflow: hidden;
background-image: linear-gradient(to right, #1F6A64 var(--pct, 0%), var(--border-color) var(--pct, 0%));
}
.dark-mode .q-progress-bar {
background-image: linear-gradient(to right, #7CC7BE var(--pct, 0%), var(--border-color) var(--pct, 0%));
}
.q-progress-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-muted);
white-space: nowrap;
min-width: 32px;
text-align: right;
}
.q-cell-actions {
text-align: right;
white-space: nowrap;
}
.q-cell-actions .btn {
padding: 3px 8px;
font-size: 11px;
background: transparent;
border: 1px solid var(--border-color);
color: var(--ink-muted);
}
.q-cell-actions .btn:hover { color: var(--color); }
.q-row-failed { background: rgba(180,35,24,0.04); }
.dark-mode .q-row-failed { background: rgba(240,138,130,0.06); }
.q-error-detail {
padding: 4px 10px 12px;
font-size: 12px;
}
.q-error-reason {
color: #B42318;
font-size: 0.82rem;
margin-bottom: 4px;
}
.dark-mode .q-error-reason { color: #F08A82; }
/* Error toast */
.q-toast-error {
background: #FBE7E7;
color: #B42318;
border: 1px solid #F3C7C7;
border-radius: 8px;
padding: 10px 16px;
margin-bottom: 12px;
font-family: var(--font-mono);
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.dark-mode .q-toast-error {
background: rgba(240,138,130,0.1);
color: #F08A82;
border-color: rgba(240,138,130,0.25);
}
.q-error-stack {
font-size: 0.78rem;
max-height: 120px;
overflow: auto;
margin: 4px 0 0;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 8px 10px;
}
/* Expanded job detail row */
.q-row-expanded > td { border-bottom-color: transparent; }
.q-detail-row > td {
padding: 0 10px 14px !important;
border-bottom: 1px solid var(--border-color);
}
.q-job-detail {
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 14px 16px;
}
.q-job-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px 20px;
margin-bottom: 10px;
}
.q-job-detail-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.q-job-detail-label {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.q-job-detail-value {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color);
word-break: break-all;
}
.q-job-detail-value a { color: var(--color); }
.q-job-detail-error {
margin: 8px 0;
}
.q-job-detail-actions {
display: flex;
gap: 8px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border-color);
}
.q-job-detail-actions .btn {
font-family: var(--font-mono);
font-size: 11px;
padding: 5px 12px;
border-radius: 6px;
background: var(--paper-card);
border: 1px solid var(--border-color);
color: var(--color);
}
@media (max-width: 900px) {
.q-detail { grid-template-columns: 1fr; }
.q-cards { flex-direction: column; }
.q-card { min-width: 100%; }
.q-jobs-header { flex-direction: column; align-items: flex-start; }
.q-tabs { flex-wrap: wrap; }
.q-search-row { flex-wrap: wrap; }
.q-search-row .form-control { max-width: 100%; flex: 1; }
.q-table { font-size: 12px; }
.q-header { flex-direction: column; }
.q-job-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.paper-table .paper-table-head { display: none; }
.paper-table .paper-table-row,
.paper-table.paper-table-conferences .paper-table-row,
.paper-table.paper-table-repos .paper-table-row,
.paper-table .admin-users-row {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
padding: 14px 0;
grid-template-columns: none !important;
}
.paper-table .cell-anon {
flex: 1 1 calc(100% - 52px);
min-width: 0;
order: 1;
}
.paper-table .cell-actions {
flex: 0 0 auto;
order: 2;
align-self: center;
}
.paper-table .cell-status,
.paper-table .cell-views,
.paper-table .cell-conf,
.paper-table .cell-expires {
order: 3;
font-size: 13px;
color: var(--ink-muted);
display: inline-flex;
align-items: center;
gap: 6px;
text-align: left;
}
/* Status, date, views and expiry sit on one meta line with a common
baseline; the sub-text is inline instead of wrapping under the word. */
.paper-table .cell-status { flex-wrap: nowrap; gap: 6px; min-width: 0; }
.paper-table .cell-status .status-sub { flex-basis: auto; font-size: 13px; line-height: inherit; }
.paper-table .cell-status .status-sub::before { content: "·"; margin-right: 6px; color: var(--ink-faint); }
.paper-table .cell-conf {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paper-table .cell-views.num { text-align: left; }
.paper-table .paper-table-skeleton .cell-status,
.paper-table .paper-table-skeleton .cell-views,
.paper-table .paper-table-skeleton .cell-expires { flex: 1 1 30%; }
.paper-table .cell-views::before {
content: '\f06e';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 10px;
color: var(--ink-muted);
}
.paper-table .cell-expires::before {
content: '\f017';
font-family: 'Font Awesome 5 Free';
font-weight: 400;
font-size: 10px;
color: var(--ink-muted);
}
.paper-table .cell-conf::before {
content: '\f51c';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 10px;
color: var(--ink-muted);
}
/* The dashboard renders its own icon inside the conference tag. */
.paper-table-dashboard .cell-conf::before { content: none; }
.paper-table .cell-conf:has(.empty-dash),
.paper-table .cell-expires:has(.empty-dash) { display: none; }
.paper-table .cell-views::before,
.paper-table .cell-expires::before { color: var(--ink-faint); }
}
/* Paper-themed dropdown menus (Sort / Status / Actions) */
.paper-page .dropdown-menu {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface, 10px);
box-shadow: 0 12px 28px rgba(26, 24, 21, 0.08);
padding: 6px;
min-width: 220px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--color);
margin-top: 6px;
}
.paper-page .dropdown-menu .dropdown-header {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
padding: 8px 10px 6px;
font-weight: 500;
}
.paper-page .dropdown-menu .dropdown-item {
border-radius: 6px;
padding: 8px 10px;
color: var(--color);
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.paper-page .dropdown-menu .dropdown-item:hover,
.paper-page .dropdown-menu .dropdown-item:focus {
background: var(--hover-bg-color);
color: var(--color);
}
.paper-page .dropdown-menu .dropdown-item i {
width: 16px;
font-size: 13px;
color: var(--ink-muted);
}
.paper-page .dropdown-menu .form-check.dropdown-item {
padding: 8px 10px 8px 36px !important;
position: relative;
}
.paper-page .dropdown-menu .form-check.dropdown-item .form-check-input {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
margin: 0;
width: 16px;
height: 16px;
accent-color: var(--color);
cursor: pointer;
}
.paper-page .dropdown-menu .form-check.dropdown-item .form-check-label {
font-family: var(--font-sans);
font-size: 14px;
color: var(--color);
font-weight: 400;
margin: 0;
cursor: pointer;
}
/* Three-dots icon action button */
.btn.btn-icon-dots {
width: 32px;
height: 32px;
padding: 0;
border: 1px solid transparent;
background: transparent;
color: var(--ink-muted);
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn.btn-icon-dots:hover,
.btn.btn-icon-dots:focus,
.btn.btn-icon-dots[aria-expanded="true"] {
background: var(--hover-bg-color);
border-color: var(--border-color);
color: var(--color);
}
.btn.btn-icon-dots::after { display: none; }
.btn.btn-icon-dots i { font-size: 15px; }
.paper-page .repo-list-empty {
border-top: none;
padding: 56px 20px;
color: var(--ink-muted);
}
/* Filter chips */
.paper-page .filter-chip {
background: var(--paper-bg-alt);
color: var(--color);
border: 1px solid var(--border-color);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
@media (max-width: 768px) {
.paper-page .paper-page-title { font-size: clamp(1.4rem, 6vw, 1.9rem); margin: 4px 0 2px; }
.paper-page .paper-page-lede { font-size: 13px; line-height: 1.4; margin-bottom: 0; }
.paper-page .btn-ink { padding: 6px 12px; font-size: 13px; }
/* Quotas stack in one column on phones so labels and values keep the
same 11px / 13px sizes as desktop instead of shrinking to 9px. */
.paper-page .quota-row {
grid-template-columns: 1fr;
gap: 12px;
padding: 0;
margin: 16px 0 0;
}
.paper-page .dashboard-filter-row {
padding: 10px 0;
margin-top: 12px;
gap: 8px;
}
.paper-page .quota-header {
flex-direction: row;
align-items: baseline;
gap: 8px;
}
.paper-page .quota-value { white-space: nowrap; }
/* Filter controls: type group fills the row, Sort and Status share one. */
.paper-page .dashboard-filter-controls { width: 100%; }
.paper-page .dashboard-filter-controls .btn-group { flex: 1 1 100%; display: flex; }
.paper-page .dashboard-filter-controls .btn-group .btn { flex: 1; justify-content: center; }
.paper-page .dashboard-filter-controls .dropdown { flex: 1 1 0; min-width: 0; }
.paper-page .dashboard-filter-controls .dropdown .dropdown-toggle { width: 100%; justify-content: space-between; }
.paper-page .dashboard-filter-controls .dropdown .filter-btn-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
.paper-page .paper-page-lede {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Empty state */
.empty-state {
text-align: center;
padding: 40px 20px;
opacity: 0.6;
}
.empty-state i {
font-size: 2rem;
margin-bottom: 10px;
display: block;
}
/* ===== Paper profile / settings ===== */
.paper-page .progress {
height: 10px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-radius: 999px;
overflow: hidden;
margin-bottom: 20px;
}
.paper-page .progress .progress-bar {
background: var(--color);
color: var(--canvas-bg-color);
font-family: var(--font-mono);
font-size: 10px;
line-height: 10px;
}
/* Bootstrap's .bg-* utilities are !important, so the paper palette must be
too, otherwise the bright Bootstrap green/yellow/red leak through. */
.paper-page .progress .progress-bar.bg-success { background: var(--status-ready) !important; }
.paper-page .progress .progress-bar.bg-warning { background: var(--status-progress) !important; color: #fff; }
.paper-page .progress .progress-bar.bg-danger { background: var(--status-error) !important; }
.paper-page .progress .progress-bar.bg-dark { background: var(--ink-faint) !important; }
.paper-page > h5,
.paper-page form > h5,
.paper-page .form > h5 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 24px 0 8px;
}
.paper-page .accordion .card {
background: var(--paper-card, var(--sidebar-bg-color));
border: 1px solid var(--border-color);
border-radius: 8px !important;
margin-bottom: 8px;
overflow: hidden;
}
.paper-page .accordion .card + .card { border-top: 1px solid var(--border-color); }
.paper-page .accordion .card-header {
background: transparent;
border: none;
padding: 0;
}
.paper-page .accordion .card-header .btn {
color: var(--color) !important;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
padding: 14px 18px !important;
background: transparent !important;
border: none !important;
position: relative;
}
.paper-page .accordion .card-header .btn::after {
content: "+";
position: absolute;
right: 18px;
font-family: var(--font-serif);
font-size: 20px;
color: var(--ink-muted);
}
.paper-page .accordion .card-header .btn:not(.collapsed)::after { content: "–"; }
.paper-page .accordion .card-body {
padding: 6px 18px 18px !important;
border-top: 1px solid var(--border-soft);
}
.paper-page .accordion .form-check-label {
color: var(--color);
font-weight: 500;
font-size: 13.5px;
}
.paper-page .accordion .form-text {
color: var(--ink-muted);
font-size: 12px;
margin-top: 2px;
}
.faq-section .panel-body code {
font-family: var(--font-mono);
font-size: 13px;
padding: 1px 6px;
background: var(--paper-bg-alt);
border: 1px solid var(--border-color);
border-radius: 3px;
color: var(--color);
}
.faq-section .panel-body a {
color: var(--accent);
}
@media (max-width: 820px) {
.paper-faq-body {
grid-template-columns: 1fr;
gap: 24px;
}
.paper-faq-toc {
position: static;
}
}
/* ===== Paper footer ===== */
.paper-footer {
margin-top: 80px;
padding: 56px max(20px, calc((100% - 1076px) / 2)) 28px;
border-top: 1px solid var(--border-color);
background: var(--canvas-bg-color);
font-family: var(--font-sans);
}
.paper-footer-inner {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 40px;
}
.paper-footer-brand .paper-footer-mark {
font-family: var(--font-serif);
font-size: 22px;
letter-spacing: -0.01em;
color: var(--color);
}
.paper-footer-brand .paper-footer-mark em {
font-style: italic;
font-weight: 400;
}
.paper-footer-tag {
margin-top: 10px;
color: var(--ink-soft);
font-size: 13.5px;
line-height: 1.55;
max-width: 340px;
}
.paper-footer-head {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 14px;
}
.paper-footer-col a {
display: block;
color: var(--color);
font-size: 13.5px;
padding: 4px 0;
text-decoration: none;
}
.paper-footer-col a:hover {
color: var(--accent);
}
.paper-footer-rule {
height: 1px;
background: var(--border-color);
margin: 40px 0 16px;
}
.paper-footer-foot {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--ink-muted);
font-family: var(--font-sans);
letter-spacing: 0;
}
.paper-footer-foot .paper-footer-meta {
font-family: var(--font-serif);
font-style: italic;
font-size: 13.5px;
letter-spacing: 0;
color: var(--ink-soft);
}
@media (max-width: 768px) {
.paper-footer-inner {
grid-template-columns: 1fr 1fr;
}
}
.file.folder.truncated .truncated-warning {
color: var(--status-progress);
margin-left: 4px;
font-size: 0.85em;
flex-shrink: 0;
}
.file.folder.truncated > a {
color: var(--status-progress);
}
/* ===== Errors admin page =====
Uses the existing design tokens (--paper-card, --border-color, --ink-muted,
--primary-bg, etc.) so light + dark themes are picked up automatically.
Bucket colors are exposed as their own tokens with light/dark overrides
below so status pills stay legible against the dark canvas. */
body {
--bucket-error-bg: #FCEDED;
--bucket-error-fg: #8A1F1F;
--bucket-error-bd: #F0C4C4;
--bucket-error-dot: #B53737;
--bucket-warn-bg: #FFF3DF;
--bucket-warn-fg: #7A4D00;
--bucket-warn-bd: #F0D8A0;
--bucket-warn-dot: #B07A2F;
--bucket-info-bg: #EAF2EC;
--bucket-info-fg: #2C5D3A;
--bucket-info-bd: #C5DCCD;
--bucket-info-dot: #5B8D6B;
/* Subtle elevation tokens — gives cards weight without losing the paper
palette. Single soft shadow + a 1px hairline to keep the editorial feel. */
--card-shadow: 0 1px 2px rgba(26, 24, 21, 0.04), 0 4px 14px rgba(26, 24, 21, 0.05);
--card-shadow-hover: 0 1px 2px rgba(26, 24, 21, 0.06), 0 8px 24px rgba(26, 24, 21, 0.08);
}
.dark-mode {
--bucket-error-bg: rgba(255, 139, 123, 0.10);
--bucket-error-fg: var(--status-error);
--bucket-error-bd: rgba(255, 139, 123, 0.28);
--bucket-error-dot: var(--status-error);
--bucket-warn-bg: rgba(255, 211, 122, 0.10);
--bucket-warn-fg: var(--status-progress);
--bucket-warn-bd: rgba(255, 211, 122, 0.28);
--bucket-warn-dot: var(--status-progress);
--bucket-info-bg: rgba(152, 200, 168, 0.10);
--bucket-info-fg: #98C8A8;
--bucket-info-bd: rgba(152, 200, 168, 0.28);
--bucket-info-dot: #98C8A8;
--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.30);
--card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.40);
}
.errors-page .errors-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 8px; }
.errors-page .errors-actions { display: flex; gap: 6px; }
.errors-page .kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin: 14px 0 18px;
}
.errors-page .kpi-card {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: var(--card-shadow);
transition: box-shadow 160ms ease, transform 160ms ease;
}
.errors-page .kpi-card:hover { box-shadow: var(--card-shadow-hover); }
.errors-page .kpi-label {
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
}
.errors-page .kpi-value {
font-family: var(--font-serif);
font-size: 2.6rem;
font-weight: 400;
line-height: 1;
margin-top: 2px;
color: var(--color);
}
.errors-page .kpi-card.kpi-error .kpi-value { color: var(--bucket-error-fg); }
.errors-page .kpi-card.kpi-warn .kpi-value { color: var(--bucket-warn-fg); }
.errors-page .kpi-card.kpi-info .kpi-value { color: var(--bucket-info-fg); }
.errors-page .kpi-sub { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }
.errors-page .kpi-sub.up { color: var(--bucket-error-fg); font-style: normal; }
.errors-page .kpi-sub.down { color: var(--bucket-info-fg); font-style: normal; }
.errors-page .dropped-warn { color: var(--bucket-error-fg); font-weight: 600; font-style: normal; }
.errors-page .volume-chart {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 18px;
box-shadow: var(--card-shadow);
}
.errors-page .volume-head {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 0.7rem; color: var(--ink-muted);
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 10px;
}
.errors-page .volume-legend { display: flex; gap: 14px; align-items: center; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.errors-page .volume-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.errors-page .dot.dot-error { background: var(--bucket-error-dot); }
.errors-page .dot.dot-warn { background: var(--bucket-warn-dot); }
.errors-page .dot.dot-info { background: var(--bucket-info-dot); }
.errors-page .volume-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.errors-page .volume-bar { display: flex; flex-direction: column-reverse; flex: 1 1 0; min-width: 6px; height: 100%; }
.errors-page .volume-bar .seg { display: block; width: 100%; }
.errors-page .seg.seg-error { background: var(--bucket-error-dot); }
.errors-page .seg.seg-warn { background: var(--bucket-warn-dot); }
.errors-page .seg.seg-info { background: var(--bucket-info-dot); opacity: 0.7; }
.errors-page .errors-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.errors-page .seg-tabs {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
background: var(--paper-card);
}
.errors-page .seg-tabs button {
background: transparent; border: none;
padding: 6px 14px; font-size: 0.85rem; cursor: pointer;
color: var(--color); font-family: var(--font-sans);
}
.errors-page .seg-tabs button + button { border-left: 1px solid var(--border-color); }
.errors-page .seg-tabs button.active { background: var(--primary-bg); color: var(--primary-color); }
.errors-page .errors-toolbar .search-wrap { position: relative; flex: 1 1 320px; min-width: 220px; }
.errors-page .errors-toolbar .search-wrap input {
width: 100%;
padding: 6px 10px 6px 32px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-family: var(--font-mono); font-size: 0.82rem;
background: var(--input-bg);
color: var(--input-color);
}
.errors-page .errors-toolbar .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: 0.85rem; }
.errors-page .errors-toolbar .filter-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.72rem; color: var(--ink-muted); }
.errors-page .errors-toolbar .select-wrap { display: inline-flex; align-items: center; gap: 6px; }
.errors-page .errors-toolbar .select-wrap label {
font-family: var(--font-mono);
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-muted); margin: 0;
}
.errors-page .errors-toolbar .select-wrap select {
background: var(--input-bg); color: var(--input-color);
border: 1px solid var(--border-color); border-radius: 8px;
}
.errors-page .errors-toolbar .autoref { display: inline-flex; gap: 6px; align-items: center; font-size: 0.82rem; color: var(--color); cursor: pointer; margin: 0; }
.errors-page .btn-icon { width: 32px; padding: 4px 0; }
.errors-page .errors-list {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.errors-page .errors-list-head,
.errors-page .errors-row-main {
display: grid;
grid-template-columns: 110px 100px 100px 1fr 60px 70px;
gap: 16px;
padding: 18px 20px;
align-items: start;
}
.errors-page .errors-list-head { padding: 12px 20px; align-items: center; }
.errors-page .errors-list-head {
font-family: var(--font-mono);
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-muted);
border-bottom: 1px solid var(--border-color);
background: var(--paper-bg-alt);
}
.errors-page .errors-row { border-bottom: 1px solid var(--border-soft); }
.errors-page .errors-row:last-child { border-bottom: none; }
.errors-page .errors-row.open { background: var(--paper-bg-alt); }
.errors-page .errors-row-main { cursor: pointer; }
.errors-page .errors-row-main:hover { background: var(--hover-bg-color); }
.errors-page .col-when .when-rel { font-size: 0.95rem; color: var(--color); font-variant-numeric: tabular-nums; }
.errors-page .col-when .when-abs { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.errors-page .col-sev { display: flex; align-items: center; gap: 8px; }
.errors-page .sev-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.errors-page .sev-dot.sev-error { background: var(--bucket-error-dot); }
.errors-page .sev-dot.sev-warn { background: var(--bucket-warn-dot); }
.errors-page .sev-dot.sev-info { background: var(--bucket-info-dot); }
.errors-page .sev-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--color); }
.errors-page .pill-module {
display: inline-block;
font-family: var(--font-mono); font-size: 0.78rem;
background: var(--paper-bg-alt); color: var(--ink-soft);
border: 1px solid var(--border-color);
padding: 3px 10px; border-radius: 6px;
}
.errors-page .col-msg .msg-code {
font-family: var(--font-mono);
font-size: 1rem;
color: var(--color);
font-weight: 600;
}
.errors-page .col-msg .msg-context { color: var(--ink-muted); font-style: italic; font-size: 0.88rem; margin-left: 10px; }
.errors-page .col-msg .msg-detail {
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 0.82rem;
margin-left: 10px;
}
.errors-page .col-msg .msg-url {
color: var(--ink-muted);
font-family: var(--font-mono);
font-size: 0.8rem;
margin-top: 6px;
word-break: break-all;
}
.errors-page .count-pill {
display: inline-block;
padding: 2px 8px; border-radius: 4px;
background: var(--primary-bg); color: var(--primary-color);
font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.errors-page .count-pill.count-pill-muted {
background: transparent; color: var(--ink-muted);
border: 1px solid var(--border-color);
}
.errors-page .status-pill {
display: inline-block;
padding: 2px 10px; border-radius: 4px;
font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums;
border: 1px solid transparent;
}
.errors-page .status-pill.status-error { background: var(--bucket-error-bg); color: var(--bucket-error-fg); border-color: var(--bucket-error-bd); }
.errors-page .status-pill.status-warn { background: var(--bucket-warn-bg); color: var(--bucket-warn-fg); border-color: var(--bucket-warn-bd); }
.errors-page .status-pill.status-info { background: var(--bucket-info-bg); color: var(--bucket-info-fg); border-color: var(--bucket-info-bd); }
.errors-page .errors-row-detail { padding: 0 16px 16px; }
.errors-page .detail-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; }
.errors-page .detail-tabs button {
background: transparent; border: 0;
border-bottom: 2px solid transparent;
padding: 8px 12px; font-size: 0.85rem; cursor: pointer;
color: var(--ink-muted); font-family: var(--font-sans);
}
.errors-page .detail-tabs button.active { color: var(--color); border-bottom-color: var(--color); }
.errors-page .detail-body { display: grid; grid-template-columns: 1fr 260px; gap: 20px; }
.errors-page .detail-main pre {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 22px;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.7;
color: var(--color);
max-height: 26em;
overflow: auto;
/* pre-wrap honors leading-space indentation (so aligned columns survive)
while still wrapping long string values; overflow-wrap forces the break
mid-word for unbroken URLs / encoded JSON detail strings. */
white-space: pre-wrap;
overflow-wrap: anywhere;
margin: 0;
box-shadow: var(--card-shadow);
}
.errors-page .related-list {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 12px;
max-height: 22em; overflow: auto;
box-shadow: var(--card-shadow);
}
.errors-page .stack-pre {
/* Stack frames look better with a tighter line-height than the curated
JSON view, since each frame is a single readable line. */
line-height: 1.45;
white-space: pre;
overflow-x: auto;
}
.errors-page .related-row {
display: flex; gap: 10px; padding: 6px 12px; align-items: center;
border-bottom: 1px solid var(--border-soft);
font-size: 0.8rem;
}
.errors-page .related-row:last-child { border-bottom: none; }
.errors-page .detail-actions { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.errors-page .copy-hint { font-size: 0.78rem; color: var(--bucket-info-fg); }
.errors-page .detail-aside {
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px;
box-shadow: var(--card-shadow);
}
.errors-page .aside-block + .aside-block { margin-top: 16px; }
.errors-page .aside-label {
font-family: var(--font-mono);
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-muted); margin-bottom: 4px;
}
.errors-page .aside-value {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--color);
word-break: break-word;
line-height: 1.3;
}
.errors-page .aside-value.mono { font-family: var(--font-mono); font-size: 0.82rem; }
.errors-page .aside-sub { color: var(--ink-muted); font-style: italic; font-size: 0.8rem; font-family: var(--font-sans); }
.errors-page .errors-pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; color: var(--ink-muted); font-size: 0.85rem; }
@media (max-width: 720px) {
.errors-page .errors-list-head,
.errors-page .errors-row-main { grid-template-columns: 80px 80px 1fr 60px; }
.errors-page .errors-list-head .col-mod,
.errors-page .errors-row-main .col-mod,
.errors-page .errors-list-head .col-sev,
.errors-page .errors-row-main .col-sev { display: none; }
.errors-page .detail-body { grid-template-columns: 1fr; }
}
/* ── Overview page ──────────────────────────────────────────────── */
/* Header with title + range buttons (matches reference top bar) */
.overview-page .ov-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 2px;
}
/* Status dot */
.overview-page .ov-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-left: 6px;
vertical-align: middle;
}
.overview-page .ov-dot-ok { background: #2F7A44; }
.overview-page .ov-dot-warn { background: var(--status-progress); }
.overview-page .ov-dot-idle { background: var(--ink-muted); }
.dark-mode .overview-page .ov-dot-ok { background: #7DC894; }
.dark-mode .overview-page .ov-dot-warn { background: var(--status-progress); }
/* ── Top KPI row (5 cards) ────────────────────────────────────── */
.overview-page .ov-kpi-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin: 16px 0 22px;
}
.overview-page .ov-kpi-card {
background: var(--paper-card, #fff);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: var(--card-shadow);
transition: box-shadow 160ms ease;
}
.overview-page .ov-kpi-card:hover { box-shadow: var(--card-shadow-hover); }
.overview-page .ov-kpi-label {
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
}
.overview-page .ov-kpi-value {
font-family: var(--font-serif);
font-size: 2.6rem;
font-weight: 400;
line-height: 1;
margin-top: 2px;
color: var(--color);
}
.overview-page .ov-kpi-value.ov-val-warn { color: #B42318; }
.dark-mode .overview-page .ov-kpi-value.ov-val-warn { color: #F08A82; }
.overview-page .ov-kpi-sub {
font-size: 0.76rem;
color: var(--ink-muted);
margin-top: 2px;
}
/* ── Daily highlights ─────────────────────────────────────────── */
.overview-page .ov-daily-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: -4px 0 22px;
}
.overview-page .ov-daily-card {
background: var(--primary-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px 20px;
box-shadow: var(--card-shadow);
}
.overview-page .ov-daily-label {
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-muted);
}
.overview-page .ov-daily-value {
font-family: var(--font-serif);
font-size: 2.35rem;
font-weight: 400;
line-height: 1;
color: var(--accent, #1F6A64);
margin-top: 6px;
}
.overview-page .ov-daily-sub {
font-size: 0.76rem;
color: var(--ink-muted);
margin-top: 5px;
}
.dark-mode .overview-page .ov-daily-card {
background: var(--paper-card);
}
.dark-mode .overview-page .ov-daily-value {
color: #7CC7BE;
}
/* ── Chart cards ─────────────────────────────────────────────── */
.overview-page .ov-chart-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.overview-page .ov-chart-card {
background: var(--paper-card, #fff);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 22px 14px;
box-shadow: var(--card-shadow);
}
.overview-page .ov-chart-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.overview-page .ov-chart-title {
font-family: var(--font-serif);
font-size: 1.05rem;
}
.overview-page .ov-chart-legend {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 5px;
}
.overview-page .ov-dot-legend {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
}
.overview-page .ov-dot-accent { background: var(--accent, #1F6A64); }
.overview-page .ov-dot-ok-fill { background: #2F7A44; }
.overview-page .ov-dot-user-fill { background: #8B5E2E; }
.overview-page .ov-dot-new-user-fill { background: var(--status-progress); }
.dark-mode .overview-page .ov-dot-ok-fill { background: #7DC894; }
.dark-mode .overview-page .ov-dot-user-fill { background: var(--status-progress); }
.dark-mode .overview-page .ov-dot-new-user-fill { background: var(--status-progress); }
/* Spark bar chart */
.overview-page .ov-spark-bars {
display: flex;
align-items: flex-end;
gap: 3px;
height: 140px;
}
.overview-page .ov-spark-col {
flex: 1;
display: flex;
align-items: flex-end;
height: 100%;
position: relative;
}
.overview-page .ov-spark-fill {
width: 100%;
background: var(--accent, #1F6A64);
border-radius: 2px 2px 0 0;
transition: height 300ms ease;
opacity: 0.55;
}
.overview-page .ov-spark-fill-alt { background: #2F7A44; }
.overview-page .ov-spark-fill-user { background: #8B5E2E; }
.overview-page .ov-spark-fill-new-user { background: var(--status-progress); }
.dark-mode .overview-page .ov-spark-fill-alt { background: #7DC894; }
.dark-mode .overview-page .ov-spark-fill-user { background: var(--status-progress); }
.dark-mode .overview-page .ov-spark-fill-new-user { background: var(--status-progress); }
.overview-page .ov-spark-col:hover .ov-spark-fill { opacity: 1; }
.overview-page .ov-spark-col.has-tip::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%) translateY(4px);
z-index: 10;
padding: 6px 8px;
border-radius: 6px;
background: var(--color);
color: var(--canvas-bg-color);
font-family: var(--font-mono);
font-size: 0.68rem;
line-height: 1;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
}
.overview-page .ov-spark-col.has-tip::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%) translateY(4px);
z-index: 10;
border: 5px solid transparent;
border-top-color: var(--color);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
}
.overview-page .ov-spark-col.has-tip:hover::after,
.overview-page .ov-spark-col.has-tip:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.overview-page .ov-spark-x {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--ink-muted);
margin-top: 6px;
}
/* ── Three-panel row ──────────────────────────────────────────── */
.overview-page .ov-triple-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 18px;
}
.overview-page .ov-panel-card {
background: var(--paper-card, #fff);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 20px;
box-shadow: var(--card-shadow);
}
.overview-page .ov-panel-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
}
.overview-page .ov-panel-title {
font-family: var(--font-serif);
font-size: 1.05rem;
}
.overview-page .ov-panel-meta {
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
}
.overview-page .ov-panel-foot {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border-color);
font-size: 0.82rem;
}
.overview-page .ov-panel-foot a { color: var(--link-color); text-decoration: none; }
.overview-page .ov-panel-foot a:hover { text-decoration: underline; }
.overview-page .ov-performance {
min-width: 0;
margin: 22px 0;
}
.overview-page .ov-performance-head {
align-items: center;
flex-wrap: wrap;
gap: 12px 20px;
}
.overview-page .ov-performance-head h2 { margin: 0 0 4px; }
.overview-page .ov-performance-note {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.5;
color: var(--ink-muted);
}
.overview-page .ov-performance-head .ov-performance-note { margin: 0; }
.overview-page .ov-performance-window {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.overview-page .ov-performance-window label {
margin: 0;
font-size: 12px;
color: var(--ink-muted);
}
.overview-page .ov-performance-window select { width: auto; }
.overview-page .ov-performance-tabs {
margin: 0 0 16px;
gap: 4px;
}
.overview-page .ov-performance-tabs .paper-tab { white-space: nowrap; }
.overview-page .ov-metrics-scroll {
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius-control, 8px);
}
.overview-page .ov-metrics-table {
width: 100%;
border-collapse: collapse;
color: var(--color);
font-size: 13px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
}
.overview-page .ov-metrics-table th,
.overview-page .ov-metrics-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
white-space: nowrap;
}
.overview-page .ov-metrics-table thead th {
background: var(--paper-bg-alt);
color: var(--ink-muted);
font-size: 12px;
font-weight: 500;
}
.overview-page .ov-metrics-table .num { text-align: right; }
.overview-page .ov-metrics-table tr:last-child > * { border-bottom: 0; }
.overview-page .ov-metrics-table thead tr:last-child > * { border-bottom: 1px solid var(--border-color); }
.overview-page .ov-metrics-table tbody tr:hover { background: var(--hover-bg-color); }
.overview-page .ov-metrics-table .ov-metric-name {
min-width: 190px;
max-width: 280px;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
font-weight: 500;
}
.overview-page .ov-metrics-table small {
display: block;
margin-top: 3px;
font-size: 11px;
font-weight: 400;
color: var(--ink-muted);
}
.overview-page .ov-metrics-table small .ui-icon { width: 12px; height: 12px; }
.overview-page .ov-metric-warning-row { background: rgba(196, 138, 46, .07); }
.overview-page .ov-metric-warn,
.overview-page .ov-metrics-table small.ov-metric-warn { color: #946519; }
.dark-mode .overview-page .ov-metric-warn,
.dark-mode .overview-page .ov-metrics-table small.ov-metric-warn { color: var(--status-progress); }
.overview-page .ov-performance-message {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
margin: 0 0 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius-control, 8px);
font-size: 13px;
line-height: 1.5;
}
.overview-page .ov-performance-message span { flex: 1; min-width: 160px; }
.overview-page .ov-performance-warning { background: rgba(196, 138, 46, .07); }
.overview-page .ov-performance-empty {
margin: 0;
padding: 24px 12px;
text-align: center;
font-size: 13px;
color: var(--ink-muted);
}
.overview-page .ov-performance-help {
margin-top: 16px;
font-size: 12px;
line-height: 1.6;
color: var(--ink-muted);
}
.overview-page .ov-performance-help summary { width: fit-content; cursor: pointer; }
.overview-page .ov-performance-help p { margin: 8px 0 0; max-width: 80ch; }
@media (max-width: 575px) {
.overview-page .ov-performance { padding: 16px 12px; }
.overview-page .ov-performance-window { width: 100%; }
.overview-page .ov-performance-window select { flex: 1; min-width: 0; }
.overview-page .ov-performance-tabs .paper-tab { flex: 1; padding: 10px 8px; }
}
/* Stacked horizontal bar (repo status) */
.overview-page .ov-stacked-bar {
display: flex;
height: 18px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 14px;
}
.overview-page .ov-bar-seg { min-width: 2px; transition: width 400ms ease; }
.overview-page .ov-bar-ready { background: #2F7A44; }
.overview-page .ov-bar-preparing { background: var(--status-progress); }
.overview-page .ov-bar-error { background: #B42318; }
.overview-page .ov-bar-expired { background: #8A857C; }
.overview-page .ov-bar-removed { background: #B5AFA2; }
.dark-mode .overview-page .ov-bar-ready { background: #7DC894; }
.dark-mode .overview-page .ov-bar-preparing { background: var(--status-progress); }
.dark-mode .overview-page .ov-bar-error { background: #F08A82; }
.dark-mode .overview-page .ov-bar-expired { background: #6B665E; }
.dark-mode .overview-page .ov-bar-removed { background: #4A453E; }
.overview-page .ov-bar-legend { display: flex; flex-direction: column; gap: 6px; }
.overview-page .ov-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
text-decoration: none;
color: inherit;
}
.overview-page .ov-legend-item:hover { text-decoration: none; color: inherit; }
.overview-page .ov-swatch {
display: inline-block;
width: 12px; height: 12px;
border-radius: 3px;
flex-shrink: 0;
}
.overview-page .ov-legend-n {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
}
/* Error horizontal bars */
.overview-page .ov-error-bars { display: flex; flex-direction: column; gap: 12px; }
.overview-page .ov-ebar-row { display: flex; align-items: center; gap: 10px; }
.overview-page .ov-ebar-label {
width: 30px;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
text-transform: uppercase;
color: var(--ink-muted);
}
.overview-page .ov-ebar-track {
flex: 1;
height: 10px;
background: var(--hover-bg-color);
border-radius: 5px;
overflow: hidden;
}
.overview-page .ov-ebar-fill {
height: 100%;
border-radius: 5px;
transition: width 400ms ease;
}
.overview-page .ov-ebar-error { background: #B42318; }
.overview-page .ov-ebar-warn { background: var(--status-progress); }
.overview-page .ov-ebar-info { background: var(--accent, #1F6A64); }
.dark-mode .overview-page .ov-ebar-error { background: #F08A82; }
.dark-mode .overview-page .ov-ebar-warn { background: var(--status-progress); }
.overview-page .ov-ebar-n {
width: 36px;
text-align: right;
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
flex-shrink: 0;
}
/* Routes / queue table */
.overview-page .ov-routes-table { display: flex; flex-direction: column; }
.overview-page .ov-route-row {
display: grid;
grid-template-columns: 1fr 60px 60px 60px;
padding: 8px 0;
border-bottom: 1px solid var(--border-soft, var(--border-color));
text-decoration: none;
color: inherit;
font-size: 0.85rem;
align-items: center;
}
.overview-page .ov-route-row:last-child { border-bottom: none; }
.overview-page .ov-route-row:hover { background: var(--hover-bg-color); text-decoration: none; color: inherit; }
.overview-page .ov-route-head {
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
border-bottom: 1px solid var(--border-color);
}
.overview-page .ov-route-head:hover { background: transparent; }
.overview-page .ov-route-name {
font-family: var(--font-mono);
font-size: 0.84rem;
}
.overview-page .ov-route-n {
text-align: right;
font-family: var(--font-mono);
font-size: 0.84rem;
}
.overview-page .ov-route-lat { color: var(--ink-muted); }
.overview-page .ov-n-bad { color: #B42318; font-weight: 600; }
.dark-mode .overview-page .ov-n-bad { color: #F08A82; }
/* ── Services bar ─────────────────────────────────────────────── */
.overview-page .ov-services-card {
background: var(--paper-card, #fff);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 18px 22px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
}
.overview-page .ov-services-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
}
.overview-page .ov-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
}
.overview-page .ov-svc {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border-soft, var(--border-color));
border-radius: 10px;
}
.overview-page .ov-svc-dot {
width: 10px; height: 10px;
border-radius: 50%;
margin-top: 3px;
flex-shrink: 0;
}
.overview-page .ov-svc-info { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.overview-page .ov-svc-name {
font-family: var(--font-mono);
font-size: 0.88rem;
font-weight: 600;
}
.overview-page .ov-svc-meta {
font-size: 0.76rem;
color: var(--ink-muted);
}
.overview-page .ov-svc-detail {
font-size: 0.74rem;
color: var(--ink-muted);
white-space: nowrap;
}
/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
.overview-page .ov-kpi-row { grid-template-columns: repeat(3, 1fr); }
.overview-page .ov-daily-row { grid-template-columns: repeat(3, 1fr); }
.overview-page .ov-triple-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.overview-page .ov-kpi-row { grid-template-columns: repeat(2, 1fr); }
.overview-page .ov-daily-row { grid-template-columns: 1fr; }
.overview-page .ov-chart-row { grid-template-columns: 1fr; }
.overview-page .ov-header { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
.overview-page .ov-kpi-row { grid-template-columns: 1fr 1fr; }
.overview-page .ov-services-grid { grid-template-columns: 1fr 1fr; }
}
/* Keep account access secondary to creating an anonymization. */
.dashboard-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-bottom: 12px; }
.dashboard-heading-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dashboard-connections-link { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; color: var(--ink-muted); font-size: 12px; line-height: 1.5; }
.dashboard-connections-link:hover { color: var(--accent); text-decoration: none; }
.dashboard-connections-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 767px) {
.dashboard-heading-actions { align-items: flex-start; padding-bottom: 0; gap: 4px; }
.dashboard-connections-link { min-height: 44px; }
}
.paper-settings-connection-link { display: flex; align-items: center; gap: 12px; padding: 18px 0; color: var(--color); font-size: 14px; }
.paper-settings-connection-link > i { color: var(--ink-muted); font-size: 18px; }
.paper-settings-connection-link > span:first-of-type { flex: 1; }
.paper-settings-connection-link small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 12px; }
.paper-settings-connection-link:hover { color: var(--accent); text-decoration: none; }
.paper-settings-connection-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* GitHub connections use the same open sections as account settings. */
.connections-heading { margin-bottom: 36px; }
.connections-heading .paper-page-title { font-size: clamp(38px, 4.5vw, 56px); margin-bottom: 12px; }
.connections-heading .paper-page-lede { font-size: 15px; }
.connections-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; border-top: 1px solid var(--border-color); padding-top: 28px; }
.connections-grid > section { min-width: 0; }
.connection-top, .connection-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.connection-top { margin-bottom: 24px; min-height: 28px; }
.connection-top > i { color: var(--ink-muted); font-size: 24px; }
.connection-top > .fa-key { font-size: 18px; }
.connection-title { margin-bottom: 10px; }
.connections-page h2 { font-family: inherit; font-size: 21px; font-weight: 600; letter-spacing: -.5px; margin: 0; }
.connections-page p { font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.connection-badge { background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; border-radius: 5px; padding: 4px 8px; white-space: nowrap; }
.connection-badge-muted { background: var(--paper-bg-alt); color: var(--ink-muted); }
.connection-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-muted); }
.connection-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.connection-status.is-connected { color: var(--status-ready); }
.connection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 22px 0 16px; }
.connections-page .btn { font-size: 13px; padding: 9px 13px; white-space: normal; }
.connections-page .connection-help, .connection-revoke p { font-size: 12px; }
.connection-link { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; color: var(--accent); font-size: 13px; line-height: 1.6; font-weight: 500; text-align: left; cursor: pointer; }
.connection-link:hover { color: var(--link-hover-color); text-decoration: underline; }
.connection-link:disabled { color: var(--ink-muted); opacity: .65; cursor: not-allowed; text-decoration: none; }
.connection-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.connection-installations { list-style: none; padding: 0; margin: 18px 0; border-top: 1px solid var(--border-soft); }
.connection-installations li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; font-size: 12px; border-bottom: 1px solid var(--border-soft); }
.connection-revoke { border-top: 1px solid var(--border-soft); padding-top: 18px; margin-top: 24px; }
.connection-danger { color: var(--status-error); }
.connection-resources { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.connection-count { color: var(--ink-muted); font-size: 12px; }
.connection-empty { display: flex; align-items: center; gap: 18px; padding: 20px 0; margin: 22px 0; }
.connection-empty > i { font-size: 22px; color: var(--ink-muted); }
.connection-empty h3 { font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.connection-empty p { font-size: 12px; margin: 0; }
.connection-empty > a { margin-left: auto; flex-shrink: 0; }
.connection-resource { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.connection-resource-name { flex: 1; min-width: 180px; overflow-wrap: anywhere; font-size: 14px; }
.connection-resource-name small { display: block; color: var(--ink-muted); font-size: 11px; margin-top: 5px; }
.connection-resource-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.connection-resource-actions .connection-help { flex-basis: 100%; }
.connections-page .connection-footnote { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; font-size: 12px; }
@media (max-width: 767px) {
.connections-grid { grid-template-columns: 1fr; gap: 28px; }
.connections-grid > section + section { border-top: 1px solid var(--border-color); padding-top: 28px; }
.connection-empty { flex-wrap: wrap; }
.connection-empty > div { flex: 1; min-width: 180px; }
.connection-empty > a { margin-left: 40px; }
.connection-resource-actions { flex-basis: 100%; }
}
.paper-table-empty-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.paper-table-empty-actions .btn > i { font-size: 1em; line-height: 1; color: inherit; margin-right: 0 !important; }
.auth-back { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-muted); margin-bottom: 48px; }
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.auth-intro, .auth-options { padding-top: 28px; }
.auth-title-mobile { display: none; }
.auth-intro .paper-page-title { font-size: clamp(48px, 5vw, 76px); line-height: 1.06; margin: 18px 0 24px; }
.auth-intro .paper-page-lede { max-width: 330px; }
.auth-options { display: grid; gap: 28px; }
.auth-options h2 { font-family: inherit; font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.auth-options p { font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.auth-options .auth-existing { font-size: 12px; border-left: 2px solid var(--accent); padding-left: 14px; margin: 0; }
.auth-permissions { padding: 6px 0 12px; list-style: none; font-size: 13px; line-height: 1.6; }
.auth-permissions li { display: flex; gap: 10px; margin: 12px 0; }
.auth-permissions i { color: var(--status-ready); margin-top: 4px; }
.auth-continue { display: flex !important; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 16px !important; }
.auth-options small { display: block; font-size: 12px; text-align: center; color: var(--ink-muted); margin-top: 12px; }
.auth-legacy { border-top: 1px solid var(--border-color); padding-top: 24px; }
.auth-legacy h2 { font-size: 16px; margin: 0; }
.auth-legacy p { font-size: 13px; }
.source-url-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.source-url-label-row > .paper-field-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color);
margin-bottom: 6px;
display: block;
}
.repo-access { margin: 0; }
.repo-access-details { margin: 12px 0 24px; }
.source-url-label-row .repo-access-switch { padding: 2px; }
.source-url-label-row .repo-access-switch button { padding: 6px 10px; font-size: 12px; line-height: 20px; }
.repo-access-main { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; flex-wrap: wrap; }
.repo-access-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.repo-access-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border-color); border-radius: 7px; flex-wrap: wrap; }
.repo-access-switch button { border: 0; border-radius: 4px; background: transparent; color: var(--ink-muted); padding: 7px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.repo-access-switch button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); opacity: 1; cursor: default; font-weight: 600; }
.repo-access-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.repo-access-details .btn { font-size: 12px; padding: 8px 12px; }
.repo-access-note { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 0; color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
@media (max-width: 767px) {
.auth-page { max-width: 480px; }
.auth-back, .auth-intro .paper-eyebrow, .auth-title-desktop { display: none; }
.auth-title-mobile { display: inline; }
.auth-layout { grid-template-columns: 1fr; gap: 24px; }
.auth-intro, .auth-options { padding-top: 0; }
.auth-intro .paper-page-title { font-size: 40px; line-height: 1.15; margin: 6px 0 12px; }
.auth-intro .paper-page-lede { max-width: none; font-size: 14px; margin: 0; }
.auth-options { gap: 24px; }
.auth-options .connection-top { margin-bottom: 16px; }
.auth-options h2 { font-size: 18px; }
.auth-options p { font-size: 13px; margin-bottom: 12px; }
.auth-permissions { padding: 0; margin: 14px 0 20px; font-size: 12px; }
.auth-permissions li { margin: 8px 0; }
.auth-continue { font-size: 14px; }
.auth-legacy { padding-top: 20px; }
.auth-legacy h2 { font-size: 15px; }
.auth-legacy .connection-link { min-height: 44px; }
.repo-access-controls { width: 100%; gap: 12px; }
}
/* Bootstrap's muted utility must use the same accessible colors as our copy. */
.text-muted { color: var(--ink-muted) !important; }
.draft-status,
.anonymize-review-note { font-size: 13px; color: var(--ink-muted); }
.anonymize-review-note { padding: 12px 0; margin: 0; }
.anonymize-preview-status { padding: 20px 32px; color: var(--ink-muted); }
.anonymize-preview-status p { margin: 0 0 12px; }
@media (max-width: 575px) {
.dashboard-page .paper-page-lede { margin-bottom: 8px; }
.dashboard-page .dashboard-heading-actions { gap: 4px; }
.dashboard-page .dashboard-connections-link { min-height: 32px; }
.dashboard-page .dashboard-filter-row { margin-top: 12px; }
.anonymize-preview-status { padding: 16px; }
}
/* Working screens: readable typography and clear groups on the warm canvas. */
.paper-page .paper-page-title { font-size: 32px; }
.paper-page.admin-page .paper-page-title { font-size: 28px; }
.paper-page .paper-page-lede { font-size: 14px; line-height: 1.5; }
.paper-settings { padding-top: 32px; }
.paper-settings-body { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; margin-top: 24px; padding-top: 24px; border-top: 0; }
.paper-settings-main .paper-settings-section { background: var(--paper-card); border: 1px solid var(--border-color); border-radius: var(--radius-surface); padding: 20px; margin-bottom: 16px; }
.paper-settings .paper-section-eyebrow,
.anonymize-page .paper-section-eyebrow { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--color); text-transform: none; letter-spacing: -0.01em; margin-bottom: 12px; }
.paper-settings .paper-settings-toc-head { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.paper-settings-section .paper-section-copy { margin-top: 0; }
.paper-settings .quota-row { gap: 24px; }
.paper-settings .quota-header { flex-direction: column; align-items: flex-start; gap: 4px; }
.paper-settings .quota-value { white-space: nowrap; }
.paper-settings .paper-settings-footer { padding: 0 0 20px; }
.paper-settings .form-control { font-size: 14px; border-color: var(--border-color); border-radius: var(--radius-control); }
.paper-settings .form-check { padding-top: 8px; padding-bottom: 8px; }
.paper-page .btn-ink, .anonymize-page .btn-ink { background: var(--accent); color: #fff; border-color: var(--accent); }
.dark-mode .paper-page .btn-ink, .dark-mode .anonymize-page .btn-ink { color: #1A1815; }
.paper-page .btn-ink:hover, .anonymize-page .btn-ink:hover { background: var(--accent); border-color: var(--accent); color: #fff; filter: brightness(.94); }
.dark-mode .paper-page .btn-ink:hover, .dark-mode .anonymize-page .btn-ink:hover { color: #1A1815; }
.paper-page .btn-ink:active, .anonymize-page .btn-ink:active { filter: brightness(.9); }
input[type="date"], select { color-scheme: light; }
.dark-mode input[type="date"], .dark-mode select { color-scheme: dark; }
.draft-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 0; }
.draft-discard { padding: 0; border: 0; color: var(--accent); font: inherit; font-size: 13px; text-decoration: underline; background: transparent; cursor: pointer; }
.conference-feedback { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin-top: 16px; background: var(--paper-card); border: 1px solid var(--border-color); border-radius: var(--radius-surface); width: 100%; }
.paper-table { background: var(--paper-card); border: 1px solid var(--border-color); border-radius: var(--radius-surface); margin-top: 12px; }
.paper-table .paper-table-head { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 12px; background: var(--paper-bg-alt); border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
.paper-table .paper-table-head, .paper-table .paper-table-row { padding-left: 16px; padding-right: 16px; }
/* Dashboard: a compact header, quiet controls, and fixed row actions. */
.dashboard-page {
--dashboard-space-xs: 4px;
--dashboard-space-sm: 8px;
--dashboard-space-md: 12px;
--dashboard-space-lg: 16px;
--dashboard-space-xl: 24px;
padding-top: var(--dashboard-space-xl);
}
.project-icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.project-type-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.project-empty-icon { width: 28px; height: 28px; color: var(--ink-faint); }
.project-type-icon { display: inline-flex; color: var(--ink-muted); flex-shrink: 0; }
.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dashboard-space-lg); }
.dashboard-heading .paper-page-title { font-size: 28px; margin-bottom: var(--dashboard-space-xs); }
.dashboard-heading .paper-page-lede { display: none; }
.dashboard-heading .btn { min-height: 40px; display: inline-flex; gap: var(--dashboard-space-sm); align-items: center; }
.dashboard-new-mobile { display: none; }
.dashboard-quota { position: relative; margin: 0; padding: 0; border: 0; background: transparent; }
.dashboard-quota > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--paper-card); color: var(--color); font-family: var(--font-sans); font-size: 12px; cursor: pointer; list-style: none; white-space: nowrap; }
.dashboard-quota > summary::-webkit-details-marker { display: none; }
.dashboard-quota > summary:hover, .dashboard-quota[open] > summary { background: var(--paper-bg-alt); border-color: var(--ink-faint); }
.quota-summary-label { font-weight: 600; }
.quota-summary-value { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.quota-summary-ring { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke-width: 2.5; }
.quota-ring-track { stroke: var(--border-color); }
.quota-ring-fill { stroke: var(--accent); transform: rotate(-90deg); transform-origin: 50% 50%; }
.quota-summary-ring.quota-warn .quota-ring-fill { stroke: var(--status-progress); }
.quota-summary-ring.quota-danger .quota-ring-fill { stroke: var(--status-error); }
.quota-ring-unlimited { stroke: var(--accent); stroke-width: 1.7; }
.quota-summary-chevron { width: 14px; height: 14px; margin-left: 2px; color: var(--ink-muted); transition: transform .15s ease; }
.dashboard-quota[open] .quota-summary-chevron { transform: rotate(180deg); }
.dashboard-quota .quota-panel { position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: 344px; max-width: calc(100vw - 36px); padding: 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--paper-card); box-shadow: 0 12px 36px rgba(26,24,21,.16); }
.quota-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.quota-panel-heading h2 { font: 600 15px var(--font-sans); margin: 0; }
.quota-panel-heading .project-close { margin: -8px -8px -8px 0; }
.paper-page .quota-usage { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; }
.quota-usage .quota-item + .quota-item { padding-top: 16px; border-top: 1px solid var(--border-soft, var(--border-color)); }
.quota-usage .quota-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.quota-usage .quota-label { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.quota-usage .quota-label .project-type-svg { width: 16px; height: 16px; }
.quota-usage .quota-value { display: flex; align-items: baseline; gap: 4px; font: 12px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); margin-bottom: 8px; }
.quota-usage .quota-value strong { font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--color); }
.quota-percent, .quota-usage .quota-unlimited-tag { margin-left: auto; padding: 2px 6px; border-radius: 4px; background: var(--paper-bg-alt); font: 11px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.quota-warn > .quota-header .quota-percent { color: var(--status-progress); }
.quota-danger > .quota-header .quota-percent { color: var(--status-error); }
.quota-usage .quota-track { height: 5px; border: 0; background: var(--paper-bg-alt); }
.quota-usage .quota-track .quota-fill { min-width: 0; background: var(--accent); }
.quota-remaining { margin: 6px 0 0; color: var(--ink-muted); font-size: 11px; }
.quota-remaining.quota-limit { color: var(--status-error); }
.quota-loading { font-size: 12px; color: var(--ink-muted); margin: 12px 0 0; }
.dashboard-page .dashboard-filter-row { display: flex; align-items: center; gap: var(--dashboard-space-md); padding: 0; margin: var(--dashboard-space-lg) 0 0; border: 0; background: transparent; }
.dashboard-page .dashboard-filter-row .search-wrap { flex: 1 1 240px; min-width: 0; }
.dashboard-page .dashboard-filter-row .form-control { height: 40px; padding: 8px 12px; font-size: 13px; background: var(--paper-card); }
.dashboard-page .dashboard-filter-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--dashboard-space-sm); }
.dashboard-extra-filters { display: flex; gap: var(--dashboard-space-sm); }
.dashboard-filters-toggle { display: none; }
.dashboard-page .dashboard-filter-row .btn-group .btn { border: 0; background: transparent; border-radius: 6px; height: 36px; padding: 6px 10px; }
.dashboard-page .dashboard-filter-row .btn-group .btn.btn-primary { background: var(--accent-soft); color: var(--accent); }
.dashboard-page .dashboard-filter-row .btn-group .btn.btn-primary:hover,
.dashboard-page .dashboard-filter-row .btn-group .btn.btn-primary:active { background: var(--accent-soft) !important; color: var(--accent); }
.dashboard-page .dashboard-filter-row .dropdown-toggle { height: 36px; padding: 6px 10px; }
.dashboard-type-filter .project-type-svg { display: none; }
.sort-direction { width: 14px; height: 14px; }
.sort-direction.ascending { transform: rotate(180deg); }
.dashboard-page .dashboard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dashboard-space-sm) var(--dashboard-space-md); margin: var(--dashboard-space-md) 0 0; padding: 0; }
.dashboard-view-tabs { display: flex; align-items: center; gap: var(--dashboard-space-lg); }
.dashboard-view-short { display: none; }
.dashboard-view-tabs button { min-height: 36px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink-muted); padding: 4px 0; }
.dashboard-view-tabs button[aria-pressed="true"] { color: var(--color); border-bottom-color: var(--color); font-weight: 600; }
.attention-count { padding: 1px 5px; margin-left: 4px; border-radius: 4px; background: var(--paper-bg-alt); font-size: 11px; font-variant-numeric: tabular-nums; }
.attention-count.has-attention { color: var(--status-error); }
.dashboard-count { margin-left: auto; font-size: 12px; color: var(--ink-muted); }
.dashboard-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dashboard-space-sm); width: 100%; }
.dashboard-page .filter-chip { display: inline-flex; font-family: var(--font-sans); font-size: 11px; text-transform: none; letter-spacing: 0; border-radius: 6px; }
.dashboard-page .filter-chip .project-type-svg { width: 12px; height: 12px; margin-left: 4px; }
.dashboard-page .filter-chip-close { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; margin: -2px -4px -2px 2px; }
.dashboard-page .btn-link-inline { color: var(--ink-muted); font-size: 12px; }
.dashboard-page .paper-table-dashboard { margin-top: var(--dashboard-space-md); border-left: 0; border-right: 0; border-radius: 0; }
.dashboard-page .paper-table-dashboard .paper-table-head, .dashboard-page .paper-table-dashboard .paper-table-row { grid-template-columns: minmax(280px,3fr) 180px 72px 148px 64px; gap: var(--dashboard-space-lg); padding: 8px 12px; }
.dashboard-page .paper-table-dashboard .paper-table-head { border-radius: 0; }
.dashboard-page .paper-table .cell-anon { gap: var(--dashboard-space-sm); }
.dashboard-page .paper-table .anon-text { flex: 1; }
.dashboard-page .paper-table .repo-name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.dashboard-page .paper-table .anon-sub { display: flex; align-items: center; gap: var(--dashboard-space-sm); min-width: 0; }
.anonymous-id { font-size: 12px; font-family: var(--font-mono); color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page .paper-table .type-badge { font-family: var(--font-sans); letter-spacing: 0; font-size: 11px; text-transform: none; border-radius: 6px; }
.dashboard-page .paper-table .status-sub { font-size: 12px; }
.dashboard-page .paper-table .cell-conf { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.dashboard-page .conf-tag .project-type-svg { width: 14px; height: 14px; }
.dashboard-row-meta { display: contents; }
.dashboard-page .cell-actions { gap: 0; align-items: center; }
.copy-link-inline, .dashboard-page .btn-icon-dots, .project-close { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); padding: 0; width: 32px; height: 32px; min-width: 32px; cursor: pointer; }
.copy-link-inline:hover, .copy-link-inline:focus-visible, .dashboard-page .btn-icon-dots:hover, .project-close:hover { background: var(--accent-soft); color: var(--accent); }
.copy-link-inline:disabled { opacity: .5; cursor: wait; }
.mobile-meta-icon { display: none; }
.project-attention-action { display: inline-block; color: var(--accent); border: 0; background: transparent; padding: 0; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.project-attention-action { text-align: left; }
.dashboard-page .cell-status .project-attention-action { flex-basis: 100%; }
.project-details-row { width: 100%; border-bottom: 1px solid var(--border-color); }
.project-details { padding: var(--dashboard-space-xl); background: var(--paper-bg-alt); }
.project-details-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--dashboard-space-sm); }
.project-details-heading h2 { font: 600 16px var(--font-sans); margin: 0; }
.project-details-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dashboard-space-md) var(--dashboard-space-xl); margin: 12px 0; }
.project-details-list dt { font-size: 12px; color: var(--ink-muted); font-weight: 500; margin-bottom: 4px; }
.project-details-list dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.project-details-list code { color: var(--color); font-size: 12px; }
.project-name-form { margin-top: var(--dashboard-space-lg); padding-top: var(--dashboard-space-lg); border-top: 1px solid var(--border-color); }
.project-name-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.project-name-form p, .project-progress-help { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }
.project-name-controls { display: flex; gap: var(--dashboard-space-sm); max-width: 560px; }
.project-name-controls .form-control { min-width: 0; font-size: 14px; }
.project-name-controls .btn { flex-shrink: 0; min-height: 40px; }
.project-name-form .project-name-error { color: var(--status-error); }
.project-details-button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; color: var(--ink-muted); cursor: pointer; }
/* Anonymization: distinct settings and reviewer panes, with a mobile switch. */
.anonymize-page .anonymize-topbar-title { font-family: var(--font-sans); font-size: 28px; font-weight: 600; }
.anonymize-topbar { padding: 16px 24px; }
.anonymize-form-col { background: var(--paper-bg-alt); }
.anonymize-form-col .paper-settings-main { padding: 20px 24px; }
.anonymize-form-col .paper-settings-section { padding: 18px; }
.anonymize-form-col .paper-settings-section:first-child { padding-top: 18px; }
.anonymize-form-col .anonymize-submit-bar { background: var(--paper-bg-alt); padding: 12px 0; }
.anonymize-preview-head .paper-eyebrow { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--color); text-transform: none; letter-spacing: 0; }
.anonymize-preview-col { background: var(--canvas-bg-color); padding: 24px; }
.anonymize-preview-head { flex-wrap: wrap; gap: 6px 12px; margin-bottom: 16px; }
.anonymize-preview-body { padding: 24px; }
.anonymize-mobile-tabs, .mobile-preview-jump, .anonymize-preview-empty { display: none; }
.anonymize-page .repo-access-note { font-size: 12px; }
@media (max-width: 900px) {
.paper-settings-body { grid-template-columns: 1fr; gap: 18px; }
.paper-settings-toc { padding: 0; }
.paper-settings-toc-head { display: none; }
.paper-table .paper-table-row { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 767px) {
.paper-page .paper-page-title, .anonymize-page .paper-page-title { font-size: 24px; }
.paper-settings { padding: 20px 16px 40px; }
.paper-settings-main .paper-settings-section { padding: 16px; }
.anonymize-topbar { padding: 12px 16px; }
.anonymize-topbar .paper-crumbs { display: none; }
.anonymize-mobile-tabs { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border-color); background: var(--paper-card); }
.anonymize-mobile-tabs button { flex: 1; font: inherit; font-size: 13px; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); }
.anonymize-mobile-tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.anonymize-page:not(.mobile-preview-active) .anonymize-preview-col { display: none; }
.mobile-preview-active .anonymize-form-col { display: none; }
.mobile-preview-active .anonymize-preview-empty { display: block; padding: 24px 16px; color: var(--ink-muted); }
.anonymize-form-col .paper-settings-main { padding: 16px; }
.anonymize-form-col .anonymize-submit-bar { background: var(--paper-bg-alt); }
.mobile-preview-jump { display: block; width: 100%; min-height: 44px; }
.anonymize-preview-col { padding: 16px; }
.anonymize-preview-body { padding: 16px; }
}
@media (max-width: 575px) {
.paper-settings .quota-header { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
.dashboard-page .dashboard-filter-row { flex-wrap: wrap; }
.dashboard-page .dashboard-filter-row .search-wrap { flex-basis: 100%; }
.dashboard-page .dashboard-filter-controls { width: 100%; justify-content: space-between; }
}
@media (max-width: 900px) {
.dashboard-page .paper-table.paper-table-dashboard .paper-table-row { gap: 4px 8px; padding: 8px 12px; }
.dashboard-page .paper-table .cell-anon { flex: 1 1 calc(100% - 96px); min-width: 0; }
.dashboard-page .paper-table .cell-actions { flex: 0 0 88px; }
.dashboard-row-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; order: 3; width: 100%; }
.dashboard-page .dashboard-row-meta .cell-status { flex: 1 1 80px; flex-wrap: wrap; gap: 2px 8px; }
.dashboard-page .dashboard-row-meta .cell-views, .dashboard-page .dashboard-row-meta .cell-expires { flex-shrink: 0; font-size: 12px; }
.dashboard-page .cell-views::before, .dashboard-page .cell-expires::before { content: none; }
.dashboard-page .mobile-meta-icon { display: inline-block; width: 14px; height: 14px; }
.dashboard-page .dashboard-row-meta .status-sub-date { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dashboard-page .dashboard-row-meta .status-sub-error, .dashboard-page .dashboard-row-meta .status-sub-warn { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
.dashboard-page .dashboard-row-meta .status-sub::before { content: none; }
.dashboard-page .project-attention-action { min-height: 44px; display: inline-flex; align-items: center; }
.dashboard-page .paper-table .anon-sub .commit-hash, .dashboard-page .paper-table .anon-sub .conf-tag { display: none; }
}
@media (max-width: 767px) {
.container.dashboard-page { padding-top: 12px; }
.dashboard-heading .paper-page-title { font-size: 24px; }
.dashboard-heading-actions .btn-ink { min-height: 44px; }
.dashboard-new-label { display: none; }
.dashboard-new-mobile { display: inline; }
.dashboard-quota > summary { min-height: 44px; gap: 6px; padding: 10px; font-size: 12px; line-height: 20px; }
.dashboard-quota .quota-panel { max-height: calc(100dvh - 184px); overflow-y: auto; overscroll-behavior: contain; }
.dashboard-page .dashboard-filter-row { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dashboard-page .dashboard-filter-row .search-wrap { flex: 1 1 0; }
.dashboard-page .dashboard-filter-row .form-control { height: 44px; }
.dashboard-page .dashboard-filters-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 8px; min-height: 44px; background: transparent; border: 0; }
.dashboard-page .dashboard-filter-controls { display: none; width: 100%; }
.dashboard-page .dashboard-filter-controls.expanded { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-page .dashboard-filter-controls .btn-group { width: 100%; display: flex; }
.dashboard-page .dashboard-filter-controls .btn-group .btn { flex: 1; min-height: 44px; }
.dashboard-extra-filters { display: flex; width: 100%; }
.dashboard-page .dashboard-extra-filters .dropdown { flex: 1; min-width: 0; }
.dashboard-page .dashboard-extra-filters .dropdown-toggle { width: 100%; height: 44px; }
.dashboard-type-filter .type-filter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dashboard-type-filter .project-type-svg { display: inline-block; }
.dashboard-page .dashboard-meta { margin-top: 8px; gap: 4px 8px; }
.dashboard-view-tabs { gap: 16px; }
.dashboard-view-tabs button { min-width: 44px; min-height: 44px; font-size: 12px; }
.dashboard-count { font-size: 11px; }
.dashboard-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.dashboard-view-long { display: none; }
.dashboard-view-short { display: inline; }
.dashboard-active-filters { display: contents; }
.dashboard-page .filter-chip { font-size: 11px; padding: 0 8px; min-height: 44px; gap: 4px; }
.dashboard-page .filter-chip-close { min-width: 44px; min-height: 44px; margin: 0; }
.dashboard-page .btn-link-inline { min-height: 44px; font-size: 12px; }
.dashboard-page .paper-table-dashboard {
width: calc(100% + 36px);
margin: 8px -18px 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.dashboard-page .paper-table .repo-name { font-size: 13px; }
.project-details { padding: 16px 12px; }
.project-details-list { grid-template-columns: 1fr; gap: 12px; }
.project-name-controls { flex-wrap: wrap; }
.project-name-controls .form-control { flex-basis: 100%; }
.project-name-controls .btn { min-height: 44px; }
}
@media (max-width: 360px) {
.dashboard-attention-prefix { display: none; }
.dashboard-attention-prefix + span { text-transform: capitalize; }
}
/* Shared application styling, applied to every route and shared control. */
.ui-icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { display: inline-block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; }
.ui-icon.sort-direction { width: 14px; height: 14px; }
.pr-title-row { display: flex; align-items: flex-start; gap: 16px; }
.pr-title-row .pr-title { flex: 1; min-width: 0; }
.pr-title-row > .btn { flex-shrink: 0; }
.ui-icon.record-type-icon { color: var(--ink-muted); }
.btn .ui-icon, .dropdown-item .ui-icon { width: 16px; height: 16px; }
.btn-icon-dots .ui-icon { width: 18px; height: 18px; }
.paper-page .paper-page-title, .anonymize-page .paper-page-title { font-size: 28px; }
.paper-page, .paper-faq { padding-top: 24px; }
.paper-page .paper-page-lede { margin-bottom: 16px; overflow-wrap: anywhere; }
.paper-page-title { overflow-wrap: anywhere; }
.paper-page .form-control, .anonymize-page .form-control { min-height: 40px; font-family: var(--font-sans); font-size: 14px; border-radius: var(--radius-control); }
.paper-page textarea.form-control, .anonymize-page textarea.form-control { height: auto; }
/* Regular actions use 14px labels; table tools use the compact size. */
.paper-page .btn, .anonymize-page .btn, .status-bar-actions .btn {
min-height: var(--button-height); padding: 7px var(--button-padding-x);
font: 500 var(--button-font-size)/var(--button-line-height) var(--font-sans);
border-radius: var(--radius-button); gap: 6px;
}
.paper-page .btn.btn-sm, .anonymize-page .btn.btn-sm, .status-bar-actions .btn {
min-height: var(--button-compact-height); padding: 5px 10px; font-size: 13px; border-radius: 6px;
}
.paper-page .btn-ink, .anonymize-page .btn-ink { min-height: 40px; padding: 9px 15px; }
.btn > .ui-icon, .btn > .project-type-svg, .btn > i, .btn-hero > i { width: 16px; height: 16px; margin: 0 !important; flex-shrink: 0; }
.btn.dropdown-toggle::after { margin-left: 0; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }
.btn:disabled:hover, .btn.disabled:hover { filter: none; }
.paper-page .btn.btn-link { background: transparent; border-color: transparent; }
.auth-continue.btn { min-height: 44px; padding: 11px 16px !important; }
.paper-page .btn.btn-icon, .anonymize-page .btn.btn-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; }
.paper-page .btn.btn-icon-dots { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink-muted); }
.paper-page .btn-icon-dots:hover { background: var(--accent-soft); color: var(--accent); }
.paper-page .btn-group .btn-primary:hover, .paper-page .btn-group .btn-primary:active { background: var(--accent-soft) !important; color: var(--accent); }
.paper-page .paper-section-eyebrow { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--color); text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
.paper-page .paper-field-label { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.paper-tabs .paper-tab { min-height: 44px; }
.paper-pill, .status-pill { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; border-radius: 6px; }
.paper-meta-rule { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; gap: 12px 24px; }
.paper-meta-rule b:not(.commit-hash) { font-family: var(--font-sans); font-weight: 500; }
.connections-grid { gap: 16px; }
.connections-grid > section { background: var(--paper-card); border: 1px solid var(--border-color); border-radius: var(--radius-surface); padding: 20px; }
.connections-heading { margin-bottom: 24px; }
.status-page > .paper-settings-section, .claim-page .claim-form { padding: 20px; margin-top: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-surface); background: var(--paper-card); }
.claim-page .claim-form { max-width: 640px; }
.status-page .anonymize-submit-bar { background: transparent; gap: 8px; flex-wrap: wrap; }
.anonymize-landing { padding-top: 32px; }
.paper-settings .quota-usage { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.paper-settings .quota-usage .quota-item + .quota-item { padding-top: 0; border-top: 0; padding-left: 16px; border-left: 1px solid var(--border-color); }
.paper-settings .quota-usage .quota-header { flex-direction: row; align-items: center; flex-wrap: wrap; }
.paper-settings .quota-usage .quota-value { white-space: normal; flex-wrap: wrap; }
.paper-faq-hero { padding-bottom: 24px; margin-bottom: 24px; }
.paper-faq-toc-head { font-family: var(--font-sans); font-size: 12px; text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.paper-faq-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.paper-faq-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 13em; margin-bottom: 16px; text-wrap: balance; }
.paper-faq-title em { font-style: italic; color: var(--accent); }
.paper-faq-lede { font-size: 14px; }
.paper-faq-body { grid-template-columns: 180px minmax(0,1fr); gap: 40px; }
.faq-section h4.faq-cat { font: 400 30px/1.15 var(--font-serif); letter-spacing: -0.015em; padding-bottom: 12px; }
.faq-section h4.faq-cat .ui-icon { display: none; }
.faq-section .panel-group { margin-bottom: 32px; }
.faq-section .panel-default .panel-title a { font: 500 15px/1.5 var(--font-sans); padding: 16px 0 16px 28px; min-height: 44px; }
.faq-section .panel-default .panel-body { padding-left: 28px !important; }
.faq-section .panel-default .panel-title a:after {
content: "";
top: 22px;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--ink-soft);
border-bottom: 1.5px solid var(--ink-soft);
transform: translateX(4px) rotate(45deg);
transition: transform 0.15s ease;
}
.faq-section .panel-default .panel-title a.collapsed:after {
content: "";
transform: translateX(2px) rotate(-45deg);
}
.faq-section .panel-default .panel-title a:hover:after { border-color: var(--color); }
.paper-faq-toc nav a.active { color: var(--color); font-weight: 500; }
.paper-empty-title { font: 600 32px/1.2 var(--font-sans); letter-spacing: -.025em; }
.paper-empty-title em { font-style: normal; }
.btn-hero { justify-content: center; gap: 8px; min-height: 48px; padding: 13px 20px; font-size: 15px; line-height: 20px; background: var(--accent); border-color: var(--accent); color: #fff; border-radius: var(--radius-button); }
/* Solid fills keep a 600-700 shade with white text in both themes. */
.dark-mode .btn-hero { background: #1F6A64; border-color: #1F6A64; color: #fff; }
.btn-hero:hover { background: var(--accent); color: #fff; filter: brightness(.94); }
.dark-mode .btn-hero:hover { background: #24786F; border-color: #24786F; color: #fff; filter: none; }
.paper-table:not(.paper-table-dashboard) { border-left: 0; border-right: 0; border-radius: 0; }
.paper-table:not(.paper-table-dashboard) .paper-table-head { border-radius: 0; }
.paper-table .cell-anon { gap: 8px; }
.paper-table .cell-anon .anon-text { flex: 1; }
.paper-table-conferences .cell-anon .repo-name { font-family: var(--font-sans); font-weight: 600; }
.paper-table .anon-sub > span, .paper-table .anon-sub > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.paper-table .anon-sub .ui-icon { width: 14px; height: 14px; }
.paper-page .filter-chip { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; border-radius: 6px; }
.paper-page .filter-chip-close .ui-icon { width: 12px; height: 12px; }
.admin-nav { gap: 4px; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; padding: 0 0 8px; background: transparent; }
.admin-nav a { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; border-radius: 6px; min-height: 40px; padding: 8px 12px; }
.admin-nav a.active { background: var(--accent-soft); color: var(--accent); }
.admin-nav .ui-icon { width: 16px; height: 16px; }
.admin-filter-toolbar { background: transparent; border: 0; padding: 0; }
.admin-filter-inline > label, .admin-filter-inline > span { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.admin-summary .summary-total { font-family: var(--font-sans); font-size: 18px; font-weight: 600; }
.admin-summary .summary-pill { font: 500 13px/20px var(--font-sans); min-height: 32px; padding: 5px 10px; border-radius: 6px; }
.admin-summary .summary-pill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.admin-summary .summary-pill .count { font-family: var(--font-sans); }
.admin-active-chip { font-family: var(--font-sans); font-size: 12px; }
.admin-active-chip button .ui-icon { width: 12px; height: 12px; }
.user-detail-card .user-header h2 { font: 600 20px/1.4 var(--font-sans); }
.user-detail-grid .detail-label, .paper-detail-grid .detail-label, .paper-progress .paper-progress-label, .status-page .paper-error-eyebrow, .errors-page .volume-head, .errors-page .errors-toolbar .select-wrap label, .overview-page .ov-panel-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.paper-error-title, .overview-page .ov-chart-title, .overview-page .ov-panel-title { font: 600 16px/1.4 var(--font-sans); }
.paper-error-head > .ui-icon, .paper-ratelimit-head > .ui-icon { margin-top: 3px; color: var(--status-error); }
.paper-ratelimit-head > .ui-icon { color: var(--status-progress); }
.errors-page .seg-tabs { border-radius: var(--radius-control); }
.errors-page .seg-tabs button { min-height: 36px; padding: 7px 12px; font: 500 14px/20px var(--font-sans); }
.errors-page .seg-tabs button.active { background: var(--accent-soft); color: var(--accent); }
.overview-page .ov-chart-card, .overview-page .ov-panel-card, .errors-page .volume-chart, .errors-page .errors-list, .errors-page .kpi-card:hover { box-shadow: none; }
.overview-page .ov-kpi-value, .overview-page .ov-daily-value, .errors-page .kpi-value, .q-card-count, .user-hero-name { font-family: var(--font-sans); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.overview-page .ov-kpi-label, .overview-page .ov-daily-label, .errors-page .kpi-label, .q-card-name, .q-section-label, .user-hero-details .detail-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; }
.overview-page .ov-daily-card { background: var(--paper-card); box-shadow: none; border-radius: var(--radius-surface); }
.overview-page .ov-daily-value, .dark-mode .overview-page .ov-daily-value { color: var(--accent); }
.overview-page .ov-kpi-card, .errors-page .kpi-card { box-shadow: none; border-radius: var(--radius-surface); }
.q-card { border-radius: var(--radius-surface); }
.q-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.q-range-btns { border-radius: var(--radius-control); }
.q-range-btns .btn, .q-job-detail-actions .btn { font-family: var(--font-sans); font-size: 13px; }
.q-range-btns .btn.active { background: var(--accent-soft); color: var(--accent); }
.btn-dark { border-radius: var(--radius-control); font-family: var(--font-sans); font-size: 12px; }
@media (max-width: 900px) {
.paper-settings .quota-usage { grid-template-columns: 1fr; gap: 16px; }
.paper-settings .quota-usage .quota-item + .quota-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-color); padding-top: 16px; }
.paper-table:not(.paper-table-dashboard) .paper-table-row { gap: 4px 8px !important; padding: 8px 12px; }
.paper-table:not(.paper-table-dashboard) .cell-anon { flex: 1 1 calc(100% - 52px); order: 1; }
.paper-table:not(.paper-table-dashboard) .cell-actions { order: 2; flex: 0 0 44px; }
.paper-table.paper-table-repos.has-bulk .paper-table-row > [role=cell]:first-child, .paper-table .admin-users-row > [role=cell]:first-child { flex: 0 0 24px; order: 0; }
.paper-table.paper-table-repos.has-bulk .cell-anon, .paper-table .admin-users-row .cell-anon { flex-basis: calc(100% - 84px); }
.paper-table:not(.paper-table-dashboard) .cell-anon .anon-sub { font-size: 12px; gap: 6px; }
.paper-table:not(.paper-table-dashboard) .cell-status .status-sub { font-size: 12px; }
.paper-table .cell-views::before, .paper-table .cell-expires::before { content: none; }
.paper-table .cell-views .mobile-meta-icon, .paper-table .cell-expires .mobile-meta-icon { display: inline-block; width: 14px; height: 14px; }
.paper-faq-body { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
.paper-page, .paper-faq { padding-top: 20px; }
.paper-page .paper-page-title, .paper-page.admin-page .paper-page-title, .anonymize-page .paper-page-title { font-size: 24px; }
.paper-faq-title { font-size: 40px; }
.paper-page .form-control, .anonymize-page .form-control { min-height: 44px; }
.paper-page .btn, .anonymize-page .btn, .paper-settings-toc nav a, .connection-link, .draft-discard, .paper-faq-toc a { min-height: 44px; }
.paper-page .btn, .anonymize-page .btn, .status-bar-actions .btn {
min-height: 44px; padding: 11px 14px; font-size: 14px; line-height: 20px; white-space: normal;
}
.paper-page .btn.btn-sm, .anonymize-page .btn.btn-sm { min-height: 44px; padding: 11px 12px; font-size: 14px; }
.paper-page .btn.btn-icon, .anonymize-page .btn.btn-icon, .paper-page .btn.btn-icon-dots, .copy-link-inline, .project-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.dashboard-page .dashboard-filter-row .btn-group .btn, .dashboard-page .dashboard-filter-row .dropdown-toggle { height: auto; min-height: 44px; font-size: 14px; padding: 11px 10px; }
.dashboard-heading-actions .btn-ink { padding: 11px 16px; }
.dashboard-page .dashboard-filters-toggle { padding: 11px 10px; }
.pr-title-row .btn, .status-bar-actions .btn, .errors-page .btn-icon { min-width: 44px; min-height: 44px; padding: 0; }
.status-bar-actions .btn { width: 44px; height: 44px; }
.errors-page .seg-tabs button, .paper-tab { min-height: 44px; }
.errors-page .seg-tabs button { padding: 11px 12px; }
.status-bar-actions { flex-wrap: wrap; max-width: 100%; }
.leftCol-close, .tree-search-clear { min-width: 44px; min-height: 44px; }
.anonymize-landing { padding: 20px 18px; }
.anonymize-landing .repo-access-switch button, .source-url-label-row .repo-access-switch button { min-height: 44px; padding: 11px 10px; font-size: 13px; }
.paper-settings-body { margin-top: 16px; padding-top: 0; gap: 16px; }
.paper-settings-toc nav { gap: 0 12px; }
.paper-settings-toc nav a { display: inline-flex; align-items: center; }
.paper-faq { padding-left: 18px; padding-right: 18px; }
.paper-faq-toc nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 16px; }
.paper-faq-toc a { display: inline-flex; align-items: center; padding: 8px 0; border-left: 0; border-bottom: 2px solid transparent; margin-left: 0; }
.paper-faq-toc nav a:hover, .paper-faq-toc nav a.active { border-bottom-color: var(--accent); color: var(--accent); }
.status-page > .paper-settings-section, .claim-page .claim-form { padding: 16px; margin-top: 16px; }
.admin-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; max-width: 100%; margin: 8px 0 16px; }
.admin-nav a { flex-shrink: 0; min-height: 44px; }
.admin-summary .summary-pill { min-height: 44px; padding: 11px 12px; font-size: 14px; }
.admin-active-chip button { min-width: 44px; min-height: 44px; }
.admin-filter-row { gap: 8px; }
.admin-filter-row .admin-filter-inline { gap: 8px; flex-wrap: wrap; }
.errors-page .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.q-cards { flex-direction: row; }
.q-card { min-width: 130px; }
.q-header-actions { flex-wrap: wrap; gap: 8px; }
}
.file-error .viewer-error {
width: 100%;
max-width: 65ch;
padding: 2rem 1rem;
overflow-wrap: anywhere;
font-size: 1rem;
font-weight: 400;
text-align: left;
}
.viewer-error .paper-empty-title { margin-bottom: 1rem; }
.viewer-error p { line-height: 1.6; }
.viewer-error .paper-error-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* GitHub Markdown extensions share the document viewer's type and theme. */
.markdown-body .markdown-alert {
margin: 1rem 0;
padding: .5rem 1rem;
border-left: 4px solid var(--alert-color, #0969da);
}
.markdown-body .markdown-alert-note { --alert-color: #0969da; }
.markdown-body .markdown-alert-tip { --alert-color: #1a7f37; }
.markdown-body .markdown-alert-important { --alert-color: #8250df; }
.markdown-body .markdown-alert-warning { --alert-color: #9a6700; }
.markdown-body .markdown-alert-caution { --alert-color: #cf222e; }
.markdown-body .markdown-alert-title { color: var(--alert-color); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.markdown-body .markdown-alert-title svg { fill: currentColor; flex-shrink: 0; }
.markdown-body .markdown-alert > :last-child { margin-bottom: 0; }
body.dark-mode .markdown-alert-note { --alert-color: #79c0ff; }
body.dark-mode .markdown-alert-tip { --alert-color: #7ee787; }
body.dark-mode .markdown-alert-important { --alert-color: #d2a8ff; }
body.dark-mode .markdown-alert-warning { --alert-color: #e3b341; }
body.dark-mode .markdown-alert-caution { --alert-color: #ff7b72; }
.markdown-body .emoji { display: inline; vertical-align: text-bottom; }
.markdown-body .footnotes { margin-top: 2rem; border-top: 1px solid var(--border-color, #d0d7de); padding-top: 1rem; font-size: .875em; }
.markdown-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: .25rem 0; }
.markdown-body .markdown-diagram { margin: 1rem 0; border: 1px solid var(--border-color, #d0d7de); padding: .75rem; }
.markdown-body .markdown-diagram svg { display: block; width: 100%; max-height: 360px; }
.markdown-body .markdown-diagram path { fill: #7CC7BE; fill-opacity: .5; stroke: var(--link-color, #1F6A64); stroke-width: 1; vector-effect: non-scaling-stroke; }
.markdown-body .diagram-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.markdown-body .diagram-controls button { min-width: 44px; min-height: 44px; padding: .25rem .75rem; border: 1px solid var(--border-color, #d0d7de); background: var(--main-bg-color, white); color: inherit; border-radius: 4px; }
.markdown-body .diagram-controls button:hover { background: var(--hover-bg-color, #f6f8fa); }
.markdown-body .diagram-controls button:focus-visible { outline: 2px solid var(--link-color, #0969da); outline-offset: 2px; }
.markdown-body .hljs-keyword, .markdown-body .hljs-selector-tag { color: #cf222e; }
.markdown-body .hljs-string, .markdown-body .hljs-attr { color: #0a3069; }
.markdown-body .hljs-number, .markdown-body .hljs-literal, .markdown-body .hljs-title { color: #8250df; }
.markdown-body .hljs-comment { color: #57606a; }
body.dark-mode .markdown-body .hljs-keyword { color: #ff7b72; }
body.dark-mode .markdown-body .hljs-string, body.dark-mode .markdown-body .hljs-attr { color: #a5d6ff; }
body.dark-mode .markdown-body .hljs-number, body.dark-mode .markdown-body .hljs-literal, body.dark-mode .markdown-body .hljs-title { color: #d2a8ff; }
body.dark-mode .markdown-body .hljs-comment { color: #b1bac4; }
body:not(.dark-mode) .markdown-body .gh-dark-mode-only,
body.dark-mode .markdown-body .gh-light-mode-only { display: none; }
@media (max-width: 600px) {
.ov-cache .ov-performance-window {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
width: 100%;
}
.ov-cache .ov-performance-window select { width: 100%; min-width: 0; }
}
/* Keep the selected file's context visible while its preview arrives. */
.viewer-loading { padding: 24px clamp(16px, 4vw, 40px); min-height: 280px; color: var(--color); }
.viewer-loading-status { min-height: 84px; }
.viewer-loading-status strong { display: block; font-size: 15px; font-weight: 600; }
.viewer-loading-name { display: block; margin-top: 6px; font-family: monospace; font-size: 13px; overflow-wrap: anywhere; opacity: .75; }
.viewer-loading-status p { margin: 12px 0; font-size: 14px; }
.viewer-loading-lines { display: grid; gap: 14px; max-width: 720px; padding-top: 16px; }
.viewer-loading-lines span { height: 9px; width: 70%; background: var(--border-color); border-radius: 3px; }
.viewer-loading-lines span:nth-child(3n+1) { width: 48%; }
.viewer-loading-lines span:nth-child(3n+2) { width: 88%; }
/* Thin, themed scrollbars inside the code viewer */
.ace_scrollbar-h { height: 8px !important; }
.ace_scrollbar-h::-webkit-scrollbar { height: 8px; }
.ace_scrollbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-faint) 55%, transparent); border-radius: 4px; }
.ace_scrollbar::-webkit-scrollbar-track { background: transparent; }
/* ===== Viewer: borderless canvas =====
The content pane is the surface: no inset card, no frame. The sidebar stays
tinted, the pane is paper, and a sticky toolbar carries path, meta and actions. */
.explorer-main,
.explorer-content { background: var(--paper-card); }
.explorer-content .file-card,
.explorer-content .dir-card {
margin: 0 !important;
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.explorer-content .file-card { min-height: 100%; }
.explorer-content .file-card.is-code { height: 100% !important; overflow: clip; }
.explorer-content .file-card-head {
position: sticky;
top: 0;
z-index: 3;
min-height: 52px;
padding: 8px 12px 8px 32px;
border-radius: 0 !important;
border-bottom: 1px solid var(--border-soft);
background: color-mix(in srgb, var(--paper-card) 90%, transparent);
-webkit-backdrop-filter: saturate(1.2) blur(8px);
backdrop-filter: saturate(1.2) blur(8px);
}
.dark-mode .explorer-content .file-card-head { background: color-mix(in srgb, var(--paper-card) 90%, transparent); }
.explorer-content .file-card .file-content.markdown-body {
max-width: 880px;
padding: 36px 32px 96px;
background: transparent !important;
}
.explorer-content .file-card .ace_editor { border-radius: 0; }
.explorer-content .ace_editor.ace-chrome .ace_gutter,
.explorer-content .ace_editor.ace-nord-dark .ace_gutter {
background: var(--paper-card) !important;
border-right: 0;
}
.explorer-content .ace_editor .ace_gutter-cell { padding-left: 20px; }
.explorer-content .dir-card { border-bottom: 1px solid var(--border-soft); }
.explorer-content .dir-card-head { padding: 14px 32px; background: transparent !important; border-bottom: 0; }
.explorer-content .dir-row { padding: 0 32px; }
.explorer-content .dir-card + .file-card { margin-top: 0 !important; }
@media (max-width: 767px) {
.explorer-content .file-card-head { padding: 6px 8px 6px 16px; min-height: 0; }
.explorer-content .file-card .file-content.markdown-body { padding: 20px 16px 72px; }
.explorer-content .ace_editor .ace_gutter-cell { padding-left: 8px; }
.explorer-content .dir-card-head, .explorer-content .dir-row { padding-left: 16px; padding-right: 16px; }
}
/* ===== Viewer app shell =====
No site header on repository pages: the sidebar carries the brand, search,
tree and site links; the main pane has a single sticky toolbar. */
.leftCol-brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 52px;
padding: 0 14px;
border-bottom: 1px solid var(--border-soft);
}
.leftCol-logo {
font-family: var(--font-serif);
font-size: 19px;
letter-spacing: -0.01em;
color: var(--color) !important;
text-decoration: none !important;
white-space: nowrap;
}
.leftCol-logo em { font-style: italic; }
.leftCol-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 6px;
border-radius: 999px;
background: var(--hover-bg-color);
font-size: 11.5px;
font-weight: 500;
color: var(--ink-soft);
white-space: nowrap;
}
.leftCol-badge .ui-icon { width: 13px; height: 13px; color: var(--status-ready); }
.leftCol-search { padding-top: 12px; }
.leftCol-links {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 10px;
font-size: 13px;
}
.leftCol-links a { color: var(--ink-soft); text-decoration: none; }
.leftCol-links a:hover { color: var(--color); text-decoration: underline; text-underline-offset: 3px; }
.leftCol-theme {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-left: auto;
border: 0;
border-radius: var(--radius-control);
background: none;
color: var(--ink-soft);
cursor: pointer;
}
.leftCol-theme:hover { background: var(--hover-bg-color); color: var(--color); }
.leftCol-theme .ui-icon { width: 16px; height: 16px; }
.leftCol-foot .leftCol-zip { display: flex; }
/* Files button in the toolbar: phones/tablets always, desktop only when the tree is hidden. */
.card-files-btn { display: none !important; }
@media (max-width: 991px) { .card-files-btn { display: inline-flex !important; } }
.card-files-btn.is-needed { display: inline-flex !important; }
@media (max-width: 991px) {
.leftCol-brand { padding-right: 60px; }
.leftCol-head { position: absolute; top: 0; right: 0; z-index: 2; padding: 4px 6px !important; border: 0 !important; background: transparent !important; }
.leftCol-head .leftCol-eyebrow { display: none; }
}
@media (max-width: 991px) {
.leftCol-head .leftCol-close { width: 40px; height: 40px; border: 0 !important; background: transparent !important; border-radius: var(--radius-control); color: var(--ink-soft); }
.leftCol-head .leftCol-close:hover { background: var(--hover-bg-color) !important; color: var(--color); }
.leftCol-brand { min-height: 52px; }
}
.leftCol-links .leftCol-donate { display: inline-flex; align-items: center; gap: 5px; }
.leftCol-links .leftCol-donate .ui-icon { width: 14px; height: 14px; }
.leftCol-links .leftCol-donate:hover { color: var(--status-error); text-decoration: none; }
.leftCol-links .leftCol-donate:hover .ui-icon { fill: currentColor; }
/* Selection marker sits inside the row's fill, not on its edge. */
.files .file.active > a { border-radius: var(--radius-control) !important; }
.files .file.active > a::before { left: 4px !important; top: 7px !important; bottom: 7px !important; width: 3px !important; border-radius: 2px !important; }
/* Drawer scrim: flat, no blur behind the code. */
.leftCol-backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(20, 18, 16, 0.45) !important; }
@media (max-width: 991px) { .leftCol-head { right: 6px !important; } }
/* ===== Round 18 =====
Symbols outline, docked find bar, one-row sidebar footer, stronger syntax
contrast, one dark surface family, equal stat columns. */
.symbols { position: relative; }
.file-card-head .btn.btn-symbols { gap: 6px; padding: 0 10px; color: var(--ink-soft); font-weight: 500; }
.symbols-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 30;
width: 300px;
max-height: 420px;
overflow: auto;
padding: 6px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface);
box-shadow: 0 12px 32px rgba(26, 24, 21, 0.16);
}
.symbols-head { padding: 6px 8px 8px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.symbols-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 32px;
padding: 0 8px;
border: 0;
border-radius: var(--radius-control);
background: none;
font: inherit;
font-size: 13px;
color: var(--color);
text-align: left;
cursor: pointer;
}
.symbols-item:hover, .symbols-item:focus-visible { background: var(--hover-bg-color); outline: none; }
.symbols-kind { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font: 600 11px/1 var(--font-mono); flex-shrink: 0; }
.symbols-kind.is-function { background: color-mix(in srgb, #6B45B8 14%, transparent); color: #6B45B8; }
.symbols-kind.is-class { background: color-mix(in srgb, #B4362A 14%, transparent); color: #B4362A; }
.dark-mode .symbols-kind.is-function { color: #C9A8F5; }
.dark-mode .symbols-kind.is-class { color: #F2897D; }
.symbols-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; }
.symbols-line { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) { .file-card-head .btn-symbols .btn-find-label { display: none; } .file-card-head .btn-symbols { width: 32px; padding: 0 !important; } }
/* Find: docked strip under the toolbar, full width of the code */
.ace_search {
top: 0 !important;
left: 0 !important;
right: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--border-soft) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 8px 12px 8px 8px !important;
background: var(--paper-card) !important;
}
.ace_search_field { border-color: var(--border-color) !important; }
.ace_search .ace_button { border: 1px solid transparent !important; }
.ace_search .ace_button.checked { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.ace_search_counter { color: var(--ink-soft) !important; font-size: 13px !important; }
.ace_editor .ace_marker-layer .ace_selected-word { background: var(--accent-soft) !important; }
.ace_editor.ace-chrome .ace_marker-layer .ace_selection { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: color-mix(in srgb, var(--accent) 34%, transparent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
/* Sidebar footer: one row of links, then the snapshot date */
.leftCol-foot { padding: 10px 14px 12px; }
.leftCol-links { margin: 0 0 6px; gap: 12px; }
.leftCol-repo-actions { display: inline-flex; }
.leftCol-project-header .leftCol-hide { display: inline-flex; }
@media (max-width: 991px) { .leftCol-project-header button.leftCol-hide { display: none; } }
/* Syntax: clearer separation between token types in light mode */
.ace-chrome .ace_string { color: #11704F !important; }
.ace-chrome .ace_entity.ace_name.ace_function, .ace-chrome .ace_support.ace_function { color: #5B3DC2 !important; }
.ace-chrome .ace_keyword, .ace-chrome .ace_storage { color: #B02F22 !important; }
.ace-chrome .ace_comment { color: #6F6A61 !important; }
.ace-chrome .ace_paren, .ace-chrome .ace_punctuation, .ace-chrome .ace_keyword.ace_operator { color: #5C574F !important; }
/* Dark: the viewer uses the same surfaces as the rest of the site */
.dark-mode .explorer-main,
.dark-mode .explorer-content,
.dark-mode .ace_editor.ace-nord-dark,
.dark-mode .explorer-content .ace_editor.ace-nord-dark .ace_gutter { background: var(--canvas-bg-color) !important; }
.dark-mode .explorer-content .file-card-head,
.dark-mode .ace_search { background: color-mix(in srgb, var(--canvas-bg-color) 92%, transparent) !important; }
.dark-mode .leftCol { background: var(--sidebar-bg-color); }
.dark-mode .symbols-menu { background: #22201C; }
/* Landing stats: four equal columns, calmer numerals */
.paper-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.paper-stats-grid .paper-stat-card { padding-left: 24px !important; padding-right: 24px !important; }
.paper-stats-grid .paper-stat-card:first-child { padding-left: 0 !important; }
.paper-stat-value { font-size: 40px !important; }
.paper-stats-grid .paper-stat-card { margin-right: 0 !important; }
.paper-stats-grid .paper-stat-card:last-child { border-right: 0; padding-right: 0 !important; }
@media (max-width: 767px) { .paper-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .paper-stats-grid .paper-stat-card:nth-child(odd) { padding-left: 0 !important; } }
.leftCol-foot, .dark-mode .leftCol-foot { background: transparent !important; }
.paper-faq-toc nav a:hover, .paper-faq-toc nav a.active { border-left-color: var(--accent) !important; }
/* ===== Round 19 ===== */
.card-files-label { display: none; }
@media (max-width: 991px) {
.file-card-head .card-files-btn { width: auto !important; padding: 0 10px !important; gap: 6px; border: 1px solid var(--border-color) !important; color: var(--color) !important; }
.card-files-label { display: inline; font-size: 13px; font-weight: 500; }
}
@media (max-width: 767px) {
.file-card-head .btn.btn-icon-only { color: var(--color) !important; }
.file-card-head .file-card-meta .meta-extra { display: none !important; }
.file-card.is-code.no-wrap::after { width: 64px !important; }
}
/* Toggles: an accent pressed state, distinct from hover */
.btn.btn-ghost.is-on { color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent) !important; }
/* Gutter: hairline divider so numbers sit in their own column */
.explorer-content .ace_editor.ace-chrome .ace_gutter,
.explorer-content .ace_editor.ace-nord-dark .ace_gutter { border-right: 1px solid var(--border-soft) !important; }
/* Find: visible toggle states, GitHub-style yellow matches */
.ace_search .ace_button { width: 28px !important; height: 28px !important; border: 1px solid var(--border-color) !important; color: var(--ink-soft) !important; font-size: 12px !important; }
.ace_search .ace_button.checked { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.ace_search_counter { margin-left: 2px !important; }
.ace_editor .ace_marker-layer .ace_selected-word { background: rgba(242, 204, 96, 0.38) !important; box-shadow: none !important; }
.ace_editor.ace-chrome .ace_marker-layer .ace_selection,
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: #F2CC60 !important; box-shadow: 0 0 0 1px #C69026 !important; }
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: rgba(242, 204, 96, 0.55) !important; }
/* README: centred reading column in the pane */
.explorer-content .file-card .file-content.markdown-body { margin: 0 auto !important; }
/* Sidebar ZIP: labelled */
.leftCol-project-header .leftCol-zipbtn { width: auto !important; gap: 4px; padding: 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.leftCol-project-header .leftCol-zipbtn .ui-icon { width: 13px; height: 13px; }
/* ===== Round 20: repository panel, labelled toolbar, phone overflow menu ===== */
.leftCol-brand { justify-content: space-between; }
.repo-panel {
display: grid;
gap: 8px;
padding: 14px 14px 12px;
border-bottom: 1px solid var(--border-soft);
}
.repo-panel-title {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--color);
}
.repo-panel-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-panel-title .ui-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-muted); }
.repo-panel-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
font-size: 12.5px;
color: var(--ink-soft);
}
.repo-panel-meta .last-update { font: inherit !important; color: inherit !important; padding: 0; border: 0; }
.repo-panel-meta > span + span::before { content: "·"; margin-right: 10px; color: var(--ink-faint); }
.repo-panel-meta > .repo-panel-badge + span::before { content: none; }
.repo-panel-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px 1px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--status-ready) 12%, transparent);
color: var(--status-ready);
font-size: 11.5px;
font-weight: 600;
}
.repo-panel-badge .ui-icon { width: 12px; height: 12px; }
.repo-panel-zip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
border: 1px solid var(--border-color);
border-radius: var(--radius-control);
background: var(--paper-card);
font-size: 13px;
font-weight: 500;
color: var(--color) !important;
text-decoration: none !important;
}
.repo-panel-zip:hover { background: var(--hover-bg-color); border-color: var(--ink-faint); }
.repo-panel-zip .ui-icon { width: 15px; height: 15px; }
.dark-mode .repo-panel-zip { background: transparent; }
.leftCol-project-header { display: none !important; }
.leftCol-search { padding-top: 12px; padding-bottom: 4px; }
.tb-file { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border-color); }
.file-card-head .btn.tb-btn {
height: 32px;
gap: 6px;
padding: 0 12px !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-control) !important;
background: var(--paper-card) !important;
color: var(--color) !important;
font-size: 13px;
font-weight: 500;
}
.file-card-head .btn.tb-btn:hover { background: var(--hover-bg-color) !important; border-color: var(--ink-faint) !important; }
.file-card-head .btn.tb-btn .ui-icon { width: 15px; height: 15px; }
.file-card-head .btn.tb-btn-icon { width: 32px; padding: 0 !important; justify-content: center; }
.dark-mode .file-card-head .btn.tb-btn { background: transparent !important; }
.file-card-actions > .tb-file:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
.tb-more { position: relative; display: none; }
.tb-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 40;
width: 220px;
padding: 6px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface);
box-shadow: 0 12px 32px rgba(26, 24, 21, 0.18);
}
.tb-menu > button, .tb-menu > a {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 40px;
padding: 0 10px;
border: 0;
border-radius: var(--radius-control);
background: none;
font: inherit;
font-size: 14px;
color: var(--color) !important;
text-align: left;
text-decoration: none !important;
}
.tb-menu > button:hover, .tb-menu > a:hover { background: var(--hover-bg-color); }
.tb-menu .ui-icon { width: 16px; height: 16px; color: var(--ink-soft); }
.tb-menu-check { margin-left: auto; color: var(--accent); font-weight: 600; }
.tb-menu-sep { height: 1px; margin: 6px 4px; background: var(--border-soft); }
@media (max-width: 767px) {
.tb-more { display: inline-flex; }
.file-card-head .tb-file,
.file-card-head .symbols,
.file-card-head .btn-find,
.file-card-head .btn-goto,
.file-card-head .btn-toggle,
.file-card-head .view-switch + .file-card-actions .tb-file { display: none !important; }
.file-card-head .tb-more-btn { width: 40px !important; height: 40px !important; }
.file-card-head .card-files-btn { height: 40px !important; }
.file-card-path .paths .breadcrumb-item:last-child { font-size: 15px; }
}
/* ===== Round 20: landing — HTML feature mocks, calmer stats and labels ===== */
.feat-mock { height: 380px; overflow: hidden; background: var(--paper-card); font-family: var(--font-sans); color: var(--color); }
.fm-form { padding: 22px 26px; display: grid; gap: 8px; }
.fm-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }
.fm-input { height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: var(--input-bg); font-size: 13.5px; }
.fm-input-sm { width: 150px; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-chips span { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--status-error) 9%, transparent); color: var(--color); font-size: 12.5px; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--status-error) 55%, transparent); }
.fm-chips .fm-chip-add { background: transparent; border: 1px dashed var(--border-color); color: var(--ink-muted); text-decoration: none; }
.fm-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.fm-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fm-toggles span { padding: 5px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-control); font-size: 12.5px; color: var(--ink-muted); }
.fm-toggles .is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent); }
.fm-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.fm-share { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.fm-btn { padding: 9px 14px; border-radius: var(--radius-button); background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dark-mode .fm-btn { background: #1F6A64; }
.fm-viewer { display: grid; grid-template-columns: 150px 1fr; height: 100%; }
.fm-tree { padding: 14px 8px; background: var(--paper-bg-alt); border-right: 1px solid var(--border-soft); font-size: 12.5px; }
.fm-tree div { padding: 5px 10px; border-radius: var(--radius-control); color: var(--ink-soft); }
.fm-tree .is-folder::before { content: "▸ "; color: var(--ink-faint); }
.fm-tree .is-active { background: rgba(128,128,128,.14); color: var(--color); font-weight: 500; box-shadow: inset 3px 0 0 var(--accent); }
.fm-code { min-width: 0; }
.fm-code-bar { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; color: var(--ink-muted); }
.fm-code-bar b { color: var(--color); font-weight: 600; }
.fm-code pre { margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--color); background: transparent; white-space: pre; }
.fm-code .ln { display: inline-block; width: 22px; margin-right: 14px; text-align: right; color: var(--ink-faint); }
.fm-code .k { color: #B02F22; } .fm-code .f { color: #5B3DC2; } .fm-code .s { color: #11704F; } .fm-code .c { color: var(--ink-muted); font-style: italic; }
.dark-mode .fm-code .k { color: #F2897D; } .dark-mode .fm-code .f { color: #C9A8F5; } .dark-mode .fm-code .s { color: #9DD3A8; }
.fm-code .redact { padding: 0 4px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-style: normal; }
.fm-dash { padding: 12px 18px; font-size: 13px; }
.fm-dash-head, .fm-dash-row { display: grid; grid-template-columns: 1.7fr .9fr .5fr .9fr; gap: 12px; align-items: center; }
.fm-dash-head { padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.fm-dash-row { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.fm-dash-row b { display: block; font-weight: 600; }
.fm-dash-row i { display: block; font-style: normal; font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); }
.fm-dash-row.is-muted { color: var(--ink-muted); }
.fm-dash .st { display: inline-flex; align-items: center; gap: 6px; }
.fm-dash .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fm-dash .st.is-ready { color: var(--status-ready); } .fm-dash .st.is-progress { color: var(--status-progress); } .fm-dash .st.is-expired { color: var(--ink-muted); }
@media (max-width: 767px) { .feat-mock { height: auto; min-height: 260px; } .fm-viewer { grid-template-columns: 1fr; } .fm-tree { display: none; } .fm-dash-head span:nth-child(4), .fm-dash-row span:nth-child(4) { display: none; } .fm-dash-head, .fm-dash-row { grid-template-columns: 1.6fr 1fr .5fr; } .fm-row { grid-template-columns: 1fr; } }
/* Stats: numbers only, no decorative sparklines */
.paper-stat-delta { margin-top: 6px !important; font-family: var(--font-sans) !important; font-size: 13px !important; color: var(--ink-muted) !important; }
.paper-stats-grid .paper-stat-card { padding-top: 22px !important; padding-bottom: 22px !important; }
/* Section labels: sans small caps instead of tiny tracked mono */
.paper-eyebrow, .paper-faq-eyebrow, .paper-stats-meta {
font-family: var(--font-sans) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
color: var(--ink-soft) !important;
}
.paper-feature-tab .paper-eyebrow { font-size: 12px !important; }
/* Hero checks: neutral ink, not a third accent colour */
.paper-reassure li::before { color: var(--ink-soft) !important; }
.feat-mock { height: auto !important; min-height: 300px; }
/* ===== Round 21 ===== */
/* Phones: code that scrolls sideways fades at the edge (mask works regardless of stacking) */
@media (max-width: 767px) {
.file-card.is-code.no-wrap::after { display: none !important; }
.file-card.is-code.no-wrap .ace_scroller {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
/* Toolbar: Files + name on row 1; view switch and meta on row 2 */
.explorer-content .file-card-head { row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
.file-card-path { flex: 1 1 auto; gap: 10px; }
.file-card-path .paths { flex: 1 1 auto; min-width: 0; }
.file-card-path .paths .breadcrumb-item:last-child { overflow: hidden; text-overflow: ellipsis; }
.file-card-head .card-files-btn { height: 32px !important; border-radius: var(--radius-control) !important; padding: 0 10px !important; }
.file-card-head .tb-more-btn { width: 36px !important; height: 32px !important; }
.file-card-head > .view-switch { order: 4; margin-left: auto !important; }
.file-card-head .file-card-meta { order: 3; flex-basis: auto !important; flex: 1 1 auto; margin: 0 !important; align-self: center; }
}
/* Toolbar left edge lines up with the code gutter; README column follows it */
@media (min-width: 768px) {
.explorer-content .file-card-head { padding-left: 20px; }
.explorer-content .file-card .file-content.markdown-body { margin: 0 !important; padding-left: 20px !important; padding-right: 40px !important; max-width: 900px; }
}
/* Dark: clearer selection and pressed states */
.dark-mode .files .file.active > a { background: rgba(255, 255, 255, 0.13) !important; }
.dark-mode .btn.btn-ghost.is-on { background: rgba(124, 199, 190, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(124, 199, 190, 0.45) !important; }
.dark-mode .leftCol { background: #1E1B18 !important; }
/* Find: larger close, indigo focus */
.ace_searchbtn_close { width: 24px !important; height: 24px !important; background-size: 12px !important; opacity: .7; }
.ace_search_field:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
/* Secondary text a step darker */
.navbar .nav-link:not(.active):not(.btn-signin) { color: var(--ink-soft) !important; }
.navbar .nav-support-inline { color: var(--ink-soft) !important; }
.paper-stat-delta { color: var(--ink-soft) !important; }
/* Footer + FAQ micro-labels use the shared label style */
.paper-footer-head, .paper-faq-toc-head {
font-family: var(--font-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
color: var(--ink-soft) !important;
}
/* Collapsed feature steps: visible chevrons */
.paper-feature:not(.is-on) .paper-feature-tab::after { border-color: var(--ink-soft) !important; border-width: 0 2px 2px 0 !important; }
/* FAQ: wider answers */
.faq-section .panel-default .panel-body { max-width: 720px !important; }
.repo-panel-meta .last-update { flex-basis: 100%; }
.repo-panel-meta .last-update::before { content: none !important; }
@media (max-width: 767px) {
.file-card-head .file-card-path { flex: 1 1 calc(100% - 56px) !important; }
.file-card-head .file-card-actions { order: 1; }
.file-card-head .file-card-meta { order: 3; }
.file-card-head > .view-switch { order: 4; }
}
/* ===== Round 22: sidebar identity + account bar, sidebar toggle ===== */
.repo-panel { display: none !important; }
.repo-id {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px 6px;
}
.repo-id-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 9px;
background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--paper-card)), color-mix(in srgb, var(--accent) 6%, var(--paper-card)));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--accent);
}
.repo-id-tile .ui-icon { width: 17px; height: 17px; }
.repo-id-text { min-width: 0; }
.repo-id-title { font-size: 14px; font-weight: 600; color: var(--color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-id-sub { margin-top: 1px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repo-id-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 14px 12px 58px;
border-bottom: 1px solid var(--border-soft);
font-size: 12.5px;
}
.repo-id-count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.repo-id-zip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: var(--radius-control);
color: var(--link-color) !important;
font-weight: 500;
text-decoration: none !important;
}
.repo-id-zip:hover { background: var(--accent-soft); }
.repo-id-zip .ui-icon { width: 14px; height: 14px; }
.leftCol-foot .leftCol-links { display: none !important; }
.acct-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct { position: relative; min-width: 0; }
.acct-chip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 150px;
height: 34px;
padding: 0 8px 0 4px;
border: 0;
border-radius: var(--radius-control);
background: none;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--color);
cursor: pointer;
}
.acct-chip:hover, .acct-chip[aria-expanded="true"] { background: var(--hover-bg-color); }
.acct-chip img, .acct-initial { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.acct-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { width: 12px; height: 12px; color: var(--ink-muted); transform: rotate(-90deg); }
.acct-menu {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
z-index: 40;
width: 190px;
padding: 6px;
background: var(--paper-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-surface);
box-shadow: 0 12px 32px rgba(26, 24, 21, 0.18);
}
.acct-menu a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-control); font-size: 13.5px; color: var(--color) !important; text-decoration: none !important; }
.acct-menu a:hover { background: var(--hover-bg-color); }
.acct-menu .ui-icon { width: 16px; height: 16px; color: var(--ink-soft); }
.acct-signin {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 12px;
border: 1px solid var(--border-color);
border-radius: var(--radius-control);
background: var(--paper-card);
font-size: 13px;
font-weight: 500;
color: var(--color) !important;
text-decoration: none !important;
}
.acct-signin:hover { background: var(--hover-bg-color); border-color: var(--ink-faint); }
.dark-mode .acct-signin { background: transparent; }
.acct-icons { display: inline-flex; align-items: center; gap: 2px; }
.acct-icons a, .acct-icons button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: var(--radius-control);
background: none;
color: var(--ink-soft) !important;
cursor: pointer;
}
.acct-icons a:hover, .acct-icons button:hover { background: var(--hover-bg-color); color: var(--color) !important; }
.acct-icons .acct-donate:hover { color: var(--status-error) !important; }
.acct-icons .ui-icon { width: 17px; height: 17px; }
.leftCol-foot { padding: 8px 10px 10px 14px !important; }
.leftCol-foot .last-update { display: none; }
/* Sidebar toggle in the toolbar (phones/tablets, or when the tree is hidden) */
.file-card-head .card-files-btn,
.file-card-head .card-files-btn.is-needed {
width: 34px !important;
height: 34px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--ink-soft) !important;
}
.file-card-head .card-files-btn:hover { background: var(--hover-bg-color) !important; color: var(--color) !important; }
.file-card-head .card-files-btn .ui-icon { width: 19px; height: 19px; }
.card-files-label { display: none !important; }
.tb-copy-m { display: none !important; }
@media (max-width: 767px) {
.tb-copy-m { display: inline-flex !important; width: 36px !important; height: 34px !important; }
.file-card-head .file-card-path { flex: 1 1 calc(100% - 96px) !important; gap: 6px !important; }
}
/* Find bar: close on the right, readable controls */
.ace_search { flex-direction: row; }
.ace_searchbtn_close { order: 99; margin-left: auto !important; width: 28px !important; height: 28px !important; }
.ace_search .ace_button, .ace_searchbtn { color: var(--ink-soft) !important; }
/* Toggles: one "on" treatment */
.file-card-head .btn-find:focus:not(:focus-visible) { background: transparent !important; }
/* Dark mode README images: gentle dim + frame */
.dark-mode .explorer-content .markdown-body img { filter: brightness(0.92) !important; }
@media (max-width: 767px) {
.file-card.is-code.no-wrap .ace_scroller {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 80px), rgba(0,0,0,.15) calc(100% - 8px), transparent) !important;
mask-image: linear-gradient(to right, #000 calc(100% - 80px), rgba(0,0,0,.15) calc(100% - 8px), transparent) !important;
}
}
.acct-menu-head { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu-head b { color: var(--color); font-weight: 600; }
/* ===== Round 23 ===== */
/* Phones: explicit sideways-scroll cue on unwrapped code */
@media (max-width: 767px) {
.file-card.is-code.no-wrap { position: relative; }
.file-card.is-code.no-wrap::before {
content: "Scroll \2194";
position: absolute;
right: 12px;
bottom: 14px;
z-index: 25;
padding: 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--color) 82%, transparent);
color: var(--canvas-bg-color);
font: 600 12px/1 var(--font-sans);
pointer-events: none;
box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
/* README toolbar: Preview/Source on its own full-width row */
.file-card-head > .view-switch { order: 5 !important; flex: 1 1 100%; margin-left: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr; }
.file-card-head > .view-switch .btn { height: 36px !important; min-height: 36px !important; justify-content: center; font-size: 14px; }
.file-card-head .file-card-meta { font-size: 13px !important; }
}
/* Account menu shows the full handle */
.acct-menu { width: 240px; }
.acct-menu-head { white-space: normal; overflow-wrap: anywhere; }
/* One chevron style for the feature steps and the FAQ */
.paper-feature .paper-feature-tab::after { border-width: 0 1.5px 1.5px 0 !important; border-color: var(--ink-soft) !important; }
/* Hero mock: readable secondary text, visible window controls */
.hero-mock-tree-title, .hero-mock-doc-bar span { color: var(--ink-soft) !important; }
.paper-frame-bar { color: var(--ink-soft) !important; }
.paper-frame-bar .dots i { background: color-mix(in srgb, var(--ink-muted) 55%, transparent) !important; }
.dark-mode .paper-frame, .dark-mode .hero-mock-doc { background: #24211D !important; }
.dark-mode .hero-mock-tree { background: #1C1A17 !important; }
.dark-mode .paper-stats-grid .paper-stat-card { border-color: #3A3631 !important; }
.dark-mode .paper-stats-grid, .dark-mode .paper-stats { border-color: #3A3631 !important; }
/* FAQ: open item padding matches the rows */
.faq-section .panel-default .panel-body { padding-bottom: 18px !important; }
/* Wrap toggle: quiet pressed state — neutral fill, indigo icon */
.btn.btn-ghost.is-on { background: var(--hover-bg-color) !important; color: var(--accent) !important; box-shadow: none !important; }
.dark-mode .btn.btn-ghost.is-on { background: rgba(255,255,255,.08) !important; color: #7CC7BE !important; box-shadow: none !important; }
/* Account bar: avatar only; the menu carries the full handle */
.acct-chip .acct-name, .acct-chip .acct-caret { display: none; }
.acct-chip { padding: 0 5px !important; }
.acct-chip img, .acct-initial { width: 26px !important; height: 26px !important; }
/* README: centred reading column */
@media (min-width: 768px) {
.explorer-content .file-card .file-content.markdown-body { margin: 0 auto !important; padding-left: 40px !important; padding-right: 40px !important; max-width: 920px; }
}
/* Tree selection marker nearly full row height */
.files .file.active > a::before { top: 5px !important; bottom: 5px !important; }
/* Phones: slimmer gutter */
@media (max-width: 767px) { .explorer-content .ace_editor .ace_gutter-cell { padding-left: 6px !important; padding-right: 6px !important; } }
/* ===== Round 24: lean sidebar, joined file actions, visible support ===== */
.repo-id, .repo-id-actions { display: none !important; }
.leftCol-search { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px !important; }
.leftCol-search .tree-search-box { flex: 1 1 auto; min-width: 0; }
.search-zip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--canvas-bg-color);
color: var(--ink-soft) !important;
}
.search-zip:hover { background: var(--hover-bg-color); color: var(--color) !important; border-color: var(--ink-faint); }
.search-zip .ui-icon { width: 17px; height: 17px; }
.dark-mode .search-zip { background: transparent; }
.support-cta {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
padding: 9px 12px;
border-radius: var(--radius-surface);
background: color-mix(in srgb, #E5484D 9%, var(--paper-card));
box-shadow: inset 0 0 0 1px color-mix(in srgb, #E5484D 22%, transparent);
color: var(--color) !important;
text-decoration: none !important;
transition: background .15s, box-shadow .15s;
}
.support-cta:hover { background: color-mix(in srgb, #E5484D 14%, var(--paper-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #E5484D 40%, transparent); }
.support-cta .ui-icon { width: 18px; height: 18px; flex-shrink: 0; color: #E5484D; fill: #E5484D; }
.support-cta span { display: grid; min-width: 0; }
.support-cta b { font-size: 13px; font-weight: 600; }
.support-cta small { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark-mode .support-cta { background: color-mix(in srgb, #E5484D 12%, var(--sidebar-bg-color)); }
.leftCol-foot { padding: 10px 12px 10px !important; }
/* File actions: one joined group, quiet like GitHub's Raw | copy | download */
.tb-file { display: inline-flex !important; align-items: stretch; gap: 0 !important; margin-left: 8px; padding-left: 0 !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-control); overflow: hidden; }
.tb-seg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 12px;
border: 0;
background: var(--paper-card);
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--color) !important;
text-decoration: none !important;
cursor: pointer;
}
.tb-seg-btn + .tb-seg-btn { border-left: 1px solid var(--border-color); }
.tb-seg-btn:hover { background: var(--hover-bg-color); }
.tb-seg-icon { width: 34px; padding: 0; color: var(--ink-soft) !important; }
.tb-seg-icon:hover { color: var(--color) !important; }
.tb-seg-icon .ui-icon { width: 15px; height: 15px; }
.dark-mode .tb-seg-btn { background: transparent; }
.file-card-actions > .tb-file:first-child { margin-left: 0; }
/* Tool icons: same size and hit area as the group */
.file-card-head .btn-find, .file-card-head .btn-goto, .file-card-head .btn-toggle { width: 32px !important; height: 32px !important; }
/* Phones: drop the scroll pill; the edge fade is the cue */
.file-card.is-code.no-wrap::before { content: none !important; display: none !important; }
/* Avatar: round, no resting fill */
.acct-chip { width: 34px; height: 34px; padding: 0 !important; justify-content: center; border-radius: 50% !important; background: none !important; }
.acct-chip:hover, .acct-chip[aria-expanded="true"] { background: var(--hover-bg-color) !important; }
/* Find: close sits right after the option toggles */
.ace_searchbtn_close { margin-left: 4px !important; }
.dark-mode .explorer-content .markdown-body img { filter: brightness(.9) !important; }
/* Snapshot date under the search */
.snapshot-line {
display: flex;
align-items: center;
gap: 6px;
padding: 0 14px 8px;
font-size: 12.5px;
color: var(--ink-soft);
white-space: nowrap;
overflow: hidden;
}
.snapshot-line span { overflow: hidden; text-overflow: ellipsis; }
.snapshot-line .ui-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-muted); }
.leftCol-search { padding-bottom: 6px !important; }
/* ===== Round 25 ===== */
/* Phones: one-row toolbar, 40px targets */
@media (max-width: 767px) {
.explorer-content .file-card-head .file-card-meta { display: none !important; }
.explorer-content .file-card-head { flex-wrap: nowrap !important; min-height: 52px !important; }
.file-card-head .card-files-btn, .file-card-head .tb-copy-m, .file-card-head .tb-more-btn { width: 40px !important; height: 40px !important; }
.file-card-head .card-files-btn { background: var(--hover-bg-color) !important; color: var(--color) !important; border-radius: var(--radius-control) !important; }
.file-card-head .file-card-path { flex: 1 1 auto !important; }
}
/* Account menu: clear elevation; avatar matches the icon buttons */
.acct-menu { box-shadow: 0 16px 40px rgba(26, 24, 21, 0.22), 0 0 0 1px var(--border-color) !important; border: 0 !important; }
.dark-mode .acct-menu { background: #26231F; box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px #3A3631 !important; }
.acct-chip { width: 32px !important; height: 32px !important; }
.acct-chip img, .acct-initial { width: 30px !important; height: 30px !important; font-size: 13px !important; }
/* Find: compact bar, joined toggles, real close button, accent-tinted matches */
.ace_search { padding: 6px 12px 6px 8px !important; min-height: 40px; }
.ace_search_field { height: 28px !important; }
.ace_search_options { gap: 0 !important; margin-left: 4px !important; }
.ace_search_options .ace_button { border-radius: 0 !important; margin: 0 !important; }
.ace_search_options .ace_button + .ace_button { margin-left: -1px !important; }
.ace_search_options .ace_button:first-of-type { border-radius: var(--radius-control) 0 0 var(--radius-control) !important; }
.ace_search_options .ace_button:last-of-type { border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; }
.ace_searchbtn_close { width: 28px !important; height: 28px !important; border-radius: var(--radius-control) !important; margin-left: 8px !important; background-color: transparent !important; opacity: .65; }
.ace_searchbtn_close:hover { background-color: var(--hover-bg-color) !important; opacity: 1; }
.ace_search_counter { color: var(--ink-soft) !important; }
.ace_editor .ace_marker-layer .ace_selected-word { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; }
.ace_editor.ace-chrome .ace_marker-layer .ace_selection,
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: color-mix(in srgb, var(--accent) 34%, transparent) !important; box-shadow: 0 0 0 1px var(--accent) !important; }
/* Dark: pressed toggles read as "on" */
.dark-mode .btn.btn-ghost.is-on { background: rgba(124, 199, 190, 0.16) !important; color: #A8DDD6 !important; }
/* Landing: features share the FAQ teaser's column line */
.paper-features { grid-template-columns: 1fr 1.4fr !important; gap: 40px !important; }
/* FAQ chevrons a step darker */
.faq-section .panel-default .panel-title a:after { border-color: var(--ink-soft) !important; }
.paper-features .paper-feature:not(.is-on) .paper-feature-tab::after, .paper-features .paper-feature.is-on .paper-feature-tab::after { border-width: 0 1.5px 1.5px 0 !important; border-color: var(--ink-muted) !important; }
/* ===== Round 26: redaction is the signature element ===== */
.markdown-body mark.redact-chip,
.redact-chip {
display: inline-block;
padding: 0 6px;
margin: 0 1px;
border-radius: 4px;
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
color: var(--accent);
font-family: var(--font-mono);
font-size: 0.82em;
font-weight: 500;
line-height: 1.5;
vertical-align: 0.06em;
cursor: help;
transition: background .1s;
}
.redact-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip { font-size: 0.7em; vertical-align: 0.18em; }
.dark-mode .redact-chip { background: rgba(124, 199, 190, .14); color: #A8DDD6; }
.ace_editor .ace_marker-layer .ace_redacted {
position: absolute;
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: 3px;
}
.dark-mode .ace_editor .ace_marker-layer .ace_redacted { background: rgba(124, 199, 190, .16); }
.meta-redact { color: var(--accent); font-weight: 500; }
/* ===== Round 26: viewer top bar; sidebar is search + tree only ===== */
.explorer-page {
display: grid !important;
grid-template-columns: var(--sidebar-w, 280px) minmax(0, 1fr);
grid-template-rows: 44px minmax(0, 1fr);
}
.viewer-bar {
grid-column: 1 / -1;
grid-row: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 12px 0 14px;
border-bottom: 1px solid var(--border-color);
background: var(--paper-bg-alt);
z-index: 20;
}
.dark-mode .viewer-bar { background: var(--sidebar-bg-color); }
.explorer-page > .leftCol { grid-row: 2; grid-column: 1; width: auto !important; flex: none !important; height: auto !important; min-height: 0; border-top: 0; }
.explorer-page > .explorer-main { grid-row: 2; grid-column: 2; min-height: 0; }
.explorer-page.files-hidden { grid-template-columns: minmax(0, 1fr); }
.explorer-page.files-hidden > .explorer-main { grid-column: 1 / -1; }
.leftCol-resizer { top: 44px !important; }
.card-files-btn.is-needed { display: none !important; }
.vb-left, .vb-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.vb-logo { font-family: var(--font-serif); font-size: 18px; letter-spacing: -0.01em; color: var(--color) !important; text-decoration: none !important; white-space: nowrap; margin-right: 10px; }
.vb-logo em { font-style: italic; }
.vb-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: var(--radius-control);
background: none;
color: var(--ink-soft) !important;
cursor: pointer;
text-decoration: none !important;
}
.vb-icon:hover { background: var(--hover-bg-color); color: var(--color) !important; }
.vb-icon .ui-icon { width: 17px; height: 17px; }
.vb-snapshot {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
margin-right: 6px;
border-radius: 999px;
background: var(--hover-bg-color);
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
white-space: nowrap;
cursor: help;
}
.vb-snapshot .ui-icon { width: 13px; height: 13px; color: var(--ink-muted); }
.vb-support {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
margin-right: 4px;
border-radius: 999px;
background: color-mix(in srgb, #E5484D 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, #E5484D 28%, transparent);
font-size: 13px;
font-weight: 600;
color: #C2353A !important;
text-decoration: none !important;
}
.vb-support:hover { background: color-mix(in srgb, #E5484D 16%, transparent); }
.vb-support .ui-icon { width: 15px; height: 15px; fill: currentColor; }
.dark-mode .vb-support { color: #FF8A8E !important; background: rgba(229, 72, 77, .14); }
.vb-signin {
display: inline-flex;
align-items: center;
gap: 7px;
height: 30px;
padding: 0 12px;
margin-left: 6px;
border: 1px solid var(--border-color);
border-radius: var(--radius-control);
background: var(--paper-card);
font-size: 13px;
font-weight: 500;
color: var(--color) !important;
text-decoration: none !important;
}
.vb-signin:hover { background: var(--hover-bg-color); }
.dark-mode .vb-signin { background: transparent; }
.viewer-bar .acct { margin-left: 6px; }
.viewer-bar .acct-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }
/* Sidebar: search sits flush at the top */
.explorer-page > .leftCol .leftCol-search { padding-top: 12px !important; }
@media (max-width: 991px) {
.explorer-page { grid-template-columns: minmax(0, 1fr); }
.explorer-page > .explorer-main { grid-column: 1 / -1; }
.vb-sidebar { display: none; }
.explorer-page > .leftCol { grid-row: auto; }
}
@media (max-width: 575px) {
.vb-snapshot, .vb-bug { display: none; }
.vb-support span { display: none; }
.vb-support { width: 32px; padding: 0; justify-content: center; }
}
/* ===== Round 27 ===== */
/* Phone drawer: its own header row (Files + close), above search */
@media (max-width: 991px) {
.explorer-page > .leftCol .leftCol-head {
position: static !important;
display: flex !important;
align-items: center;
justify-content: space-between;
min-height: 52px;
padding: 6px 8px 6px 16px !important;
border-bottom: 1px solid var(--border-soft) !important;
background: transparent !important;
}
.explorer-page > .leftCol .leftCol-head .leftCol-eyebrow { display: inline !important; font: 600 15px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--color); }
.explorer-page > .leftCol .leftCol-close { width: 44px !important; height: 44px !important; }
.files a { min-height: 38px !important; font-size: 15px; }
}
/* Support: still visible, but neutral with a red heart */
.vb-support { background: var(--paper-card) !important; box-shadow: inset 0 0 0 1px var(--border-color) !important; color: var(--color) !important; font-weight: 500 !important; }
.vb-support .ui-icon { color: #E5484D; fill: #E5484D; }
.vb-support:hover { background: var(--hover-bg-color) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #E5484D 40%, var(--border-color)) !important; }
.dark-mode .vb-support { background: transparent !important; color: var(--color) !important; }
/* Snapshot pill in the UI face */
.vb-snapshot { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; font-size: 12.5px !important; }
/* Breadcrumb root is navigation, not status: neutral */
.file-card-path .breadcrumb-root a { color: var(--ink-soft) !important; }
.file-card-path .breadcrumb-root a:hover { color: var(--color) !important; text-decoration: underline; }
/* Phones: 40px targets in the top bar; sidebar toggle matches other icon buttons */
@media (max-width: 767px) {
.viewer-bar { padding: 0 6px 0 12px; }
.vb-icon, .vb-support { width: 40px !important; height: 40px !important; }
.vb-signin { height: 36px; }
.file-card-head .card-files-btn { background: transparent !important; color: var(--ink-soft) !important; }
}
/* Find bar: own surface, consistent 28px controls, close as a button at the end */
.ace_search { background: var(--paper-bg-alt) !important; border-bottom: 1px solid var(--border-color) !important; gap: 6px !important; }
.dark-mode .ace_search { background: #1E1B18 !important; }
.ace_search .ace_searchbtn { width: 28px !important; height: 28px !important; border-radius: var(--radius-control) !important; border: 1px solid var(--border-color) !important; background: var(--paper-card) !important; }
.ace_searchbtn_close { order: 99; margin-left: 6px !important; border: 1px solid transparent !important; background-position: center !important; opacity: .8 !important; }
/* Phones: a visible right-edge fade on unwrapped code */
@media (max-width: 767px) {
.file-card.is-code.no-wrap .ace_scroller { -webkit-mask-image: none !important; mask-image: none !important; }
.file-card.is-code.no-wrap .file-card-body { position: relative; }
.file-card.is-code.no-wrap .file-card-body::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 36px;
z-index: 8;
pointer-events: none;
background: linear-gradient(to right, color-mix(in srgb, var(--paper-card) 0%, transparent), var(--paper-card) 85%);
}
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, transparent, var(--canvas-bg-color) 85%); }
}
/* Dark code redactions: clearly indigo */
.dark-mode .ace_editor .ace_marker-layer .ace_redacted { background: rgba(124, 199, 190, .24) !important; box-shadow: inset 0 0 0 1px rgba(124, 199, 190, .5) !important; }
/* Secondary text one step darker on the landing */
.paper-reassure, .paper-stat-delta, .paper-stat-label { color: var(--ink-soft) !important; }
/* FAQ heading one step smaller */
.paper-faq-title { font-size: clamp(2.2rem, 4vw, 3.1rem) !important; }
@media (max-width: 767px) { .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, transparent, var(--paper-card) 80%) !important; } .dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, transparent, var(--canvas-bg-color) 80%) !important; } }
/* ===== Round 28 ===== */
@media (max-width: 575px) {
.vb-support { box-shadow: none !important; background: transparent !important; border-radius: var(--radius-control) !important; }
.vb-support:hover { background: var(--hover-bg-color) !important; }
}
/* Redaction count reads as status, not a link */
.meta-redact {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent) !important;
font-size: 12px;
font-weight: 600;
cursor: default;
}
.dark-mode .meta-redact { background: rgba(124, 199, 190, .14); color: #A8DDD6 !important; }
/* Chips in headings sit lighter than the heading */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { font-size: 0.6em !important; padding: 1px 6px !important; vertical-align: 0.25em !important; }
/* Find toggles: readable, with a visible pressed state */
.ace_search .ace_button { color: var(--ink-soft) !important; font-size: 12.5px !important; font-weight: 600 !important; background: var(--paper-card) !important; }
.ace_search .ace_button.checked { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; position: relative; z-index: 1; }
.ace_search { align-items: center !important; }
.ace_search_counter { align-self: center; line-height: 28px; }
/* Landing mock: same selection style as the real tree */
.hero-mock-row.is-active { background: rgba(128,128,128,.12) !important; box-shadow: inset 3px 0 0 var(--accent); }
.mobile-sub { display: none; }
@media (max-width: 767px) {
.file-card-head .file-card-path { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.file-card-head .file-card-path .card-files-btn { grid-row: 1 / span 2; }
.file-card-head .file-card-path .paths { grid-column: 2; }
.mobile-sub { display: block; grid-column: 2; margin-top: 1px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-sub b { color: var(--accent); font-weight: 600; }
.dark-mode .mobile-sub b { color: #A8DDD6; }
.vb-icon[href="/faq"] { display: none !important; }
}
/* Find close: icon only, centred, no stray glyph */
.ace_searchbtn_close { font-size: 0 !important; color: transparent !important; background-size: 10px 10px !important; align-self: center; }
/* Avatar: neutral until pressed */
.acct-initial { background: var(--hover-bg-color) !important; color: var(--color) !important; box-shadow: inset 0 0 0 1px var(--border-color); }
.acct-chip[aria-expanded="true"] .acct-initial { background: var(--accent-soft) !important; color: var(--accent) !important; }
.viewer-bar .acct-menu { top: calc(100% + 12px) !important; }
/* Dark landing mock: visible edge */
.dark-mode .paper-frame { box-shadow: 0 0 0 1px #3F3A34, 0 24px 60px rgba(0,0,0,.5) !important; }
/* FAQ answers: comfortable measure */
.faq-section .panel-default .panel-body { max-width: 640px !important; }
/* ===== Auth pages round A1 ===== */
/* New anonymization: top-aligned, with a visible primary action */
.anonymize-landing { align-items: flex-start !important; padding-top: clamp(32px, 9vh, 88px) !important; }
.landing-url-row { display: flex; gap: 8px; align-items: stretch; }
.landing-url-row .form-control { flex: 1 1 auto; min-width: 0; }
.landing-continue { flex-shrink: 0; height: auto; min-height: 46px; padding: 0 20px; font-weight: 600; }
@media (max-width: 575px) { .landing-url-row { flex-direction: column; } .landing-continue { min-height: 44px; } .source-url-label-row { flex-direction: column; align-items: flex-start !important; gap: 8px; } }
/* Dashboard table spans its container */
.paper-table.paper-table-dashboard { width: 100%; }
/* Admin: numerals in Inter, readable small labels, honest colours */
.q-stat-value, .q-card-count { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; font-weight: 600; }
.q-stat-label, .paper-table .paper-table-head [role="columnheader"], .paper-table-head > div { font-family: var(--font-sans) !important; font-size: 12px !important; letter-spacing: .02em !important; color: var(--ink-soft) !important; }
.errors-page .kpi-card.kpi-info .kpi-value { color: var(--color) !important; }
.errors-page .col-msg, .errors-page .col-msg * { font-weight: 400 !important; }
.errors-page .col-msg .msg-code, .errors-page .msg-code { font-size: 13px !important; }
/* Native selects and checkboxes match the custom controls */
.paper-page select, .admin-page select, .errors-page select, .anonymize-page select, .paper-table select {
height: 34px;
padding: 0 30px 0 10px;
border: 1px solid var(--border-color);
border-radius: var(--radius-control);
background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6A61' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
-webkit-appearance: none;
appearance: none;
font: inherit;
font-size: 13px;
color: var(--input-color);
}
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
/* Inputs: visible borders and one radius */
.paper-page .form-control, .anonymize-page .form-control, .paper-page input[type="text"], .paper-page input[type="date"], .paper-page textarea {
border: 1px solid color-mix(in srgb, var(--ink-faint) 55%, var(--border-color)) !important;
border-radius: var(--radius-control) !important;
}
.paper-page code, .paper-page kbd, .anonymize-page code { font-family: var(--font-mono) !important; }
/* Filter chips: selection is a fill; counts stay neutral */
.paper-chip.is-active .count, .filter-chip.is-active .count, .status-chip.active .count { color: inherit !important; }
/* Admin user: spacing, empty values, one heading style */
.user-header h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.status-dot-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.user-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.user-detail-grid .detail-value.is-empty { color: var(--ink-muted); font-style: normal; font-family: var(--font-sans) !important; }
.admin-section-header h2 { font-family: var(--font-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--color) !important; }
/* Errors: the delta is neutral; only a non-zero error count is red */
.errors-page .kpi-sub.up, .errors-page .kpi-sub.down { color: var(--ink-soft) !important; }
.errors-page .kpi-card.kpi-error .kpi-value { color: var(--color) !important; }
.errors-page .kpi-card.kpi-error:has(.kpi-value:not(:empty)) .kpi-value { color: var(--color) !important; }
.errors-page .kpi-label { font-family: var(--font-sans) !important; }
.errors-page .col-msg { font-family: var(--font-mono) !important; font-size: 13px !important; }
/* Admin tabs sit at the same height on every page */
.admin-page .paper-page-head, .admin-page .admin-head, .admin-page > header { min-height: 92px; }
/* Admin headers: title row is a fixed 44px so the tab bar lands at the same y everywhere */
.admin-page .paper-page-title { min-height: 44px; display: flex; align-items: center; margin-bottom: 8px !important; }
.admin-page .ov-header, .admin-page .q-header, .admin-page .errors-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 8px !important; }
.admin-page .ov-header .paper-page-title, .admin-page .q-header .paper-page-title, .admin-page .errors-header .paper-page-title { margin-bottom: 0 !important; }
.admin-page .admin-nav { margin-top: 0 !important; }
.admin-page .paper-crumbs { min-height: 20px; margin-bottom: 4px !important; }
/* One container width for author pages */
.paper-page.container, .paper-faq, .anonymize-page .anonymize-landing-inner { }
.dashboard-page, .paper-page { max-width: 1112px; }
.landing-continue:disabled { background: var(--hover-bg-color) !important; border-color: var(--border-color) !important; color: var(--ink-muted) !important; opacity: 1 !important; box-shadow: none !important; }
.landing-continue:not(:disabled) { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
/* ===== Auth pages round A2 ===== */
/* Admin status pills: neutral until selected; colour lives in a dot; zero counts dim */
.admin-summary .summary-pill { border-color: var(--border-color) !important; color: var(--color) !important; background: var(--paper-card) !important; }
.admin-summary .summary-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ink-faint); vertical-align: 1px; }
.admin-summary .summary-pill.ok::before { background: var(--status-ready); }
.admin-summary .summary-pill.warn::before, .admin-summary .summary-pill.progress::before { background: var(--status-progress); }
.admin-summary .summary-pill.err::before, .admin-summary .summary-pill.error::before { background: var(--status-error); }
.admin-summary .summary-pill .count { color: var(--ink-soft) !important; font-weight: 600; }
.admin-summary .summary-pill.active { background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; color: var(--accent) !important; }
.admin-summary .summary-pill.active .count { color: var(--accent) !important; }
.admin-summary .summary-pill:has(.count:is(:empty)) { opacity: .6; }
/* Admin primaries in indigo; no black buttons */
.admin-page .btn-primary, .admin-page .btn-dark { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-outline-danger { border: 1px solid color-mix(in srgb, var(--status-error) 45%, transparent) !important; color: var(--status-error) !important; background: transparent !important; }
/* Queues + errors headers: one sans sentence-case style */
.admin-page .paper-table-head > *, .admin-page [role="columnheader"], .errors-page th, .q-card-title, .q-panel-title, .admin-page h3, .q-header-label {
font-family: var(--font-sans) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--ink-soft) !important;
}
.ov-flag { color: var(--status-error); font-weight: 600; }
.overview-page .ov-daily-value { color: var(--color) !important; }
/* Mobile dashboard: symmetric gutter; chip row wraps */
@media (max-width: 767px) {
.paper-table.paper-table-dashboard { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
.dashboard-meta { flex-wrap: wrap; row-gap: 8px; }
.dashboard-active-filters { flex-basis: 100%; flex-wrap: wrap; }
.anonymize-landing { padding-top: 20px !important; }
.anonymize-landing .paper-page-lede { font-size: 15px !important; }
}
/* Anonymize: privacy note as a callout; Manage access as a quieter action */
.anonymize-landing .text-muted:has(.ui-icon), .anonymize-landing .source-privacy-note {
display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-top: 12px;
border-radius: var(--radius-control); background: color-mix(in srgb, var(--status-progress) 9%, transparent);
color: var(--color) !important; font-size: 13px;
}
.repo-access-note > span:has(.ui-icon) {
display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 12px;
border-radius: var(--radius-control); background: color-mix(in srgb, var(--status-progress) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-progress) 25%, transparent);
color: var(--color) !important; font-size: 13px;
}
.repo-access-note > span:has(.ui-icon) .ui-icon { color: var(--status-progress); flex-shrink: 0; margin-top: 2px; }
/* Status pills are include/exclude toggles: included = solid neutral, excluded = faded + struck */
.admin-summary .summary-pill.active { background: var(--paper-card) !important; border-color: var(--border-color) !important; color: var(--color) !important; }
.admin-summary .summary-pill.active .count { color: var(--ink-soft) !important; }
.admin-summary .summary-pill:not(.active) { background: transparent !important; border-style: dashed !important; color: var(--ink-muted) !important; }
.admin-summary .summary-pill:not(.active) > :not(.count) , .admin-summary .summary-pill:not(.active) { text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.admin-summary .summary-pill:not(.active) .count { text-decoration: none; }
.admin-summary .summary-pill:not(.active)::before { opacity: .45; }
/* ===== Auth pages round A3 ===== */
/* Strike-through "excluded" style only for multi-select status toggles (repositories, conferences) */
.admin-page:has(.admin-users-row) .admin-summary .summary-pill:not(.active),
.user-detail-card ~ * .admin-summary .summary-pill:not(.active) { border-style: solid !important; text-decoration: none !important; color: var(--color) !important; background: var(--paper-card) !important; }
.admin-page:has(.admin-users-row) .admin-summary .summary-pill:not(.active)::before { opacity: 1; }
.admin-page:has(.admin-users-row) .admin-summary .summary-pill.active { background: var(--accent-soft) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; color: var(--accent) !important; }
/* Dashboard: labelled copy action */
.copy-link-inline { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 10px !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-control); background: var(--paper-card) !important; color: var(--color) !important; font-size: 13px; font-weight: 500; }
.copy-link-inline:hover { background: var(--hover-bg-color) !important; }
.copy-link-inline .project-type-svg { width: 14px; height: 14px; }
@media (max-width: 767px) { .copy-link-label { display: none; } .copy-link-inline { width: 36px; justify-content: center; padding: 0 !important; } }
/* Overview: amber under 90%, red only above; numerals stay neutral */
.overview-page .ov-val-warn { color: var(--color) !important; }
.ov-flag { color: var(--status-progress) !important; }
/* Mobile admin: scrollable tabs with edge fade, left-aligned titles, full-width last tile */
@media (max-width: 767px) {
.admin-page .admin-nav { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.admin-page .admin-nav::-webkit-scrollbar { display: none; }
.admin-page .admin-nav a { flex-shrink: 0; }
.admin-page .paper-page-title, .admin-page .ov-header { text-align: left !important; justify-content: flex-start !important; }
.overview-page .ov-kpi-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.admin-summary { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.admin-summary > * { flex-shrink: 0; }
}
/* Mono only for IDs; admin badge lighter */
.user-detail-grid .detail-value:first-of-type { font-family: var(--font-mono); font-size: 13px; }
.user-header .type-badge { font-family: var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600; }
.errors-page .count-badge, .errors-page .msg-count, .errors-page [class*="count"] { background: var(--hover-bg-color) !important; color: var(--color) !important; }
.ov-flag.critical { color: var(--status-error) !important; }
.paper-table.paper-table-dashboard .paper-table-head,
.paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(280px, 3fr) 180px 70px 150px 150px !important; }
.paper-table.paper-table-dashboard .paper-table-row > :last-child { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.copy-link-inline { white-space: nowrap; }
@media (max-width: 767px) {
.admin-filter-row, .admin-page form[class*="filter"] { display: grid !important; grid-template-columns: 1fr; gap: 8px; }
.admin-page form[class*="filter"] input, .admin-page form[class*="filter"] select { width: 100% !important; }
.admin-page form[class*="filter"] > * { width: 100%; }
.admin-page form[class*="filter"] label { font-size: 12px !important; }
}
@media (min-width: 768px) { .copy-link-inline { width: auto !important; min-width: 0 !important; } }
@media (max-width: 767px) { .copy-link-inline { width: 44px !important; height: 44px !important; } }
/* ===== Auth pages round A4 ===== */
/* Queues / errors: sentence-case sans headings everywhere */
.q-section-label, .errors-list-head, .errors-list-head > span { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--ink-soft) !important; }
.errors-list-head > span { background: transparent !important; }
.q-state-chip { background: var(--paper-card) !important; color: var(--color) !important; border: 1px solid var(--border-color) !important; text-transform: none !important; font-family: var(--font-sans) !important; letter-spacing: 0 !important; }
.q-state-chip::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ink-faint); }
.q-state-chip.q-state-active::before { background: var(--accent); }
.q-state-chip.q-state-waiting::before, .q-state-chip.q-state-delayed::before { background: var(--status-progress); }
.q-state-chip.q-state-failed::before { background: var(--status-error); }
.q-state-chip.q-state-completed::before { background: var(--status-ready); }
/* Role pill in Inter */
.role-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--hover-bg-color); font: 600 12px/1 var(--font-sans); color: var(--color); }
.user-header .type-badge { background: var(--hover-bg-color) !important; border: 0 !important; }
/* Admin filter labels and selects */
.admin-filter-inline label, .admin-page label { font-size: 12px !important; color: var(--ink-soft) !important; }
.admin-page select.form-control, .admin-page select { padding-right: 30px !important; background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236F6A61' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center !important; -webkit-appearance: none !important; appearance: none !important; }
/* Row metadata a step darker */
.admin-page .paper-table-row .text-muted, .admin-page .paper-table-row [class*="meta"] { color: var(--ink-soft) !important; }
/* One container width for signed-in pages */
.paper-page.container, .dashboard-page.container, .paper-page { max-width: 1112px !important; padding-left: 32px !important; padding-right: 32px !important; }
@media (max-width: 767px) { .paper-page.container, .dashboard-page.container, .paper-page { padding-left: 18px !important; padding-right: 18px !important; } }
/* Page head: CTA on the title row */
.page-head-row > a.btn { margin-top: 6px; }
/* "On this page" rail: continuous line, indigo active segment */
.paper-settings-toc nav, .paper-faq-toc nav { border-left: 1px solid var(--border-color); }
.paper-settings-toc nav a { margin-left: -1px; border-left: 2px solid transparent; }
.paper-settings-toc nav a.active { border-left-color: var(--accent) !important; color: var(--color); }
/* Textarea + date inputs */
.paper-page textarea { resize: vertical; }
.paper-page input[type="date"] { height: 38px; padding: 0 10px; color: var(--input-color); font-family: var(--font-sans); }
/* Mobile: dashboard row = title line with actions on the right, meta below */
@media (max-width: 767px) {
.paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "name actions" "meta meta"; row-gap: 6px; }
.paper-table.paper-table-dashboard .paper-table-row > :first-child { grid-area: name; }
.paper-table.paper-table-dashboard .paper-table-row > :last-child { grid-area: actions; align-self: start; }
.paper-table.paper-table-dashboard .paper-table-row > :not(:first-child):not(:last-child) { grid-column: 1 / -1; }
.copy-link-inline { width: 36px !important; height: 36px !important; }
/* Admin filters: two columns, pager and export on one row */
.admin-filter-toolbar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-filter-toolbar > :first-child { grid-column: 1 / -1; }
.admin-filter-toolbar .admin-filter-inline { display: grid !important; gap: 4px; }
.admin-filter-toolbar .admin-filter-inline label { margin: 0; }
.admin-filter-toolbar > :last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.overview-page .ov-header { align-items: flex-start !important; text-align: left !important; }
.overview-page .ov-header .paper-page-title { width: 100%; justify-content: flex-start !important; text-align: left !important; }
}
/* Mobile dashboard row is flex: title + actions on line 1, meta wraps below */
@media (max-width: 767px) {
.paper-table.paper-table-dashboard .paper-table-row { flex-wrap: wrap !important; align-items: flex-start !important; row-gap: 6px; }
.paper-table.paper-table-dashboard .paper-table-row > .cell-anon { flex: 1 1 0 !important; min-width: 0; order: 1; }
.paper-table.paper-table-dashboard .paper-table-row > .cell-actions { flex: 0 0 auto !important; order: 2; width: auto !important; margin: 0 !important; }
.paper-table.paper-table-dashboard .paper-table-row > .dashboard-row-meta { flex: 1 1 100% !important; order: 3; }
/* Admin filter row: two columns */
.admin-filter-toolbar { display: block !important; }
.admin-filter-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.admin-filter-row > :first-child { grid-column: 1 / -1; }
.admin-filter-row .admin-filter-inline { display: grid !important; gap: 4px; min-width: 0; }
.admin-filter-row .admin-filter-inline input { width: 100% !important; }
.admin-filter-row > :last-child { grid-column: 1 / -1; display: flex !important; justify-content: space-between; align-items: center; flex-direction: row !important; }
.admin-filter-row > :last-child .btn { width: auto !important; }
}
/* Primary buttons on author pages: indigo */
.paper-page .btn-primary, .page-head-row .btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.dark-mode .paper-page .btn-primary { background: #1F6A64 !important; border-color: #1F6A64 !important; }
/* Queue stat labels + legend in the shared label style */
.q-stat-label, .q-section-right, .q-section-right * { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; color: var(--ink-soft) !important; }
.q-card .q-card-sub, [class*="q-card"] small { font-family: var(--font-sans) !important; }
/* ===== Auth pages round A5 ===== */
/* Usage ring reads as a meter: clear track, minimum visible arc, accent fill */
.quota-ring-track { stroke: var(--border-color) !important; stroke-width: 3 !important; fill: none; }
.quota-ring-fill { stroke: var(--accent) !important; stroke-width: 3 !important; fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px; min-width: 0; }
.quota-summary-ring { width: 18px !important; height: 18px !important; }
/* Errors table: one header style, plain count pills, compact rows */
.errors-list-head .col-count, .errors-list-head .col-msg { background: transparent !important; font-family: var(--font-sans) !important; font-weight: 600 !important; }
.errors-page .col-count > * { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--hover-bg-color) !important; color: var(--color) !important; font: 600 12px/1 var(--font-sans); box-shadow: none !important; }
.errors-page .col-count > * > * { background: transparent !important; }
.errors-page .col-when { display: flex; flex-direction: column; gap: 0; line-height: 1.3; }
.errors-page .errors-list > div:not(.errors-list-head) { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 0 !important; }
.errors-page .kpi-sub { font-style: normal !important; color: var(--ink-soft) !important; }
/* Queues legend line instead of "- -" */
.q-legend-exec { display: inline-block; width: 14px; height: 0; border-top: 2px dashed var(--ink-muted); vertical-align: middle; margin-right: 4px; }
/* Filter bar: search grows */
.admin-filter-row > :first-child, .admin-filter-row .admin-search, .admin-filter-row input[type="search"], .admin-filter-row input[placeholder^="Search"] { flex: 1 1 320px !important; min-width: 280px; }
/* Publish note: neutral information, not a warning */
.repo-access-note > span:has(.ui-icon) { background: var(--hover-bg-color) !important; box-shadow: none !important; }
.repo-access-note > span:has(.ui-icon) .ui-icon { color: var(--ink-soft) !important; }
/* Dark: rows sit on the page tone; one accent */
.dark-mode .paper-table-row { background: transparent !important; }
.dark-mode .paper-table-row:hover { background: rgba(255,255,255,.04) !important; }
.dark-mode .btn-primary, .dark-mode .dashboard-page .btn-primary, .dark-mode .paper-page .btn-primary { background: #1F6A64 !important; border-color: #1F6A64 !important; color: #fff !important; }
.dark-mode .dashboard-type-filter.btn-primary { background: rgba(124, 199, 190,.16) !important; border-color: transparent !important; color: #A8DDD6 !important; }
/* Inputs: one border tone across forms */
.paper-page .form-control, .paper-page input[type="text"], .paper-page textarea, .paper-page input[type="date"] { border-color: var(--border-color) !important; }
.paper-page .form-control:focus, .paper-page textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.errors-page .col-count { background: none !important; box-shadow: none !important; display: flex; align-items: center; }
.errors-page .col-count::before, .errors-page .col-count::after { content: none !important; display: none !important; }
.errors-page .col-count .count-pill { width: auto !important; min-width: 0 !important; }
.paper-page .dashboard-type-filter.btn-primary { background: var(--accent-soft) !important; border-color: transparent !important; color: var(--accent) !important; }
/* ===== Auth pages round A6 ===== */
/* Same left edge everywhere: drop Bootstrap row gutters inside paper pages */
.paper-page > .row { margin-left: 0 !important; margin-right: 0 !important; }
.paper-page > .row > [class*="w-100"], .paper-page > .row > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
/* Queues table header: shared sans sentence case */
.q-table th { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--ink-soft) !important; }
/* One input border token (≥3:1 against the card) on every form */
.paper-page input.form-control, .paper-page select.form-control, .paper-page textarea.form-control,
.paper-page input[type="text"], .paper-page input[type="search"], .paper-page input[type="url"], .paper-page input[type="date"], .paper-page textarea,
.claim-page input, .admin-page input:not([type="checkbox"]) { border: 1px solid var(--border-color) !important; }
.dark-mode .paper-page input.form-control, .dark-mode .paper-page textarea, .dark-mode .claim-page input, .dark-mode .admin-page input:not([type="checkbox"]) { border-color: #5A554D !important; }
/* Disabled primary: reduced-opacity indigo, not grey */
.landing-continue:disabled { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; opacity: .45 !important; }
/* Memory/disk captions on one line */
.overview-page .ov-kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mobile: tabs and pills wrap instead of clipping */
@media (max-width: 767px) {
.admin-page .admin-nav { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; row-gap: 4px; }
.admin-summary { flex-wrap: wrap !important; overflow: visible !important; row-gap: 8px; }
.admin-page .paper-table-row [class*="meta"], .admin-page .paper-table-row .text-muted { white-space: normal !important; }
}
.summary-total small { font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-left: 2px; }
@media (max-width: 767px) {
.overview-page .ov-kpi-row, .overview-page .ov-daily-row, .overview-page [class*="ov-"][class*="-row"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.overview-page .ov-kpi-card, .overview-page [class*="ov-daily-card"] { min-width: 0 !important; width: auto !important; }
.overview-page .ov-kpi-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.user-detail-grid .detail-value:nth-of-type(1) { font-family: var(--font-mono) !important; }
/* ===== Auth pages round A7 ===== */
.paper-table-empty .empty-title { display: block; font-size: 15px; font-weight: 600; color: var(--color); margin-bottom: 4px; }
.paper-table-empty > span { max-width: 440px; text-align: center; }
.paper-table-empty-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: center; }
.q-action-sep { display: inline-block; width: 1px; height: 22px; margin: 0 6px; background: var(--border-color); vertical-align: middle; }
.hidden-toggle { padding: 0; border: 0; background: none; color: var(--link-color); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ov-meter { height: 4px; margin: 6px 0 2px; border-radius: 4px; background: var(--hover-bg-color); overflow: hidden; }
.ov-meter > span { display: block; height: 100%; border-radius: 4px; background: var(--ink-faint); }
.ov-meter.warn > span { background: var(--status-progress); }
.ov-meter.crit > span { background: var(--status-error); }
.admin-filters-toggle { display: none; }
@media (max-width: 767px) {
.admin-filters-toggle { display: inline-flex; margin: 8px 0; }
.admin-filter-toolbar .admin-filter-row:not(.is-open) > :not(:first-child) { display: none !important; }
.admin-filter-toolbar .admin-filter-row:not(.is-open) { grid-template-columns: 1fr !important; }
}
/* Settings pages: rail + content fill the shared container */
.paper-settings-layout, .settings-layout { max-width: none !important; }
.paper-settings-layout > :last-child, .settings-layout > :last-child { max-width: none !important; flex: 1 1 auto; }
/* Errors: compact rows, equal header weight */
.errors-list-head > span { font-weight: 600 !important; }
.errors-page .errors-list > div:not(.errors-list-head) { min-height: 56px !important; }
/* ===== Round 29: README reading mode (reference: Mintlify / Stripe docs) ===== */
.reading-layout { display: grid; grid-template-columns: minmax(0, 720px) 220px; justify-content: center; gap: 48px; padding: 0 32px; }
.reading-layout .file-content.markdown-body { max-width: none !important; margin: 0 !important; padding: 40px 0 96px !important; font-size: 16px !important; line-height: 1.7 !important; }
.reading-layout .markdown-body h1 { font-size: 34px !important; font-weight: 600 !important; letter-spacing: -0.02em; border-bottom: 0 !important; margin-bottom: 12px !important; }
.reading-layout .markdown-body h2 { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.01em; border-bottom: 0 !important; margin-top: 44px !important; padding-bottom: 0 !important; scroll-margin-top: 72px; }
.reading-layout .markdown-body h3 { font-size: 18px !important; margin-top: 28px !important; scroll-margin-top: 72px; }
.reading-layout .markdown-body > p:first-of-type { font-size: 18px; color: var(--ink-soft); }
.readme-toc { position: sticky; top: 68px; align-self: start; margin-top: 44px; max-height: calc(100% - 100px); overflow: auto; display: grid; gap: 2px; font-size: 13px; }
.readme-toc-head { font-size: 12px; font-weight: 600; color: var(--color); margin-bottom: 8px; }
.readme-toc a { display: block; padding: 4px 0 4px 12px; border-left: 1px solid var(--border-color); color: var(--ink-soft) !important; text-decoration: none !important; line-height: 1.35; }
.readme-toc a:hover { color: var(--color) !important; border-left-color: var(--ink-muted); }
.readme-toc a.lvl-3 { padding-left: 24px; font-size: 12.5px; }
@media (max-width: 1199px) { .reading-layout { grid-template-columns: minmax(0, 760px); } .readme-toc { display: none; } }
@media (max-width: 767px) { .reading-layout { padding: 0 16px; } .reading-layout .file-content.markdown-body { padding: 20px 0 72px !important; } .reading-layout .markdown-body h1 { font-size: 26px !important; } .reading-layout .markdown-body h2 { font-size: 20px !important; } }
/* ===== Round 29: live redaction demo ===== */
.demo { margin-top: 28px; display: grid; gap: 14px; }
.demo-terms { display: grid; gap: 6px; }
.demo-terms label { font-size: 13px; font-weight: 600; color: var(--color); margin: 0; }
.demo-terms label span { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.demo-terms input { height: 42px; padding: 0 14px; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: var(--paper-card); font: 14px var(--font-mono); color: var(--color); }
.demo-terms input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.demo-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo .pane { border: 1px solid var(--border-color); border-radius: var(--radius-surface); background: var(--paper-card); overflow: hidden; display: flex; flex-direction: column; }
.demo .pane-header { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: 12px; color: var(--ink-soft); }
.demo .pane-label { font-weight: 600; color: var(--color); }
.demo .pane-url { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .pane-after { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color)); }
.demo .pane-body { min-height: 150px; padding: 14px 16px; font: 13px/1.75 var(--font-mono); color: var(--color); white-space: pre-wrap; }
.demo-input { border: 0; resize: vertical; background: transparent; outline: none; width: 100%; }
.demo-input:focus { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.demo-output .redact-chip { font-size: 0.92em; }
@media (max-width: 767px) { .demo-panes { grid-template-columns: 1fr; } }
/* Mocks without fake browser chrome: a plain card with the URL as a caption */
.paper-frame-bar .dots { display: none !important; }
.paper-frame-bar { justify-content: flex-start !important; height: 32px !important; background: transparent !important; }
.paper-frame-bar .url { text-align: left !important; flex: none !important; }
/* ===== Round 30 ===== */
.reading-layout .markdown-body > p:first-of-type { font-size: inherit !important; color: inherit !important; }
@media (max-width: 767px) {
.mobile-sub b { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); font-size: 11.5px; }
.explorer-content .file-card-head { min-height: 52px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
.file-card-head .file-card-path { gap: 4px !important; column-gap: 4px !important; }
.file-card.is-code.no-wrap .file-card-body::after { width: 48px !important; background: linear-gradient(to right, transparent, var(--paper-card) 60%) !important; }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, transparent, var(--canvas-bg-color) 60%) !important; }
}
.ace_search { justify-content: flex-start; }
.ace_searchbtn_close { margin-left: auto !important; order: 99; }
.fm-chips span, .paper-preview .term { background: var(--hover-bg-color) !important; color: var(--ink-soft) !important; text-decoration-color: var(--ink-muted) !important; }
.dark-mode .files .file.active > a { background: rgba(255,255,255,.06) !important; }
.dark-mode .ace_editor .ace_marker-layer .ace_redacted, .dark-mode .ace-nord-dark .ace_marker-layer .ace_redacted { background: rgba(124, 199, 190, .32) !important; box-shadow: inset 0 0 0 1px rgba(124, 199, 190, .65) !important; }
.paper-link-arrow { font-size: 15px !important; }
.paper-reassure { font-size: 14px !important; }
.dark-mode .acct-menu-head, .acct-menu-head { color: var(--ink-soft) !important; }
.reading-layout { grid-template-columns: minmax(0, 720px) 200px !important; gap: 40px !important; padding: 0 24px !important; }
.vb-snapshot { color: var(--ink-soft) !important; background: var(--paper-card) !important; box-shadow: inset 0 0 0 1px var(--border-color); }
.paper-faq-lede a { color: var(--color) !important; border-bottom: 1px solid var(--ink-faint) !important; text-decoration: none !important; }
.paper-faq-lede a:hover { border-bottom-color: var(--color) !important; }
.paper-section-head, .paper-qa { margin-top: 96px !important; }
.ace-chrome .ace_constant.ace_numeric, .ace-chrome .ace_constant.ace_language, .ace-chrome .ace_support.ace_constant { color: #0550AE !important; }
.ace-nord-dark .ace_constant.ace_numeric, .ace-nord-dark .ace_constant.ace_language, .ace-nord-dark .ace_support.ace_constant { color: #79C0FF !important; }
/* Dashboard: the anonymous link itself is the copy control */
.copy-url {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 230px;
height: 30px;
padding: 0 8px 0 10px;
border: 0;
border-radius: var(--radius-control);
background: var(--hover-bg-color);
font: 500 12.5px/1 var(--font-mono);
color: var(--ink-soft);
cursor: pointer;
transition: background .12s, color .12s;
}
.copy-url:hover { background: var(--accent-soft); color: var(--accent); }
.copy-url:disabled { cursor: progress; }
.copy-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-url .project-type-svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }
.copy-url:hover .project-type-svg { opacity: 1; }
.paper-table.paper-table-dashboard .paper-table-head,
.paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(260px, 3fr) 170px 64px 140px 280px !important; }
@media (max-width: 767px) {
.copy-url { max-width: 44px; padding: 0; justify-content: center; width: 40px; height: 40px; }
.copy-url-text { display: none; }
}
.dashboard-page .btn.dashboard-type-filter.btn-primary, .paper-page .btn.dashboard-type-filter.btn-primary { background: var(--accent-soft) !important; border-color: transparent !important; color: var(--accent) !important; }
/* ===== Round 32 ===== */
/* Find matches: warm yellow (teal now means redaction only) */
.ace_editor .ace_marker-layer .ace_selected-word { background: rgba(242, 204, 96, .42) !important; box-shadow: none !important; border-radius: 2px; }
.ace_editor.ace-chrome .ace_marker-layer .ace_selection { background: #F2CC60 !important; box-shadow: 0 0 0 1px #C69026 !important; }
.ace_editor.ace-nord-dark .ace_marker-layer .ace_selection { background: rgba(242, 204, 96, .55) !important; box-shadow: 0 0 0 1px #F2CC60 !important; }
/* Find close: a real 28px button with a visible × */
.ace_searchbtn_close { background-image: none !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--radius-control) !important; opacity: 1 !important; color: var(--ink-soft) !important; }
.ace_searchbtn_close::before { content: "\00d7"; font: 400 20px/1 var(--font-sans); color: var(--ink-soft); }
.ace_searchbtn_close:hover { background-color: var(--hover-bg-color) !important; }
.ace_search { padding: 6px 12px !important; }
/* Outline: active section */
.readme-toc a.is-active { color: var(--color) !important; border-left: 2px solid var(--accent) !important; margin-left: -0.5px; font-weight: 500; }
/* Demo: no false focus on the output pane; tighter panes */
.demo .pane-after { box-shadow: none !important; border-color: var(--border-color) !important; }
.demo .pane-body { min-height: 120px !important; }
.demo-input { resize: none !important; }
/* Snapshot pill spacing */
.vb-snapshot .vb-dot { margin: 0 2px; color: var(--ink-faint); }
/* Dark: primary CTA lighter teal so it stands off the page */
.dark-mode .btn-hero, .dark-mode .btn-primary, .dark-mode .landing-continue:not(:disabled) { background: #2B8A80 !important; border-color: #2B8A80 !important; color: #fff !important; }
/* Hero checks as drawn icons */
.paper-reassure li::before { content: "" !important; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.nav-support-inline .nav-heart { width: 14px; height: 14px; color: #E5484D; fill: #E5484D; }
/* Mock term chips readable */
.fm-chips span { color: var(--color) !important; }
/* Mobile top bar: uniform 36px controls */
@media (max-width: 767px) { .vb-icon, .vb-support { width: 36px !important; height: 36px !important; } .vb-signin { height: 36px !important; } .navbar .nav-signin-m, .navbar-toggler { height: 36px !important; border-radius: var(--radius-control) !important; } }
/* ===== Admin round 9 ===== */
.overview-page .ov-spark-fill, .overview-page .ov-spark-fill-alt, .overview-page .ov-spark-fill-user, .overview-page .ov-spark-fill-new-user { background: color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.overview-page .ov-dot-legend { background: var(--accent) !important; }
.errors-page .errors-chart [class*="info"], .errors-page .bucket-info, .errors-page .col-sev .sev-info::before { background: var(--ink-faint) !important; }
.errors-header .btn-danger { background: transparent !important; color: var(--status-error) !important; border: 1px solid color-mix(in srgb, var(--status-error) 45%, transparent) !important; margin-left: 10px; }
.conferences-page .paper-table:has(.paper-table-empty) .paper-table-head { display: none !important; }
.copy-url { max-width: 280px !important; }
.paper-table.paper-table-dashboard .paper-table-head, .paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(240px, 3fr) 150px 60px 130px 320px !important; }
.dark-mode .paper-table-dashboard .paper-table-row { background: transparent !important; }
/* ===== Round 33: chip contrast in code, find bar grouping, quieter heart, outline rail, dark surfaces ===== */
.ace_editor .ace_marker-layer .ace_redacted { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent) !important; }
/* find bar: close sits with the other controls */
.ace_searchbtn_close { margin-left: 4px !important; }
.ace_search .ace_button { font-size: 12px !important; }
/* heart: muted at rest, full red on hover */
.vb-support .ui-icon, .nav-support-inline .nav-heart, .support-cta .ui-icon { color: #C25B5E !important; fill: #C25B5E !important; }
.vb-support:hover .ui-icon, .nav-support-inline:hover .nav-heart, .support-cta:hover .ui-icon { color: #E5484D !important; fill: #E5484D !important; }
.vb-support { background: transparent !important; box-shadow: inset 0 0 0 1px var(--border-color) !important; }
.dark-mode .vb-support .ui-icon, .dark-mode .nav-support-inline .nav-heart { color: #D9787B !important; fill: #D9787B !important; }
/* outline: one continuous rail, active segment overlays it */
.readme-toc .toc-rail { border-left: 1px solid var(--border-color); }
.readme-toc a, .readme-toc a.is-active { border-left: 0 !important; margin-left: -1px !important; padding: 5px 0 5px 13px !important; line-height: 1.4; }
.readme-toc a.lvl-3 { padding-left: 25px !important; }
.readme-toc a:hover { box-shadow: inset 1px 0 0 var(--ink-muted); }
.readme-toc a.is-active { box-shadow: inset 2px 0 0 var(--accent) !important; }
/* demo panes follow the section head grid */
@media (min-width: 992px) { .demo-panes { grid-template-columns: 1fr 1.4fr; gap: 40px; } }
/* mock form chips: no strikethrough */
.fm-chips span { text-decoration: none !important; }
/* dark: stronger CTA contrast, hairline hero frame, sidebar one step up, readable selection, untouched images */
.dark-mode .btn-hero, .dark-mode .btn-primary, .dark-mode .landing-continue:not(:disabled) { background: #237A71 !important; border-color: #237A71 !important; }
.dark-mode .paper-frame { box-shadow: 0 0 0 1px #34302B, 0 24px 60px rgba(0,0,0,.5) !important; }
.dark-mode .leftCol { background: #1D1A17 !important; }
.dark-mode .files .file.active > a { background: rgba(255,255,255,.09) !important; }
.dark-mode .explorer-content .markdown-body img { filter: none !important; }
/* phone viewer bar: same 12px inline padding both ends */
@media (max-width: 767px) {
.viewer-bar { padding-left: 12px !important; padding-right: 12px !important; }
.vb-signin { height: 30px !important; padding: 0 10px !important; }
}
/* ===== Round 33 admin ===== */
/* dashboard: status date on its own wrapping line, visible edit action */
.paper-table.paper-table-dashboard .paper-table-head, .paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(240px, 3fr) 190px 60px 120px 300px !important; }
.paper-table-dashboard .cell-status .status-sub-date { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.row-edit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-control); color: var(--ink-soft) !important; }
.row-edit:hover { background: var(--hover-bg-color); color: var(--color) !important; }
.row-edit .ui-icon { width: 16px; height: 16px; }
.cell-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
/* type filter: one contained segmented control */
.dashboard-filter-controls .btn-group[aria-label="Type"] { background: var(--hover-bg-color); padding: 3px; border-radius: calc(var(--radius-control) + 3px); gap: 2px; }
.dashboard-filter-controls .btn-group[aria-label="Type"] > .btn { border: 0 !important; background: transparent !important; color: var(--ink-soft) !important; border-radius: var(--radius-control) !important; height: 32px; box-shadow: none !important; }
.dashboard-filter-controls .btn-group[aria-label="Type"] > .btn.btn-primary { background: var(--paper-card) !important; color: var(--color) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--border-color) !important; }
/* one input border everywhere */
.dashboard-page .dashboard-filter-row .form-control, .admin-filter-row .form-control, .paper-page .search-wrap .form-control { border: 1px solid #A39D92 !important; }
.dark-mode .dashboard-page .dashboard-filter-row .form-control, .dark-mode .admin-filter-row .form-control, .dark-mode .paper-page .search-wrap .form-control { border-color: #4A443D !important; }
/* admin overview health banner */
.ov-health { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 20px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--status-error, #B42318) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-error, #B42318) 30%, transparent); font-size: 14px; color: var(--color); }
.ov-health .ui-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--status-error, #B42318); }
.dark-mode .ov-health { background: rgba(240,138,130,.10); box-shadow: inset 0 0 0 1px rgba(240,138,130,.35); }
.dark-mode .ov-health .ui-icon { color: #F08A82; }
/* admin tables: no per-cell type icon, cells align with headers */
.cell-anon .record-type-icon { display: none !important; }
.cell-anon { padding-left: 0 !important; }
/* errors: compact rows, sans message */
.errors-page .errors-row-main { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 46px; align-items: center !important; }
.errors-page .col-when { display: flex; gap: 8px; align-items: baseline; }
.errors-page .when-abs { font-size: 12px; }
.errors-page .msg-code { font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 13.5px !important; }
/* ===== Round 34: mobile chrome, toggles, heading chips ===== */
@media (max-width: 767px) {
/* one button style in the phone top bar */
.viewer-bar .vb-support, .viewer-bar .vb-icon, .viewer-bar .vb-signin { height: 36px !important; border-radius: var(--radius-control) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--border-color) !important; border: 0 !important; }
.viewer-bar .vb-support, .viewer-bar .vb-icon { width: 36px !important; }
.viewer-bar .vb-signin { padding: 0 12px !important; }
/* toolbar icons: 36px ghost hit areas */
.file-card-head .card-files-btn, .file-card-head .tb-copy-m, .file-card-head .tb-more-btn { width: 36px !important; height: 36px !important; border-radius: var(--radius-control) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--border-color) !important; color: var(--color) !important; }
/* stronger code scroll cue */
.file-card.is-code.no-wrap .file-card-body::after { width: 64px !important; background: linear-gradient(to right, transparent, var(--paper-card) 70%) !important; }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, transparent, var(--canvas-bg-color) 75%) !important; }
}
/* active toggle = accent icon, distinct from hover */
.btn-toggle.is-on, .btn-toggle[aria-pressed="true"] { color: var(--accent) !important; background: var(--accent-soft) !important; }
.dark-mode .btn-toggle.is-on { background: rgba(124,199,190,.14) !important; }
/* chips in headings scale with the heading, lighter */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { font-size: 0.78em !important; padding: 0 6px !important; vertical-align: 0.08em !important; font-weight: 600 !important; }
/* outline: wider, top aligned with H1 */
@media (min-width: 1200px) { .readme-toc { padding-top: 10px; } }
/* landing mock toggles: off state is outlined dark text, on has a check */
.fm-toggles span { color: var(--color) !important; }
/* dark hero frame: single 1px edge */
.dark-mode .paper-frame { border: 0 !important; box-shadow: 0 0 0 1px #34302B, 0 24px 60px rgba(0,0,0,.45) !important; }
/* ===== Round 34 admin ===== */
.q-section-right .q-legend-completed { color: #2F7D4F !important; }
.q-section-right .q-legend-failed { color: #B42318 !important; }
.dark-mode .q-section-right .q-legend-completed { color: #6FBF8A !important; }
.dark-mode .q-section-right .q-legend-failed { color: #F08A82 !important; }
.q-chart-wrap canvas { max-height: 180px; }
.avatar-fallback { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--hover-bg-color); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.mono-id { font-family: var(--font-mono) !important; font-size: 13px !important; }
.landing-continue:disabled { background: var(--hover-bg-color) !important; border-color: var(--border-color) !important; color: var(--ink-soft) !important; opacity: 1 !important; cursor: not-allowed; }
.paper-table .anon-sub, .paper-table .anon-sub * { font-size: 12px; }
/* dashboard: usage chip sits beside the primary action */
.dashboard-heading-actions { display: flex; align-items: center; gap: 10px; }
.dashboard-heading-actions .dashboard-quota { position: relative; margin: 0 !important; }
.dashboard-heading-actions .quota-panel { right: 0; left: auto !important; }
@media (max-width: 767px) {
/* admin nav + status pills: one horizontally scrolling row each */
.admin-nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 4px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
.admin-nav::-webkit-scrollbar, .admin-summary::-webkit-scrollbar { display: none; }
.admin-nav a { flex: none; white-space: nowrap; }
.admin-summary { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
.admin-summary > * { flex: none; white-space: nowrap; }
/* row metadata wraps instead of truncating */
.paper-table .anon-sub { flex-wrap: wrap !important; white-space: normal !important; row-gap: 2px; }
.paper-table .anon-sub > span, .paper-table .anon-sub > a { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }
.paper-table .cell-anon .repo-name { white-space: normal !important; overflow-wrap: anywhere; overflow: visible !important; text-overflow: clip !important; }
/* overview cards: details wrap, uptime does not sit alone */
.overview-page .ov-kpi-sub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.overview-page .ov-kpi-row { grid-template-columns: 1fr 1fr !important; }
}
.dashboard-page .dashboard-heading-actions { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
@media (max-width: 767px) {
.admin-page .admin-nav { flex-wrap: nowrap !important; overflow-x: auto !important; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
header.viewer-bar .vb-icon, header.viewer-bar .vb-support { box-shadow: inset 0 0 0 1px var(--border-color) !important; background: transparent !important; }
}
@media (max-width: 767px) {
.dashboard-page .dashboard-heading { flex-direction: column !important; align-items: stretch !important; gap: 12px; }
.dashboard-page .dashboard-heading-actions { justify-content: space-between !important; width: 100%; }
.row-edit { display: none !important; }
}
@media (max-width: 767px) { .paper-table-dashboard .copy-url { background: transparent !important; box-shadow: inset 0 0 0 1px var(--border-color) !important; } }
/* ===== Round 35: quieter phone chrome, summary spacing, heading chips, outline gap ===== */
@media (max-width: 767px) {
.mobile-sub { display: flex !important; align-items: center; gap: 6px; margin-top: 3px !important; }
.mobile-sub > * + *::before { content: "·"; margin-right: 6px; color: var(--ink-muted); font-weight: 400; }
.mobile-sub > b::before { display: none; }
/* phone chrome: ghost icons, only Sign in keeps a border */
header.viewer-bar .vb-icon, header.viewer-bar .vb-support { box-shadow: none !important; background: transparent !important; }
.file-card-head .card-files-btn, .file-card-head .tb-copy-m, .file-card-head .tb-more-btn { box-shadow: none !important; background: transparent !important; }
.file-card-head .card-files-btn:active, .file-card-head .tb-copy-m:active, .file-card-head .tb-more-btn:active { background: var(--hover-bg-color) !important; }
.file-card-head { padding-top: 6px !important; padding-bottom: 6px !important; }
}
/* chips inside headings: a tint, not a box */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { box-shadow: none !important; border: 0 !important; padding: 0 5px !important; font-weight: 500 !important; }
/* outline closer to the column */
@media (min-width: 1200px) { .reading-layout { gap: 40px !important; } }
/* find input: lighter focus ring */
.ace_search_field:focus, .ace_search .ace_search_field:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; }
/* muted small text one step darker */
.paper-eyebrow, .demo-terms label span, .paper-footer, .paper-footer a { color: var(--ink-soft) !important; }
/* ===== Round 35 admin ===== */
/* dark primary: one token, white text */
.dark-mode .paper-page .btn-ink, .dark-mode .anonymize-page .btn-ink, .dark-mode .paper-page .btn-primary, .dark-mode .page-head-row .btn-primary, .dark-mode .btn-primary, .dark-mode .btn-hero, .dark-mode .landing-continue { background: #237A71 !important; border-color: #237A71 !important; color: #fff !important; }
.dark-mode .paper-page .btn-ink:hover, .dark-mode .anonymize-page .btn-ink:hover, .dark-mode .btn-primary:hover { background: #1E6B63 !important; color: #fff !important; filter: none !important; }
/* Continue stays a real primary; empty input just does nothing */
.landing-continue, .landing-continue:disabled { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; opacity: 1 !important; cursor: pointer; }
/* errors: info is neutral */
.errors-page .seg.seg-info { background: var(--ink-faint) !important; opacity: 1 !important; }
.errors-page .sev-dot.sev-info, .errors-page .dot-info { background: var(--ink-muted) !important; }
/* phone admin tabs/pills: edge fade as scroll cue */
@media (max-width: 767px) {
.admin-page .admin-nav, .admin-summary { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent) !important; mask-image: linear-gradient(to right, #000 82%, transparent) !important; scroll-snap-type: x proximity; }
.admin-page .admin-nav a, .admin-summary > * { scroll-snap-align: start; }
.admin-page .dashboard-filters-toggle, .admin-page .admin-filters-toggle { width: auto !important; }
}
/* ===== Round 36 admin ===== */
/* filters: label binds to its own field, groups spaced apart */
.admin-filter-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; }
.admin-filter-inline label { margin: 0 !important; font-size: 12.5px; color: var(--ink-soft); }
/* one control height and border in filter rows */
.dashboard-page .dashboard-filter-row .form-control, .admin-filter-row .form-control, .paper-page .search-wrap .form-control { border-color: var(--border-color) !important; height: 36px !important; }
.dashboard-page .dashboard-filter-row .form-control:focus, .admin-filter-row .form-control:focus { border-color: var(--accent) !important; }
.dashboard-page .dashboard-filter-controls .btn, .dashboard-page .dashboard-filter-controls .dropdown-toggle { height: 36px; }
/* plain data in neutral text */
.paper-table [role="cell"].num a, .admin-page .cell-repos a { color: var(--color) !important; font-family: var(--font-sans) !important; }
/* errors: consistent header weight, tighter rows */
.errors-page .col-count { font-weight: inherit !important; color: inherit !important; }
.errors-page .errors-row-main { min-height: 52px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
/* connections: equal columns */
.connections-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: stretch; }
@media (max-width: 767px) { .connections-grid { grid-template-columns: 1fr !important; } }
/* mobile dashboard: show the link text */
.admin-page .admin-filter-row .form-control, .admin-page .admin-filter-inline .form-control, .admin-page .search-wrap .form-control { height: 36px !important; min-height: 36px !important; border: 1px solid var(--border-color) !important; font-size: 13.5px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.admin-page .admin-filter-row .form-control:focus, .admin-page .admin-filter-inline .form-control:focus { border-color: var(--accent) !important; }
.admin-page select.form-control { height: 36px !important; border: 1px solid var(--border-color) !important; }
.admin-page .paper-table .anon-sub { gap: 0 !important; column-gap: 0 !important; } .admin-page .paper-table .anon-sub > a { border-bottom: 0 !important; text-decoration: none; }
/* ===== Round 36 viewer ===== */
.tb-menu-note { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--ink-soft); }
.tb-menu-note .ui-icon { width: 16px; height: 16px; }
/* outline: darker inactive items, active item in accent text */
.readme-toc a { color: var(--ink-soft) !important; font-size: 13.5px !important; }
.readme-toc a.lvl-3 { font-size: 13px !important; }
.readme-toc a.is-active { color: var(--accent) !important; font-weight: 500 !important; }
.dark-mode .readme-toc a.is-active { color: #A8DDD6 !important; }
/* find: prev/next joined like Raw | Copy | Download */
.ace_search_form .ace_searchbtn { border-radius: 0 !important; margin: 0 !important; }
.ace_search_form .ace_searchbtn.prev { border-radius: var(--radius-control) 0 0 var(--radius-control) !important; margin-left: 8px !important; }
.ace_search_form .ace_searchbtn.next { border-radius: 0 var(--radius-control) var(--radius-control) 0 !important; margin-left: -1px !important; }
.ace_search .ace_searchbtn.next, .ace_search .ace_searchbtn.prev { box-shadow: none !important; }
/* current find match: no border, so it can't be confused with a redaction chip */
.ace_editor .ace_marker-layer .ace_selected-word, .ace_editor .ace_marker-layer .ace_selection { box-shadow: none !important; border: 0 !important; }
/* phone toolbar aligns to the content gutter */
@media (max-width: 767px) {
.file-card-head { padding-left: 12px !important; padding-right: 12px !important; }
.file-card-head .file-card-path { column-gap: 8px !important; }
}
/* dark selected tree row a touch lighter */
.dark-mode .files .file.active > a { background: rgba(255,255,255,.07) !important; }
/* ===== Round 37: reading measure, string hue, find toggles, quieter snapshot, hero scale ===== */
/* reading column actually reaches ~700px beside the outline */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 700px) 190px !important; gap: 40px !important; padding: 0 24px !important; } }
/* strings move to ink-blue so teal redaction chips stand apart (GitHub-like) */
.ace-chrome .ace_string { color: #0A3069 !important; }
.dark-mode .ace_editor .ace_string, .ace-nord-dark .ace_string { color: #A5C8FF !important; }
.ace_editor .ace_marker-layer .ace_redacted { background: color-mix(in srgb, var(--accent) 20%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent) !important; border-radius: 3px; }
/* find toggles: 28px, 12px text, clear on state */
.ace_search .ace_button { height: 28px !important; min-width: 30px !important; font-size: 12px !important; color: var(--ink-soft) !important; display: inline-flex !important; align-items: center; justify-content: center; }
.ace_search .ace_button.checked { background: var(--accent-soft) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.ace_search_counter { font-size: 12.5px !important; color: var(--ink-soft) !important; }
.ace_searchbtn_close::before { font-size: 18px !important; font-weight: 300 !important; }
/* wrap toggle on: tint + accent ring */
.btn-toggle.is-on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) !important; }
/* snapshot: plain text, no capsule, so Support and Sign in lead */
.vb-snapshot { background: transparent !important; box-shadow: none !important; color: var(--ink-soft) !important; padding-left: 4px !important; padding-right: 4px !important; }
/* dark tree selection readable */
.dark-mode .files .file.active > a { background: rgba(255,255,255,.10) !important; color: #F2EEE8 !important; }
/* headings wrap balanced */
.paper-faq-title, .paper-section-head h2, .paper-hero h1 { text-wrap: balance; }
/* demo panes equal */
@media (min-width: 992px) { .demo-panes { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } }
/* one inline-link treatment */
.paper-faq-a a, .paper-faq details a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
/* phone code: tighter gutter */
@media (max-width: 767px) { .file-card.is-code .ace_gutter-cell { padding-left: 8px !important; padding-right: 8px !important; } }
/* ===== Round 37 admin ===== */
.auto-refresh-label { font-family: var(--font-sans) !important; }
.errors-page .status-pill.status-warn:not(.is-error), .errors-page .status-pill { }
.ov-spark-fill { opacity: 1 !important; background: color-mix(in srgb, var(--accent) 70%, transparent) !important; }
.connections-grid .connection-link:not(.connection-danger) { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--radius-control); color: var(--color) !important; text-decoration: none !important; }
.reading-layout .file-content.markdown-body, .reading-layout .markdown-body { padding-left: 0 !important; padding-right: 0 !important; }
.explorer-content .file-card .reading-layout .file-content.markdown-body { padding-left: 0 !important; padding-right: 0 !important; }
/* ===== Round 38 admin ===== */
/* one header rhythm on every admin page: title row is always 44px */
.admin-page h1.paper-page-title { margin: 0 !important; line-height: 44px !important; min-height: 44px; }
.admin-page .ov-header, .admin-page .q-header, .admin-page .errors-header { min-height: 44px; margin: 0 0 12px !important; display: flex; align-items: center; justify-content: space-between; }
.admin-page > h1.paper-page-title { margin-bottom: 12px !important; }
/* active single-select pill: filled teal, white text, no dot */
.admin-page:has(.admin-users-row) .admin-summary .summary-pill.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.admin-page:has(.admin-users-row) .admin-summary .summary-pill.active .count { color: rgba(255,255,255,.8) !important; }
.admin-page:has(.admin-users-row) .admin-summary .summary-pill.active::before { display: none !important; }
/* native checkboxes take the accent */
.admin-page input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
/* alert: neutral surface, red only on the edge and icon */
.ov-health { background: var(--paper-card) !important; box-shadow: inset 3px 0 0 var(--status-error, #B42318), inset 0 0 0 1px var(--border-color) !important; }
.dark-mode .ov-health { background: var(--paper-card) !important; box-shadow: inset 3px 0 0 #F08A82, inset 0 0 0 1px var(--border-color) !important; }
/* usage chip: plain text, no ring that reads as loading */
.dashboard-quota .quota-summary-ring { display: none !important; }
/* errors: one-line time, compact rows */
.errors-page .errors-row-main { min-height: 44px !important; }
.errors-page .when-abs { display: none !important; }
@media (max-width: 767px) {
/* status pills wrap compactly; tabs wrap into tidy rows */
.admin-summary { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; }
.admin-summary .summary-pill { height: 30px !important; padding: 0 10px !important; font-size: 13px !important; }
.admin-page .admin-nav { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; gap: 2px !important; }
.admin-page .admin-nav a { min-height: 34px !important; padding: 0 10px !important; font-size: 13.5px !important; }
.admin-page .admin-nav a .ui-icon { display: none !important; }
}
/* ===== Round 38 viewer/landing ===== */
.fm-toggles span { display: inline-flex; align-items: center; gap: 6px; }
.fm-toggles span::before { content: ""; width: 12px; height: 12px; flex: none; }
.fm-toggles .is-on::before { background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat; }
.paper-faq-toc a, .faq-toc a, .paper-faq nav a { text-decoration: none !important; }
@media (max-width: 991px) { .navbar .navbar-toggler { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } }
.ace-chrome .ace_gutter-cell { color: #8A847A !important; }
.dark-mode .ace_editor .ace_gutter-cell { color: #7A746B !important; }
/* ===== Round 39: one-system code palette, redaction tint in front of text ===== */
/* warm, low-saturation syntax so teal stays the only accent */
.ace-chrome .ace_keyword, .ace-chrome .ace_storage, .ace-chrome .ace_keyword.ace_operator.ace_new { color: #7A3E6E !important; }
.ace-chrome .ace_string { color: #6B5A1E !important; }
.ace-chrome .ace_entity.ace_name.ace_function, .ace-chrome .ace_support.ace_function { color: #2B2824 !important; font-weight: 500; }
.ace-chrome .ace_constant.ace_numeric, .ace-chrome .ace_constant.ace_language, .ace-chrome .ace_constant { color: #8A4B12 !important; }
.ace-chrome .ace_comment { color: #8A847A !important; font-style: italic; }
.ace-chrome .ace_variable, .ace-chrome .ace_identifier { color: #2B2824 !important; }
.ace-chrome .ace_paren, .ace-chrome .ace_punctuation, .ace-chrome .ace_keyword.ace_operator { color: #6E6860 !important; }
.ace-chrome .ace_support.ace_type, .ace-chrome .ace_support.ace_class, .ace-chrome .ace_entity.ace_name.ace_tag { color: #7A3E6E !important; }
.ace-chrome .ace_entity.ace_other.ace_attribute-name { color: #8A4B12 !important; }
.dark-mode .ace_editor .ace_keyword, .dark-mode .ace_editor .ace_storage, .dark-mode .ace_editor .ace_support.ace_type, .dark-mode .ace_editor .ace_entity.ace_name.ace_tag { color: #D7A6CB !important; }
.dark-mode .ace_editor .ace_string { color: #D9C08A !important; }
.dark-mode .ace_editor .ace_entity.ace_name.ace_function, .dark-mode .ace_editor .ace_support.ace_function, .dark-mode .ace_editor .ace_variable, .dark-mode .ace_editor .ace_identifier { color: #ECE7DF !important; }
.dark-mode .ace_editor .ace_constant.ace_numeric, .dark-mode .ace_editor .ace_constant, .dark-mode .ace_editor .ace_entity.ace_other.ace_attribute-name { color: #E0B070 !important; }
.dark-mode .ace_editor .ace_comment { color: #8A847A !important; font-style: italic; }
.dark-mode .ace_editor .ace_paren, .dark-mode .ace_editor .ace_punctuation, .dark-mode .ace_editor .ace_keyword.ace_operator { color: #A39D92 !important; }
/* redaction marker now sits in front of the text: translucent teal turns the term teal */
.ace_editor .ace_marker-layer .ace_redacted { background: rgba(31,106,100,.22) !important; box-shadow: inset 0 0 0 1px rgba(31,106,100,.55) !important; border-radius: 3px; mix-blend-mode: multiply; }
.dark-mode .ace_editor .ace_marker-layer .ace_redacted { background: rgba(124,199,190,.26) !important; box-shadow: inset 0 0 0 1px rgba(124,199,190,.6) !important; mix-blend-mode: screen; }
/* line numbers readable */
.ace-chrome .ace_gutter-cell { color: #77716A !important; }
.dark-mode .ace_editor .ace_gutter-cell { color: #8A847A !important; }
/* reading pair centred in the pane */
@media (min-width: 1200px) { .reading-layout { justify-content: center !important; } }
/* landing mock: unchecked toggle has no empty icon slot */
.fm-toggles span:not(.is-on)::before { display: none !important; }
/* demo card header: URL truncates */
.demo-panes .pane-header { display: flex; gap: 10px; min-width: 0; }
.demo-panes .pane-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .mobile-sub { font-size: 12.5px !important; line-height: 1.4; } }
/* ===== Round 39 admin ===== */
.ov-live { font-size: 12.5px; color: var(--ink-soft); }
.admin-summary .summary-pill:not(.active) .count { text-decoration: none !important; }
.paper-table:not(.paper-table-dashboard) .paper-table-row, .paper-table:not(.paper-table-dashboard) .paper-table-head { column-gap: 24px !important; }
.connection-label { font-size: 12.5px; color: var(--ink-soft); margin-right: 4px; }
.paper-table-dashboard .copy-url:hover { background: var(--hover-bg-color) !important; box-shadow: inset 0 0 0 1px var(--border-color) !important; }
.dashboard-page .show-hidden, .dashboard-page .dashboard-count button { font-size: 13px !important; }
.q-legend-active, .q-dot-active, .status-active { }
/* ===== Round 40: phone dashboard row = title + menu / meta / full-width link chip ===== */
@media (max-width: 767px) {
.paper-table.paper-table-dashboard .paper-table-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "name more" "meta meta" "link link" !important; row-gap: 8px !important; }
.paper-table.paper-table-dashboard .paper-table-row > .cell-anon { grid-area: name !important; grid-column: auto !important; min-width: 0; }
.paper-table.paper-table-dashboard .paper-table-row > .dashboard-row-meta { grid-area: meta !important; grid-column: auto !important; }
.paper-table.paper-table-dashboard .paper-table-row > .cell-actions { display: contents !important; }
.paper-table-dashboard .cell-actions > .copy-url { grid-area: link; width: 100% !important; height: 36px !important; padding: 0 12px !important; justify-content: space-between !important; background: var(--hover-bg-color) !important; box-shadow: none !important; }
.paper-table-dashboard .cell-actions > .copy-url .copy-url-text { display: inline !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.paper-table-dashboard .cell-actions > .dropdown { grid-area: more; align-self: start; }
.paper-table-dashboard .cell-actions > .row-edit, .paper-table-dashboard .cell-actions > .project-details-button { display: none !important; }
}
@media (max-width: 767px) { .paper-table.paper-table-dashboard .paper-table-row { padding-right: 12px !important; } }
/* ===== Round 40 viewer/landing ===== */
/* Support: ghost, heart + label carry it; Sign in is the only bordered control */
.vb-support { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.vb-support:hover { background: var(--hover-bg-color) !important; }
.vb-snapshot { margin-right: 8px !important; }
/* eyebrows and stat captions one step darker */
.paper-eyebrow, .paper-stat-sub, .paper-stats .sub, .paper-stat small { color: #5E5950 !important; }
.dark-mode .paper-eyebrow, .dark-mode .paper-stat-sub { color: #B5AEA3 !important; }
/* one landing section rhythm */
.paper-section-head, .paper-qa { margin-top: 80px !important; }
.demo { margin-bottom: 0 !important; }
/* softer current find match */
.ace_editor .ace_marker-layer .ace_selected-word { background: rgba(242,204,96,.35) !important; }
.ace_editor .ace_marker-layer .ace_selection { background: rgba(232,184,58,.55) !important; }
/* FAQ answers use the column */
.paper-faq details > :not(summary), .paper-faq-a { max-width: 720px !important; }
/* ===== Round 40 admin ===== */
.q-state-chip.q-state-active::before { background: var(--color) !important; }
.q-state-chip.q-state-delayed::before { background: var(--ink-muted) !important; }
.repo-access-note > span:last-child { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-control); background: color-mix(in srgb, #B7791F 8%, transparent); box-shadow: inset 3px 0 0 #B7791F; color: var(--color) !important; }
.repo-access-note > span:last-child .ui-icon { color: #9A6416; flex: none; margin-top: 2px; }
.dark-mode .repo-access-note > span:last-child { background: rgba(224,176,112,.10); box-shadow: inset 3px 0 0 #E0B070; }
.repo-access-note > span:has(.ui-icon) { background: color-mix(in srgb, #B7791F 8%, transparent) !important; box-shadow: inset 3px 0 0 #B7791F !important; color: var(--color) !important; }
.repo-access-note > span:has(.ui-icon) .ui-icon { color: #9A6416 !important; }
.dark-mode .repo-access-note > span:has(.ui-icon) { background: rgba(224,176,112,.10) !important; box-shadow: inset 3px 0 0 #E0B070 !important; }
.dark-mode .repo-access-note > span:has(.ui-icon) .ui-icon { color: #E0B070 !important; }
/* ===== Round 41 viewer/landing ===== */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 680px) 190px !important; padding: 0 40px !important; } }
/* syntax: same warm family, more separation */
.ace-chrome .ace_keyword, .ace-chrome .ace_storage, .ace-chrome .ace_support.ace_type, .ace-chrome .ace_entity.ace_name.ace_tag { color: #93306A !important; }
.ace-chrome .ace_string { color: #7A5300 !important; }
.ace-chrome .ace_constant.ace_numeric, .ace-chrome .ace_constant { color: #A14A0F !important; }
.dark-mode .ace_editor .ace_string { color: #CDB98E !important; }
.ace_editor .ace_marker-layer .ace_redacted { background: rgba(31,106,100,.28) !important; box-shadow: inset 0 0 0 1px rgba(31,106,100,.65) !important; }
/* find bar: own surface, 32px controls */
.ace_search { background: var(--paper-card) !important; box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color) !important; }
.ace_search .ace_search_field { height: 32px !important; border-radius: var(--radius-control) !important; }
.ace_search .ace_searchbtn { height: 32px !important; }
/* live dot in the accent, not green */
.paper-stats-dot { background: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.paper-stats-meta-right { color: var(--ink-soft) !important; font-weight: 400 !important; }
/* hero mock: crisp edge + short shadow */
.paper-frame { box-shadow: 0 0 0 1px var(--border-color), 0 12px 32px rgba(40,30,20,.08) !important; border: 0 !important; }
.dark-mode .paper-frame { box-shadow: 0 0 0 1px #34302B, 0 12px 32px rgba(0,0,0,.4) !important; }
/* FAQ questions heavier */
.paper-faq summary, .paper-faq details > summary { font-weight: 600 !important; }
/* phone: toolbar breathing room, stronger code fade */
@media (max-width: 767px) {
.file-card-head .file-card-path { column-gap: 12px !important; }
.file-card.is-code.no-wrap .file-card-body::after { width: 72px !important; background: linear-gradient(to right, rgba(255,255,255,0), var(--paper-card) 65%) !important; }
}
/* ===== Round 41 admin ===== */
.dashboard-page .hidden-toggle { font-size: 13px !important; color: var(--color) !important; }
.paper-table-dashboard .btn-icon-dots { width: 32px !important; height: 32px !important; }
.access-q { display: block; font-size: 13px; color: var(--ink-soft); margin: 4px 0 6px; }
.repo-access-note { max-width: none !important; width: 100%; }
.repo-access-note > span:has(.ui-icon) { width: 100%; }
@media (max-width: 767px) { .anonymize-page .repo-access-switch, .anonymize-page [role="group"][aria-label*="onnection"] { width: 100% !important; display: flex !important; } .anonymize-page .repo-access-switch button { flex: 1 1 0; } }
/* one empty-state card everywhere */
.paper-table-empty, .admin-empty { border: 1px solid var(--border-color) !important; border-radius: var(--radius-surface, 12px) !important; background: var(--paper-card) !important; padding: 40px 24px !important; text-align: center; }
.dark-mode .paper-table-head { background: #26221E !important; }
.dark-mode .paper-table-row { background: #1E1B18; }
*:has(> .paper-table-empty:only-child), .paper-table:has(.paper-table-empty) { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
/* ===== Round 42: code redactions are real tokens styled exactly like the Markdown chip ===== */
.ace_editor .ace_text-layer .ace_redacted { color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 3px; font-weight: 500; }
.dark-mode .ace_editor .ace_text-layer .ace_redacted { color: #A8DDD6 !important; background: rgba(124,199,190,.16) !important; box-shadow: inset 0 0 0 1px rgba(124,199,190,.35); }
.ace_editor .ace_marker-layer .ace_redacted { display: none !important; }
/* heading chips: a tint at the heading's own scale, not two buttons */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { font-size: .82em !important; padding: 0 .2em !important; background: color-mix(in srgb, var(--accent) 9%, transparent) !important; box-shadow: none !important; border: 0 !important; line-height: 1.1 !important; vertical-align: baseline !important; font-weight: 500 !important; }
/* snapshot: one step darker text */
.vb-snapshot { color: var(--color) !important; opacity: .78; }
/* no double rule between toolbar and find bar */
.ace_search { box-shadow: inset 0 -1px 0 var(--border-color) !important; }
/* tool toggle "on": teal icon + fill, distinct from hover */
.btn-find.is-on, .btn-toggle.is-on { color: var(--accent) !important; background: var(--accent-soft) !important; }
/* outline: wrapped items hang-indent */
.readme-toc a { text-indent: 0; padding-left: 13px !important; }
.readme-toc a.lvl-3 { padding-left: 25px !important; }
/* ===== Round 42 admin ===== */
@media (max-width: 767px) {
.anonymize-page .repo-access, .repo-access { flex-wrap: wrap; width: 100%; }
.repo-access-switch { display: flex !important; width: 100% !important; }
.repo-access-switch button { flex: 1 1 0 !important; white-space: nowrap !important; justify-content: center; }
}
.q-card.selected { box-shadow: none !important; border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; }
.dark-mode .paper-table-head { background: #2E2A25 !important; }
.dark-mode .paper-table-row { background: #1C1A17 !important; }
.ov-chart-legend { font-family: var(--font-sans) !important; font-size: 12px !important; color: var(--ink-soft) !important; }
/* ===== Round 43 ===== */
/* outline: parent/child hierarchy */
.readme-toc a.lvl-2 { font-weight: 500 !important; color: var(--color) !important; }
.readme-toc a.lvl-3 { font-size: 12.5px !important; color: var(--ink-soft) !important; font-weight: 400 !important; }
.readme-toc a.is-active { color: var(--accent) !important; }
.readme-toc a.lvl-2 + a.lvl-2, .readme-toc a.lvl-3 + a.lvl-2 { margin-top: 4px; }
/* dark chips brighter */
.dark-mode .redact-chip, .dark-mode .ace_editor .ace_text-layer .ace_redacted { color: #9FE0D7 !important; background: rgba(124,199,190,.20) !important; box-shadow: inset 0 0 0 1px rgba(124,199,190,.38) !important; }
/* wrap toggle "on": teal icon + inset ring (beats any ghost/hover rule) */
.file-card-head .btn.btn-toggle.is-on, .file-card-head .btn.btn-toggle[aria-pressed="true"] { color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.dark-mode .file-card-head .btn.btn-toggle.is-on { color: #A8DDD6 !important; background: rgba(124,199,190,.14) !important; }
/* phone: toolbar toggle aligned with file name line */
@media (max-width: 767px) { .file-card-head .file-card-path .card-files-btn { align-self: start !important; } }
/* phone hero mock fades out instead of being cut */
@media (max-width: 767px) { .paper-hero-shot { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } }
.dark-mode .hero-mock-doc, .dark-mode .paper-frame { background: #24211D !important; }
.paper-stats-meta-right { color: #5E5950 !important; }
.dark-mode .paper-stats-meta-right { color: #B5AEA3 !important; }
/* admin */
.errors-page .status-pill.status-neutral { background: var(--hover-bg-color) !important; color: var(--ink-soft) !important; border-color: var(--border-color) !important; }
.connections-grid .btn, .connections-grid .connection-link:not(.connection-danger) { height: 36px !important; min-height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center; }
.claim-page input, .claim-page .form-control { border: 1px solid var(--border-color) !important; }
@media (max-width: 767px) {
.overview-page .ov-kpi-sub { white-space: nowrap !important; font-size: 12px !important; overflow: visible !important; }
.overview-page .ov-kpi-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.admin-summary .summary-pill { height: 28px !important; }
.admin-summary .summary-total { flex-basis: 100%; }
/* admin repo cards: actions top-right */
.admin-page .paper-table:not(.paper-table-dashboard) .paper-table-row { position: relative; padding-right: 44px !important; }
.admin-page .paper-table:not(.paper-table-dashboard) .paper-table-row > :last-child { position: absolute !important; top: 10px; right: 4px; }
.admin-page .paper-table .anon-sub > span { white-space: nowrap; }
}
/* ===== Round 44 ===== */
/* viewer: toggle "on" = teal icon only (no fill on a default-on tool) */
.file-card-head .btn.btn-toggle.is-on, .file-card-head .btn.btn-toggle[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; color: var(--accent) !important; }
.file-card-head .btn.btn-toggle.is-on:hover { background: var(--hover-bg-color) !important; }
.dark-mode .file-card-head .btn.btn-toggle.is-on { background: transparent !important; color: #A8DDD6 !important; }
/* syntax strings: cooler muted slate */
.ace-chrome .ace_string { color: #3D5A73 !important; }
.dark-mode .ace_editor .ace_string { color: #AFC4D6 !important; }
.ace-chrome .ace_gutter-cell { color: #6B655D !important; }
/* outline: inactive in secondary ink, sections 500 */
.readme-toc a.lvl-2 { color: var(--ink-soft) !important; font-weight: 500 !important; }
.readme-toc a.lvl-3 { color: var(--ink-soft) !important; opacity: .9; }
.readme-toc a.is-active { color: var(--accent) !important; }
.readme-toc-head { font-size: 12.5px !important; }
/* top bar */
.vb-snapshot { opacity: 1 !important; color: var(--ink-soft) !important; }
@media (max-width: 767px) { .viewer-bar .vb-signin { height: 32px !important; } }
.paper-footer-meta { font-size: 15px !important; color: var(--ink-soft) !important; }
.dark-mode .files .file.active > a { background: rgba(255,255,255,.07) !important; }
/* admin/signed-in: one left edge for every page */
@media (min-width: 992px) {
.anonymize-landing { justify-content: flex-start !important; align-items: flex-start !important; }
.anonymize-landing-inner { margin-left: max(4px, calc((100vw - 1048px) / 2 - 20px)) !important; margin-right: auto !important; max-width: 640px !important; }
}
/* settings / create-conference: form uses the full grid width */
.paper-settings-body > :not(aside) { max-width: none !important; }
.paper-settings-body .paper-card, .paper-settings-body section { max-width: none !important; }
/* dark: rows sit on the page, header lifted */
.dark-mode .paper-table-row { background: transparent !important; }
.dark-mode .paper-table-head { background: #26231F !important; }
/* phone: KPI sub-lines wrap inside padding; hidden count visible */
@media (max-width: 767px) {
.overview-page .ov-kpi-sub { white-space: normal !important; font-size: 12px !important; padding-right: 4px; }
.dashboard-count { position: static !important; width: auto !important; height: auto !important; margin: 0 0 0 auto !important; overflow: visible !important; clip: auto !important; font-size: 12.5px !important; }
}
.errors-page input[type="search"] { font-family: var(--font-sans) !important; }
.paper-settings-body .form-text, .paper-settings-body small, .paper-settings-body .paper-field-help { max-width: none !important; }
/* ===== Round 45 ===== */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip { font-size: .7em !important; vertical-align: .12em !important; }
.ace_search { border-bottom: 1px solid var(--border-color) !important; box-shadow: none !important; border-top: 0 !important; }
.ace_search .ace_button, .ace_search .ace_searchbtn { height: 32px !important; }
.file-card-head .btn.btn-toggle.is-on, .file-card-head .btn.btn-toggle[aria-pressed="true"] { background: var(--accent-soft) !important; color: var(--accent) !important; box-shadow: none !important; }
.dark-mode .file-card-head .btn.btn-toggle.is-on { background: rgba(124,199,190,.14) !important; }
@media (max-width: 767px) {
.file-card-head .card-files-btn { width: 32px !important; height: 32px !important; }
.file-card-head .file-card-path { column-gap: 8px !important; }
}
.dark-mode .leftCol { background: #1C1A17 !important; }
.dark-mode .explorer-content, .dark-mode .file-card { background: #141311 !important; }
.nav-support-inline { color: var(--color) !important; font-weight: 500 !important; }
/* admin */
@media (min-width: 992px) { .anonymize-landing { padding-top: 24px !important; } .anonymize-landing-inner { padding-top: 0 !important; margin-top: 0 !important; } }
.repo-access-note + *, .anonymize-page .btn-outline-ink { }
.anonymize-page .access-q + .btn-outline-ink { height: 30px !important; padding: 0 10px !important; font-size: 13px !important; }
.admin-summary .summary-pill:not(.active) { color: var(--ink-soft) !important; }
.volume-legend > span { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; }
/* ===== Round 46 ===== */
/* viewer */
.dark-mode .leftCol { background: #221F1B !important; }
@media (max-width: 767px) { .file-card.is-code.no-wrap .file-card-body::after { box-shadow: inset -1px 0 0 var(--border-color), inset -10px 0 10px -10px rgba(0,0,0,.18) !important; } }
.readme-toc a.is-active { font-weight: 600 !important; }
.paper-stats-meta-right { color: var(--ink-soft) !important; font-weight: 500 !important; letter-spacing: inherit; }
.paper-faq-a a, .paper-faq details a:not(.btn), .paper-section a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent) !important; text-decoration-thickness: 1px !important; }
/* admin */
.volume-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.errors-page .seg.seg-info { background: color-mix(in srgb, var(--ink-muted) 55%, transparent) !important; }
.paper-crumbs a { color: var(--ink-soft) !important; }
.paper-crumbs .here { color: var(--color) !important; }
.paper-table .mobile-meta-icon, .paper-table [role="cell"] > .ui-icon { opacity: .45; }
@media (min-width: 768px) { .paper-table-dashboard .cell-expires { padding-left: 24px !important; } }
.dark-mode .paper-table-dashboard .paper-table-head, .dark-mode .paper-table-head { background: transparent !important; box-shadow: inset 0 -1px 0 var(--border-color) !important; }
@media (max-width: 767px) {
.paper-table-dashboard .cell-actions > .copy-url { max-width: none !important; justify-self: stretch; }
.paper-table.paper-table-dashboard .paper-table-row { padding-right: 16px !important; }
.dashboard-filters-toggle { border: 1px solid var(--border-color) !important; border-radius: var(--radius-control) !important; height: 44px; padding: 0 12px !important; }
.overview-page .ov-kpi-card { padding-left: 14px !important; padding-right: 14px !important; }
.overview-page .ov-kpi-sub { white-space: nowrap !important; font-size: 11.5px !important; }
.search-wrap .kbd, .search-wrap kbd, .admin-filter-row kbd { display: none !important; }
}
/* ===== Round 47 ===== */
/* heading chips: teal text only */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { background: transparent !important; padding: 0 !important; font-size: .78em !important; color: var(--accent) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.dark-mode .markdown-body h1 .redact-chip, .dark-mode .markdown-body h2 .redact-chip { color: #9FE0D7 !important; }
/* phone code: unmistakable edge */
@media (max-width: 767px) { .file-card.is-code.no-wrap .file-card-body::after { width: 56px !important; background: linear-gradient(to right, rgba(255,255,255,0), var(--paper-card) 55%) !important; } }
/* outline long items truncate */
.readme-toc a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* admin */
@media (min-width: 768px) {
.paper-table-dashboard .cell-expires, .paper-table-dashboard .paper-table-head > :nth-child(4) { text-align: left !important; justify-content: flex-start !important; padding-left: 24px !important; }
}
.anonymize-page .form-control-lg, .anonymize-page #sourceUrl-landing { border: 1px solid var(--border-color) !important; }
.anonymize-page .form-control-lg:focus { border-color: var(--accent) !important; }
.repo-access-note > span:has(.ui-icon) { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent) !important; color: var(--color) !important; font-size: 13.5px; }
.repo-access-note > span:has(.ui-icon) .ui-icon { color: var(--accent) !important; }
.dark-mode .repo-access-note > span:has(.ui-icon) { background: rgba(124,199,190,.10) !important; box-shadow: inset 3px 0 0 #7CC7BE !important; }
.dark-mode .repo-access-note > span:has(.ui-icon) .ui-icon { color: #7CC7BE !important; }
.readme-toc a { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* ===== Round 48 ===== */
/* viewer: explicit scroll hint on phone code */
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::before { content: "Scroll \2192"; position: absolute; right: 10px; bottom: 14px; z-index: 9; font: 500 12px/1 var(--font-sans); color: var(--ink-soft); background: var(--paper-card); box-shadow: 0 0 0 1px var(--border-color), 0 2px 6px rgba(0,0,0,.06); border-radius: 999px; padding: 6px 10px; pointer-events: none; }
}
/* syntax: more separation in both themes */
.ace-chrome .ace_string { color: #2D5F86 !important; }
.ace-chrome .ace_keyword, .ace-chrome .ace_storage { color: #9A2B6B !important; }
.dark-mode .ace_editor .ace_string { color: #9CC3E6 !important; }
.dark-mode .ace_editor .ace_keyword, .dark-mode .ace_editor .ace_storage { color: #E3A6D2 !important; }
/* README H1 scale */
.reading-layout .markdown-body h1 { font-size: 34px !important; letter-spacing: -.015em; }
/* admin: one control height per density */
.errors-page select, .errors-page .form-control, .errors-page .btn-group > .btn, .errors-page .btn-icon { height: 36px !important; min-height: 36px !important; }
.errors-page .col-when .when-rel { font-size: 13.5px !important; }
.q-danger-group { display: inline-flex; gap: 6px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--border-color); }
.q-stats-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* privacy notice back to calm amber */
.repo-access-note > span:has(.ui-icon) { background: color-mix(in srgb, #B7791F 8%, transparent) !important; box-shadow: inset 3px 0 0 #B7791F !important; }
.repo-access-note > span:has(.ui-icon) .ui-icon { color: #9A6416 !important; }
.dark-mode .repo-access-note > span:has(.ui-icon) { background: rgba(224,176,112,.10) !important; box-shadow: inset 3px 0 0 #E0B070 !important; }
.dark-mode .repo-access-note > span:has(.ui-icon) .ui-icon { color: #E0B070 !important; }
@media (max-width: 767px) {
.admin-page .paper-table input[type="checkbox"], .admin-page .paper-table [role="cell"]:has(> input[type="checkbox"]), .admin-page .paper-table-head [role="columnheader"]:has(> input[type="checkbox"]) { display: none !important; }
.admin-page .dashboard-filters-toggle, .admin-page .admin-filters-toggle { width: auto !important; }
}
.q-danger-group { border-left: 0 !important; padding-left: 0 !important; }
/* ===== Round 49 ===== */
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::before { animation: scrollHintOut .4s ease 2.6s forwards; }
}
@keyframes scrollHintOut { to { opacity: 0; visibility: hidden; } }
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { text-decoration: none !important; background: color-mix(in srgb, var(--accent) 8%, transparent) !important; padding: 0 .15em !important; border-radius: 4px; }
.readme-toc a.lvl-3 { padding-left: 29px !important; }
.ace_search .ace_button { color: var(--color) !important; opacity: .8; }
.ace_search .ace_button.checked { opacity: 1; }
.dark-mode .files .file > a, .dark-mode .files .folder > a { color: #D8D2C8 !important; }
.ov-live { display: inline-flex; align-items: center; gap: 6px; }
.ov-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.anon-sub .meta-sep { display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 767px) { .anon-sub { column-gap: 0 !important; } }
.connection-status-legacy { color: var(--ink-soft) !important; }
.connection-status-legacy::before { background: var(--ink-muted) !important; }
.q-detail { align-items: start !important; }
.q-chart-wrap canvas { max-height: 200px; }
/* meta line: a dot that lands at a line start is clipped away */
.admin-page .paper-table .cell-anon .anon-text:has(.meta-sep) { overflow: hidden; }
.admin-page .paper-table .anon-sub:has(.meta-sep) { display: flex !important; flex-wrap: wrap !important; margin-left: -14px !important; gap: 0 !important; }
.admin-page .paper-table .anon-sub:has(.meta-sep) > * { white-space: nowrap; }
.admin-page .paper-table .anon-sub:has(.meta-sep) > *::before { content: "\00b7"; display: inline-block; width: 14px; text-align: center; color: var(--ink-muted); }
/* ===== Round 50 ===== */
.ace-chrome .ace_gutter-cell, .dark-mode .ace_editor .ace_gutter-cell { font-size: 12px !important; }
.q-stats-actions { display: grid !important; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; }
.q-danger-group { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0 !important; padding: 10px 0 0 !important; border-top: 1px solid var(--border-color) !important; width: 100%; display: flex !important; gap: 8px; }
@media (max-width: 767px) {
.overview-page .ov-header { flex-wrap: nowrap !important; align-items: center !important; }
.ov-live { font-size: 12px; }
.ov-live .ov-live-text-extra { display: none; }
.overview-page .ov-daily-card, .overview-page .ov-kpi-card { padding-left: 14px !important; padding-right: 14px !important; }
}
.admin-page input[type="checkbox"] { width: 14px !important; height: 14px !important; }
/* ===== Round 51: demo source highlights + phone code edge shadow ===== */
.demo-input-wrap { position: relative; }
.demo-input-wrap .demo-backdrop { position: absolute; inset: 0; margin: 0; overflow: hidden; color: var(--color); pointer-events: none; overflow-wrap: break-word; }
.demo-input-wrap .demo-input { position: relative; color: transparent !important; caret-color: var(--color); background: transparent !important; overflow-wrap: break-word; }
.demo-input-wrap .demo-input::selection { color: var(--color); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.demo-match { background: transparent; color: inherit; padding: 0; border-radius: 2px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, transparent); background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.demo-output .redact-chip { font-size: 12.5px !important; }
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::before { display: none !important; }
.file-card.is-code.no-wrap .file-card-body::after { width: 36px !important; background: linear-gradient(to right, rgba(0,0,0,0), rgba(60,45,30,.10)) !important; box-shadow: inset -1px 0 0 rgba(60,45,30,.18) !important; }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.45)) !important; box-shadow: inset -1px 0 0 rgba(255,255,255,.12) !important; }
}
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::after { width: 44px !important; background: linear-gradient(to right, rgba(255,255,255,0), var(--paper-card) 70%) !important; box-shadow: inset -8px 0 10px -6px rgba(40,30,20,.28), inset -1px 0 0 rgba(40,30,20,.16) !important; }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, rgba(0,0,0,0), var(--canvas-bg-color) 70%) !important; box-shadow: inset -8px 0 10px -6px rgba(0,0,0,.6), inset -1px 0 0 rgba(255,255,255,.1) !important; }
}
.q-chart-wrap { position: relative; }
.q-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--paper-card); border-bottom: 1px solid var(--border-color); text-align: center; }
.q-chart-empty strong { font-size: 14px; font-weight: 500; color: var(--color); }
.q-chart-empty span { font-size: 12.5px; color: var(--ink-soft); }
.q-danger-group .btn { margin-left: 0 !important; }
/* H1/H2 chips: teal text only */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
/* settings/create forms: same input token */
.paper-settings-body .form-control, .paper-settings-body textarea, .paper-settings-body input[type="text"], .paper-settings-body input[type="date"], .paper-settings-body input[type="url"] { border: 1px solid var(--border-color) !important; border-radius: var(--radius-control) !important; }
/* users: no per-row repo icon, more gap */
.admin-page .paper-table .cell-views .ui-icon { display: none !important; }
.admin-page:has(.admin-users-row) .paper-table-row, .admin-page:has(.admin-users-row) .paper-table-head { column-gap: 40px !important; }
@media (max-width: 767px) { .overview-page .ov-header { justify-content: space-between !important; } .ov-live { margin-left: 0 !important; } }
.dark-mode .paper-table-dashboard .paper-table-row { background: transparent !important; }
.mono-hash { font-family: var(--font-mono) !important; font-size: 11.5px; }
.nav-heart-m { display: none; }
@media (max-width: 991px) { .nav-heart-m { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; color: #C25B5E; } .nav-heart-m .ui-icon { width: 18px; height: 18px; fill: currentColor; } .nav-heart-m + .nav-signin-m { margin-left: 4px !important; } }
/* ===== Round 52 ===== */
/* find button pressed while the find bar is open */
.file-card:has(.ace_search:not([style*="none"])) .btn-find { color: var(--accent) !important; background: var(--accent-soft) !important; }
.paper-link-arrow { color: var(--color) !important; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; }
/* FAQ answers use the row width */
.paper-faq details > :not(summary), .paper-faq-a, .paper-faq details p { max-width: none !important; }
/* stats in the display serif */
.paper-stat-value { font-family: var(--font-display, var(--font-serif)) !important; font-weight: 400 !important; letter-spacing: -.01em; }
/* admin */
@media (max-width: 767px) {
.ov-live-extra { display: none; }
.paper-table-dashboard .cell-views.num::after { content: " views"; color: var(--ink-soft); }
.paper-table-dashboard .cell-expires > span:not(.expires-never):not(.expires-past)::before { content: "Expires "; color: var(--ink-soft); }
.admin-page .admin-filters-toggle { width: auto !important; height: 36px !important; padding: 0 12px !important; }
}
.dashboard-quota summary { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-left: 0 !important; }
.q-card.selected { background: var(--accent-soft) !important; }
.dark-mode .q-card.selected { background: rgba(124,199,190,.08) !important; }
.dark-mode .ov-meter .fill.critical, .dark-mode .ov-meter-fill.critical { background: #F08A82 !important; }
/* ===== Round 53 (locked decisions + alignment) ===== */
/* heading chips: chip look, heading font + weight */
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { font-family: inherit !important; font-weight: inherit !important; font-size: .9em !important; background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) !important; padding: 0 .25em !important; border-radius: 6px !important; color: var(--accent) !important; text-decoration: none !important; }
.dark-mode .markdown-body h1 .redact-chip, .dark-mode .markdown-body h2 .redact-chip, .dark-mode .markdown-body h3 .redact-chip { background: rgba(124,199,190,.16) !important; color: #9FE0D7 !important; }
/* "on" tools: teal icon + thin teal border, no fill */
.file-card-head .btn.btn-toggle.is-on, .file-card-head .btn.btn-toggle[aria-pressed="true"], .file-card:has(.ace_search:not([style*="none"])) .btn-find { background: transparent !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent) !important; }
.dark-mode .file-card-head .btn.btn-toggle.is-on, .dark-mode .file-card:has(.ace_search:not([style*="none"])) .btn-find { background: transparent !important; color: #A8DDD6 !important; box-shadow: inset 0 0 0 1px rgba(124,199,190,.5) !important; }
/* toolbar path aligns with the content's left edge; no "repository" root */
@media (min-width: 768px) { .file-card-head { padding-left: 46px !important; } }
.breadcrumb-root { display: none !important; }
.breadcrumb-root + .breadcrumb-item::before { display: none !important; }
/* find: current match clearly stronger, counter darker */
.ace_editor .ace_marker-layer .ace_selection { background: rgba(232,170,40,.65) !important; box-shadow: 0 0 0 1px rgba(160,100,10,.6) !important; }
.ace_search_counter { color: var(--color) !important; opacity: .75; }
/* dark selection */
.dark-mode .files .file.active > a { background: rgba(255,255,255,.12) !important; }
.dark-mode .leftCol { box-shadow: inset -1px 0 0 rgba(255,255,255,.08) !important; }
/* landing secondary text darker */
.paper-stat-sub, .paper-stats .sub, .paper-stat-delta, .hero-mock-doc-bar span { color: #5E5950 !important; }
.dark-mode .paper-stat-sub, .dark-mode .paper-stat-delta { color: #B5AEA3 !important; }
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { font-size: .72em !important; font-weight: 600 !important; vertical-align: .1em; padding: .05em .3em !important; }
/* ===== Round 54 ===== */
.is-unsynced { color: var(--ink-muted) !important; font-size: 12.5px; font-family: var(--font-sans) !important; }
.q-dot.q-dot-idle { background: var(--ink-muted) !important; }
/* dark dashboard: header and rows clearly different */
.dark-mode .paper-table, .dark-mode .paper-table-dashboard { background: transparent !important; }
.dark-mode .paper-table .paper-table-head { background: #24211D !important; }
.dark-mode .paper-table .paper-table-row { background: #141311 !important; }
/* viewer: inset only in reading mode; code view aligns with gutter */
@media (min-width: 768px) {
.file-card.is-code .file-card-head { padding-left: 16px !important; }
.readme-toc { margin-left: 16px; }
.reading-layout { grid-template-columns: minmax(0, 660px) 190px !important; gap: 56px !important; }
}
.dark-mode .leftCol { box-shadow: none !important; border-right: 1px solid var(--border-color) !important; }
.dark-mode .leftCol-resizer, .dark-mode .sidebar-resizer { background: transparent !important; }
.markdown-body h1 .redact-chip, .markdown-body h2 .redact-chip, .markdown-body h3 .redact-chip { box-shadow: none !important; }
.files .file.active > a::before { left: 4px !important; top: 6px !important; bottom: 6px !important; width: 3px !important; border-radius: 2px !important; }
.hero-mock-row.is-active { box-shadow: inset 3px 0 0 var(--accent) !important; border-radius: 6px; }
.paper-eyebrow, .paper-stats-meta-left, .paper-stats-meta-right, .fm-label { color: #57524A !important; }
.dark-mode .paper-eyebrow, .dark-mode .paper-stats-meta-left, .dark-mode .paper-stats-meta-right { color: #BDB6AB !important; }
.demo-match { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 50%, transparent) !important; }
/* ===== Round 55 ===== */
.redact-glue { white-space: nowrap; }
/* one toolbar inset for README and code */
@media (min-width: 768px) { .file-card-head, .file-card.is-code .file-card-head { padding-left: 20px !important; } }
.dark-mode .files .file.active > a { background: rgba(255,255,255,.08) !important; }
.files .file.active > a { position: relative; }
.files .file.active > a::before { left: 0 !important; top: 4px !important; bottom: 4px !important; width: 3px !important; border-radius: 0 2px 2px 0 !important; }
/* admin */
.paper-table .cell-expires .mobile-meta-icon, .admin-page .paper-table [role="cell"] > svg.ui-icon[aria-hidden] { display: none !important; }
@media (max-width: 767px) { .admin-page .paper-table .cell-views.num::after { content: " views"; color: var(--ink-soft); } }
.dark-mode .paper-table .paper-table-row { background: #1E1B18 !important; }
.dark-mode .paper-table .paper-table-head { background: #26231F !important; }
/* ===== Round 56 ===== */
/* one input token on every page */
.paper-page input.form-control, .paper-page textarea.form-control, .paper-page select.form-control, .paper-page input[type="text"], .paper-page input[type="url"], .paper-page input[type="date"], .paper-page input[type="email"], .paper-page textarea { border: 1px solid var(--border-color) !important; border-radius: var(--radius-control) !important; }
.paper-page input:focus, .paper-page textarea:focus, .paper-page select:focus { border-color: var(--accent) !important; }
/* queues: equal-height cards, compact empty state */
.q-detail { align-items: stretch !important; }
.q-throughput { display: flex; flex-direction: column; }
.q-throughput .q-chart-wrap { flex: 1; min-height: 180px; }
/* admin search width shared */
.admin-page .search-wrap { flex: 0 1 420px !important; max-width: 420px !important; }
/* phone overview: Live sits right of the title */
@media (max-width: 767px) {
.overview-page .ov-header { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; }
.overview-page .ov-header .ov-live { margin: 0 0 0 auto !important; align-self: center; }
}
/* ===== Round 56 viewer ===== */
.hero-mock-count { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent) !important; font-weight: 600; font-size: 11.5px; }
.dark-mode .hero-mock-count { background: rgba(124,199,190,.16); color: #A8DDD6 !important; }
.vb-support { color: var(--ink-soft) !important; font-weight: 400 !important; }
.vb-support:hover { color: var(--color) !important; }
@media (max-width: 767px) {
.file-card.is-code .ace_gutter-cell { padding-left: 4px !important; padding-right: 6px !important; }
.file-card.is-code .ace_scroller { left: 30px !important; }
.file-card.is-code .ace_gutter { width: 30px !important; }
}
/* ===== Round 57: find on rendered Markdown ===== */
.md-find-bar { position: sticky; top: 52px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--paper-card); border-bottom: 1px solid var(--border-color); }
.md-find-input { width: 260px; height: 32px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: var(--paper-card); color: var(--color); font: 14px var(--font-sans); }
.md-find-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.md-find-count { font-size: 12.5px; color: var(--ink-soft); min-width: 64px; font-variant-numeric: tabular-nums; }
.md-find-nav { display: inline-flex; }
.md-find-nav button, .md-find-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); background: var(--paper-card); color: var(--color); }
.md-find-nav button:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.md-find-nav button:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; margin-left: -1px; }
.md-find-nav button:disabled { opacity: .45; }
.md-find-close { border: 0; background: transparent; font-size: 20px; border-radius: var(--radius-control); }
.md-find-close:hover { background: var(--hover-bg-color); }
mark.md-find { background: rgba(242,204,96,.45); color: inherit; border-radius: 2px; padding: 0; }
mark.md-find.is-current { background: rgba(232,170,40,.8); box-shadow: 0 0 0 1px rgba(160,100,10,.6); }
/* FAQ icon carries a text label on wide screens */
@media (min-width: 1280px) { .viewer-bar a.vb-icon[href="/faq"] { width: auto !important; padding: 0 10px !important; gap: 6px; } .viewer-bar a.vb-icon[href="/faq"]::after { content: "FAQ"; font: 500 13px var(--font-sans); color: var(--ink-soft); } }
.file-card-head .btn-md-find.is-on { background: transparent !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent) !important; }
.md-find-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* ===== Round 58: one find geometry; outline clears the find bar ===== */
@media (min-width: 768px) { .md-find-bar { padding-left: 63px !important; } }
.md-find-input { width: 240px !important; }
.file-card:has(.md-find-bar) .readme-toc { top: 120px !important; }
.claim-page input, .claim-page textarea { border-color: var(--border-color) !important; }
.connection-status { font-size: 12.5px !important; }
@media (max-width: 767px) { .admin-page .admin-filters-toggle::before { content: ""; width: 14px; height: 14px; margin-right: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat; } .admin-page .admin-filters-toggle { display: inline-flex !important; align-items: center; } }
.paper-faq-title { text-wrap: balance; }
/* sticky toolbar + find bar must be opaque (content was showing through) */
.file-card-head, .md-find-bar { background: var(--paper-card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; }
.dark-mode .file-card-head, .dark-mode .md-find-bar { background: #141311 !important; }
/* ===== Round 59 ===== */
/* README: column + outline centred as one group; tighter top */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 640px) 190px !important; gap: 56px !important; justify-content: center !important; padding: 0 24px !important; } }
.reading-layout .file-content.markdown-body { padding-top: 32px !important; }
/* find input aligns with the content edge in both views */
@media (min-width: 1200px) { .md-find-bar { padding-left: calc((100% - 886px) / 2) !important; } }
/* top bar: one label rule on wide screens */
@media (min-width: 1280px) { .viewer-bar a.vb-bug { width: auto !important; padding: 0 10px !important; gap: 6px; } .viewer-bar a.vb-bug::after { content: "Report a bug"; font: 500 13px var(--font-sans); color: var(--ink-soft); } }
.vb-snapshot { font-size: 13px !important; color: var(--ink-soft) !important; }
/* dashboard: one control height */
.dashboard-page .dashboard-filter-row .form-control, .dashboard-filter-controls .btn-group[aria-label="Type"] > .btn, .dashboard-page .dashboard-filter-controls .dropdown-toggle { height: 36px !important; min-height: 36px !important; }
.dashboard-filter-controls .btn-group[aria-label="Type"] { padding: 0 !important; height: 36px; align-items: center; }
.dashboard-filter-controls .btn-group[aria-label="Type"] > .btn { height: 30px !important; min-height: 30px !important; margin: 3px 0; }
/* errors: keep auto-refresh on the first row */
.errors-page .errors-toolbar { flex-wrap: nowrap !important; }
.errors-page .errors-toolbar input[type="search"] { min-width: 0; flex: 1 1 260px; }
/* tables: lighter header band */
.paper-table .paper-table-head { background: color-mix(in srgb, var(--hover-bg-color) 60%, transparent) !important; }
/* ===== Round 60 ===== */
/* viewer */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 700px) 190px !important; gap: 48px !important; } }
.md-find-bar { padding-top: 4px !important; padding-bottom: 4px !important; }
.md-find-input { height: 30px !important; }
.md-find-input:focus { box-shadow: 0 0 0 1px var(--accent) !important; }
mark.md-find.is-current, .ace_editor .ace_marker-layer .ace_selection { background: rgba(240,190,80,.6) !important; box-shadow: 0 0 0 1px rgba(170,110,20,.5) !important; }
.viewer-bar .vb-right { gap: 12px !important; }
.viewer-bar .vb-right > * { margin: 0 !important; }
/* admin */
.auto-refresh-label { white-space: nowrap !important; }
.errors-page .errors-toolbar { flex-wrap: wrap !important; }
.paper-table .paper-table-head, .errors-page .errors-thead, .errors-page .errors-row-head, .q-table thead th { background: #F3F1EC !important; }
.dark-mode .paper-table .paper-table-head, .dark-mode .errors-page .errors-thead, .dark-mode .q-table thead th { background: #24211D !important; }
.summary-show-label { font-size: 12.5px; color: var(--ink-soft); margin-right: 2px; align-self: center; }
.mono-hash, .anon-sub a.mono-hash { text-decoration: none !important; border-bottom: 0 !important; }
.errors-page .errors-list-head { background: #F3F1EC !important; } .dark-mode .errors-page .errors-list-head { background: #24211D !important; }
.errors-page .errors-toolbar .search-wrap, .errors-page .errors-toolbar input[type="search"] { flex: 1 1 220px !important; max-width: 340px !important; min-width: 0 !important; } .errors-page .errors-toolbar { flex-wrap: nowrap !important; gap: 8px !important; }
/* ===== Round 61 ===== */
/* FAQ: chevron on the right, like every other disclosure */
.faq-section .panel-default .panel-title a { padding: 16px 32px 16px 0 !important; position: relative; display: block; }
.faq-section .panel-default .panel-body { padding-left: 0 !important; }
.faq-section .panel-default .panel-title a:after { left: auto !important; right: 6px !important; }
/* find bar aligned to the toolbar edge, close beside the arrows */
.md-find-bar { padding-left: 20px !important; }
/* viewer wordmark a touch larger */
.vb-logo { font-size: 19px !important; }
@media (max-width: 767px) { .vb-logo { font-size: 18px !important; } .admin-summary .summary-show-label { flex-basis: 100%; } }
/* quiet destructive text button */
.btn-ghost-danger { background: transparent !important; border: 1px solid transparent !important; color: #B42318 !important; display: inline-flex; align-items: center; gap: 6px; }
.btn-ghost-danger:hover { background: color-mix(in srgb, #B42318 8%, transparent) !important; }
.dark-mode .btn-ghost-danger { color: #F08A82 !important; }
/* ===== Round 62: one find design ===== */
mark.md-find { background: rgba(242,204,96,.32) !important; box-shadow: none !important; }
mark.md-find.is-current { background: rgba(232,160,30,.85) !important; box-shadow: 0 0 0 1px rgba(150,90,10,.7) !important; color: #2B2824 !important; }
.md-find-opt { height: 30px; min-width: 32px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: var(--radius-control); background: var(--paper-card); color: var(--ink-soft); font: 600 12px var(--font-sans); }
.md-find-opt.is-on { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.md-find-nav button { color: var(--ink-soft) !important; }
.md-find-close { font-size: 18px !important; font-weight: 300 !important; color: var(--ink-soft) !important; }
/* code find bar: input on the same left edge as the toolbar */
@media (min-width: 768px) { .file-card .ace_search { left: 0 !important; right: 0 !important; padding-left: 20px !important; margin: 0 !important; max-width: none !important; } }
@media (min-width: 768px) { .md-find-bar { padding-left: 71px !important; } }
/* ===== Round 63: both find inputs on the toolbar edge; outline never jumps ===== */
@media (min-width: 768px) {
.md-find-bar { padding-left: 71px !important; }
.file-card .ace_search { overflow: visible !important; }
}
@media (min-width: 1200px) { .readme-toc, .file-card:has(.md-find-bar) .readme-toc { top: 120px !important; } }
/* dark: selected segment clearly lifted */
.dark-mode .dashboard-filter-controls .btn-group[aria-label="Type"] > .btn.btn-primary { background: #3A3631 !important; color: #F2EEE8 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.14) !important; }
/* usernames in the UI face, IDs stay mono */
.admin-page .paper-table .user-name, .admin-page .paper-table .username, .admin-users-row .repo-name, .admin-page:has(.admin-users-row) .cell-anon .repo-name { font-family: var(--font-sans) !important; font-weight: 600; }
/* ===== Round 64 ===== */
/* themed checkbox everywhere in admin + dashboard */
.paper-page input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px !important; height: 16px !important; margin: 0; border: 1.5px solid #A39D92; border-radius: 4px; background: var(--paper-card); display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle; }
.paper-page input[type="checkbox"]::before { content: ""; width: 9px; height: 9px; transform: scale(0); background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.paper-page input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.paper-page input[type="checkbox"]:checked::before { transform: scale(1); }
.paper-page input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dark-mode .paper-page input[type="checkbox"] { border-color: #6E6860; background: transparent; }
/* "none" values share one muted style */
.detail-value.is-empty, .admin-page .detail-value:is(:empty) { color: var(--ink-muted) !important; font-style: italic; }
/* dashboard row icon buttons: 32px hit area */
.paper-table-dashboard .btn-icon-dots, .row-edit { width: 32px !important; height: 32px !important; border-radius: var(--radius-control); }
.paper-table-dashboard .btn-icon-dots:hover, .row-edit:hover { background: var(--hover-bg-color) !important; }
/* ===== Round 65 ===== */
/* queue state filters: pill shows state, no checkbox square */
.q-state-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; pointer-events: none; }
.q-state-toggle { position: relative; cursor: pointer; }
.q-state-toggle input:not(:checked) + .q-state-chip { opacity: .45; text-decoration: line-through; }
.q-state-toggle input:focus-visible + .q-state-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
/* README find aligned to the reading column */
@media (min-width: 768px) { .md-find-bar { padding-left: 31px !important; } }
/* ===== Round 66 ===== */
.paper-page input.form-control, .paper-page textarea, .paper-page select.form-control, .paper-page input[type="text"], .paper-page input[type="url"], .paper-page input[type="date"], .anonymize-page .form-control, .md-find-input, .ace_search .ace_search_field { border-radius: 8px !important; }
.paper-page .btn-primary, .paper-page .btn-ink, .page-head-row .btn-primary { min-height: 40px !important; }
.paper-table .paper-table-head [role="columnheader"], .paper-table .paper-table-head > div, .errors-page .errors-list-head > * { font-weight: 500 !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-soft) !important; }
/* ===== Round 67 ===== */
/* API tokens heading matches the other section headings */
.admin-page .admin-section-header h2 { font: 600 18px/1.3 var(--font-sans) !important; display: inline-flex; align-items: center; gap: 8px; }
.admin-page .admin-section-header h2 .ui-icon { width: 16px; height: 16px; color: var(--ink-soft); }
/* tree selection: marker inside the row, fill a step darker */
.files .file.active > a { background: #E2DED7 !important; }
.files .file.active > a::before { left: 3px !important; }
.dark-mode .files .file.active > a { background: rgba(255,255,255,.09) !important; }
/* ===== Round 68 ===== */
.admin-page:has(.admin-users-row) .paper-table-row, .admin-page:has(.admin-users-row) .paper-table-head { grid-template-columns: 28px minmax(220px, 320px) 120px 140px 1fr 40px !important; }
@media (max-width: 767px) { .mobile-sub { margin-top: 3px !important; } }
.paper-page-lede, .paper-faq-lede { text-wrap: pretty; max-width: 640px; }
.errors-page .status-pill.status-neutral:not([title=""])[title] { background: transparent !important; border-color: transparent !important; color: var(--ink-muted) !important; }
/* ===== Round 69 ===== */
.md-find-bar { min-height: 47px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
.md-find-input:focus, .ace_search .ace_search_field:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
mark.md-find { background: rgba(246,224,138,.7) !important; }
.ace_editor .ace_marker-layer .ace_selected-word { background: rgba(246,224,138,.7) !important; }
.files .file.active > a { background: #E6E3DC !important; }
@media (min-width: 1200px) { .readme-toc { margin-top: 32px !important; padding-top: 0 !important; } }
/* ===== Round 70 ===== */
.errors-page .kpi-card.kpi-info .kpi-value { color: var(--ink-soft) !important; font-weight: 500 !important; font-size: 26px !important; }
.errors-page .kpi-card.kpi-info { background: color-mix(in srgb, var(--paper-card) 70%, transparent) !important; }
.ov-meter span { background: var(--accent); }
.ov-meter.warn span { background: #B7791F !important; }
.ov-meter.crit span { background: #B42318 !important; }
@media (max-width: 767px) { .admin-summary .summary-show-label { flex-basis: auto !important; } }
/* ===== Round 71: phone row meta on one line, visible edit, usage pill, reading balance ===== */
@media (max-width: 767px) {
.paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "name edit more" "meta meta meta" "link link link" !important; column-gap: 2px !important; }
.paper-table-dashboard .cell-actions > .row-edit { display: inline-flex !important; grid-area: edit; align-self: start; align-items: center; justify-content: center; }
.dashboard-page .paper-table-dashboard .dashboard-row-meta { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 !important; padding-left: 26px; font-size: 12.5px; color: var(--ink-soft); }
.dashboard-page .dashboard-row-meta .cell-status { flex: 0 0 auto !important; }
.dashboard-page .dashboard-row-meta .cell-status .status-line { gap: 6px; }
.dashboard-page .dashboard-row-meta .cell-views, .dashboard-page .dashboard-row-meta .cell-expires { display: inline-flex !important; align-items: center; font-family: var(--font-sans, Inter, sans-serif) !important; font-size: 12.5px !important; color: var(--ink-soft) !important; white-space: nowrap; margin: 0 !important; padding: 0 !important; text-align: left !important; justify-content: flex-start !important; }
.dashboard-page .dashboard-row-meta .cell-views::before, .dashboard-page .dashboard-row-meta .cell-expires::before { content: "·"; margin: 0 8px; color: var(--ink-muted); }
.dashboard-page .dashboard-row-meta .cell-views svg, .dashboard-page .dashboard-row-meta .cell-views .ui-icon { display: none !important; }
.dashboard-page .dashboard-row-meta .cell-expires .cell-label, .dashboard-page .dashboard-row-meta .cell-expires small { font-size: inherit !important; color: inherit !important; margin-right: 4px; }
}
/* Usage reads as a control: quiet bordered pill with its ring */
.dashboard-page .dashboard-quota > summary { border: 1px solid var(--border-color) !important; border-radius: 999px !important; padding: 0 12px 0 10px !important; height: 36px; min-height: 36px !important; display: inline-flex !important; align-items: center; gap: 8px; background: var(--paper-card) !important; }
.dashboard-page .dashboard-quota > summary:hover { background: var(--hover-bg-color) !important; }
.dashboard-page .dashboard-quota .quota-summary-ring { display: inline-block !important; width: 16px; height: 16px; }
/* reading mode: narrower measure so the column has real margins beside sidebar and outline */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 660px) 176px !important; gap: 56px !important; justify-content: center !important; } }
/* phone admin summary: count + size on row one, "Show:" heads the pills on its own line */
@media (max-width: 767px) {
.admin-summary .summary-show-label { flex-basis: 100% !important; margin: 4px 0 -2px !important; }
.admin-summary .summary-meta { flex: 1 1 auto; }
}
/* empty throughput chart collapses to a short, honest panel */
.q-throughput:has(.q-chart-empty) .q-chart-wrap { flex: 0 0 auto !important; min-height: 120px !important; height: 120px; }
.q-throughput:has(.q-chart-empty) .q-chart-wrap canvas { visibility: hidden; }
.q-chart-empty { border-bottom: 0 !important; border-radius: 8px; }
/* one find-bar inset for README and code: the toolbar's 20px */
@media (min-width: 768px) { .md-find-bar { padding-left: 20px !important; } .file-card .ace_search { padding-left: 20px !important; } .file-card .ace_search .ace_search_form { margin-left: 0 !important; } }
@media (min-width: 768px) { .file-card .ace_search { left: 0 !important; padding-left: 0 !important; } }
@media (min-width: 1200px) { .md-find-bar { padding-left: max(20px, calc((100% - 892px) / 2)) !important; } }
/* empty throughput: message centred in the full card rather than floating near the top */
.q-throughput:has(.q-chart-empty) .q-chart-wrap { flex: 1 1 auto !important; height: auto !important; min-height: 160px !important; }
/* destructive group is labelled so it reads as separate from the safe actions */
.q-danger-group { align-items: center; flex-wrap: wrap; }
.q-danger-group::before { content: "Clear jobs"; flex-basis: 100%; font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
/* queue legend chips legible */
.q-legend span, .q-legend .q-legend-item, .q-legend button { font-size: 12px !important; }
.q-state-filters .q-state-toggle, .q-state-filters .q-state-toggle * { font-size: 12px !important; }
/* ===== Round 72 admin: underline tabs, neutral selected queue card, neutral KPI values ===== */
.admin-nav a.active, .admin-nav a.router-link-active { background: transparent !important; color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; border-radius: 0 !important; }
.admin-nav a:not(.active):hover { background: transparent !important; color: var(--color) !important; box-shadow: inset 0 -2px 0 var(--border-color) !important; }
.q-card.selected, .dark-mode .q-card.selected { background: var(--paper-card) !important; border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.errors-page .kpi-card .kpi-value, .errors-page .kpi-card.kpi-info .kpi-value, .errors-page .kpi-card.kpi-warn .kpi-value { color: var(--color) !important; font-weight: 600 !important; font-size: 28px !important; }
.errors-page .kpi-card.kpi-info { background: var(--paper-card) !important; }
/* empty throughput: card sizes to content instead of stretching to the stats column */
/* dashboard row icons: darker glyphs so they read as controls */
.paper-table-dashboard .row-edit, .paper-table-dashboard .btn-icon-dots { color: var(--color) !important; opacity: .72; }
.paper-table-dashboard .row-edit:hover, .paper-table-dashboard .btn-icon-dots:hover { opacity: 1; }
@media (max-width: 767px) { .paper-table-dashboard .cell-actions > .row-edit, .paper-table-dashboard .cell-actions > .dropdown { margin-top: -6px; } }
/* ===== Round 73 ===== */
/* viewer bar: FAQ and Report a bug are icon-only ghost buttons (tooltips carry the label) */
@media (min-width: 1280px) { .viewer-bar a.vb-icon[href="/faq"], .viewer-bar a.vb-bug { width: 32px !important; padding: 0 !important; } .viewer-bar a.vb-icon[href="/faq"]::after, .viewer-bar a.vb-bug::after { content: none !important; } }
/* markdown: more space above headings than below */
.markdown-body h2 { margin-bottom: 12px !important; }
.markdown-body h3 { margin-top: 32px !important; margin-bottom: 8px !important; }
.markdown-body h4 { margin-top: 24px !important; margin-bottom: 6px !important; color: var(--ink-soft) !important; }
/* code find input clears the gutter rule and lines up with code text */
@media (min-width: 768px) { .file-card .ace_search { padding-left: 16px !important; } }
/* phone: clearer sideways-scroll cue */
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::after { width: 48px !important; background: linear-gradient(to right, rgba(255,255,255,0), var(--paper-card) 55%) !important; box-shadow: inset -1px 0 0 var(--border-color); }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, rgba(20,19,17,0), #141311 55%) !important; }
}
/* connections: App actions on one row */
.connections-page .connection-actions { flex-wrap: nowrap !important; align-items: center; gap: 12px !important; }
.connections-page .connection-actions .connection-link { white-space: nowrap; }
/* dashboard: actions column has a visible header like the others */
.paper-table-dashboard .paper-table-head .col-link { font-size: inherit; color: inherit; }
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::after { width: 40px !important; background: linear-gradient(to right, rgba(40,32,24,0), rgba(40,32,24,.07)), linear-gradient(to right, rgba(255,255,255,0), #fff 70%) !important; border-right: 2px solid rgba(40,32,24,.12); }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.35)), linear-gradient(to right, rgba(20,19,17,0), #141311 70%) !important; border-right-color: rgba(255,255,255,.08); }
}
.connections-page .connection-actions .btn { white-space: nowrap; }
.connections-page .connection-refresh { width: 36px; height: 36px; justify-content: center; padding: 0 !important; border-radius: var(--radius-control, 8px); margin-left: auto; }
/* ===== Round 74 ===== */
/* FAQ: rows share the answer measure so the chevron stays with its question */
.faq-section .panel-group, .faq-section .faq-cat { max-width: 720px; }
/* code line numbers one step darker */
.ace-chrome .ace_gutter-cell { color: #5F5A52 !important; }
/* connection cards size to their content */
.connections-grid { align-items: start !important; }
.connection-installations { border-bottom: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* form inputs: a border that holds against white cards */
.paper-page input.form-control, .paper-page textarea.form-control, .paper-page select.form-control, .paper-page input[type="text"], .paper-page input[type="url"], .paper-page input[type="date"], .paper-page textarea, .anonymize-page .form-control { border-color: #C2BAAC !important; }
.dark-mode .paper-page input.form-control, .dark-mode .paper-page textarea, .dark-mode .paper-page select.form-control, .dark-mode .paper-page input[type="text"], .dark-mode .paper-page input[type="url"], .dark-mode .paper-page input[type="date"], .dark-mode .anonymize-page .form-control { border-color: #4A453E !important; }
.paper-page textarea::placeholder, .paper-page input::placeholder { color: #A39B8E !important; }
/* phone dashboard row: edit and more share one 36px centre line with the title */
@media (max-width: 767px) {
.paper-table-dashboard .cell-actions > .row-edit, .paper-table-dashboard .cell-actions > .dropdown, .paper-table-dashboard .cell-actions > .dropdown > .btn-icon-dots { width: 36px !important; height: 36px !important; margin-top: -4px !important; align-self: start !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
}
/* ===== Round 75 ===== */
/* connection choice: a quiet text control, not a competing segmented toggle */
.anonymize-page .repo-access-switch { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; gap: 0 !important; display: inline-flex !important; align-items: center; width: auto !important; font-size: 12.5px; color: var(--ink-soft); }
.anonymize-page .repo-access-switch::before { content: "Access:"; margin-right: 6px; color: var(--ink-soft); }
.anonymize-page .repo-access-switch button { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 4px !important; height: auto !important; min-height: 0 !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--ink-soft) !important; flex: 0 0 auto !important; border-radius: 4px !important; }
.anonymize-page .repo-access-switch button + button::before { content: "·"; margin-right: 8px; color: var(--ink-muted); }
.anonymize-page .repo-access-switch button[aria-pressed="true"] { color: var(--color) !important; font-weight: 600 !important; opacity: 1 !important; }
.anonymize-page .repo-access-switch button:not([aria-pressed="true"]):hover { color: var(--accent) !important; text-decoration: underline; }
.anonymize-page .repo-access-switch button .ui-icon { display: none !important; }
/* find: current match is a deeper yellow with an ink outline (no orange) */
mark.md-find.is-current, .ace_editor .ace_marker-layer .ace_selection { background: rgba(240,206,90,.95) !important; box-shadow: 0 0 0 1.5px #5C4A12 !important; color: inherit !important; }
.dark-mode mark.md-find.is-current, .dark-mode .ace_editor .ace_marker-layer .ace_selection { background: rgba(214,178,60,.55) !important; box-shadow: 0 0 0 1.5px #F2D77A !important; }
/* one input border everywhere (forms, search, selects, admin) */
.paper-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .paper-page select, .paper-page textarea, .md-find-input, .ace_search .ace_search_field { border-color: #CFC7B9 !important; }
.dark-mode .paper-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .dark-mode .paper-page select, .dark-mode .paper-page textarea, .dark-mode .md-find-input { border-color: #48433C !important; }
.paper-page input:focus, .paper-page select:focus, .paper-page textarea:focus, .md-find-input:focus, .ace_search .ace_search_field:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
/* queue health dots: idle = healthy green, problems = red */
.q-dot.q-dot-idle { background: #2F7D4F !important; }
.dark-mode .q-dot.q-dot-idle { background: #6FBF8A !important; }
/* outline's first row lines up with the H1 */
@media (min-width: 1200px) { .readme-toc { margin-top: 0 !important; padding-top: 0 !important; } }
@media (min-width: 1200px) { .readme-toc { margin-top: -30px !important; } }
/* ===== Round 76: anonymize configuration workspace ===== */
/* header band sits on the page paper, not a white slab */
.anonymize-workspace .anonymize-topbar { background: var(--paper-bg, var(--background)) !important; border-bottom: 1px solid var(--border-color) !important; }
.anonymize-workspace .type-badge { font-family: var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 12px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 999px !important; background: var(--hover-bg-color) !important; color: var(--ink-soft) !important; border: 0 !important; vertical-align: middle; }
/* themed checkboxes in the form, same as admin and dashboard */
.anonymize-page input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px !important; height: 16px !important; margin: 2px 0 0; border: 1.5px solid #A39D92; border-radius: 4px; background: var(--paper-card); display: inline-grid; place-content: center; cursor: pointer; flex: 0 0 16px; }
.anonymize-page input[type="checkbox"]::before { content: ""; width: 9px; height: 9px; transform: scale(0); background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.anonymize-page input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.anonymize-page input[type="checkbox"]:checked::before { transform: scale(1); }
.anonymize-page input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.anonymize-page input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dark-mode .anonymize-page input[type="checkbox"] { border-color: #6E6860; background: transparent; }
/* commit SHA reads as an identifier */
.anonymize-page #commit { font-family: var(--font-mono, "JetBrains Mono", monospace) !important; font-size: 13px !important; }
/* one input border in the workspace too */
.anonymize-page .form-control, .anonymize-page select, .anonymize-page textarea { border-color: #CFC7B9 !important; }
.dark-mode .anonymize-page .form-control, .dark-mode .anonymize-page select, .dark-mode .anonymize-page textarea { border-color: #48433C !important; }
.anonymize-page .form-control:focus, .anonymize-page textarea:focus, .anonymize-page select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
/* the images/PDF reminder belongs with the submit action */
.anonymize-review-note { font-size: 12.5px !important; color: var(--ink-soft) !important; margin: 0 0 8px !important; }
.anonymize-page .form-check-input[type="checkbox"] { position: absolute !important; margin-left: -28px !important; margin-top: 3px !important; }
.anonymize-page .repo-access-main:not(:has(button, a)), .anonymize-page .repo-access-controls:not(:has(button, a)) { display: none !important; }
.anonymize-page .repo-access-note:not(:has(span + span)) { margin-top: 0 !important; }
/* ===== Round 77: config workspace polish ===== */
/* sticky submit: a real bar with a divider and a fade, so clipped cards look intentional */
.anonymize-form-col .anonymize-submit-bar { position: sticky; bottom: 0; z-index: 3; background: var(--paper-bg-alt) !important; border-top: 1px solid var(--border-color); padding: 12px 0 16px !important; margin-top: 8px; }
.anonymize-form-col .anonymize-submit-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 24px; background: linear-gradient(to bottom, transparent, var(--paper-bg-alt)); pointer-events: none; }
/* closing notes grouped as one quiet footer above the bar */
.anonymize-form-col .draft-status, .anonymize-form-col .anonymize-review-note { font-size: 12.5px !important; color: var(--ink-soft) !important; margin: 0 0 6px !important; padding: 0 2px; }
.anonymize-form-col .anonymize-review-note::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--status-progress, #B7791F); margin-right: 8px; vertical-align: 1px; }
/* Access choice: the active option carries a teal underline so it reads as a control */
.anonymize-page .repo-access-switch button[aria-pressed="true"] { color: var(--accent) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; border-radius: 0 !important; }
/* branch refresh matches the select height */
.anonymize-page .input-group-append .btn-icon { height: 40px !important; width: 40px !important; min-height: 40px !important; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid #CFC7B9 !important; border-radius: 8px !important; margin-left: 8px !important; background: var(--paper-card) !important; }
.dark-mode .anonymize-page .input-group-append .btn-icon { border-color: #48433C !important; }
/* one input border for every form control in the app */
input.form-control, select.form-control, textarea.form-control, .custom-select { border-color: #CFC7B9 !important; }
.dark-mode input.form-control, .dark-mode select.form-control, .dark-mode textarea.form-control, .dark-mode .custom-select { border-color: #48433C !important; }
input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
/* "62 views": one normal space */
@media (max-width: 767px) { .paper-table-dashboard .cell-views.num::after { content: "views" !important; margin-left: 4px; } }
@media (min-width: 768px) { .paper-table-dashboard .cell-views.num::after { content: none !important; } }
@media (max-width: 767px) { .admin-page .paper-table:not(.users-table) .cell-views.num::after { margin-left: 4px; } }
/* inline redaction chips keep the paragraph's line rhythm */
.markdown-body p .redact-chip, .markdown-body li .redact-chip { line-height: 1 !important; padding-top: 1px !important; padding-bottom: 1px !important; vertical-align: baseline; }
/* dark: sidebar a step apart from the reading pane */
.dark-mode .explorer-sidebar, .dark-mode .leftCol { background: #1E1C19 !important; }
/* ===== Round 78 ===== */
/* one segmented control everywhere: grey track, white raised active segment */
.q-range-btns, .errors-page .seg-tabs { display: inline-flex !important; gap: 2px !important; padding: 3px !important; background: var(--hover-bg-color) !important; border: 0 !important; border-radius: 9px !important; }
.q-range-btns .btn, .errors-page .seg-tabs button { border: 0 !important; background: transparent !important; color: var(--ink-soft) !important; border-radius: 7px !important; height: 28px !important; min-height: 28px !important; padding: 0 10px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; }
.q-range-btns .btn.active, .errors-page .seg-tabs button.active { background: var(--paper-card) !important; color: var(--color) !important; box-shadow: 0 1px 2px rgba(40,32,24,.12), 0 0 0 1px rgba(40,32,24,.06) !important; }
.dark-mode .q-range-btns .btn.active, .dark-mode .errors-page .seg-tabs button.active { background: #2C2925 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.06) !important; }
/* find input: thin teal ring, never a heavy dark border */
.md-find-input, .ace_search .ace_search_field { border-width: 1px !important; }
.md-find-input:focus, .ace_search .ace_search_field:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
/* the images/PDF warning is the important note: amber text */
.anonymize-form-col .anonymize-review-note { color: #8A5A12 !important; font-weight: 500; }
.dark-mode .anonymize-form-col .anonymize-review-note { color: #E3B062 !important; }
/* phones: the submit bar stays pinned at the bottom of the screen */
@media (max-width: 767px) { .anonymize-form-col .anonymize-submit-bar { position: sticky !important; bottom: 0 !important; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) !important; } }
/* ===== Round 79 ===== */
/* phones: the form column is not a scroller, so the sticky submit pins to the screen */
@media (max-width: 767px) { .anonymize-form-col { overflow: visible !important; } .anonymize-page .form-group + .form-group, .anonymize-page .form-row > [class*="col"] + [class*="col"] { margin-top: 0 !important; } .anonymize-page .input-group-append .btn-icon { height: 44px !important; width: 44px !important; } }
/* the first-step URL field shares the app's input border */
#sourceUrl-landing, #sourceUrl { border-color: #CFC7B9 !important; }
.dark-mode #sourceUrl-landing, .dark-mode #sourceUrl { border-color: #48433C !important; }
#sourceUrl-landing:focus, #sourceUrl:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
/* amber note at AA on the warm panel */
.anonymize-form-col .anonymize-review-note { color: #6E470C !important; }
/* dark preview: README heading rules use the theme border */
.dark-mode .anonymize-preview-col .markdown-body h1, .dark-mode .anonymize-preview-col .markdown-body h2, .dark-mode .anonymize-preview-col .markdown-body hr { border-color: var(--border-color) !important; }
/* idle queue = neutral dot; red only for paused or failing */
.q-dot.q-dot-idle, .dark-mode .q-dot.q-dot-idle { background: var(--ink-muted) !important; }
.md-find-count, .ace_search .ace_search_counter { color: var(--color) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; font-size: 12.5px !important; }
.readme-toc a:not(.is-active) { color: #57524A !important; }
.dark-mode .readme-toc a:not(.is-active) { color: #B8B1A6 !important; }
.viewer-bar .vb-support { margin-right: 8px !important; }
/* ===== Blackout redactions: terms read like a redacted document ===== */
:root { --redact-bar: #1F1C19; --redact-ink: #5A544C; --redact-reveal: #F4EFE6; }
.dark-mode { --redact-bar: #000000; --redact-ink: #3E3A35; --redact-reveal: #F4EFE6; }
.markdown-body mark.redact-chip, .markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip, .markdown-body h3 mark.redact-chip, .markdown-body h4 mark.redact-chip,
.demo-output .redact-chip, .hero-mock .redact, .hero .redact, span.redact {
background: var(--redact-bar) !important; color: var(--redact-ink) !important; box-shadow: none !important; border: 0 !important;
border-radius: 2px !important; padding: 0 .28em !important; text-decoration: none !important; font-weight: inherit; letter-spacing: .02em;
-webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .12s ease; cursor: help;
}
.dark-mode .markdown-body mark.redact-chip, .dark-mode .demo-output .redact-chip, .dark-mode span.redact { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; }
.markdown-body mark.redact-chip:hover, .demo-output .redact-chip:hover, span.redact:hover { color: var(--redact-reveal) !important; }
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip, .markdown-body h3 mark.redact-chip { font-size: inherit !important; vertical-align: baseline !important; padding: 0 .2em !important; }
/* code: same bar; Ace's text layer ignores hover, the faint label keeps terms distinguishable */
.ace_text-layer .ace_redacted { background: var(--redact-bar) !important; color: var(--redact-ink) !important; border-radius: 2px; box-shadow: none !important; text-decoration: none !important; }
.dark-mode .ace_text-layer .ace_redacted { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; }
/* toolbar count: neutral text with a tiny blackout swatch */
.meta-redact { background: transparent !important; color: var(--ink-soft) !important; box-shadow: none !important; padding: 0 !important; display: inline-flex !important; align-items: center; gap: 6px; font-weight: 500 !important; }
.meta-redact::before { content: ""; width: 14px; height: 8px; border-radius: 1.5px; background: var(--redact-bar); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* blackout: win over the older teal rules */
.ace_editor .ace_text-layer .ace_redacted, .dark-mode .ace_editor .ace_text-layer .ace_redacted { background: var(--redact-bar) !important; color: var(--redact-ink) !important; border-radius: 2px !important; }
.ace_editor .ace_text-layer .ace_redacted { box-shadow: none !important; }
.dark-mode .ace_editor .ace_text-layer .ace_redacted { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; }
.dark-mode .markdown-body h1 mark.redact-chip, .dark-mode .markdown-body h2 mark.redact-chip, .dark-mode .markdown-body h3 mark.redact-chip, .dark-mode .markdown-body mark.redact-chip, .dark-mode .demo-output .redact-chip, .dark-mode span.redact { background: var(--redact-bar) !important; color: var(--redact-ink) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; }
.dark-mode .markdown-body mark.redact-chip:hover, .dark-mode .demo-output .redact-chip:hover { color: var(--redact-reveal) !important; }
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip { color: #3E3933 !important; }
.dark-mode .meta-redact { color: var(--ink-soft) !important; }
.hero-mock-count, .dark-mode .hero-mock-count { background: transparent !important; color: var(--ink-soft) !important; padding: 0 !important; gap: 6px; font-weight: 500 !important; }
.hero-mock-count::before { content: ""; width: 12px; height: 7px; border-radius: 1.5px; background: var(--redact-bar); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
@media (max-width: 767px) { .mobile-sub b, .dark-mode .mobile-sub b { background: transparent !important; color: var(--ink-soft) !important; padding: 0 !important; gap: 5px; font-weight: 500 !important; } .mobile-sub b::before { content: ""; width: 12px; height: 7px; border-radius: 1.5px; background: var(--redact-bar); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } }
/* blackout → tonal: a warm-stone bar from the app's neutral scale */
:root { --redact-bar: #E4DED3; --redact-ink: #8A8378; --redact-reveal: #2B2824; }
.dark-mode { --redact-bar: #34302A; --redact-ink: #8F887D; --redact-reveal: #F1ECE3; }
.markdown-body mark.redact-chip, .demo-output .redact-chip, span.redact, .ace_editor .ace_text-layer .ace_redacted,
.dark-mode .markdown-body mark.redact-chip, .dark-mode .demo-output .redact-chip, .dark-mode span.redact, .dark-mode .ace_editor .ace_text-layer .ace_redacted { box-shadow: none !important; border-radius: 3px !important; }
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip { color: var(--redact-ink) !important; }
.dark-mode .markdown-body h1 mark.redact-chip, .dark-mode .markdown-body h2 mark.redact-chip, .dark-mode .markdown-body h3 mark.redact-chip { box-shadow: none !important; }
.meta-redact::before, .hero-mock-count::before, .mobile-sub b::before { box-shadow: none !important; }
/* ===== Redactions, option 2b: a debossed slot with a small mono "redacted-N" tag ===== */
:root { --redact-bar: #EEEAE2; --redact-ink: #8C8478; --redact-reveal: #2B2824; --redact-deboss: inset 0 1px 2px rgba(60,48,32,.18), inset 0 0 0 1px rgba(60,48,32,.06); }
.dark-mode { --redact-bar: #0E0D0B; --redact-ink: #7A746A; --redact-reveal: #F1ECE3; --redact-deboss: inset 0 1px 2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); }
.markdown-body mark.redact-chip, .dark-mode .markdown-body mark.redact-chip, .demo-output .redact-chip, .dark-mode .demo-output .redact-chip, span.redact, .dark-mode span.redact {
background: var(--redact-bar) !important; color: var(--redact-ink) !important; box-shadow: var(--redact-deboss) !important;
border-radius: 4px !important; padding: .05em .45em !important; font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
font-size: .78em !important; font-weight: 500 !important; letter-spacing: .02em !important; line-height: 1.4 !important; vertical-align: .08em !important; white-space: nowrap;
}
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip, .markdown-body h3 mark.redact-chip,
.dark-mode .markdown-body h1 mark.redact-chip, .dark-mode .markdown-body h2 mark.redact-chip, .dark-mode .markdown-body h3 mark.redact-chip { font-size: .55em !important; vertical-align: .3em !important; color: var(--redact-ink) !important; padding: .15em .5em !important; }
.markdown-body mark.redact-chip:hover, .demo-output .redact-chip:hover, span.redact:hover { color: var(--redact-reveal) !important; }
/* code keeps the raw text but sits in the same debossed slot */
.ace_editor .ace_text-layer .ace_redacted, .dark-mode .ace_editor .ace_text-layer .ace_redacted { background: var(--redact-bar) !important; color: var(--redact-ink) !important; box-shadow: var(--redact-deboss) !important; border-radius: 3px !important; }
.meta-redact::before, .hero-mock-count::before, .mobile-sub b::before { background: var(--redact-bar) !important; box-shadow: var(--redact-deboss) !important; border-radius: 2px !important; }
/* ===== Redaction slot (option B): a blank stone slot with the term number tucked inside ===== */
:root { --slot-bg: #E3DCD0; --slot-bg-sel: #D3CBBD; --slot-num: #1F5F5A; }
.dark-mode { --slot-bg: #3A352F; --slot-bg-sel: #4A443C; --slot-num: #7CC7BE; }
.redact-slot,
.markdown-body mark.redact-chip, .dark-mode .markdown-body mark.redact-chip,
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip, .markdown-body h3 mark.redact-chip, .markdown-body h4 mark.redact-chip,
.dark-mode .markdown-body h1 mark.redact-chip, .dark-mode .markdown-body h2 mark.redact-chip, .dark-mode .markdown-body h3 mark.redact-chip,
.demo-output .redact-chip, .dark-mode .demo-output .redact-chip, span.redact, .dark-mode span.redact {
display: inline-flex !important; align-items: center !important; justify-content: flex-end !important;
min-width: 2.5em !important; height: 1.12em !important; padding: 0 .32em !important; margin: 0 .06em !important;
background: var(--slot-bg) !important; color: var(--slot-num) !important; box-shadow: none !important; border: 0 !important;
border-radius: 3px !important; vertical-align: -.2em !important; line-height: 1 !important; font-size: inherit !important;
letter-spacing: 0 !important; text-decoration: none !important; cursor: help; white-space: nowrap;
}
.redact-slot i, .markdown-body mark.redact-chip i, span.redact i { font: 700 .66em/1 var(--font-sans, Inter, sans-serif) !important; font-style: normal !important; color: var(--slot-num) !important; }
.demo-output .redact-chip { font: 700 .66em/1 var(--font-sans, Inter, sans-serif) !important; min-width: 3.8em !important; height: 1.7em !important; vertical-align: -.35em !important; }
/* headings: a slightly shorter slot so it doesn't read as a block */
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip { height: .95em !important; vertical-align: -.1em !important; border-radius: 4px !important; }
/* tree: compact, and a step darker on the selected row */
.files .redact-slot { min-width: 2.3em !important; height: 1.08em !important; vertical-align: -.18em !important; }
.files .file.active > a .redact-slot, .files a[aria-current] .redact-slot { background: var(--slot-bg-sel) !important; }
.breadcrumb .redact-slot { vertical-align: -.22em !important; }
/* code: keep the raw text's width (columns stay aligned), hide it, show the number */
.ace_editor .ace_text-layer .ace_redacted, .dark-mode .ace_editor .ace_text-layer .ace_redacted { position: relative; color: transparent !important; background: var(--slot-bg) !important; box-shadow: none !important; border-radius: 3px !important; }
.ace_editor .ace_text-layer .ace_redacted::after { position: absolute; right: .35em; top: 50%; transform: translateY(-50%); font: 700 9.5px/1 var(--font-sans, Inter, sans-serif); color: var(--slot-num); }
/* toolbar and mock counts: a tiny matching slot */
.meta-redact::before, .hero-mock-count::before, .mobile-sub b::before { background: var(--slot-bg) !important; box-shadow: none !important; border-radius: 2px !important; }
.files .tree-name { display: inline-flex; align-items: center; gap: 0; min-width: 0; }
.files .tree-name .redact-slot { vertical-align: middle !important; margin: 0 .08em !important; }
.markdown-body p mark.redact-chip, .markdown-body li mark.redact-chip { vertical-align: -.16em !important; }
/* ===== Round 80 ===== */
/* current find match: deeper amber with an amber ring, no black */
mark.md-find.is-current, .ace_editor .ace_marker-layer .ace_selection { background: rgba(240,196,70,.95) !important; box-shadow: 0 0 0 2px rgba(196,140,20,.55) !important; }
.dark-mode mark.md-find.is-current, .dark-mode .ace_editor .ace_marker-layer .ace_selection { background: rgba(214,170,50,.6) !important; box-shadow: 0 0 0 2px rgba(240,200,90,.55) !important; }
/* slot numbers legible at small sizes */
span.redact i, .demo-output .redact-chip { font-size: 10px !important; }
.dark-mode { --slot-num: #8FD6CC; }
/* heading slots: shorter and narrower so a slot-only title doesn't read as two blocks */
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip, .dark-mode .markdown-body h1 mark.redact-chip, .dark-mode .markdown-body h2 mark.redact-chip { min-width: 1.9em !important; height: .78em !important; vertical-align: 0 !important; padding: 0 .22em !important; }
/* viewer top bar: one even rhythm for the icon group */
.viewer-bar .vb-right { gap: 4px !important; }
.viewer-bar .vb-right .vb-icon { width: 34px !important; height: 34px !important; margin: 0 !important; }
.viewer-bar .vb-support { margin-right: 10px !important; }
.viewer-bar .vb-snapshot { margin-right: 14px !important; }
/* phone summary line readable */
@media (max-width: 767px) { .mobile-sub { font-size: 13px !important; color: #5F5A52 !important; } .dark-mode .mobile-sub { color: #B3ACA1 !important; } }
.file-card-meta { overflow: visible !important; }
/* ===== Round 81 ===== */
/* one control border: inputs, selects and toolbar buttons share the input stone */
:root { --control-border: #CFC7B9; } .dark-mode { --control-border: #48433C; }
.anonymize-page #sourceUrl-landing, .anonymize-page #sourceUrl, .anonymize-page .form-control-lg, .anonymize-page select.form-control, .anonymize-page #branch,
.dashboard-page .filter-btn, .dashboard-page .dropdown-toggle, .dashboard-page .dashboard-quota > summary,
.admin-page .btn:not(.btn-ink):not(.btn-primary):not(.btn-outline-danger):not(.summary-pill), .admin-page select, .errors-page select, .q-range-btns + .btn { border-color: var(--control-border) !important; }
.anonymize-page #sourceUrl-landing:focus, .anonymize-page #sourceUrl:focus { border-color: var(--accent) !important; }
/* toolbars: one 36px control height */
.errors-page .seg-tabs { height: 36px !important; align-items: center; }
.errors-page .seg-tabs button { height: 30px !important; }
.admin-page .admin-toolbar .btn, .admin-page .btn-export, .admin-page a.btn[href*="export"], .admin-page button[title*="xport"] { height: 36px !important; min-height: 36px !important; }
/* phones: "62 views" is one run */
@media (max-width: 767px) { .paper-table .cell-views { gap: 0 !important; } }
/* config workspace shares the site container edge */
@media (min-width: 1200px) {
.anonymize-workspace .anonymize-topbar-inner, .anonymize-workspace .anonymize-split { max-width: 1048px; margin-left: auto !important; margin-right: auto !important; }
.anonymize-workspace .anonymize-topbar { padding-left: 0 !important; padding-right: 0 !important; }
.anonymize-workspace .anonymize-form-col { padding-left: 0 !important; }
}
/* phones: the sticky submit sits inside the gutters with the desktop radius */
@media (max-width: 767px) { .anonymize-form-col .anonymize-submit-bar { margin: 8px 0 0 !important; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) !important; } .anonymize-form-col .anonymize-submit-bar .btn { border-radius: 10px !important; } }
/* failed README image */
.img-unavailable { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px dashed var(--control-border); border-radius: 8px; font-size: 12.5px; color: var(--ink-soft); background: var(--hover-bg-color); }
.anonymize-form-col .draft-status { color: var(--ink-soft) !important; }
.errors-page .errors-toolbar select, .errors-page .errors-toolbar .form-control, .errors-page form select { border-color: var(--control-border) !important; }
@media (min-width: 1200px) {
.anonymize-workspace .anonymize-form-col, .anonymize-workspace .anonymize-form-col form, .anonymize-workspace .anonymize-form-col .paper-section { padding-left: 0 !important; }
.anonymize-workspace .anonymize-form-col { background: transparent !important; padding-right: 24px !important; }
.anonymize-workspace .anonymize-form-col .anonymize-submit-bar, .anonymize-workspace .anonymize-form-col .anonymize-submit-bar::before { background: var(--paper-bg, var(--background)) !important; }
.anonymize-workspace .anonymize-form-col .anonymize-submit-bar::before { background: linear-gradient(to bottom, transparent, var(--paper-bg, #FAF9F6)) !important; }
}
@media (max-width: 767px) { .anonymize-page .form-row > [class*="col"] .form-group, .anonymize-page .form-row > .form-group { margin-bottom: 14px !important; } .anonymize-page .form-row > [class*="col"] { margin-bottom: 0 !important; padding-bottom: 0 !important; } }
@media (min-width: 1200px) {
.anonymize-workspace .anonymize-form-col .anonymize-submit-bar { background: #FAF9F6 !important; }
.anonymize-workspace .anonymize-form-col .anonymize-submit-bar::before { background: linear-gradient(to bottom, rgba(250,249,246,0), #FAF9F6) !important; }
.dark-mode .anonymize-workspace .anonymize-form-col .anonymize-submit-bar { background: #161412 !important; }
.dark-mode .anonymize-workspace .anonymize-form-col .anonymize-submit-bar::before { background: linear-gradient(to bottom, rgba(22,20,18,0), #161412) !important; }
}
/* ===== Round 82: slot legibility and line rhythm ===== */
:root { --slot-num: #0F4F4A; } .dark-mode { --slot-num: #A8E6DD; --slot-bg: #3F3A33; }
.markdown-body p mark.redact-chip, .markdown-body li mark.redact-chip, .markdown-body td mark.redact-chip, span.redact {
display: inline-block !important; height: 1.08em !important; line-height: 1.08em !important; vertical-align: -.17em !important;
min-width: 2.5em !important; text-align: right !important; padding: 0 .34em !important;
}
.markdown-body p mark.redact-chip i, .markdown-body li mark.redact-chip i, .markdown-body td mark.redact-chip i, span.redact i, .files .redact-slot i, .breadcrumb .redact-slot i {
font-size: max(10.5px, .72em) !important; line-height: inherit !important; vertical-align: top !important; font-weight: 700 !important;
}
.markdown-body h1 mark.redact-chip i, .markdown-body h2 mark.redact-chip i, .markdown-body h3 mark.redact-chip i { font-size: .62em !important; }
.ace_editor .ace_text-layer .ace_redacted::after { font-size: 10.5px !important; }
.demo-output .redact-chip { font-size: 11px !important; }
/* ===== Round 83 ===== */
/* errors chart: info is a faint background band */
.errors-page .vol-info, .errors-page .bar-info, .errors-page [class*="seg-info"] { opacity: .45; }
/* connection cards: equal height, actions pinned to the bottom, one rule */
.connections-grid { align-items: stretch !important; }
.connections-grid > section { display: flex; flex-direction: column; }
.connections-grid > section .connection-installations { margin-top: auto !important; border-top: 1px solid var(--border-color); border-bottom: 0 !important; }
/* one active-state language: the site nav uses the teal underline like the admin tabs */
.navbar .nav-link.active, .site-nav .nav-link.active, header .nav-link.active { color: var(--color) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; border-bottom-color: transparent !important; }
/* config: keep the way back on phones, and a clear quiet Discard */
@media (max-width: 767px) { .anonymize-topbar .paper-crumbs { display: block !important; margin-bottom: 4px; font-size: 13px; } }
.anonymize-form-col .draft-discard { background: none; border: 0; padding: 0 0 0 6px; font-size: 12.5px; font-weight: 500; color: var(--color) !important; text-decoration: underline; text-underline-offset: 3px; }
.anonymize-form-col .draft-discard:hover { color: #B42318 !important; }
/* ===== Round 84 ===== */
/* phone summary: same "· [swatch] N redacted" pattern as desktop */
@media (max-width: 767px) {
.mobile-sub b { display: inline-flex !important; align-items: center; gap: 5px; font-weight: 400 !important; color: inherit !important; }
.mobile-sub b::before { content: "" !important; display: inline-block !important; width: 12px; height: 7px; border-radius: 2px; background: var(--slot-bg) !important; }
.mobile-sub span:has(+ b)::after { content: "·"; margin: 0 6px; opacity: .7; }
}
/* landing demo + hero mock: slots on the text baseline */
.demo-output .redact-chip, span.redact { display: inline-block !important; height: 1.15em !important; line-height: 1.15em !important; vertical-align: -.2em !important; text-align: right !important; }
.demo-output .redact-chip { font-size: 11px !important; min-width: 3.4em !important; }
/* code line numbers at AA */
.ace-chrome .ace_gutter-cell { color: #5A554D !important; }
.dark-mode .ace_editor .ace_gutter-cell { color: #A39C91 !important; }
/* selected tree row a touch clearer */
.files .file.active > a { background: #E2DED6 !important; }
/* reading column at the ~720px the brief specifies */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 700px) 176px !important; gap: 44px !important; } }
/* ===== Round 85 ===== */
/* hover-only styles never stick on touch screens */
@media (hover: none) { .anonymize-page .repo-access-switch button:not([aria-pressed="true"]):hover { color: var(--ink-soft) !important; text-decoration: none !important; } }
/* connection cards: content flows from the top, one rule above "Installed on", no gap */
.connections-grid > section .connection-installations { margin-top: 16px !important; }
/* Usage: a small progress bar instead of a ring that reads as a spinner */
.dashboard-page .dashboard-quota .quota-summary-ring { display: none !important; }
.dashboard-page .dashboard-quota > summary::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--quota-pct, 5%), var(--border-color) 0); flex: 0 0 28px; }
/* empty throughput: a compact panel, the stats card sets the row height no longer */
/* dashboard row: open, edit, more share one 32px rhythm */
.paper-table-dashboard .row-open { margin-right: 2px; }
@media (max-width: 767px) { .paper-table-dashboard .cell-actions > .row-open { display: none !important; } }
.dashboard-page .dashboard-quota > summary::before { width: 32px; height: 5px; flex-basis: 32px; background: linear-gradient(to right, var(--accent) 0 max(3px, var(--quota-pct, 5%)), #D9D3C8 0) !important; }
.dark-mode .dashboard-page .dashboard-quota > summary::before { background: linear-gradient(to right, #7CC7BE 0 max(3px, var(--quota-pct, 5%)), #3A352F 0) !important; }
/* ===== Round 86 ===== */
/* reading column: 680 + outline, ~50px each side at 1280 */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 680px) 176px !important; gap: 44px !important; } .md-find-bar { padding-left: max(20px, calc((100% - 900px) / 2)) !important; } }
/* slot numbers carry identity: larger */
.markdown-body p mark.redact-chip i, .markdown-body li mark.redact-chip i, .markdown-body td mark.redact-chip i, span.redact i, .files .redact-slot i, .breadcrumb .redact-slot i { font-size: max(11px, .8em) !important; letter-spacing: .01em; }
/* selected tree row lighter than the slot stone so slots stay visible inside it */
.files .file.active > a { background: #EBE7E0 !important; }
.files .file.active > a .redact-slot { background: #D6CEC0 !important; }
/* landing demo slot: same geometry as the viewer's */
.demo-output .redact-chip { font-size: 12px !important; height: 1.3em !important; line-height: 1.3em !important; min-width: 3em !important; vertical-align: -.28em !important; padding: 0 .4em !important; }
/* dashboard row actions: 32px targets with breathing room from the link chip */
.paper-table-dashboard .cell-actions { gap: 4px !important; }
.paper-table-dashboard .cell-actions > .copy-url { margin-right: 6px !important; }
.paper-table-dashboard .row-edit, .paper-table-dashboard .btn-icon-dots { width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 8px; }
.paper-table-dashboard .row-edit:hover, .paper-table-dashboard .btn-icon-dots:hover { background: var(--hover-bg-color) !important; }
/* config: commit hash ends in an ellipsis; phone fields share one rhythm */
.anonymize-page #commit { text-overflow: ellipsis; }
@media (max-width: 767px) { .anonymize-page .form-grid-2 { row-gap: 0 !important; gap: 0 !important; } .anonymize-page .form-grid-2 > .form-group { margin-bottom: 16px !important; } }
/* connections: the footer row reads as part of the card, no second rule */
.connections-grid > section .connection-installations { border-top: 0 !important; padding-top: 0 !important; }
/* ===== Round 87 ===== */
/* viewer bar: FAQ + Report a bug live in one labelled Help menu */
.vb-help { position: relative; display: inline-flex; }
.vb-help-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: 500 13px var(--font-sans, Inter, sans-serif); cursor: pointer; }
.vb-help-btn:hover, .vb-help-btn[aria-expanded="true"] { background: var(--hover-bg-color); color: var(--color); }
.vb-help-menu { position: absolute; top: calc(100% + 8px) !important; right: 0; left: auto; min-width: 250px; z-index: 50; }
.vb-help-menu a { display: flex; gap: 10px; align-items: flex-start; }
.vb-help-menu small { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 400; margin-top: 1px; }
@media (max-width: 767px) { .viewer-bar .vb-help { display: none !important; } }
/* dashboard: the Link header starts where the link chip starts */
.paper-table-dashboard .paper-table-head .col-link { padding-left: 0 !important; margin-left: -16px; }
/* config step: a compact title band so more of the form is visible */
@media (min-width: 768px) {
.anonymize-workspace .anonymize-topbar { padding-top: 12px !important; padding-bottom: 12px !important; }
.anonymize-workspace .anonymize-topbar .paper-crumbs { margin-bottom: 2px !important; }
.anonymize-workspace .anonymize-topbar h1, .anonymize-workspace .anonymize-topbar .paper-page-title { font-size: 26px !important; margin: 0 !important; }
}
/* one placeholder tone everywhere: clearly lighter than entered text */
input::placeholder, textarea::placeholder, .form-control::placeholder, #sourceUrl-landing::placeholder, #terms::placeholder { color: #A39B8E !important; opacity: 1 !important; }
.dark-mode input::placeholder, .dark-mode textarea::placeholder, .dark-mode .form-control::placeholder { color: #6F695F !important; }
/* queue legend: "active" uses the accent, not black */
.q-state-toggle .q-dot-active, .q-state-filters .q-legend-active, .q-state-filters [class*="active"] > .q-dot, .q-dot-active { background: var(--accent) !important; }
/* ===== Round 88 ===== */
@media (max-width: 767px) {
.mobile-sub b { font-size: inherit !important; gap: 6px !important; margin-left: 0 !important; padding-left: 0 !important; }
.mobile-sub span:has(+ b)::after { margin: 0 6px 0 6px !important; }
.mobile-sub b::before { width: 14px !important; height: 8px !important; background: #D6CEC0 !important; }
.file-card-head { min-height: 56px !important; }
}
/* heading slots: lighter numbers, tighter padding */
.markdown-body h1 mark.redact-chip i, .markdown-body h2 mark.redact-chip i { font-weight: 600 !important; font-size: .58em !important; }
.markdown-body h1 mark.redact-chip, .markdown-body h2 mark.redact-chip, .dark-mode .markdown-body h1 mark.redact-chip, .dark-mode .markdown-body h2 mark.redact-chip { min-width: 1.6em !important; padding: 0 .18em !important; }
/* outline: nested levels a step smaller and lighter */
.readme-toc a.lvl-3 { font-size: 12.5px !important; color: #6E685F !important; }
.dark-mode .readme-toc a.lvl-3 { color: #9C958A !important; }
/* code toolbar: view tools set apart from Raw | Copy | Download */
.file-card-head .file-card-tools, .file-card-head .view-tools { margin-right: 10px !important; padding-right: 10px !important; border-right: 1px solid var(--border-color) !important; }
/* selection: visible fill, slot a step darker inside it */
.files .file.active > a { background: #E5E0D8 !important; }
.files .file.active > a .redact-slot { background: #CEC5B5 !important; }
/* slot baseline */
.markdown-body p mark.redact-chip, .markdown-body li mark.redact-chip, .markdown-body td mark.redact-chip { vertical-align: -.1em !important; }
/* phone code fade: narrower, and gone at the right edge */
@media (max-width: 767px) { .file-card.is-code.no-wrap .file-card-body::after { width: 24px !important; transition: opacity .15s; } .file-card.at-right-edge .file-card-body::after { opacity: 0 !important; } }
/* hero mock: selection marker inside the row */
.hero-mock .is-active, .hero-mock [class*="active"] { position: relative; }
.hero-mock .is-active::before { left: 0 !important; }
/* ===== Round 89 ===== */
/* config: the last line of the form clears the sticky bar's fade */
.anonymize-form-col form { padding-bottom: 36px !important; }
/* connections: one body size and one inline action pattern in both cards */
.connections-grid > section p { font-size: 13.5px !important; line-height: 1.55 !important; }
.connections-grid > section > .btn, .connections-grid > section > a.btn { width: auto !important; align-self: flex-start; }
/* phone dashboard rows: 40px action targets, even separators */
@media (max-width: 767px) {
.paper-table-dashboard .cell-actions > .row-edit, .paper-table-dashboard .cell-actions > .dropdown, .paper-table-dashboard .cell-actions > .dropdown > .btn-icon-dots { width: 40px !important; height: 40px !important; }
.dashboard-page .dashboard-row-meta .cell-status, .dashboard-page .dashboard-row-meta .cell-views, .dashboard-page .dashboard-row-meta .cell-expires { padding: 0 !important; margin: 0 !important; }
.dashboard-page .dashboard-row-meta .cell-views::before, .dashboard-page .dashboard-row-meta .cell-expires::before { margin: 0 7px !important; width: auto !important; }
.dashboard-page .dashboard-row-meta .status-line { padding: 0 !important; margin: 0 !important; }
.dashboard-page .dashboard-row-meta .cell-expires .cell-label { margin-right: 4px !important; }
}
.connection-installations, .connection-installations li { border: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.connection-installations li { padding-top: 0 !important; }
.connections-page .connection-refresh { margin-left: 0 !important; }
/* ===== Round 90 ===== */
/* config submit: a solid bar with a hairline; no fade over the form */
.anonymize-form-col .anonymize-submit-bar::before { display: none !important; }
.anonymize-form-col .anonymize-submit-bar { border-top: 1px solid var(--border-color) !important; box-shadow: 0 -6px 12px -10px rgba(40,32,24,.18); }
.anonymize-form-col form { padding-bottom: 24px !important; }
/* failed README image: a neutral block in the UI font */
.img-unavailable { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 72px; border: 1px solid var(--border-color) !important; border-style: solid !important; background: var(--hover-bg-color); font: 500 12.5px var(--font-sans, Inter, sans-serif) !important; color: var(--ink-soft); }
.img-unavailable::before { content: ""; width: 16px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px; opacity: .7; background: linear-gradient(135deg, transparent 55%, currentColor 55% 62%, transparent 62%); }
/* excluded "Removed" pill: label struck, count stays legible */
.admin-summary .summary-pill:not(.active) .count { text-decoration: none !important; opacity: 1 !important; color: var(--ink-soft) !important; }
.admin-summary .summary-pill:not(.active)::before { background: #8A8680 !important; }
/* Usage meter wider with a visible track */
.dashboard-page .dashboard-quota > summary::before { width: 44px !important; flex-basis: 44px !important; }
/* reading column balanced between sidebar and outline */
@media (min-width: 1200px) { .reading-layout { grid-template-columns: minmax(0, 664px) 176px !important; gap: 40px !important; } .md-find-bar { padding-left: max(20px, calc((100% - 880px) / 2)) !important; } }
/* toolbar: a hairline before the Raw | Copy | Download group */
.file-card-head .tb-file { margin-left: 8px !important; position: relative; }
.file-card-head .tb-file::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 1px; background: var(--border-color); }
/* sidebar search: readable placeholder and key chip */
.tree-search-input::placeholder { color: #8A8378 !important; }
.tree-search-kbd { color: #6E685F !important; border: 1px solid var(--border-color) !important; background: var(--paper-card) !important; }
@media (max-width: 767px) {
.mobile-sub { gap: 0 !important; column-gap: 0 !important; }
.mobile-sub > span + span::before, .mobile-sub span:has(+ b)::after { margin: 0 6px !important; }
.mobile-sub b::before { margin: 0 !important; }
.file-card-head { min-height: 52px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
}
/* ===== Round 91 ===== */
/* errors chart: legend swatches are the exact bar fills */
.errors-page .seg-info, .errors-page .dot-info { background: #CFC9BF !important; opacity: 1 !important; }
.dark-mode .errors-page .seg-info, .dark-mode .errors-page .dot-info { background: #4A453E !important; }
.errors-page .seg-error, .errors-page .dot-error { background: #B42318 !important; }
.errors-page .seg-warn, .errors-page .dot-warn { background: #B7791F !important; }
/* dark viewer: sidebar and top bar one clear step above the reading pane */
.dark-mode .leftCol, .dark-mode .viewer-bar { background: #221F1B !important; }
/* copy chip reads as a button */
.paper-table-dashboard .copy-url { box-shadow: inset 0 0 0 1px var(--control-border, #CFC7B9) !important; background: var(--paper-card) !important; }
.paper-table-dashboard .copy-url .ui-icon, .paper-table-dashboard .copy-url svg { width: 15px !important; height: 15px !important; color: var(--color) !important; opacity: .75; }
.paper-table-dashboard .copy-url:hover { background: var(--hover-bg-color) !important; }
/* config preview reaches the container edge */
@media (min-width: 1200px) { .anonymize-workspace .anonymize-preview-col { padding-right: 0 !important; } }
/* ===== Round 92 ===== */
/* draft note lives inside the sticky bar, above the button */
.anonymize-submit-bar .draft-status { display: block; margin: 0 0 8px !important; font-size: 12.5px !important; }
/* phone rows: Open is back beside Edit */
@media (max-width: 767px) { .paper-table-dashboard .cell-actions > .row-open { display: inline-flex !important; grid-area: auto; } .paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(0, 1fr) auto auto auto !important; grid-template-areas: "name open edit more" "meta meta meta meta" "link link link link" !important; } .paper-table-dashboard .cell-actions > .row-open { grid-area: open; width: 40px !important; height: 40px !important; align-self: start; margin-top: -4px; } }
/* overview: high / critical readings tint their card */
.overview-page .ov-kpi:has(.ov-meter.crit), .overview-page .ov-card:has(.ov-meter.crit), .overview-page .ov-meter.crit { }
.overview-page :is(.ov-kpi, .ov-card, .kpi-card):has(.ov-meter.crit) { border-color: rgba(180,35,24,.45) !important; box-shadow: inset 3px 0 0 #B42318 !important; }
.overview-page :is(.ov-kpi, .ov-card, .kpi-card):has(.ov-meter.warn):not(:has(.ov-meter.crit)) { border-color: rgba(183,121,31,.45) !important; box-shadow: inset 3px 0 0 #B7791F !important; }
/* dark slots a step lighter */
.dark-mode { --slot-bg: #46403A; }
/* one accordion chevron language: down when closed, up when open */
.faq-section .panel-default .panel-title a:after { transform: rotate(45deg) !important; }
.faq-section .panel-default .panel-title a[aria-expanded="true"]:after { transform: rotate(-135deg) !important; }
.overview-page .ov-kpi-card:has(.ov-meter.crit) { border-color: rgba(180,35,24,.45) !important; box-shadow: inset 3px 0 0 #B42318 !important; }
.overview-page .ov-kpi-card:has(.ov-meter.warn):not(:has(.ov-meter.crit)) { border-color: rgba(183,121,31,.45) !important; box-shadow: inset 3px 0 0 #B7791F !important; }
@media (max-width: 767px) { .paper-table-dashboard .cell-anon, .paper-table-dashboard .cell-anon > *, .paper-table-dashboard .cell-anon a, .paper-table-dashboard .cell-anon strong { min-width: 0; } .paper-table-dashboard .cell-anon .anon-title, .paper-table-dashboard .cell-anon .anon-title > a, .paper-table-dashboard .cell-anon .anon-name { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; overflow-wrap: normal !important; display: block; } }
/* ===== Round 93 ===== */
/* users filter pills: status dots match the row statuses */
.users-page .summary-pill.ok::before, .admin-page .summary-pill.ok::before { background: var(--status-ready, #2F7D4F) !important; }
.admin-page .summary-pill.error::before { background: var(--status-error, #B42318) !important; }
/* phone rows: the name gets the full row; Open lives in the ⋯ menu on phones */
@media (max-width: 767px) {
.paper-table-dashboard .cell-actions > .row-open { display: none !important; }
.paper-table.paper-table-dashboard .paper-table-row { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "name edit more" "meta meta meta" "link link link" !important; }
.paper-table-dashboard .cell-anon .anon-title, .paper-table-dashboard .cell-anon .anon-title > a { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; }
}
/* viewer: sidebar header ends on the same line as the toolbar (y=96) */
/* code: calmer keyword hue, so teal stays the loudest colour */
.ace-chrome .ace_keyword, .ace-chrome .ace_storage, .ace-chrome .ace_storage.ace_type { color: #7A3E6B !important; }
.dark-mode .ace_editor .ace_keyword, .dark-mode .ace_editor .ace_storage { color: #D3A3C6 !important; }
/* dark slots: lighter fill, light-teal numbers */
.dark-mode { --slot-bg: #4A443D; --slot-num: #9FE0D6; }
/* FAQ display heading wraps without an orphan */
.faq-page h1, .paper-page-title, .faq-hero h1 { text-wrap: balance; }
/* outline label aligned to the first heading */
@media (min-width: 1200px) { .readme-toc { margin-top: -18px !important; } }
@media (min-width: 768px) { .leftCol-search { height: 52px !important; min-height: 52px !important; box-sizing: border-box; display: flex !important; align-items: center; padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: 1px solid var(--border-color) !important; margin-bottom: 6px !important; } }
/* phone code: a clear 32px edge cue while more code is to the right */
@media (max-width: 767px) { .file-card.is-code.no-wrap .file-card-body::after { width: 32px !important; background: linear-gradient(to right, rgba(255,255,255,0), #fff 75%) !important; border-right: 2px solid rgba(40,32,24,.14); } .dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, rgba(20,19,17,0), #141311 75%) !important; border-right-color: rgba(255,255,255,.1); } }
/* config: the sticky bar ends flush with the column, so it no longer jumps at the end of the scroll */
.anonymize-form-col form { padding-bottom: 0 !important; }
.anonymize-form-col .anonymize-submit-bar { margin-bottom: 0 !important; }
/* errors: the bucket tiles double as filters */
.errors-page .kpi-filter { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.errors-page .kpi-filter:hover { border-color: var(--control-border, #CFC7B9) !important; }
.errors-page .kpi-filter.is-selected { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.errors-page .kpi-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ===== Round 94 ===== */
/* outline: inactive items readable */
.readme-toc a:not(.is-active) { color: #4F4A43 !important; }
.readme-toc a.lvl-3:not(.is-active) { color: #625C53 !important; }
/* find: a 1px ring so it doesn't double up with the toolbar's on-state */
.md-find-input:focus, .ace_search .ace_search_field:focus { box-shadow: 0 0 0 2px var(--accent-soft) !important; border-color: var(--accent) !important; }
/* phone toolbar: toggle sits on the file-name line */
@media (max-width: 767px) { .file-card-head { align-items: flex-start !important; } .file-card-head .btn-sidebar-toggle, .file-card-head .mobile-files-toggle, .file-card-head > button:first-child { margin-top: 2px !important; } }
/* phone dashboard: one 40px control height on both rows */
@media (max-width: 767px) { .dashboard-page .dashboard-quota > summary, .dashboard-page #search, .dashboard-page .dashboard-heading-actions .btn, .dashboard-page .filters-toggle, .dashboard-page .btn-filters { height: 40px !important; min-height: 40px !important; } }
/* profile: the Files tile gets a caption like its neighbours */
.quota-panel .quota-item:has(.quota-unlimited)::after, .profile-page .quota-tile:has(.quota-unlimited)::after { content: "No limit on file count"; display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
/* admin user: absent values quieter than real ones */
.admin-page .detail-value.is-empty, .admin-page .is-unsynced { color: #9A9389 !important; font-style: normal !important; }
/* ===== Round 95 ===== */
/* submit bar: draft note beside the button, one compact row */
@media (min-width: 768px) {
.anonymize-form-col .anonymize-submit-bar { display: flex !important; align-items: center; gap: 16px; }
.anonymize-submit-bar .draft-status { margin: 0 !important; flex: 0 1 auto; max-width: 46%; line-height: 1.35; }
.anonymize-submit-bar .btn-ink { flex: 1 1 auto; }
}
/* the publish warning appears once a source is loaded, not on the empty first step */
.anonymize-landing .repo-access-note > span:has(.ui-icon) { display: none !important; }
/* sidebar ZIP button uses the same download glyph as the toolbar (CSS mask over the old icon) */
/* phone code: a shadow edge marks more code to the right */
@media (max-width: 767px) { .file-card.is-code.no-wrap .file-card-body::after { box-shadow: inset -8px 0 8px -8px rgba(40,32,24,.35) !important; border-right: 0 !important; } }
/* dark: chrome and reading pane closer in tone */
.dark-mode .leftCol { background: #1C1A17 !important; }
.dark-mode .viewer-bar { background: #181614 !important; }
@media (max-width: 767px) {
.file-card.is-code.no-wrap .file-card-body::after { width: 44px !important; background: linear-gradient(to right, rgba(250,249,246,0) 0%, rgba(250,249,246,.92) 55%, rgba(226,220,210,.95) 100%) !important; box-shadow: inset -1px 0 0 rgba(40,32,24,.18) !important; }
.dark-mode .file-card.is-code.no-wrap .file-card-body::after { background: linear-gradient(to right, rgba(20,19,17,0) 0%, rgba(20,19,17,.92) 55%, rgba(44,40,35,.95) 100%) !important; box-shadow: inset -1px 0 0 rgba(255,255,255,.14) !important; }
}
/* ===== Round 96: structural ===== */
/* phone toolbar: one 48px row — sidebar toggle, file name, redaction count, Copy, ⋯ */
@media (max-width: 767px) {
.file-card-head { min-height: 48px !important; align-items: center !important; padding-top: 4px !important; padding-bottom: 4px !important; }
.file-card-head .file-card-path { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; min-width: 0; }
.file-card-head .file-card-path .breadcrumb { min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mobile-sub { margin: 0 !important; flex: 0 0 auto; white-space: nowrap; }
.mobile-sub > span { display: none !important; }
.mobile-sub span:has(+ b)::after { content: none !important; }
.mobile-sub b { font-size: 12.5px !important; }
}
/* FAQ: contents rail + answers centred as one group in the container */
/* landing: one section rhythm */
.paper-section-head, .paper-qa, .paper-features, .paper-stats { margin-top: 88px !important; }
.paper-hero + .paper-stats { margin-top: 40px !important; }
/* ===== Round 97 ===== */
/* FAQ: contents | answers | a quiet help card, on the site grid */
@media (min-width: 1100px) { .paper-faq-body { grid-template-columns: 180px minmax(0, 1fr) 220px !important; gap: 48px !important; } .paper-faq-help { display: block; } }
.paper-faq-help { display: none; }
.paper-faq-help-card { position: sticky; top: 96px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--paper-card); padding: 18px; }
.paper-faq-help-card strong { display: block; font-size: 14px; margin-bottom: 6px; }
.paper-faq-help-card p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }
/* submit bar: draft status on one line */
.anonymize-submit-bar .draft-status { white-space: nowrap; flex: 0 0 auto !important; max-width: none !important; }
/* queues: range control lives in the Throughput card header */
.q-throughput .q-range-btns { float: right; margin: -4px 0 0 12px; }
/* admin tables share the card shell used on Errors */
.admin-page .paper-table { border: 1px solid var(--border-color) !important; border-radius: 12px !important; overflow: hidden; background: var(--paper-card); }
/* dark mode: tertiary text lifted to AA */
.dark-mode { --ink-soft: #ADA699; --ink-muted: #8C8579; }
/* hero mock swatch = product slot */
.hero-mock-count::before { background: var(--slot-bg) !important; }
@media (min-width: 1100px) { .paper-faq-help { display: block !important; } }
.q-throughput { position: relative; }
.q-throughput .q-range-btns { position: absolute !important; top: 12px; right: 16px; float: none !important; margin: 0 !important; width: auto !important; display: inline-flex !important; z-index: 2; }