/*
 * RyfeTech brand layer for the Platform (Chief brand/BRAND.md, site colors approved 16/10/2026).
 * Loads after platform.css and refresh.css and only overrides them.
 * Shared by every RyfeTech site: charcoal bar, white logo, Manrope, #006B94 buttons, light by default.
 * Platform's own colors: gold tile #C87E0E, yellow line #F8E58E, tint #FFF8D9, dark well #3C3728.
 * Site colors are never used for text or button fills.
 */
@font-face { font-family: Manrope; font-weight: 400; font-style: normal; font-display: swap; src: url(brand/fonts/manrope-latin-400.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 500; font-style: normal; font-display: swap; src: url(brand/fonts/manrope-latin-500.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-weight: 600; font-style: normal; font-display: swap; src: url(brand/fonts/manrope-latin-600.woff2) format("woff2"); }

:root, :root[data-theme=dark] {
    color-scheme: dark;
    --bg: #231F20; --panel: #2a2627; --side: #231F20; --line: #4a4647; --text: #F8F7F7; --muted: #b5b2b4;
    --link: #D6D4D5; --field: #2d292a; --hover: #2d292a; --soft: #3C3728; --green: #C87E0E;
    --focus: #008DC1; --ring: rgb(0 141 193 / .30);
    --tile: #C87E0E; --zone: #F8E58E; --bar-h: 92px;
}
:root[data-theme=light] {
    color-scheme: light;
    --bg: #FFFFFF; --panel: #FFFFFF; --side: #FFFFFF; --line: #D6D4D5; --text: #231F20; --muted: #59565A;
    --link: #006B94; --field: #FFFFFF; --hover: #F8F7F7; --soft: #FFF8D9; --green: #C87E0E;
    --focus: #006B94; --ring: rgb(0 141 193 / .18);
}

body { font-family: Manrope, ui-sans-serif, system-ui, sans-serif; font-size: 15px; line-height: 1.55; letter-spacing: 0; background: var(--bg); color: var(--text); }
h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.4px; }
h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.2px; }
h3 { font-weight: 600; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--muted); }
/* Text links are underlined (brand: links on white are #006B94 and underlined). Classed links are buttons, cards and tabs. */
.content p a, .content a:not([class]), .content a.small, .properties a, td a { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Brand bar: charcoal in both themes, white logo, the Platform's yellow as the top line and active tab. */
.brand-bar { position: sticky; top: 0; z-index: 20; background: #231F20; color: #D6D4D5; border-top: 3px solid var(--zone); border-bottom: 1px solid #3b3738; }
.brand-bar-inner, .brand-tabs { max-width: 1152px; margin: 0 auto; padding: 0 16px; }
.brand-bar-inner { height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-home { display: flex; align-items: center; gap: 10px; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.brand-home img { display: block; height: 18px; width: auto; }
.brand-divider { width: 1px; height: 16px; background: #59565A; }
.brand-actions { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.brand-actions form { margin: 0; }
.brand-bar a, .brand-bar button { color: #D6D4D5; background: none; border: 0; padding: 0; font: inherit; }
.brand-bar a:hover, .brand-bar button:hover { color: #FFFFFF; text-decoration: none; }
.brand-bar .user-name { color: #D6D4D5; font-size: 12px; }
.brand-bar :focus-visible { outline-color: #FFFFFF; }
.brand-tabs { height: 40px; display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; font-size: 14px; scrollbar-width: none; }
.brand-tabs::-webkit-scrollbar { display: none; }
.brand-tab { display: inline-flex; align-items: center; padding-top: 2px; border-bottom: 2px solid transparent; }
.brand-tab.is-active { color: #FFFFFF; font-weight: 600; border-bottom-color: var(--zone); }
.brand-footer { max-width: 1152px; margin: 0 auto; padding: 16px; font-size: 12px; color: var(--muted); }

/* Compact layout, like ryfetech.com: 1152 px content, 16 px gutters (24 px from tablet). */
.main, .signed-out { margin-left: 0; }
.content { max-width: 1152px; padding: 32px 16px; }
.calendar-content { max-width: none; padding: 20px 16px; }
@media (min-width: 768px) {
    .brand-bar-inner, .brand-tabs, .brand-footer { padding-left: 24px; padding-right: 24px; }
    .content { padding: 32px 24px; }
    .calendar-content { padding: 20px 24px; }
}
@media (max-width: 600px) { .brand-bar .user-name { display: none; } }

/* The short blue rule that introduces a page (brand: 48 x 4 px, one per layout). */
.page-heading { position: relative; padding-top: 16px; }
.page-heading::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: #008DC1; }

/* Flat cards: hairline, 12 px corners, no shadows. Controls: 6 px corners. */
.panel, .lead-card, .login-card, .pipeline-summary a { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.lead-card:hover, .pipeline-summary a:hover { border-color: var(--focus); }
.stage-step, .badge, .channel, .icon-button, .quiet-button, input, select, textarea { border-radius: 6px; }
.stat::after { display: none; }
.stat strong { font-weight: 600; }
.content > .two-column { margin-bottom: 24px; }

.button { font-size: 14px; font-weight: 600; padding: 10px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); box-shadow: none; }
.button:hover { border-color: var(--text); text-decoration: none; }
.button.primary, .primary { background: #006B94; border-color: #006B94; color: #FFFFFF; }
.button.primary:hover, .primary:hover { background: #00587A; border-color: #00587A; color: #FFFFFF; }

input, select, textarea { border-color: var(--line); background: var(--field); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); outline: none; }
/* A single checkbox whose label carries .checkbox-row (settings): box and text on one line. */
label.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
label.checkbox-row input { width: auto; margin: 0; }

.notice { background: var(--soft); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--tile); border-radius: 6px; }
.error { background: #fdeceb; color: #b42318; border: 1px solid #f8d7d4; border-radius: 6px; }
:root:not([data-theme=light]) .error { background: rgb(180 35 24 / .24); color: #f4a39c; border-color: rgb(180 35 24 / .38); }

.badge { background: var(--hover); color: var(--text); border: 1px solid var(--line); font-size: 11px; }
.channel { background: var(--soft); color: var(--text); border-color: var(--line); }
.stage-step.current { background: var(--soft); color: var(--text); border-color: var(--tile); font-weight: 600; }
.stage-attempting { background: #C87E0E; }
.stage-connected { background: #008DC1; }
.stage-qualified { background: #137333; }
.stage-disqualified { background: #b42318; }
.overdue { color: #b42318; }
:root:not([data-theme=light]) .overdue { color: #f4a39c; }

/* Calendar: today in the Platform's yellow with charcoal (never white on yellow); heights follow the 92 px bar. */
.calendar-day.today .day-number { background: var(--zone); color: #231F20; }
.calendar-panel { height: calc(100dvh - 245px); }
@media (max-width: 1099px) { .calendar-panel { height: calc(100dvh - 234px); } }
@media (max-width: 760px) { .calendar-panel { height: calc(100dvh - 264px); } }
@media (min-width: 1100px) and (min-height: 650px) { .calendar-content { height: calc(100dvh - var(--bar-h)); } }

/* Sign in: color logo on light, white logo on dark. */
.login-logo { background: none; padding: 0; border-radius: 0; height: 28px; width: auto; }
.login-logo.logo-dark { display: none; }
:root:not([data-theme=light]) .login-logo.logo-light { display: none; }
:root:not([data-theme=light]) .login-logo.logo-dark { display: block; }