/* ══════════════════════════════════════════
SEE & HEAR — Shared Design System
══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&family=Libre+Baskerville:ital,wght@1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');
[hidden] { display: none !important; }
@font-face {
font-family: 'Very Vogue';
src: url('fonts/very-vogue-display.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
[hidden] { display: none !important; }
@font-face {
font-family: 'Very Vogue';
src: url('fonts/very-vogue-display-italic.otf') format('opentype');
font-weight: 400;
font-style: italic;
}
:root {
--cream: #EFEFEF;
--warm-white: #FFFFFF;
--dark: #15140F;
--forest: #15140F;
--forest-hover: #262620;
--taupe: #8A8880;
--taupe-light: #DFDFDF;
--taupe-xlight: #F5F5F5;
--stone: #6B6A63;
--accent: #FF3B1F;
--font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--nav-h: 110px;
--sec-pad: clamp(72px, 9vw, 120px);
--pad-x: clamp(20px, 5vw, 64px);
--max-w: 1200px;
--radius: 2px;
}
html[data-theme="dark"] {
--cream: #0B0B0B;
--warm-white: #171717;
--dark: #F2F0EA;
--forest: #F2F0EA;
--forest-hover: #DED9CF;
--taupe: #8A8880;
--taupe-light: #2E2E2E;
--taupe-xlight: #1C1C1C;
--stone: #A8A59A;
--accent: #FF5A3D;
}
:root {
/* Fixed near-black — for components that are ALWAYS a dark chip/pill/bar
regardless of theme (they don't invert like --dark/--forest, which flip
to a light color in dark mode since they double as body text color). */
--ink-fixed: #15140F;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-weight: 400;
background: var(--cream);
color: var(--dark);
-webkit-font-smoothing: antialiased;
line-height: 1.7;
font-size: 15px;
transition: background-color .18s ease, color .18s ease;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* ── Layout ───────────────────────────────── */
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--pad-x);
}
.section { padding-block: var(--sec-pad); }
.section-sm { padding-block: calc(var(--sec-pad) * 0.55); }
.section-lg { padding-block: calc(var(--sec-pad) * 1.3); }
.page-top { padding-top: var(--nav-h); }
/* ── Typography ───────────────────────────── */
.display {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: clamp(52px, 7.5vw, 112px);
font-weight: 400;
line-height: 0.96;
letter-spacing: -0.035em;
}
.h1 {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 64px);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.03em;
}
.h2 {
font-family: var(--font-display);
font-size: clamp(30px, 3.5vw, 48px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.025em;
}
.h3 {
font-family: var(--font-display);
font-size: clamp(22px, 2.5vw, 34px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
}
.eyebrow {
display: block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--taupe);
}
.lead {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.8;
color: var(--stone);
}
.small { font-size: 13px; }
/* ── Buttons ──────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.01em;
padding: 4px 0;
border: none;
background: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
border-radius: 0;
}
.btn-arrow::after { content: '→'; font-size: 14px; letter-spacing: 0; }
.btn-primary {
background: transparent;
color: var(--dark);
border-color: transparent;
}
.btn-primary:hover {
background: transparent;
color: var(--stone);
border-color: transparent;
}
.btn-outline {
background: transparent;
color: var(--dark);
border-color: transparent;
}
.btn-outline:hover {
background: transparent;
color: var(--stone);
border-color: transparent;
}
.btn-outline-light {
background: transparent;
color: var(--warm-white);
border-color: transparent;
}
.btn-outline-light:hover {
color: rgba(253,252,248,0.65);
border-color: transparent;
background: transparent;
}
/* ── Navigation ───────────────────────────── */
.site-nav {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
height: var(--nav-h);
z-index: 200;
background: var(--cream);
transition: box-shadow 0.3s, background 0.4s ease;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: max(var(--pad-x), calc((100vw - var(--max-w)) / 2 + var(--pad-x)));
}
.nav-right {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
}
.site-nav.scrolled {
box-shadow: 0 1px 20px rgba(22,19,13,0.06);
}
/* Green nav mode — activates when scrolled past hero */
.site-nav.green-mode {
background: var(--forest);
border-bottom-color: transparent;
}
.site-nav.green-mode .nav-links a,
.site-nav.green-mode .nav-links-a { color: rgba(253,252,248,0.7); }
.site-nav.green-mode .nav-links a:hover,
.site-nav.green-mode .nav-links-a:hover,
.site-nav.green-mode .nav-links a.active,
.site-nav.green-mode .nav-links-a.active { color: var(--warm-white); }
.site-nav.green-mode .wm-line { color: var(--warm-white); }
.site-nav.green-mode .wm-reg { color: rgba(253,252,248,0.6); }
.site-nav.green-mode .wm-med { color: rgba(253,252,248,0.5); }
.site-nav.green-mode .sub { color: rgba(253,252,248,0.4); }
.site-nav.green-mode .nav-apply {
background: transparent;
color: var(--warm-white);
border: none;
}
.site-nav.green-mode .nav-apply:hover { background: transparent; opacity: 0.75; }
.site-nav.green-mode .nav-login {
border-color: rgba(255,255,255,0.3);
color: rgba(253,252,248,0.7);
}
.site-nav.green-mode .nav-login:hover {
border-color: rgba(255,255,255,0.7);
color: var(--warm-white);
}
.site-nav.green-mode .nav-mobile-toggle span { background: var(--warm-white); }
.nav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 32px;
height: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--pad-x);
}
.nav-identity {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 24px;
border-left: 1px solid var(--taupe-light);
}
.nav-id-name { font-size: 12px; font-weight: 500; color: var(--dark); white-space: nowrap; }
.nav-id-title { font-size: 12px; font-weight: 400; color: var(--stone); white-space: nowrap; }
.nav-brand {
display: block;
line-height: 1;
}
.nav-brand .wordmark {
display: block;
font-size: 0;
white-space: nowrap;
}
.nav-sub {
display: block;
font-family: var(--font-body);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--stone);
white-space: nowrap;
line-height: 1.6;
}
.nav-sub:first-of-type { margin-top: 4px; }
.wm-line {
display: inline;
font-family: 'Syne', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dark);
white-space: nowrap;
}
.wm-reg {
font-size: 0.65em;
vertical-align: super;
font-weight: 400;
letter-spacing: 0;
}
.wm-med {
font-family: 'Syne', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--taupe);
margin-left: 3px;
}
.nav-brand .sub { display: inline; font-size: 10px; color: var(--dark); }
.nav-links {
display: flex;
justify-content: flex-end;
align-items: center;
gap: clamp(20px, 3vw, 40px);
}
.nav-links a, .nav-links-a {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover, .nav-links-a:hover,
.nav-links a.active, .nav-links-a.active { color: var(--dark); }
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stone);
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--dark); }
.nav-actions {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
}
.nav-login {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--stone);
border: 1px solid var(--taupe-light);
padding: 10px 22px;
border-radius: 2px;
transition: all 0.2s;
text-decoration: none;
white-space: nowrap;
}
.nav-login:hover {
color: var(--dark);
border-color: var(--dark);
}
.nav-apply {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
background: transparent;
color: var(--dark);
border: none;
padding: 9px 0;
border-radius: 0;
transition: all 0.2s;
white-space: nowrap;
}
.nav-apply:hover { color: var(--stone); }
.nav-mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-mobile-toggle span {
display: block;
width: 22px;
height: 1.5px;
background: var(--dark);
transition: all 0.3s;
}
/* Mobile nav menu */
.nav-mobile-menu {
display: none;
position: fixed;
inset: var(--nav-h) 0 0 0;
background: var(--cream);
z-index: 199;
flex-direction: column;
padding: 40px var(--pad-x);
gap: 8px;
border-top: 1px solid var(--taupe-light);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--stone);
padding: 14px 0;
border-bottom: 1px solid var(--taupe-xlight);
transition: color 0.2s;
}
.nav-mobile-menu a:hover { color: var(--dark); }
.nav-mobile-menu .btn { margin-top: 16px; align-self: flex-start; }
/* ── Footer ───────────────────────────────── */
.site-footer {
background: var(--dark);
padding: 72px var(--pad-x) 40px;
}
.footer-inner {
max-width: var(--max-w);
margin-inline: auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px 40px;
margin-bottom: 56px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .wordmark {
display: block;
font-size: 0;
margin-bottom: 14px;
}
.footer-brand {
padding-right: 40px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .wordmark .wm-line {
display: inline;
font-family: 'Syne', system-ui, sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--warm-white);
}
.footer-brand p {
font-size: 13px;
line-height: 1.75;
color: var(--stone);
max-width: 220px;
}
.footer-col h5 {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--taupe);
margin-bottom: 20px;
}
.footer-col li + li { margin-top: 10px; }
.footer-col a {
font-size: 13px;
color: var(--stone);
transition: color 0.2s;
}
.footer-col a:hover { color: var(--warm-white); }
.footer-social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; color: var(--stone); transition: all 0.2s; }
.footer-social:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.footer-provider { display: inline-flex; align-items: center; gap: 6px; color: var(--warm-white); text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; padding: 5px 12px; transition: all 0.2s; }
.footer-provider:hover { border-color: rgba(255,255,255,0.5); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--stone);
flex-wrap: wrap;
gap: 12px;
}
/* ── Image placeholder ────────────────────── */
.img-ph {
background: var(--taupe-xlight);
position: relative;
overflow: hidden;
}
.img-ph::after {
content: attr(data-label);
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--taupe);
}
/* ── Button groups always left ─────────────── */
.cta-actions,
.hero-cta-row,
.hero-actions {
display: flex;
justify-content: flex-start;
gap: 16px;
flex-wrap: wrap;
}
/* ── Global overflow fix ─────────────────── */
html, body {
overflow-x: hidden;
max-width: 100vw;
-webkit-text-size-adjust: 100%;
}
/* ── Mobile: lock every page to the screen width so it can't be panned ──────
Belt-and-suspenders. The root shells are clamped to the viewport, and the
common flex inputs get min-width:0 so they SHRINK to fit instead of forcing
horizontal overflow (which is what let the page slide around). */
@media (max-width: 768px) {
html, body { overflow-x: hidden !important; max-width: 100vw; width: 100%; }
.admin-shell, .admin-main, .chat-shell, .chat-main, .thread-body, main, .container { max-width: 100vw; }
.admin-main, .chat-main { overflow-x: hidden; }
/* Flex text inputs must be allowed to shrink, or their row overflows. */
#msg-input, #d-cmt, .composer textarea, .cmt-add textarea, .mf-input, .mf-textarea, .search-input { min-width: 0; }
/* Voice bubbles / players never wider than the screen. */
.msg .bubble.voice, .cmt-voice, .vn-player { max-width: 78vw; }
/* Modals: fit the phone with a small margin. */
.modal, .modal-overlay .modal { max-width: calc(100vw - 24px); }
/* Images/media never overflow their bubble. */
.att-img, .cmt-img, .att-video, .cmt-video { max-width: 72vw; }
}
/* ── Dividers ─────────────────────────────── */
.rule {
border: none;
border-top: 1px solid var(--taupe-light);
}
/* ── Responsive ───────────────────────────── */
@media (max-width: 900px) {
/* Nav */
.nav-links,
.nav-actions,
.nav-right,
.nav-identity { display: none !important; }
.nav-mobile-toggle { display: flex; }
.site-nav {
padding-inline: var(--pad-x);
height: 70px;
}
:root { --nav-h: 70px; }
/* Mobile menu */
.nav-mobile-menu {
top: 70px;
padding: 24px var(--pad-x) 32px;
gap: 8px;
}
/* Footer */
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
/* Sections */
.section, .section-sm {
padding-block: clamp(48px, 8vw, 80px);
}
/* HIW steps */
.hiw-grid {
grid-template-columns: 1fr;
border-top: 1px solid var(--taupe-light);
}
.hiw-step {
border-right: none;
border-bottom: 1px solid var(--taupe-light);
padding: 28px 0;
}
.hiw-step:not(:first-child) { padding-left: 0; }
/* Comparison chart — prevent horizontal scroll */
.compare-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare-table {
min-width: 560px;
}
/* Testimonial */
.testimonial-inner {
grid-template-columns: 1fr;
gap: 0;
}
.testimonial-img {
height: 280px;
width: 100%;
}
/* About split */
.about-split {
grid-template-columns: 1fr;
gap: 0;
}
.about-split .bio-img-wrap {
height: 360px;
overflow: hidden;
}
.about-split .bio-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Shop teaser */
.shop-teaser-inner {
grid-template-columns: 1fr;
min-height: auto;
}
.shop-teaser-right {
height: 280px;
}
/* FS hero cols */
.fs-hero-cols {
grid-template-columns: 1fr;
}
.fs-hero-img {
height: 280px;
}
.fs-hero-img img {
width: 70%;
max-width: 280px;
}
.fs-gold-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.fs-steps {
grid-template-columns: 1fr;
}
.fs-step {
border-right: none;
border-bottom: 1px solid var(--taupe-light);
padding: 28px 0;
}
.fs-step:not(:first-child) { padding-left: 0; }
.fs-stats { grid-template-columns: 1fr; }
.fs-stat { border-right: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--taupe-light); padding-bottom: 20px; }
/* Services packages */
.services-grid { grid-template-columns: 1fr; }
.service-card:hover { margin-inline: 0; width: 100%; padding-left: 0; padding-right: 0; }
/* WTE steps */
.wte-step {
grid-template-columns: 48px 1fr !important;
gap: 0 24px !important;
}
.wte-step:hover {
margin-inline: 0 !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.wte-right { grid-column: 2; }
/* Conditions grid */
.conditions-grid {
grid-template-columns: 1fr 1fr !important;
}
/* Trust strip */
.trust-strip-inner { flex-wrap: wrap; gap: 16px; }
.trust-item { flex: 0 0 calc(50% - 8px); }
/* Hero buttons */
.apply-cta-btns {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 520px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
.conditions-grid { grid-template-columns: 1fr !important; }
.trust-item { flex: 0 0 100%; }
.hiw-num { font-size: 48px; }
.shop-teaser-left { padding: 40px 24px; }
}
/* ===== Shared Admin Navigation (admin.html + provider.html) ===== */
.admin-side {
width: 232px; flex-shrink: 0;
background: var(--cream); color: var(--dark);
display: flex; flex-direction: column; padding: 20px 0;
border-right: none;
}
.admin-side .side-brand {
padding: 4px 0 14px 20px; color: var(--dark);
display: flex; justify-content: flex-start;
}
.admin-side .side-brand-logo { width: 108px; height: auto; display: block; }
html[data-theme="dark"] .admin-side .side-brand-logo { filter: brightness(0) invert(1); }
.admin-side .side-brand sup { font-family: Helvetica, Arial, sans-serif; font-size: 9px; top: -0.9em; margin-left: 1px; }
.admin-side .side-tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); padding: 0 26px 16px; }
.admin-side .side-nav { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; margin: 2px 0 0; background: transparent; border-radius: 0; flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(21,20,15,0.18) transparent; }
.admin-side .side-nav > a, .admin-side .side-nav > div { flex: none; }
.admin-side .side-nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%); }
.admin-side .side-nav::after { content: ""; display: block; flex: none; height: 22px; }
/* The footer must never be squeezed by a long nav — it holds sign-out. */
.admin-side .side-foot { flex: none; }
.admin-side .side-nav::-webkit-scrollbar { width: 6px; }
.admin-side .side-nav::-webkit-scrollbar-track { background: transparent; }
.admin-side .side-nav::-webkit-scrollbar-thumb { background: rgba(21,20,15,0.14); border-radius: 100px; border: 1px solid transparent; background-clip: padding-box; }
.admin-side .side-nav::-webkit-scrollbar-thumb:hover { background: rgba(21,20,15,0.24); border-radius: 100px; border: 1px solid transparent; background-clip: padding-box; }
.admin-side .side-nav a {
display: flex; align-items: center; gap: 11px;
padding: 6px 20px; border-radius: 0; text-decoration: none;
border-left: 2px solid transparent;
font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--stone);
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.admin-side .side-nav a:hover { background: transparent; color: var(--accent); }
.admin-side .side-nav a.active { background: transparent; color: var(--accent); border-left-color: var(--accent); }
.admin-side .side-nav a .ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; display: none; }
.admin-side .side-nav a.soon { opacity: 0.45; cursor: default; pointer-events: none; }
.admin-side .side-nav a.soon .tag { margin-left: auto; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(21,20,15,0.08); padding: 2px 6px; border-radius: 100px; }
.admin-side .side-nav a .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; box-sizing: border-box; }
.admin-side .side-group { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); padding: 11px 14px 4px; }
.admin-side .side-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 20px 6px; cursor: pointer; user-select: none; font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); transition: color 0.15s; }
.admin-side .side-group-toggle span:first-child { color: var(--accent); font-weight: 600; }
.admin-side .side-group-toggle:hover { color: var(--dark); }
.admin-side .side-group-toggle .sgt-chev { width: 12px; height: 12px; flex: none; transition: transform 0.18s ease; }
.admin-side .side-group-toggle.open .sgt-chev { transform: rotate(180deg); }
.admin-side .side-subnav { display: flex; flex-direction: column; gap: 1px; max-height: 0; overflow: hidden; transition: max-height 0.22s ease; }
.admin-side .side-subnav.open { max-height: 260px; }
.admin-side .side-nav a.side-link-mini { font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); padding: 8px 20px; gap: 0; }
.admin-side .side-nav a.side-link-mini:hover { color: var(--dark); }
.admin-side .side-nav a.side-link-mini.active { color: var(--accent); border-left-color: var(--accent); }
.admin-side .side-foot { padding: 14px 26px 0; margin-top: 10px; }
.admin-side .side-foot a { font-size: 12px; color: var(--stone); text-decoration: none; }
.admin-side .side-foot a:hover { color: var(--dark); }
.admin-side .side-user { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; text-decoration: none; border-radius: 8px; padding: 4px 6px; margin-left: -6px; transition: background 0.15s; }
.admin-side .side-user:hover { background: rgba(21,20,15,0.05); }
.admin-side .side-user .su-name { font-size: 12.5px; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-side .side-user .su-name::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.admin-side .side-user .su-role { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); background: rgba(21,20,15,0.06); padding: 2px 7px; border-radius: 100px; flex: none; }
.admin-side .side-foot-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-side .side-foot-links .su-logout { font-size: 12px; color: var(--stone); text-decoration: none; cursor: pointer; transition: color 0.18s; }
.admin-side .side-foot-links .su-logout:hover { color: var(--dark); }
.admin-side .theme-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; background: none; border: none; padding: 8px 6px; border-radius: 8px; cursor: pointer; color: var(--stone); font-family: var(--font-body); }
.admin-side .theme-toggle:hover { background: rgba(21,20,15,0.05); color: var(--dark); }
.admin-side .theme-toggle.on { color: var(--accent); }
.admin-side .theme-toggle-label { font-size: 12px; font-weight: 600; }
/* ===== Global rule: status/category/type pills are ALWAYS uppercase ===== */
.sop-cat, .doc-pill, .stat-pill, .type-pill, .prio, .tag-c { text-transform: uppercase; letter-spacing: 0.06em; }
/* ===== Rich text editor (Procedures) ===== */
.rte { border: 1px solid var(--taupe-light); border-radius: 8px; background: var(--warm-white); overflow: visible; position: relative; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--taupe-light); background: var(--cream); border-radius: 8px 8px 0 0; }
.rte-btn { font-family: var(--font-body); font-size: 12px; color: var(--dark); background: var(--warm-white); border: 1px solid var(--taupe-light); border-radius: 5px; padding: 6px 10px; cursor: pointer; line-height: 1; transition: all 0.15s; }
.rte-btn:hover { background: var(--taupe-xlight); }
.rte-btn.on { background: var(--forest); color: var(--warm-white); border-color: var(--forest); }
.rte-area { min-height: 180px; max-height: 420px; overflow-y: auto; padding: 16px 18px; font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--dark); outline: none; }
.rte-area:empty::before, .rte-area[data-empty]::before { content: attr(data-placeholder); color: var(--taupe); }
.rte-area p { margin: 0 0 10px; }
.rte-area h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 16px 0 8px; color: var(--dark); }
.rte-area ul, .rte-area ol { margin: 0 0 12px; padding-left: 24px; }
.rte-area ul { list-style: disc outside; }
.rte-area ol { list-style: decimal outside; }
.rte-area li { margin-bottom: 5px; }
.rte-area a { color: var(--forest); text-decoration: underline; }
.rte-area a.proc-ref { text-decoration: none; }
.proc-ref { display: inline-flex; align-items: center; gap: 3px; font-size: 0.92em; font-weight: 600; color: var(--forest); background: var(--taupe-xlight); border: 1px solid var(--taupe-light); border-radius: 100px; padding: 1px 9px; white-space: nowrap; cursor: pointer; text-decoration: none; }
.proc-ref:hover { background: #e6efe8; }
.rte-embed { position: relative; width: 100%; max-width: 100%; margin: 12px 0; }
.rte-embed-handle { position: absolute; top: 50%; width: 8px; height: 46px; transform: translateY(-50%); background: rgba(20,30,25,0.6); border: 2px solid #fff; border-radius: 6px; cursor: ew-resize; z-index: 4; opacity: 0; transition: opacity .12s; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.rte-embed:hover .rte-embed-handle { opacity: 1; }
/* Inside the video's own frame, so they sit on its edges and are never cut off. */
.rte-embed-handle.left { left: 6px; }
.rte-embed-handle.right { right: 6px; }
.rte-embed-handle { z-index: 3; }
.rte-embed:not(:hover) .rte-embed-handle { opacity: 0 !important; }
.rte-area.rte-resizing { cursor: ew-resize; }
.rte-area.rte-resizing iframe { pointer-events: none; }
.rte-embed-frame { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 8px; overflow: hidden; background: #000; }
.rte-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A video pasted straight in (no frame around it) fills its box at 16:9 with
no border — a bare iframe drew at 300×150 with the browser's bevel, and the
resize handles sat on the box's far edges instead of the video's. */
.rte-embed > iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
/* Same look as a video shared in a DM: a rounded player at a sensible size.
Drag a handle to make it bigger or smaller. */
.rte-embed:not([style*="width"]) { max-width: 480px; }
.rte-embed[data-embed="loom"] > iframe, .rte-embed > iframe[src*="loom.com"] { aspect-ratio: 16 / 10; }
.rte-refmenu { position: absolute; z-index: 30; min-width: 220px; max-width: 320px; background: var(--warm-white); border: 1px solid var(--taupe-light); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); overflow: hidden; }
.rte-refmenu { max-height: 300px; overflow-y: auto; }
.rte-refchips { position: sticky; top: 0; z-index: 1; background: var(--warm-white); display: flex; gap: 5px; flex-wrap: wrap; padding: 8px; border-bottom: 1px solid var(--taupe-light); }
.rte-refchip { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 100px; cursor: pointer; white-space: nowrap; background: var(--taupe-xlight); color: var(--stone); border: 1px solid transparent; }
.rte-refbody { padding: 2px 0 6px; }
.rte-refgrp { font-size: 9px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--taupe); padding: 8px 12px 3px; }
.rte-refitem { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin: 0 5px; border-radius: 7px; font-size: 13.5px; color: var(--dark); cursor: pointer; }
.rte-refitem:hover, .rte-refitem.sel { background: var(--taupe-xlight); }
.rte-refav { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; }
.rte-refname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rte-refmore { font-size: 11px; color: var(--taupe); padding: 2px 12px 6px 46px; }
/* ===== Slash commands ===== */
.rte-slashmenu { min-width: 200px; }
.rte-slashicon { width: 22px; height: 22px; border-radius: 6px; background: var(--taupe-xlight); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--forest); flex: none; }
.rte-slashhint { font-size: 11px; color: var(--taupe); flex: none; }
/* ===== Checklist blocks (slash command) ===== */
.rte-check-row { --rte-check-size: 18px; display: flex; align-items: flex-start; gap: 9px; margin: 0 0 5px; }
.rte-check-box { appearance: none; -webkit-appearance: none; width: var(--rte-check-size); height: var(--rte-check-size); margin-top: calc((1em * var(--rte-check-lh, 1.5) - var(--rte-check-size)) / 2); border-radius: 50%; border: none; background: var(--taupe-light); flex: none; cursor: pointer; position: relative; }
.rte-check-box:checked { background: var(--accent); }
.rte-check-box:checked::after { content: ''; position: absolute; left: 50%; top: 46%; width: 4.5px; height: 8.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.rte-check-text { flex: 1; min-width: 0; }
.rte-check-row:has(.rte-check-box:checked) .rte-check-text { color: var(--stone); text-decoration: line-through; }
/* ===== Toggle blocks (slash command) ===== */
.rte-toggle { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 2px; margin: 0 0 6px; font-family: var(--font-body); font-size: 15.5px; font-weight: 400; line-height: 1.75; letter-spacing: normal; text-transform: none; color: var(--dark); }
.rte-toggle-head { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 22px; min-height: 1.75em; border-radius: 5px; cursor: pointer; user-select: none; }
.rte-toggle-head:hover { background: var(--taupe-xlight); }
.rte-toggle-caret { width: 11px; height: 11px; color: var(--stone); transform: rotate(90deg); transition: transform 0.15s; }
.rte-toggle.collapsed .rte-toggle-caret { transform: rotate(0deg); }
/* Title is ordinary body copy — a toggle is not a heading. */
.rte-toggle-summary { grid-column: 2; grid-row: 1; min-height: 1.75em; font-family: inherit; font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: normal; text-transform: none; }
.rte-toggle-body { grid-column: 2; grid-row: 2; margin: 0; padding: 0; }
.rte-toggle-body > p { margin: 0 0 2px; }
.rte-toggle-body > ul, .rte-toggle-body > ol { margin: 2px 0; padding-left: 20px; }
.rte-toggle-body > *:last-child { margin-bottom: 0; }
.rte-toggle.collapsed .rte-toggle-body { display: none; }
/* A link in an editor is invisible as a thing — you can see the underline but
not where it goes. Putting the caret in one raises this bar: the address,
and the three things you'd want to do with it. */
.rte-linkbar { position: fixed; z-index: 500; display: flex; align-items: center; gap: 2px; padding: 5px 6px; background: var(--dark); border-radius: 100px; box-shadow: 0 6px 20px rgba(21,20,15,.26); font-family: var(--font-body); }
.rte-linkbar-url { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #fff; text-decoration: none; padding: 4px 9px; border-radius: 100px; }
.rte-linkbar-url:hover { background: rgba(255,255,255,.14); text-decoration: underline; }
.rte-linkbar-b { border: none; background: none; color: rgba(255,255,255,.62); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 100px; cursor: pointer; }
.rte-linkbar-b:hover { background: rgba(255,255,255,.14); color: #fff; }
/* ===== Compact rich input (comments, descriptions) ===== */
.rte-compact { border: none; background: none; border-radius: 0; }
.rte-compact .rte-area { min-height: 0; max-height: none; overflow: visible; padding: 0; font-size: inherit; line-height: inherit; }
.rte-compact .rte-area p { margin: 0 0 6px; }
.rte-compact .rte-area p:last-child { margin-bottom: 0; }
/* ===== SOP reader rich body (Tasks) ===== */
.sop-body { font-family: var(--font-body); font-size: 14.5px; line-height: 1.7; color: var(--dark); }
.sop-body p { margin: 0 0 12px; }
.sop-body h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 20px 0 9px; }
.sop-body ul, .sop-body ol { margin: 0 0 14px; padding-left: 24px; }
.sop-body ul { list-style: disc outside; }
.sop-body ol { list-style: decimal outside; }
.sop-body li { margin-bottom: 7px; }
.sop-body a { color: var(--forest); text-decoration: underline; }
.sop-body a.proc-ref { text-decoration: none; }
.sop-body .rte-embed { margin: 16px 0; }
.sop-body .rte-embed-frame { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 8px; overflow: hidden; background: #000; }
.sop-body .rte-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A video pasted straight in (no frame around it) fills its box at 16:9 with
no border — a bare iframe drew at 300×150 with the browser's bevel, and the
resize handles sat on the box's far edges instead of the video's. */
.rte-embed > iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
/* Same look as a video shared in a DM: a rounded player at a sensible size.
Drag a handle to make it bigger or smaller. */
.rte-embed:not([style*="width"]) { max-width: 480px; }
.rte-embed[data-embed="loom"] > iframe, .rte-embed > iframe[src*="loom.com"] { aspect-ratio: 16 / 10; }
/* Admin is a SECTION, not another nav item: a quiet uppercase divider with a
rule, and its children sit indented and lighter than top-level destinations. */
.admin-side .side-group-toggle{margin:18px 0 2px;padding:8px 18px 8px 18px;font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);border-top:1px solid var(--taupe-light);display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.admin-side .side-group-toggle:hover{color:var(--accent)}
.admin-side .side-group-toggle .sgt-chev{width:12px;height:12px;transition:transform .15s ease}
.admin-side .side-group-toggle.open .sgt-chev{transform:rotate(180deg)}
.admin-side .side-subnav{display:none;padding-left:0;margin-left:0}
.admin-side .side-group-toggle.open + .side-subnav{display:block}
.admin-side .side-subnav a{font-size:13px;color:var(--stone);padding-top:7px;padding-bottom:7px;padding-left:30px}
.admin-side .side-subnav a .ico{opacity:.6}
.admin-side .side-subnav a.active{color:var(--accent);font-weight:600}
/* The Admin section reads as a tinted band, not another list of destinations. */
/* The label and its links are one continuous band: rounded top, rounded bottom,
no gap between them. */
.admin-side .side-group-toggle{background:var(--taupe-xlight);border-top:none;border-radius:8px 8px 0 0;margin:20px 12px 0;padding:9px 12px}
.admin-side .side-group-toggle:not(.open){border-radius:8px;margin-bottom:6px}
.admin-side .side-subnav{background:var(--taupe-xlight);border-radius:0 0 8px 8px;margin:0 12px 6px;padding:2px 0 8px}
.admin-side .side-subnav a:hover{color:var(--accent)}
/* Branded scrollbar in the nav. */
.admin-side,.admin-side .side-nav{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
.admin-side::-webkit-scrollbar,.admin-side .side-nav::-webkit-scrollbar{width:8px}
.admin-side::-webkit-scrollbar-track,.admin-side .side-nav::-webkit-scrollbar-track{background:transparent}
.admin-side::-webkit-scrollbar-thumb,.admin-side .side-nav::-webkit-scrollbar-thumb{background:rgba(21,20,15,0.16);border-radius:100px;border:2px solid transparent;background-clip:content-box}
html[data-theme="dark"] .admin-side::-webkit-scrollbar-thumb,html[data-theme="dark"] .admin-side .side-nav::-webkit-scrollbar-thumb{background:rgba(252,251,248,0.2)}
/* One container, no internal edges of any kind. */
.admin-side .side-group-toggle,.admin-side .side-subnav{border:none!important;box-shadow:none!important}
.admin-side .side-group-toggle::after,.admin-side .side-subnav::before{display:none!important}
.admin-side .side-subnav a{border:none!important}
/* ONE container holds the Admin label and its links; the children are
transparent, so there is nothing to draw a seam between them. */
.admin-side .side-adminbox{background:var(--taupe-xlight);border-radius:10px;margin:20px 12px 6px;padding:2px 0;overflow:hidden}
.admin-side .side-adminbox .side-group-toggle,.admin-side .side-adminbox .side-subnav{background:none!important;margin:0!important;border-radius:0!important;padding-top:8px;padding-bottom:8px}
.admin-side .side-adminbox .side-subnav{padding-top:0;padding-bottom:4px}
/* Account row: one line — name, then icon actions. */
.admin-side .side-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-side .side-foot #side-user{flex:1;min-width:0}
.admin-side .side-foot .side-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.admin-side .side-foot .side-actions a,.admin-side .side-foot .side-actions button{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:none;color:var(--taupe);font-size:0;cursor:pointer}
.admin-side .side-foot .side-actions a:hover,.admin-side .side-foot .side-actions button:hover{color:var(--accent);background:var(--taupe-xlight)}
.admin-side .side-foot .side-actions svg{width:15px;height:15px}
.admin-side .side-actions .theme-toggle{width:28px;height:28px;padding:0;border-radius:50%;justify-content:center}
.admin-side .side-actions .theme-toggle-label{display:none}
.admin-side .side-foot{display:block}
.admin-side .side-foot #side-user{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px}
.admin-side .side-foot .side-actions{display:flex;align-items:center;gap:6px;margin-left:0;justify-content:flex-start}
.admin-side .side-foot .side-actions a,.admin-side .side-foot .side-actions button,.admin-side .side-actions .theme-toggle{margin:0;flex:none}
.admin-side .side-actions svg{display:block}
/* Settings inherits the record/task control language: pill buttons, quiet
inputs that only show their edge on hover or focus. */
.admin-main .card .a-btn,.admin-main .pane .a-btn{border-radius:100px;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px}
.admin-main .pane .a-btn.sm{padding:6px 13px;font-size:10px}
.admin-main .pane .mf-input,.admin-main .pane .mf-select{border:1px solid transparent;background:var(--taupe-xlight);border-radius:8px;transition:border-color .12s ease,background .12s ease}
.admin-main .pane .mf-input:hover,.admin-main .pane .mf-select:hover{border-color:var(--taupe-light)}
.admin-main .pane .mf-input:focus,.admin-main .pane .mf-select:focus{outline:none;border-color:var(--accent);background:var(--warm-white)}
.u-email-inp{display:block;width:100%;max-width:230px;margin-top:2px;border:1px solid transparent;background:none;border-radius:6px;padding:3px 6px;font-family:var(--font-body);font-size:12px;color:var(--stone)}
.u-email-inp:hover{border-color:var(--taupe-light)}
.u-email-inp:focus{outline:none;border-color:var(--accent);background:var(--warm-white);color:var(--dark)}
.admin-side{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.admin-side .side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.admin-side .side-foot{flex:none}
/* A subtask row names its parent in a quiet line above the title, so the row
reads as the work itself with context, not as a breadcrumb. */
.trow-stack{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.trow-parent{font-family:var(--font-body);font-size:8.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:color-mix(in oklch,var(--taupe) 65%,var(--taupe-light));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow-stack .trow-title,.trow-stack .mt-title{flex:none;min-width:0}
/* Row-level edits: the status dot and the due date are the two things worth
changing without opening the record. */
.rowedit-dot{cursor:pointer;border-radius:50%;transition:box-shadow .12s}
.rowedit-dot:hover{box-shadow:0 0 0 3px var(--taupe-xlight)}
button.pdate{background:none;border:none;padding:2px 4px;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:6px}
button.pdate:hover{background:var(--taupe-xlight);color:var(--dark)}
.row-status-menu{position:fixed;z-index:900;background:var(--warm-white);border:1px solid var(--taupe-light);border-radius:10px;padding:5px;box-shadow:0 12px 30px rgba(21,20,15,.14);display:flex;flex-direction:column;gap:1px;min-width:160px}
.row-status-menu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;padding:8px 10px;border-radius:7px;font-family:var(--font-body);font-size:13px;color:var(--dark);cursor:pointer;text-align:left}
.row-status-menu button:hover{background:var(--taupe-xlight)}
.row-status-menu button.on{font-weight:600}
.row-status-menu .dot{width:8px;height:8px;border-radius:50%;flex:none}
/* A subtask opened on its own: the parent record stays mounted for data but is
never painted, so there is no double-load and nothing behind the card. */
#detail-modal.dt-solo-hidden{opacity:0!important;pointer-events:none!important;transition:none!important}
/* The left pane is a fixed column on every admin page: the shell is exactly the
viewport (minus the docked timer bar, which reduces the available height and
was pushing the account row below the fold), the nav scrolls inside it, and
only the main column scrolls the page. Declared here rather than per page so
no page can drift out of it. */
.admin-shell{height:100vh;overflow:hidden}
body.gtb-docked .admin-shell,
body.gtb-docked .admin-shell > .admin-side,
body.gtb-docked .admin-shell > .admin-main,
body.gtb-docked .admin-side{height:calc(100vh - var(--gtb-dock-space,66px))}
body.gtb-docked .admin-shell{grid-template-rows:calc(100vh - var(--gtb-dock-space,66px))}
body.gtb-docked .admin-shell > .admin-side,
body.gtb-docked .admin-shell > .admin-main{min-height:0;max-height:calc(100vh - var(--gtb-dock-space,66px))}
.admin-shell>.admin-side{height:100%;position:sticky;top:0;align-self:start}
.admin-shell>.admin-main{height:100%;overflow-y:auto;min-width:0}
/* Settings → Integrations row. */
.intg-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--taupe-light)}
.intg-ic{width:34px;height:34px;border-radius:9px;background:var(--taupe-xlight);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--stone);flex:none}
.intg-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-family:var(--font-body);font-size:13px;color:var(--stone)}
.intg-txt strong{font-size:13.5px;color:var(--dark);font-weight:600}
/* Collaborator merge: two records side by side, conflicts chosen explicitly. */
.cl-overlay{position:fixed;inset:0;z-index:820;background:rgba(21,20,15,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.cl-card{width:min(520px,100%);background:var(--warm-white);border:1px solid var(--taupe-light);border-radius:18px;padding:24px 26px 20px;max-height:86vh;overflow:auto}
.cl-kicker{font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cl-head h3{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.15;color:var(--dark);margin:6px 0 18px}
.cl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.cl-side{display:flex;flex-direction:column;gap:3px;background:var(--taupe-xlight);border-radius:12px;padding:13px 15px;min-width:0}
.cl-side-h{font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe)}
.cl-side-name{font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--dark);overflow:hidden;text-overflow:ellipsis}
.cl-side-sub{font-family:var(--font-body);font-size:12px;color:var(--stone);overflow:hidden;text-overflow:ellipsis}
.cl-diffs{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.cl-diffs-h{font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe)}
.cl-diff{display:grid;grid-template-columns:96px 1fr 1fr;gap:8px;align-items:center}
.cl-diff-l{font-family:var(--font-body);font-size:11.5px;color:var(--stone)}
.cl-opt{font-family:var(--font-body);font-size:13px;text-align:left;padding:9px 12px;border-radius:9px;border:1px solid var(--taupe-light);background:none;color:var(--dark);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-opt.on{border-color:var(--accent);background:#FDF0EC;font-weight:600}
.cl-note{font-family:var(--font-body);font-size:13px;color:var(--stone);margin:0 0 18px}
.cl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-btn{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:11px 20px;border-radius:100px;border:none;background:var(--accent);color:#fff;cursor:pointer}
.cl-btn.ghost{background:none;border:1px solid var(--taupe-light);color:var(--stone)}
.cl-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.cl-foot #cl-merge{margin-left:auto}
@media(max-width:520px){.cl-two,.cl-diff{grid-template-columns:1fr}}
.cl-search{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:14px;color:var(--dark);background:var(--taupe-xlight);border:1px solid transparent;border-radius:10px;padding:11px 13px;margin-bottom:12px}
.cl-search:focus{outline:none;border-color:var(--accent);background:#fff}
.cl-results{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;margin-bottom:16px}
.cl-res-row{display:flex;flex-direction:column;gap:1px;text-align:left;background:none;border:none;border-radius:9px;padding:9px 11px;cursor:pointer}
.cl-res-row:hover{background:var(--taupe-xlight)}
.cl-res-name{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--dark)}
.cl-res-sub{font-family:var(--font-body);font-size:11.5px;color:var(--taupe)}
.cl-grp{font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);padding:10px 11px 4px}
.cl-why{font-family:var(--font-body);font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v-blue, #2F6FE4);background:color-mix(in srgb, var(--v-blue, #2F6FE4) 12%, transparent);border-radius:100px;padding:3px 7px;margin-left:8px}
.cl-res-name{display:inline-flex;align-items:center}
.cl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-foot .cl-btn:last-child{margin-left:auto}
/* "Save as default" sits left, away from Cancel/Send — it changes the next
email, not this one, and shouldn't be mistaken for the action that sends. */
.cl-foot-l{margin-right:auto}
.et-save{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.et-save-btn{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border-radius:100px;border:1px dashed var(--taupe-light);background:none;color:var(--stone);cursor:pointer}
.et-save-btn:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
.et-save-note{font-family:var(--font-body);font-size:11px;color:var(--taupe);padding-left:2px}
.et-revert{font-family:inherit;font-size:inherit;border:none;background:none;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer}
/* Side-by-side comparison inside the link dialog. */
.cl-cmp{border:1px solid var(--taupe-light);border-radius:12px;overflow:hidden;margin-bottom:16px}
.cl-cmp-head{display:grid;grid-template-columns:66px 1fr 1fr;gap:10px;padding:8px 12px;background:var(--taupe-xlight);font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe)}
.cl-cmp-head span:first-child{grid-column:1}
.cl-cmp-head span:nth-child(1){visibility:hidden}
.cl-cmp-row{display:grid;grid-template-columns:66px 1fr 1fr;gap:10px;padding:8px 12px;border-top:1px solid var(--taupe-light);align-items:baseline}
.cl-cmp-lbl{font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe)}
.cl-cmp-v{font-family:var(--font-body);font-size:13px;color:var(--dark);word-break:break-word}
.cl-cmp-v.same{color:var(--v-green, #1F9D55)}
.cl-cmp-v.diff{color:var(--v-orange, #FF3B1F)}
.cl-cmp-acts{display:flex;gap:8px;flex-wrap:wrap;padding:12px;border-top:1px solid var(--taupe-light);background:var(--warm-white)}
.cl-cmp-note{padding:9px 12px;border-top:1px solid var(--taupe-light);font-family:var(--font-body);font-size:11.5px;line-height:1.55;color:var(--stone)}
.cl-cmp-note strong{color:var(--dark)}
.cl-cmp-note.warn{background:color-mix(in srgb, var(--v-yellow, #FFD400) 18%, transparent)}
.cl-cmp-note.warn strong{color:color-mix(in srgb, var(--v-yellow, #FFD400) 55%, var(--dark, #15140F))}
.cl-cmp-v.pick,.cl-cmp-v.keep{cursor:pointer;border-radius:7px;margin:-3px -6px;padding:3px 6px}
.cl-cmp-v.pick:hover,.cl-cmp-v.keep:hover{background:var(--taupe-xlight)}
.cl-cmp-v.chosen{background:color-mix(in srgb, var(--v-green, #1F9D55) 12%, transparent);color:var(--v-green, #1F9D55)}
.cl-use{display:inline-block;font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--taupe);border:1px solid var(--taupe-light);border-radius:100px;padding:2px 6px;margin-left:7px;vertical-align:1px}
.cl-use.on{border-color:transparent;background:var(--taupe-xlight)}
.cl-cmp-v.chosen .cl-use{border-color:color-mix(in srgb, var(--v-green, #1F9D55) 50%, transparent);color:var(--v-green, #1F9D55)}
.cl-otherwrap .cl-search{margin-top:2px}
.cr-flabel{display:block;font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);margin:10px 0 4px}
/* Sidebar attention dot — same accent as the brand dot. */
.admin-side .nav-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--v-orange,#FF3B1F);margin-left:6px;flex:none;vertical-align:middle}
.admin-side .nav-badge.nav-badge-dot{background:none!important;padding:0!important;min-width:0!important;display:inline-flex;align-items:center;margin-left:6px}
/* Who uploaded a given take — the split sheet can carry several writers' files. */
.ma-track-by{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--taupe);margin:0 4px;white-space:nowrap}
/* Credits — rendered as normal custom-field rows; only the value needs styling. */
.sc-people{font-family:var(--font-body);font-size:13.5px;color:var(--dark,#15140F)}
.sc-person{font-weight:600;color:var(--dark,#15140F);text-decoration:none}
a.sc-person:hover{color:var(--accent);text-decoration:underline}
.sc-pct{font-size:11px;font-weight:500;color:var(--taupe);margin-left:4px}
.sc-sep{color:var(--taupe)}
/* Header chips read as quiet pills, not form controls. */
.ss-chip-sel{font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* Camp roles field — same table language as the rest of the record. */
.cr-field{display:flex;flex-direction:column;gap:10px}
.cr-table{width:100%;border-collapse:collapse}
.cr-table th{text-align:left;font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);padding:0 0 9px;border-bottom:1px solid var(--hairline,rgba(21,20,15,.12))}
.cr-table td{padding:11px 0;border-bottom:1px solid var(--hairline,rgba(21,20,15,.08));vertical-align:middle}
.cr-table tr:last-child td{border-bottom:none}
.cr-td-name{font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--dark)}
.cr-name-btn{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.cr-sug-i{color:var(--dark)}
.cr-name-btn:hover{color:var(--accent)}
.cr-td-x{width:30px;text-align:right}
.cr-empty-row td{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--stone);padding:14px 0}
/* Branded role picker — a pill that opens our own menu. */
.cr-pickwrap{position:relative;display:inline-block}
/* Same pill palette the invite badges use a few rows above in this record —
two near-identical reds side by side would read as a mistake. */
.cr-pill{border:none;border-radius:100px;padding:4px 9px;font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;background:var(--taupe-xlight);color:var(--dark)}
.cr-pill.role-campAdmin{background:rgba(228,64,44,.12);color:#B5341F}
.cr-pill.role-host{background:rgba(58,107,66,.16);color:#2F6B3E}
.cr-pill.role-anr{background:rgba(42,79,214,.12);color:#2A4FD6}
.cr-pill.role-writer{background:var(--taupe-xlight);color:var(--dark)}
.cr-pill.role-observer{background:#F0F0F0;color:#8A8A8A}
.cr-pill:hover{outline:1.5px solid var(--accent)}
.cr-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:150px;background:var(--warm-white);border:1px solid var(--hairline,rgba(21,20,15,.12));border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(21,20,15,.16)}
.cr-menu.open{display:block}
.cr-menu-i{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 13px;font-family:var(--font-body);font-size:12.5px;color:var(--dark);cursor:pointer}
.cr-menu-i:hover{background:var(--taupe-xlight)}
.cr-menu-i.on{color:var(--accent);font-weight:700}
.cr-note{font-family:var(--font-body);font-size:11.5px;color:var(--stone);margin:0}
.cr-note a{color:var(--accent);text-decoration:none}
.cr-rows{display:flex;flex-direction:column;gap:6px}
.cr-row{display:flex;align-items:center;gap:10px}
.cr-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--taupe-xlight);color:var(--dark);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:11px;font-weight:700}
.cr-name{flex:1;min-width:0;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--dark)}
.cr-src{display:block;font-style:normal;font-size:10.5px;font-weight:500;color:var(--stone)}
.cr-role{flex:none;width:132px}
.cr-x{flex:none;width:24px;height:24px;border:none;border-radius:50%;background:none;color:var(--stone);font-size:16px;line-height:1;cursor:pointer}
.cr-x:hover{color:var(--accent)}
.cr-x-sp{width:24px;flex:none}
.cr-empty{font-family:var(--font-body);font-size:12.5px;color:var(--stone);margin:0}
.cr-add{position:relative}
.cr-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:#fff;border:1px solid var(--hairline,rgba(21,20,15,.12));border-radius:10px;overflow:hidden;box-shadow:0 10px 28px rgba(21,20,15,.14)}
.cr-sug-i{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:none;border:none;padding:9px 12px;font-family:var(--font-body);font-size:13px;color:var(--dark);cursor:pointer}
.cr-sug-i em{font-style:normal;font-size:11px;color:var(--stone)}
.cr-sug-i:hover{background:var(--taupe-xlight)}
.cr-staff{font-family:var(--font-body);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
/* Date picker: month and year are choosable, and you can just type the date. */
.pcal-pickers{display:flex;gap:6px;align-items:center}
.pcal-sel{-webkit-appearance:none;appearance:none;border:1px solid var(--taupe-light);border-radius:8px;background:var(--warm-white);color:var(--dark);font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:5px 22px 5px 8px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 6px center;background-size:10px}
.pcal-sel:hover{border-color:var(--accent)}
.pcal-typed{margin:0 2px 10px}
.pcal-type-in{width:100%;box-sizing:border-box;border:1px solid var(--taupe-light);border-radius:8px;background:var(--warm-white);color:var(--dark);font-family:var(--font-body);font-size:12.5px;padding:7px 9px}
.pcal-type-in:focus{outline:none;border-color:var(--accent)}
.pcal-type-in.bad{border-color:var(--accent);background:rgba(255,59,31,.06)}
.pcal-type-in::placeholder{color:var(--stone)}
/* Camp column: open the space in place, or in its own tab. */
.tk-campcol{white-space:nowrap}
.tk-camplink{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:100px;padding:4px 11px;background:var(--taupe-xlight);color:var(--dark);font-family:var(--font-body);font-size:11px;font-weight:600;cursor:pointer;text-decoration:none}
.tk-camplink:hover{background:var(--accent);color:#fff}
.tk-camplink.ghost{margin-left:5px;padding:4px 8px;background:none;color:var(--stone);font-size:12px}
.tk-camplink.ghost:hover{background:none;color:var(--accent)}
/* Camp link. Borrowed wholesale from .lksel, the app's own link field, so a
link looks the same wherever you meet one: bordered trigger, matching copy
icon. A bespoke two-line card was the odd one out. */
.cl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* One pill, three actions on the same thing: the words open it here, the arrow
opens a real tab, the copy icon hands you the address. The two icons are
siblings inside the pill — no compartments, no dividers. */
.cl-pill{display:flex;align-items:center;flex:1 1 auto;min-width:0;border:none;border-bottom:1px solid var(--taupe-light);background:none;max-width:100%}
.cl-pill:hover{border-bottom-color:var(--taupe-light)}
.cl-open{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;text-align:left;border:none;background:none;padding:5px 2px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--dark)}
.cl-open>span{background:var(--warm-white);box-shadow:inset 0 0 0 1px var(--taupe-light);color:var(--dark);border-radius:100px;padding:3px 10px}
.cl-open:hover>span{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
/* The icons sit at the far end of the underline, off the pill. */
.cl-open+.cl-ico{margin-left:auto}
.cl-open>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-open:hover{color:var(--accent)}
.cl-closed{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
/* Both icons: same size, same colour, borderless. Without these rules the
browser's own button styling took over — a 2px outset black box with a
collapsed icon inside it. */
.cl-ico{flex:none;background:none;border:none;color:var(--accent);cursor:pointer;padding:7px 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}
.cl-ico svg{flex:none;width:13px;height:13px}
.cl-ico:hover{background:var(--warm-white)}
/* Confirmation without losing the glyph. */
.cl-copy.copied{background:var(--accent);color:#fff}
/* rowList — repeatable rows for references and FAQ. */
.rl-field{display:flex;flex-direction:column;gap:8px}
.rl-rows{display:flex;flex-direction:column;gap:8px}
/* One row, one card: numbered, fields stacked, so a long link can't run into
the note beside it. */
.rl-row{display:grid;grid-template-columns:22px 1fr 26px;gap:10px;align-items:start;
padding:11px 12px;border-radius:12px;background:var(--warm-white)}
.rl-n{font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--stone);padding-top:9px;text-align:right}
.rl-fields{display:flex;flex-direction:column;gap:7px;min-width:0}
.rl-row textarea.rl-in{min-height:38px}
.rl-url{position:relative;display:flex;align-items:center}
.rl-url input{padding-right:30px}
.rl-go{position:absolute;right:2px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--stone)}
.rl-go svg{width:14px;height:14px}
.rl-go:hover{color:var(--accent)}
.rl-x{align-self:start;margin-top:4px}
.rl-x{width:26px;height:34px;border:none;background:none;color:var(--stone);font-size:16px;line-height:1;cursor:pointer}
.rl-x:hover{color:var(--accent)}
/* Add is a round accent button, matching the other add controls on a record. */
.rl-add{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border:none;border-radius:50%;background:var(--accent);color:#fff;
font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1;cursor:pointer;padding:0}
.rl-add:hover{opacity:.86}
/* A card's own heading reads in the accent, so each block is findable. */
.rl-field>.mf-label{color:var(--accent)}
@media (max-width:640px){.rl-row{grid-template-columns:18px 1fr 24px;gap:8px}}
/* The brief button. */
.cb-btn{align-self:flex-start;border:none;border-radius:100px;padding:9px 16px;background:var(--accent);color:#fff;font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer}
.cb-btn:hover{opacity:.9}
.cb-btn.ghost{background:var(--taupe-xlight);color:var(--dark);padding:7px 13px;font-size:11.5px}
/* One pill on one line, like any other linked record. */
/* The record's panels are already taupe-xlight, so a taupe-xlight pill on one
was invisible. Ours reads as a link chip: tinted with the accent, like the
other "this points somewhere" controls. */
.cb-pill{display:flex;align-items:center;max-width:100%;
border:none;border-bottom:1px solid var(--taupe-light);background:none}
.cb-pill:hover{border-bottom-color:var(--taupe-light)}
.cb-pill-n{flex:0 1 auto;text-align:left;border:none;background:var(--warm-white);box-shadow:inset 0 0 0 1px var(--taupe-light);border-radius:100px;margin:5px 0 5px 2px;padding:3px 10px;
font-family:var(--font-body);font-size:12.5px;font-weight:600;
color:var(--dark);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cb-pill-n:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
/* The FIRST icon takes the gap; everything after it sits tight against it.
Giving the arrow its own margin-left:auto too split the group, leaving the
eye stranded far from the icons it belongs with. */
.cb-pill>.cb-eye:first-of-type,
.cb-pill>.cb-pill-t:first-of-type,
.cb-pill>.cb-eye,.cb-pill>.cb-pill-t{margin-left:0}
.cb-pill>.cb-pill-n{margin-right:auto}
/* The eye sits between the name and the unlink ×: read it, glance at it,
or take it off. Three jobs, three targets. */
/* The icons match the camp link's exactly: borderless, accent, 13px, sitting
as plain siblings inside the chip. */
.cb-eye,.cb-pill .cb-x{flex:none;display:inline-flex;align-items:center;justify-content:center;
border:none;background:none;padding:7px 5px;border-radius:6px;color:var(--accent);cursor:pointer}
.cb-eye svg{width:13px;height:13px}
.cb-pill .cb-x{font-size:15px;line-height:1}
.cb-eye:hover,.cb-pill .cb-x:hover{background:var(--warm-white)}
.cb-x{width:24px;height:24px;border:none;border-radius:50%;background:none;color:var(--stone);font-size:15px;cursor:pointer}
.cb-x:hover{color:var(--accent)}
/* Briefs view — the camps and their briefs together. */
.brf-table{width:100%;border-collapse:collapse}
.brf-link{background:none;border:none;padding:0;font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--dark);cursor:pointer;text-align:left}
.brf-link:hover{color:var(--accent)}
.brf-doc{border:none;background:none;padding:0;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--accent);cursor:pointer}
.brf-doc:hover{text-decoration:underline}
.brf-none{font-family:var(--font-body);font-size:13px;color:var(--stone)}
.brf-act{text-align:right;white-space:nowrap}
.brf-btn{border:none;border-radius:100px;padding:6px 14px;background:var(--accent);color:#fff;font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer}
.brf-btn.ghost{background:var(--taupe-xlight);color:var(--dark)}
.brf-btn:hover{opacity:.9}
/* Talk it through — notes in, two written sections out. */
.bai{display:flex;flex-direction:column;gap:8px}
.bai-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bai-mic{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:100px;padding:7px 14px;
background:var(--warm-white);color:var(--dark);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer}
.bai-mic svg{width:15px;height:15px}
.bai-mic:hover{color:var(--accent)}
.bai-mic.on{background:var(--accent);color:#fff;animation:bai-pulse 1.4s ease-in-out infinite}
@keyframes bai-pulse{0%,100%{opacity:1}50%{opacity:.72}}
.bai-go{border:none;border-radius:100px;padding:7px 16px;background:var(--accent);color:#fff;
font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer}
.bai-go:disabled{opacity:.5;cursor:default}
.bai-note{font-family:var(--font-body);font-size:11.5px;color:var(--stone)}
.bai-note.bad{color:var(--accent)}
.bai-out{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.bai-card{background:var(--warm-white);border-radius:12px;padding:12px 14px}
.bai-ct{display:block;font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;color:var(--stone);margin-bottom:5px}
.bai-card p{margin:0;font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--dark)}
.bai-choose{display:flex;gap:8px;flex-wrap:wrap}
.bai-use{border:none;border-radius:100px;padding:7px 14px;background:var(--accent);color:#fff;
font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer}
.bai-use.ghost{background:var(--taupe-xlight);color:var(--dark)}
.bai-use:hover{opacity:.9}
/* Overview and Creative direction read as cards, matching the panel the writing
assistant shows — a white surface with room around the words, rather than a
thin-ruled input. They hold paragraphs, so they should look like paragraphs. */
[data-block="typefields_campbrief"] textarea[data-fkey="campOverview"],
[data-block="typefields_campbrief"] textarea[data-fkey="campCreative"],
[data-block="typefields_campbrief"] textarea[data-fkey="campTerms"],
[data-block="typefields_campbrief"] textarea.bai-in{
background:var(--warm-white);border:none;border-radius:12px;padding:13px 15px;
min-height:86px;font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--dark);
box-shadow:inset 0 0 0 1px rgba(21,20,15,.06)}
[data-block="typefields_campbrief"] textarea[data-fkey="campOverview"]:focus,
[data-block="typefields_campbrief"] textarea[data-fkey="campCreative"]:focus,
[data-block="typefields_campbrief"] textarea[data-fkey="campTerms"]:focus,
[data-block="typefields_campbrief"] textarea.bai-in:focus{
outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
[data-block="typefields_campbrief"] textarea::placeholder{color:var(--stone)}
/* Repeatable rows as a table, not a stack of cards. Each row was its own padded
white block with a number and its own inner borders — three nested frames for
one line of text. Now: one hairline per row, fields side by side, nothing but
the content taking up space. */
.rl-rows{gap:0;background:var(--warm-white);border-radius:12px;overflow:hidden}
.rl-row{grid-template-columns:20px 1fr 24px;gap:8px;align-items:center;
padding:7px 10px;border-radius:0;background:transparent;
box-shadow:inset 0 -1px 0 rgba(21,20,15,.07)}
.rl-rows .rl-row:last-child{box-shadow:none}
.rl-n{padding-top:0;font-size:10.5px}
/* Stacked: the link on its own line, the note under it. */
.rl-fields{flex-direction:column;align-items:stretch;gap:3px}
.rl-fields>*{flex:none;min-width:0}
.rl-fields .rl-url{flex:none}
.rl-row .rl-in{border:none!important;background:transparent!important;padding:5px 2px!important;
font-size:12.5px;box-shadow:none!important;min-height:0}
.rl-row .rl-in:focus{outline:none;box-shadow:inset 0 -1.5px 0 var(--accent)!important}
.rl-row textarea.rl-in{min-height:30px;line-height:1.45}
.rl-x{margin-top:0;height:24px;font-size:14px}
.rl-go{right:0}
.rl-add{margin-top:8px;font-size:11px}
/* Fee and usage read as one line each, side by side, with no card around them. */
[data-block="typefields_campbrief"] textarea[data-fkey="campTerms"]{min-height:58px}
@media (max-width:720px){.rl-fields{flex-direction:column;align-items:stretch}}
/* The label belongs INSIDE the card, as its heading — the card is the field, so
a title floating above it reads as a separate thing. The group becomes the
card; the textarea inside it carries no frame of its own. */
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campOverview"]),
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campCreative"]),
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campTerms"]){
background:var(--warm-white);border-radius:12px;padding:13px 15px 11px;gap:5px;
box-shadow:inset 0 0 0 1px rgba(21,20,15,.06)}
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campOverview"]) .mf-label,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campCreative"]) .mf-label,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campTerms"]) .mf-label{
font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);margin:0}
[data-block="typefields_campbrief"] textarea[data-fkey="campOverview"],
[data-block="typefields_campbrief"] textarea[data-fkey="campCreative"],
[data-block="typefields_campbrief"] textarea[data-fkey="campTerms"]{
background:transparent!important;box-shadow:none!important;padding:0!important;
min-height:74px;font-size:13.5px;line-height:1.6}
[data-block="typefields_campbrief"] textarea[data-fkey="campOverview"]:focus,
[data-block="typefields_campbrief"] textarea[data-fkey="campCreative"]:focus,
[data-block="typefields_campbrief"] textarea[data-fkey="campTerms"]:focus{
box-shadow:none!important;outline:none}
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campOverview"]):focus-within,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campCreative"]):focus-within,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campTerms"]):focus-within{
box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Same treatment for the notes box above them. */
[data-block="typefields_campbrief"] textarea.bai-in{
background:transparent!important;box-shadow:none!important;padding:0!important;min-height:62px}
/* Full width of the panel: it's where the brief gets talked through, not a
half-column field beside "The document". */
[data-block="typefields_campbrief"] .bai{grid-column:1/-1!important;width:100%!important;max-width:none!important;flex:1 1 100%!important;box-sizing:border-box}
[data-block="typefields_campbrief"] .bai{background:var(--warm-white);border-radius:12px;
padding:13px 15px 11px;box-shadow:inset 0 0 0 1px rgba(21,20,15,.06)}
[data-block="typefields_campbrief"] .bai>.mf-label{font-size:9px;font-weight:700;
letter-spacing:.11em;text-transform:uppercase;color:var(--stone)}
[data-block="typefields_campbrief"] .bai:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
/* ---- one field style for prose, everywhere -------------------------------
Any multi-line field in a record becomes a card with its label inside it. A
paragraph deserves the room, and a thin-ruled input under a floating label
reads as a form; this reads as writing. Scoped to record panels so tables,
composers and inline editors elsewhere are untouched. */
.ptd-overlay .dt-grid .mf-group:has(> textarea.mf-textarea){
background:var(--warm-white);border-radius:12px;padding:13px 15px 11px;gap:5px;
box-shadow:inset 0 0 0 1px rgba(21,20,15,.06)}
.ptd-overlay .dt-grid .mf-group:has(> textarea.mf-textarea) > .mf-label{
font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);margin:0}
.ptd-overlay .dt-grid .mf-group:has(> textarea.mf-textarea) > .mf-hint{margin:0 0 2px}
.ptd-overlay .dt-grid .mf-group > textarea.mf-textarea{
background:transparent!important;border:none!important;box-shadow:none!important;
padding:0!important;min-height:74px;font-family:var(--font-body);font-size:13.5px;line-height:1.6;
color:var(--dark);resize:vertical}
.ptd-overlay .dt-grid .mf-group > textarea.mf-textarea:focus{outline:none;box-shadow:none!important}
.ptd-overlay .dt-grid .mf-group:has(> textarea.mf-textarea):focus-within{
box-shadow:inset 0 0 0 1.5px var(--accent)}
/* A card inside a card would be two frames for one field. */
.ptd-overlay .own-panel .mf-group:has(> textarea.mf-textarea){box-shadow:inset 0 0 0 1px rgba(21,20,15,.08)}
/* Same card, applied to the LIST fields and the one-line fields — so References,
How to submit, FAQ, Fee and Usage all read the way Terms and Overview do,
rather than a label floating above a bare table or an underlined input. */
.ptd-overlay .dt-grid .rl-field{
background:var(--warm-white);border-radius:12px;padding:13px 15px 11px;gap:6px;
box-shadow:inset 0 0 0 1px rgba(21,20,15,.06)}
.ptd-overlay .dt-grid .rl-field > .mf-label{
font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0}
.ptd-overlay .dt-grid .rl-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
/* The rows sit ON the card now, so they need no surface of their own. */
.ptd-overlay .rl-rows{background:transparent;border-radius:0}
.ptd-overlay .rl-row{padding:5px 0;box-shadow:inset 0 -1px 0 rgba(21,20,15,.07)}
.ptd-overlay .rl-rows .rl-row:last-child{box-shadow:none}
.ptd-overlay .rl-add{margin-top:6px}
/* One-line fields get the same frame, label inside. */
.ptd-overlay .dt-grid .mf-group:has(> input.mf-input){
background:var(--warm-white);border-radius:12px;padding:11px 15px 9px;gap:4px;
box-shadow:inset 0 0 0 1px rgba(21,20,15,.06)}
.ptd-overlay .dt-grid .mf-group:has(> input.mf-input) > .mf-label{
font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);margin:0}
.ptd-overlay .dt-grid .mf-group > input.mf-input{
background:transparent!important;border:none!important;box-shadow:none!important;padding:2px 0!important;
font-size:13.5px}
.ptd-overlay .dt-grid .mf-group > input.mf-input:focus{outline:none;box-shadow:none!important}
.ptd-overlay .dt-grid .mf-group:has(> input.mf-input):focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Row actions at the edge; the link gets the room it needs and the note the
rest. The open icon was absolutely positioned inside the input, printing on
top of the URL. */
.ptd-overlay .rl-row{grid-template-columns:18px 1fr 22px;gap:10px;align-items:start}
.ptd-overlay .rl-n{padding-top:6px}
.ptd-overlay .rl-x{margin-top:2px}
.ptd-overlay .rl-fields{flex-direction:column;align-items:stretch;gap:2px}
.ptd-overlay .rl-fields .rl-url{flex:none}
/* The URL is the link — a separate open icon is a second control for the same
job, and it was crowding the field. */
.rl-go,.rl-go-sp{display:none!important}
.ptd-overlay .rl-fields .rl-in:nth-child(2),.rl-fields .rl-in:last-child{font-size:11.5px;color:var(--stone)}
.ptd-overlay .rl-url{display:block}
.ptd-overlay .rl-url input{padding-right:0!important;text-overflow:ellipsis}
.ptd-overlay .rl-url input{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ptd-overlay .rl-go{position:static;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--stone)}
.ptd-overlay .rl-go-sp{width:22px;display:inline-block}
/* Add is an icon, matching every other "one more" control. */
.ptd-overlay .rl-add{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;padding:0}
.ptd-overlay .rl-add svg{width:14px;height:14px}
.ptd-overlay .rl-add:hover{background:var(--ink-fixed,#15140F);color:#fff;text-decoration:none}
@media (max-width:720px){.ptd-overlay .rl-fields{flex-direction:column;align-items:stretch;gap:4px}}
/* Every field in a record names itself the same way. The markup is a plain
.mf-group — an earlier selector required a .card class that doesn't exist, so
only the three rowLists went orange and the other thirteen stayed grey.
And no .dt-grid requirement: that is the grid a TASK record lays its fields
out in, so anything built on the same overlay without it — the playlist
builder is the one that gave this away — kept the page's grey label. Every
record-style panel names its fields in the accent, whatever it lays them out
with. */
.ptd-overlay .mf-group>.mf-label,
.ptd-overlay .mf-group>.dlv-label-row>.mf-label,
.ptd-overlay .rl-field>.mf-label{color:var(--accent)}
/* Two earlier :has() rules were painting textarea and half-width labels grey and
outranked the plain-descendant selector. Matching their specificity so every
field in a record names itself the same way — no half-orange panel. */
.ptd-overlay .dt-grid .mf-group:has(> textarea.mf-textarea) > .mf-label,
.ptd-overlay .dt-grid .mf-group:has(> input.mf-input) > .mf-label,
.ptd-overlay .dt-grid .mf-group:has(> select.mf-select) > .mf-label,
.ptd-overlay .dt-grid .mf-group.bai > .mf-label,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campOverview"]) .mf-label,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campCreative"]) .mf-label,
[data-block="typefields_campbrief"] .mf-group:has(> textarea[data-fkey="campTerms"]) .mf-label{color:var(--accent)}
/* A reference's URL is a link, not a box that looks like one. The input sits
underneath and takes over only while editing. */
.rl-url{position:relative;display:block}
.rl-url.has>.rl-in{opacity:0;pointer-events:none;position:absolute;inset:0}
.rl-url>.rl-link{display:block;font-family:var(--font-body);font-size:12.5px;
color:var(--accent);text-decoration:underline;text-underline-offset:2px;
padding:5px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-url>.rl-link:hover{color:var(--ink-fixed,#15140F)}
.ptd-overlay .rl-url input{color:var(--dark)!important;text-decoration:none!important}
/* A reference reads as its title, with the address as quiet provenance. */
.rl-url>.rl-link{display:flex;flex-direction:column;gap:1px;white-space:normal}
.rl-url>.rl-link .rl-t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-url>.rl-link .rl-h{font-size:10.5px;font-weight:500;color:var(--stone);text-decoration:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Submissions for a brief — review in place. */
.bs-field{display:flex;flex-direction:column;gap:6px}
.bs-n{font-style:normal;font-size:10px;font-weight:700;color:var(--accent)}
.bs-sum{font-family:var(--font-body);font-size:11.5px;color:var(--stone);margin:0 0 4px}
.bs-empty{font-family:var(--font-body);font-size:12.5px;color:var(--stone);margin:0}
.bs-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline,rgba(21,20,15,.08))}
.bs-row:last-child{border-bottom:none}
.bs-row.done{opacity:.62}
.bs-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bs-t{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-w{font-family:var(--font-body);font-size:11px;color:var(--stone)}
.bs-btn{flex:none;border:none;border-radius:100px;padding:6px 13px;font-family:var(--font-body);font-size:11.5px;font-weight:600;cursor:pointer}
.bs-btn.yes{background:var(--accent);color:#fff}
.bs-btn.no{background:var(--taupe-xlight);color:var(--dark)}
.bs-btn:hover{opacity:.88}
.bs-v{flex:none;font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bs-v.yes{color:#2F8F5B}
.bs-v.no{color:var(--stone)}
.bs-undo{flex:none;border:none;background:none;padding:0;font-family:var(--font-body);font-size:10.5px;font-weight:600;color:var(--accent);cursor:pointer}
/* Procedure steps — a light editor, not a document. */
.st-field{display:flex;flex-direction:column;gap:8px}
.st-tools{display:flex;gap:4px;flex-wrap:wrap}
.st-t{width:28px;height:26px;border:none;border-radius:7px;background:var(--taupe-xlight);color:var(--dark);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.st-t:hover{background:var(--accent);color:#fff}
.st-in{min-height:96px;padding:12px 14px;border-radius:12px;background:var(--warm-white);box-shadow:inset 0 0 0 1px var(--taupe-light);font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--dark)}
.st-in:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.st-in ol{margin:0 0 0 18px;padding:0;list-style:decimal outside}
.st-in ul{margin:0 0 0 18px;padding:0;list-style:disc outside}
.st-in li{margin:3px 0}
.st-in ul.rte-check{list-style:none;margin-left:2px}
.st-in ul.rte-check li::before{content:"\2610";margin-right:8px;color:var(--accent)}
.st-in:empty::before{content:"Talk it through above, or write the steps here.";color:var(--stone)}
.cb-unlocked{font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
/* Brief submissions table — a view of the real records. */
.bs-table{width:100%;border-collapse:collapse;margin-top:4px}
.bs-table th{text-align:left;font-family:var(--font-body);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);padding:0 10px 8px 0;border-bottom:1px solid var(--hairline,rgba(21,20,15,.12))}
.bs-table td{padding:10px 10px 10px 0;border-bottom:1px solid var(--hairline,rgba(21,20,15,.07));vertical-align:middle}
.bs-table tr:last-child td{border-bottom:none}
.bs-td-name{min-width:150px}
.bs-name{display:block;border:none;background:none;padding:0;font-family:var(--font-body);font-size:13.5px;font-weight:700;color:var(--dark);cursor:pointer;text-align:left}
.bs-name:hover{color:var(--accent)}
.bs-song{display:block;font-family:var(--font-body);font-size:11.5px;color:var(--stone)}
.bs-link{font-family:var(--font-body);font-size:12.5px;color:var(--accent);text-decoration:none}
.bs-link:hover{text-decoration:underline}
.bs-none{color:var(--stone)}
.bs-status{-webkit-appearance:none;appearance:none;border:none;border-radius:100px;padding:5px 24px 5px 10px;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background-color:var(--taupe-xlight);color:var(--dark);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 7px center;background-size:9px}
.bs-status.stapproved{background-color:rgba(58,107,66,.16);color:#2F6B3E}
.bs-status.stpassed{background-color:#F0F0F0;color:#8A8A8A}
.bs-status.stinreview{background-color:rgba(42,79,214,.12);color:#2A4FD6}
.bs-status.streceived{background-color:rgba(228,64,44,.12);color:#B5341F}
.bs-td-when{font-family:var(--font-body);font-size:11.5px;color:var(--stone);white-space:nowrap}
.bs-td-x{width:30px;text-align:right}
.bs-done{width:24px;height:24px;border:none;border-radius:50%;background:var(--taupe-xlight);color:var(--stone);font-size:12px;cursor:pointer}
.bs-done:hover{background:var(--accent);color:#fff}
.bs-done.on{background:rgba(58,107,66,.18);color:#2F6B3E}
/* Procedure steps reads as one card, with its own name inside it — the same
shape as the brief's cards, rather than a label floating above a box. */
.ptd-overlay .dt-grid .st-field{background:var(--warm-white);border-radius:12px;padding:13px 15px 11px;gap:10px}
.ptd-overlay .dt-grid .st-field>.mf-label{color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin:0}
.ptd-overlay .dt-grid .st-field .st-in{background:#fff;box-shadow:inset 0 0 0 1px var(--taupe-light)}
.ptd-overlay .dt-grid .st-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ptd-overlay .dt-grid .st-t{background:#fff}
.ptd-overlay .dt-grid .st-t:hover{background:var(--accent);color:#fff}
/* The panel's instruction is guidance, not content — it was set at the same
size and weight as the notes themselves, so the two read as one paragraph and
the real text looked like part of the hint. */
.ptd-overlay .bai-hint{font-size:11.5px!important;line-height:1.45;color:var(--stone)!important;
font-weight:500;margin:0 0 4px}
/* Somebody talking through a procedure produces paragraphs, not a sentence —
give it room, and let them drag it taller. */
.ptd-overlay .dt-grid .mf-group > textarea.bai-in{min-height:190px;resize:vertical;font-size:13.5px;line-height:1.6}
/* Steps in the review card read as the list they'll become. */
.bai-steps ol{margin:2px 0 0 18px;padding:0;list-style:decimal outside}
.bai-steps ul{margin:2px 0 0 18px;padding:0;list-style:disc outside}
.bai-steps li{margin:4px 0;font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--dark)}
.bai-steps ul.rte-check{list-style:none;margin-left:2px}
.bai-steps ul.rte-check li::before{content:"\2610";margin-right:8px;color:var(--accent)}
/* The camp brief's pill gains the open-in-a-tab arrow, and both pills read as
one object rather than an invisible link. */
.cb-pill .cb-pill-t{flex:none;display:inline-flex;align-items:center;justify-content:center;
padding:7px 5px;border-radius:6px;color:var(--accent);text-decoration:none}
.cb-pill .cb-pill-t svg{width:13px;height:13px}
.cb-pill .cb-pill-t:hover{background:var(--warm-white)}
.cb-pill .cb-unlocked{font-style:normal;font-family:var(--font-body);font-size:9px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
/* ============================================================================
Branded checkbox and radio.
These existed only as CSS injected by task-detail.js (.sp-excb, .cadq-ack
input), so any page that doesn't load that file — Forms, for one — fell back
to the browser's blue OS control. Lifted here because styles.css is the one
stylesheet every page loads, so "the app's checkbox" is now a thing a page
can use rather than something each one reimplements.
Usage: add .sh-cb to an or .
========================================================================== */
input.sh-cb {
-webkit-appearance: none; appearance: none;
position: relative; flex: none; margin: 0;
width: 17px; height: 17px;
border: 1.6px solid var(--taupe-light);
border-radius: 50%;
background: var(--warm-white);
cursor: pointer;
transition: background .12s, border-color .12s;
}
input.sh-cb:hover { border-color: var(--accent); }
input.sh-cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input.sh-cb:checked { background: var(--accent); border-color: var(--accent); }
/* A tick for a checkbox — it means "this is true". */
input[type="checkbox"].sh-cb:checked::after {
content: ""; position: absolute;
left: 5px; top: 2.5px; width: 4px; height: 8px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* A dot for a radio — it means "this one of several". Same shape, different
mark, so the two are not mistaken for each other. */
input[type="radio"].sh-cb:checked::after {
content: ""; position: absolute;
left: 50%; top: 50%; width: 7px; height: 7px;
margin: -3.5px 0 0 -3.5px;
border-radius: 50%; background: #fff;
}
input.sh-cb[disabled] { opacity: .5; cursor: default; }
/* ===========================================================================
OVERLAYS — ONE TREATMENT EVERYWHERE
A record, a notification, a picker, a day view, a sheet opened from inside
another sheet: they all sit on the same dimmed, softly blurred page, so the
thing in focus is unmistakable and nothing reads as a different species of
dialog. Kept to 3px — a heavier blur costs Chrome seconds to composite on a
full dashboard, and no one can tell the difference.
=========================================================================== */
.modal-overlay,
.ptd-overlay,
.notif-modal-overlay,
.shc-ov,
.cnw-ov,
.gcal-overlay,
.qc-scrim,
.cpop-scrim,
.gtb-calframe,
.md-overlay {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* Printing flattens to paper; a blur there is only a slow, grey smear. */
@media print {
.modal-overlay, .ptd-overlay, .notif-modal-overlay, .shc-ov, .cnw-ov,
.gcal-overlay, .qc-scrim, .cpop-scrim, .gtb-calframe, .md-overlay {
backdrop-filter: none; -webkit-backdrop-filter: none;
}
}
/* ===========================================================================
SCROLLBARS
A grey system scrollbar is the one piece of chrome that never got looked
at. It is ours now: an accent thumb on nothing at all, so it reads as a
mark on the page rather than a groove cut into it. Applied to the page and
to every scrolling panel inside it, light and dark alike.
=========================================================================== */
:root { --scroll-thumb: rgba(21,20,15,0.18); }
html[data-theme="dark"] { --scroll-thumb: rgba(252,251,248,0.22); }
* {
scrollbar-width: thin;
scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(21,20,15,0.16);
border-radius: 100px;
/* Inset by a transparent border so the bar reads as a slim mark, not a
full-width block the width of the gutter. */
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(21,20,15,0.3); background-clip: padding-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(252,251,248,0.2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(252,251,248,0.34); }
::-webkit-scrollbar-button { display: none; }
/* Panels that deliberately hide their scrollbar keep hiding it. */
.dm-thread::-webkit-scrollbar,
.dm-faces::-webkit-scrollbar,
.admin-main::-webkit-scrollbar { width: 0; height: 0; }
/* ===========================================================================
AN OVERLAY BLURS WHAT IT COVERS
A dimmed-but-sharp background keeps competing for the eye: the page behind
a dialog stays legible, so the dialog reads as a sticker on top of a page
rather than the only thing being asked of you. Most of the app's scrims
already blur; the ones written earliest do not, which is why one panel
looked different from every other. Declared once, by the shape every scrim
in this codebase shares — fixed, inset 0, with a dark wash.
=========================================================================== */
.md-overlay,
.sh-confirm-ov,
.shp-ov,
.qc-ov,
.mt-sheet,
.mob-nt-ov,
.mob-you-ov,
.mob-fsheet-ov,
.dcal-pop-ov,
.chat-modal,
.overlay,
.modal-ov,
.sheet-ov,
#new-modal,
#manage-modal {
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
}
/* ---- 1. A FILLED ACCENT CHOOSES ITS OWN FOREGROUND ---------------------- */
.dt-banner-h,
.wc-add,
.dcal-d.today,
.dcal-d.sel,
.trow-num,
.md-ack:not(.ghost),
.mob-nt-n,
.gtb-badge,
.ntf-chip.on {
color: var(--on-orange-sm, var(--on-orange, #fff)) !important;
}
/* A text button on a pale ground reads with ink, not with the accent's
foreground — and a bright accent cannot carry it, so it takes the ink
variant like every other accent label on a light surface. */
.md-dayfilter-x { color: var(--accent-ink, var(--accent)); }
/* ---- 2. ACCENT AS INK ON A PALE GROUND ---------------------------------- */
/* 13px at normal weight on #EFEFEF is body text and needs 4.5:1, which no
bright colour reaches. These take the ink variant: the colour when it can
carry a line, the page's own dark ink when it cannot. */
.admin-side .side-nav a.active,
.admin-side .side-nav a.on,
.admin-side .side-group-toggle,
#admin-group-toggle,
#admin-group-toggle > span,
.pdate,
.rowedit-date,
.trow-dur.none,
.dcal-connect,
.md-clearday,
.cl-cmp-v.diff {
color: var(--accent-ink, var(--accent));
}
/* THE LABEL TOKEN IS --stone, NOT --taupe. --taupe is the app's quietest
ink, meant for a mark or a hairline; used as type it is 3.55:1 at the
sizes these actually run at. --stone is the colour every other field
label in the app uses and reaches 5.43:1 at the same size. These are the
column headers of the main task table — the words that say what each
column is. */
.tday-h,
.trow-dur,
.pdate,
.cal-status {
color: var(--stone);
}