/* SEN Company Hub — Sky Eye Network design system Tokens per SEN_OS/30_Knowledge/Brand/SEN_Visual_Identity.md Light/dark themes via [data-theme] on . Sidebar stays dark ink in both. */ :root { --sen-blue: #1992d1; /* Sky Eye Blue (primary, style guide) */ --sen-cyan: #40d9f1; /* site accent */ --sen-navy: #003388; /* dark nav blue */ --sen-ink: #0b1c2c; /* deep neutral for sidebar */ /* Member PDF cover tokens (sen-member-pdf) — sidebar theme */ --cover-gradient-start: #001a33; --cover-gradient-mid: #003388; --cover-gradient-end: #1992d1; --cover-glow-a: rgba(64, 217, 241, 0.18); --cover-glow-b: rgba(46, 163, 242, 0.22); /* semantic — light theme */ --sen-blue-tint: #e6f4fb; --bg: #f4f7fa; --bg-card: #ffffff; --bg-inset: #eef2f6; --text: #16232e; --text-secondary: #5b6b78; --text-tertiary: #8a97a3; --border: rgba(11, 28, 44, 0.08); --border-strong: rgba(11, 28, 44, 0.14); --green: #23a55a; --amber: #e8930c; --red: #d64545; --green-bg: #e5f6ec; --green-fg: #157a41; --amber-bg: #fdf1dd; --amber-fg: #9c6205; --red-bg: #fbe9e9; --red-fg: #a53030; --gray-bg: #eef1f4; --gray-fg: #5b6b78; --link: var(--sen-blue); --heading: var(--sen-navy); --tile-value: var(--sen-ink); --radius: 14px; --radius-sm: 10px; --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --shadow: 0 1px 3px rgba(11, 28, 44, 0.06), 0 4px 16px rgba(11, 28, 44, 0.05); --sidebar-w: 264px; --sidebar-rail-w: 72px; /* Type scale — Default = comfortable; Compact = denser; Large = roomier. Toggle via [data-text-size] + sidebar A− / A / A+. */ --fs-body: 17px; --fs-title: 28px; --fs-sub: 16px; --fs-card-h: 17px; --fs-meta: 13px; --fs-table: 15px; --fs-th: 13px; --fs-pill: 13px; --fs-label: 13.5px; --fs-tile-label: 13px; --fs-tile-value: 34px; --fs-tile-sub: 13px; --fs-input: 16px; --fs-nav: 15.5px; --fs-row: 15px; --fs-small: 12.5px; } html[data-text-size="compact"] { --fs-body: 16px; --fs-title: 24px; --fs-sub: 14px; --fs-card-h: 16px; --fs-meta: 11.5px; --fs-table: 14px; --fs-th: 12px; --fs-pill: 12px; --fs-label: 13px; --fs-tile-label: 12.5px; --fs-tile-value: 32px; --fs-tile-sub: 12.5px; --fs-input: 15px; --fs-nav: 15px; --fs-row: 14px; --fs-small: 11.5px; } html[data-text-size="large"] { --fs-body: 18.5px; --fs-title: 30px; --fs-sub: 17.5px; --fs-card-h: 18px; --fs-meta: 14px; --fs-table: 16.5px; --fs-th: 14px; --fs-pill: 14px; --fs-label: 14.5px; --fs-tile-label: 14px; --fs-tile-value: 38px; --fs-tile-sub: 14px; --fs-input: 17px; --fs-nav: 16.5px; --fs-row: 16px; --fs-small: 13.5px; } [data-theme="dark"] { --sen-blue-tint: rgba(64, 217, 241, 0.14); --bg: #0e1a26; --bg-card: #15263a; --bg-inset: #0b1522; --text: #e8eef4; --text-secondary: #9db0c0; --text-tertiary: #6e8296; --border: rgba(232, 238, 244, 0.09); --border-strong: rgba(232, 238, 244, 0.18); --green-bg: rgba(35, 165, 90, 0.18); --green-fg: #5fd394; --amber-bg: rgba(232, 147, 12, 0.16); --amber-fg: #f3b453; --red-bg: rgba(214, 69, 69, 0.16); --red-fg: #f08c8c; --gray-bg: rgba(232, 238, 244, 0.08); --gray-fg: #9db0c0; --link: var(--sen-cyan); --heading: #7fd6ee; --tile-value: #f2f7fb; --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25); } * { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--font); font-weight: 400; background: var(--bg); color: var(--text); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- app shell ---------- */ .shell { display: flex; min-height: 100vh; } .main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---------- sidebar (member PDF cover gradient) ---------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient( 145deg, var(--cover-gradient-start) 0%, var(--cover-gradient-mid) 42%, var(--cover-gradient-end) 100% ); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 60; isolation: isolate; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08); transition: width 0.2s ease; } .sidebar::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 15% 18%, var(--cover-glow-a) 0%, transparent 46%), radial-gradient(circle at 90% 78%, var(--cover-glow-b) 0%, transparent 42%), radial-gradient(circle at 40% 100%, rgba(25, 146, 209, 0.28) 0%, transparent 55%); } .sidebar > * { position: relative; z-index: 1; } .sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(0, 26, 51, 0.35) 0%, transparent 100%); } .sidebar .brand img { height: 34px; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)); } .sidebar .brand .brand-mark { display: none; width: 34px; height: 34px; object-fit: contain; } .sidebar .brand .sub { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sen-cyan); padding: 4px 8px; border-radius: 999px; background: rgba(64, 217, 241, 0.14); border: 1px solid rgba(64, 217, 241, 0.28); text-shadow: 0 0 18px rgba(64, 217, 241, 0.45); } .sidebar nav { flex: 1; padding: 10px 12px 14px; } .ng { margin-bottom: 6px; } .ng-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 12px 10px 6px; } .ng-head:hover { color: rgba(255,255,255,0.82); } .ng-head .chev { transition: transform 0.18s ease; font-size: 10px; } .ng.collapsed .chev { transform: rotate(-90deg); } .ng.collapsed .ng-items { display: none; } .ng-items { display: flex; flex-direction: column; gap: 3px; } .nav-item { display: flex; align-items: center; gap: 12px; background: none; border: 1px solid transparent; cursor: pointer; font-family: var(--font); font-size: var(--fs-nav); font-weight: 600; color: rgba(255,255,255,0.88); padding: 11px 12px; min-height: 44px; border-radius: var(--radius-sm); text-align: left; width: 100%; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.88; } .nav-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.08); } .nav-item.active { background: linear-gradient(135deg, rgba(64, 217, 241, 0.22) 0%, rgba(25, 146, 209, 0.55) 100%); color: #fff; border-color: rgba(64, 217, 241, 0.45); box-shadow: 0 6px 18px rgba(0, 51, 136, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .nav-item.active svg { opacity: 1; } .sidebar .side-foot { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(0deg, rgba(0, 26, 51, 0.45) 0%, transparent 100%); margin-top: auto; } .side-foot-controls { display: flex; flex-direction: column; gap: 12px; } .sidebar-rail-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin-top: 2px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 9px 12px; min-height: 40px; border-radius: var(--radius-sm); cursor: pointer; } .sidebar-rail-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(64, 217, 241, 0.4); } .sidebar-rail-toggle svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s ease; } .sidebar-rail-toggle-label { white-space: nowrap; } .theme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); font-family: var(--font); font-size: 13.5px; font-weight: 600; padding: 10px 12px; min-height: 42px; border-radius: var(--radius-sm); cursor: pointer; backdrop-filter: blur(6px); } .theme-toggle:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(64, 217, 241, 0.35); } .theme-toggle svg { width: 17px; height: 17px; } .text-size { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); } .text-size button { background: transparent; border: none; color: rgba(255, 255, 255, 0.75); font-family: var(--font); font-weight: 700; cursor: pointer; min-height: 36px; border-radius: 7px; padding: 0; line-height: 1; } .text-size button[data-size="compact"] { font-size: 13px; } .text-size button[data-size="default"] { font-size: 15px; } .text-size button[data-size="large"] { font-size: 17px; } .text-size button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .text-size button.active { background: linear-gradient(135deg, rgba(64, 217, 241, 0.22) 0%, rgba(25, 146, 209, 0.55) 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(64, 217, 241, 0.4); } .text-size-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 2px 2px; } .user-card { display: flex; align-items: center; gap: 10px; } .user-card .avatar, .user-card .avatar-btn { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, var(--sen-cyan) 0%, var(--sen-blue) 55%, var(--sen-navy) 100%); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(64, 217, 241, 0.35), 0 4px 12px rgba(0, 26, 51, 0.35); border: none; padding: 0; cursor: pointer; overflow: hidden; font-family: var(--font); } .user-card .avatar-btn:hover { box-shadow: 0 0 0 2px rgba(64, 217, 241, 0.7), 0 4px 12px rgba(0, 26, 51, 0.35); } .user-card .avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-card .meta { min-width: 0; flex: 1; } .user-card .meta .name { font-size: 14px; font-weight: 700; color: #fff; } .user-card .meta .email { font-size: 11.5px; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-reset { display: block; margin-top: 4px; background: none; border: none; padding: 0; color: rgba(64, 217, 241, 0.9); font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; text-align: left; } .avatar-reset:hover { color: #fff; text-decoration: underline; } .sidebar #changePasswordBtn.ghost, .sidebar button.ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); } .sidebar #changePasswordBtn.ghost:hover, .sidebar button.ghost:hover { background: rgba(64, 217, 241, 0.12); border-color: rgba(64, 217, 241, 0.4); color: #fff; } button.logout { background: transparent; border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.9); border-radius: var(--radius-sm); padding: 9px 12px; min-height: 40px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); width: 100%; } button.logout:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4); } /* ---------- mobile topbar ---------- */ .mobile-bar { display: none; background: linear-gradient( 115deg, var(--cover-gradient-start) 0%, var(--cover-gradient-mid) 48%, var(--cover-gradient-end) 100% ); color: #fff; align-items: center; gap: 14px; padding: 0 16px; height: 58px; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); } .mobile-bar img { height: 26px; } .mobile-bar .hamburger { background: none; border: none; color: #fff; cursor: pointer; padding: 8px; display: flex; align-items: center; } .mobile-bar .hamburger svg { width: 26px; height: 26px; } .mobile-bar .hub-chrome-slot { margin-left: auto; } .backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55; } /* Desktop top-right chrome (notifications). Hidden on mobile — bell lives in .mobile-bar. */ .hub-desktop-chrome { display: flex; justify-content: flex-end; align-items: center; padding: 10px 18px 0; position: sticky; top: 0; z-index: 40; pointer-events: none; } .hub-desktop-chrome .hub-chrome-slot { pointer-events: auto; } .hub-notif-wrap { position: relative; } .hub-notif-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .hub-notif-btn:hover { border-color: var(--sen-blue); color: var(--sen-blue); } .hub-notif-btn svg { width: 20px; height: 20px; } .hub-notif-btn[aria-expanded="true"] { border-color: var(--sen-blue); color: var(--sen-blue); } .hub-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg-card); } .hub-notif-badge[hidden] { display: none !important; } .mobile-bar .hub-notif-btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; } .mobile-bar .hub-notif-btn:hover, .mobile-bar .hub-notif-btn[aria-expanded="true"] { background: rgba(64, 217, 241, 0.2); border-color: rgba(64, 217, 241, 0.55); color: #fff; } .mobile-bar .hub-notif-badge { box-shadow: 0 0 0 2px rgba(11, 28, 44, 0.35); } .hub-notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(420px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 80px)); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(5, 15, 26, 0.18); z-index: 80; overflow: hidden; } .hub-notif-panel[hidden] { display: none !important; } .hub-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .hub-notif-head h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--heading); } .hub-notif-actions { display: flex; flex-wrap: wrap; gap: 6px; } .hub-notif-actions button { font-size: 12px; padding: 5px 9px; min-height: 0; } .hub-notif-list { overflow: auto; flex: 1; padding: 6px; } .hub-notif-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 10px; cursor: pointer; font-family: var(--font); color: var(--text); } .hub-notif-row:hover { background: var(--bg-muted, rgba(0,0,0,0.04)); } .hub-notif-row.is-unread { background: rgba(64, 217, 241, 0.08); } .hub-notif-row.is-unread:hover { background: rgba(64, 217, 241, 0.14); } .hub-notif-check { margin-top: 2px; width: 16px; height: 16px; cursor: pointer; } .hub-notif-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; } .hub-notif-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sen-blue); } .hub-notif-time { font-size: 11px; color: var(--text-tertiary); } .hub-notif-title { font-size: 13px; font-weight: 600; color: var(--heading); line-height: 1.35; } .hub-notif-body { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; } .hub-notif-empty { padding: 28px 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; } .hub-notif-error { padding: 14px; color: var(--red); font-size: 13px; } /* Desktop shelf / icons-only rail — ignored on mobile drawer. */ @media (min-width: 901px) { html[data-sidebar="rail"] { --sidebar-w: var(--sidebar-rail-w); } html[data-sidebar="rail"] .sidebar .brand { justify-content: center; padding: 18px 10px 14px; gap: 0; } html[data-sidebar="rail"] .sidebar .brand .brand-wordmark, html[data-sidebar="rail"] .sidebar .brand .sub { display: none; } html[data-sidebar="rail"] .sidebar .brand .brand-mark { display: block; } html[data-sidebar="rail"] .sidebar nav { padding: 8px 8px 12px; } html[data-sidebar="rail"] .ng { margin-bottom: 2px; } html[data-sidebar="rail"] .ng-head { display: none; } html[data-sidebar="rail"] .ng.collapsed .ng-items { display: flex; } html[data-sidebar="rail"] .nav-item { justify-content: center; gap: 0; padding: 11px 8px; } html[data-sidebar="rail"] .nav-item > span, html[data-sidebar="rail"] .nav-item .gs-kbd { display: none; } html[data-sidebar="rail"] .side-foot { padding: 10px 8px 10px; gap: 8px; } html[data-sidebar="rail"] .side-foot-controls { align-items: center; gap: 8px; } html[data-sidebar="rail"] .text-size-wrap, html[data-sidebar="rail"] #changePasswordBtn, html[data-sidebar="rail"] #logoutBtn { display: none; } html[data-sidebar="rail"] .theme-toggle { justify-content: center; padding: 10px; width: 44px; } html[data-sidebar="rail"] .theme-toggle span { display: none; } html[data-sidebar="rail"] .user-card { justify-content: center; } html[data-sidebar="rail"] .user-card .meta { display: none; } html[data-sidebar="rail"] .sidebar-rail-toggle { justify-content: center; padding: 9px; width: 44px; margin: 0 auto; } html[data-sidebar="rail"] .sidebar-rail-toggle svg { transform: rotate(180deg); } html[data-sidebar="rail"] .sidebar-rail-toggle-label { display: none; } } @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 0 0 40px rgba(0,0,0,0.4); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .backdrop { display: block; } .mobile-bar { display: flex; } .hub-desktop-chrome { display: none; } .sidebar-rail-toggle { display: none; } .sidebar .brand .brand-mark { display: none; } .sidebar .brand .brand-wordmark { display: block; } } /* ---------- layout ---------- */ .container { max-width: 1280px; margin: 0 auto; padding: 28px 28px 48px; width: 100%; } .page-title { font-size: var(--fs-title); color: var(--text); margin-bottom: 4px; } .page-sub { font-size: var(--fs-sub); color: var(--text-secondary); margin-bottom: 20px; } .grid { display: grid; gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; padding: 16px; margin-bottom: 18px; /* Inset panel so gutters read clearly against white tiles (page --bg #f4f7fa is too close to --bg-card to show a plain gap) */ background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius); } .grid.tiles > .tile { box-shadow: none; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .card h2 { font-size: var(--fs-card-h); color: var(--heading); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card h2 .asof { font-size: var(--fs-meta); font-weight: 400; color: var(--text-tertiary); } /* ---------- metric tiles ---------- */ .tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .tile .label { font-size: var(--fs-tile-label); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .tile .value { font-size: var(--fs-tile-value); font-weight: 700; color: var(--tile-value); margin-top: 4px; line-height: 1.2; } .tile .sub { font-size: var(--fs-tile-sub); color: var(--text-tertiary); margin-top: 3px; } .tile.accent { border-top: 3px solid var(--sen-blue); } /* ---------- tables & lists ---------- */ table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); } th { text-align: left; font-size: var(--fs-th); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--border-strong); } td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .pill { display: inline-block; font-size: var(--fs-pill); font-weight: 600; border-radius: 20px; padding: 3px 11px; } .pill.blue { background: var(--sen-blue-tint); color: var(--heading); } .pill.green { background: var(--green-bg); color: var(--green-fg); } .pill.amber { background: var(--amber-bg); color: var(--amber-fg); } .pill.red { background: var(--red-bg); color: var(--red-fg); } .pill.gray { background: var(--gray-bg); color: var(--gray-fg); } .empty { color: var(--text-tertiary); font-size: var(--fs-sub); padding: 12px 0; } /* ---------- forms ---------- */ input, select, textarea { font-family: var(--font); font-size: var(--fs-input); padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--sen-blue); outline-offset: -1px; border-color: var(--sen-blue); } label { font-size: var(--fs-label); font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 5px; } button.primary { background: var(--sen-blue); color: #fff; border: none; font-family: var(--font); font-size: var(--fs-input); font-weight: 700; padding: 12px 20px; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; } button.primary:hover { background: var(--sen-navy); } button.primary:disabled { opacity: 0.5; cursor: default; } button.ghost { background: transparent; color: var(--link); border: 1px solid var(--border-strong); font-family: var(--font); font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; } button.ghost:hover { border-color: var(--sen-blue); } button.danger { background: var(--red-bg); color: var(--red-fg); border: none; font-family: var(--font); font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; } /* ---------- global search (Cmd-K) ---------- */ .gs-overlay { position: fixed; inset: 0; background: rgba(5, 15, 26, 0.55); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; backdrop-filter: blur(2px); } .gs-box { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius); width: 100%; max-width: 640px; box-shadow: 0 24px 80px rgba(0,0,0,0.4); overflow: hidden; } .gs-box input { border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 18px; font-size: 16px; } .gs-box input:focus { outline: none; } .gs-results { max-height: 46vh; overflow-y: auto; padding: 6px; } .gs-item { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: none; font-family: var(--font); cursor: pointer; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--text); } .gs-item:hover, .gs-item:focus { background: var(--sen-blue-tint); } .gs-label { font-size: 14.5px; font-weight: 600; } .gs-sub { font-size: 12px; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; } .gs-trigger { margin: 8px 0 2px; border: 1px dashed rgba(255,255,255,0.25); } .gs-kbd { margin-left: auto; font-size: 11px; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 1px 6px; } /* ---------- tabs (Marketing) ---------- */ .tab-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; } .tab-btn { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-secondary); font-family: var(--font); font-size: 14px; font-weight: 600; padding: 10px 18px; min-height: 42px; border-radius: 22px; cursor: pointer; } .tab-btn:hover { border-color: var(--sen-blue); color: var(--link); } .tab-btn.active { background: var(--sen-blue); border-color: var(--sen-blue); color: #fff; } /* ---------- assistant chat ---------- */ .chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 110px); max-width: 860px; margin: 0 auto; } .chat-head-brand { display: flex; align-items: flex-start; gap: 14px; } .chat-assistant-mark { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); } .chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 8px 2px 16px; } .chat-msg { display: flex; align-items: flex-end; gap: 10px; } .chat-msg.user { justify-content: flex-end; } .chat-avatar { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); } .chat-bubble { max-width: 82%; padding: 13px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); } .chat-msg.assistant .chat-bubble { max-width: calc(82% - 46px); border-bottom-left-radius: 5px; } .chat-msg.user .chat-bubble { background: var(--sen-blue); color: #fff; border: none; border-bottom-right-radius: 5px; } .chat-msg.assistant .chat-bubble a.chat-link { color: var(--sen-blue); text-decoration: underline; word-break: break-all; } .chat-msg.assistant .chat-bubble a.chat-link:hover { opacity: 0.85; } .chat-md-p { margin: 0 0 0.7em; } .chat-md-p:last-child { margin-bottom: 0; } .chat-md-h { margin: 0.85em 0 0.35em; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--text); } .chat-md-h:first-child { margin-top: 0; } .chat-md-list { margin: 0.35em 0 0.85em; padding-left: 1.25em; } .chat-md-list li { margin: 0.28em 0; } .chat-md-list li + li { margin-top: 0.35em; } .chat-md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; background: color-mix(in srgb, var(--text) 8%, transparent); padding: 0.1em 0.35em; border-radius: 4px; } .chat-md-hr { border: none; border-top: 1px solid var(--border); margin: 0.85em 0; } .chat-typing { color: var(--text-tertiary); font-style: italic; } .chat-sources { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; } .chat-feedback { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); } .chat-feedback-btn { font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); } .chat-feedback-btn:hover { border-color: var(--sen-blue); color: var(--link); } .chat-feedback-btn.ghostish { background: transparent; font-weight: 500; color: var(--text-secondary); } .assistant-feedback-drawer { max-width: 560px; height: auto; max-height: 88vh; } .assistant-feedback-drawer .pm-drawer-body { display: block; overflow: auto; } .afb-lead { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.45; } .afb-label { display: block; font-size: 12.5px; font-weight: 650; margin: 14px 0 6px; color: var(--text); } .afb-req { color: var(--red); font-weight: 600; font-size: 11.5px; } .afb-opt { color: var(--text-tertiary); font-weight: 500; font-size: 11.5px; } .afb-select, .afb-textarea { width: 100%; font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px; box-sizing: border-box; } .afb-textarea { resize: vertical; min-height: 88px; line-height: 1.4; } .afb-hint { font-size: 12px; color: var(--text-tertiary); margin: 6px 0 0; } .afb-status { font-size: 13.5px; margin: 14px 0 0; line-height: 1.4; } .afb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .afb-apply { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); font-size: 13px; line-height: 1.4; color: var(--text); cursor: pointer; } .afb-apply input[type="checkbox"] { width: auto; min-width: 16px; height: 16px; margin: 3px 0 0; flex: 0 0 auto; padding: 0; accent-color: var(--sen-blue); } .afb-apply span { flex: 1; min-width: 0; } .afb-apply-note { font-size: 12px; color: var(--text-tertiary); margin: 6px 0 0; } .cite { font-size: 12px; font-weight: 700; } .chat-intents { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; border-top: 1px solid var(--border); } .chat-intent { appearance: none; border: none; background: var(--sen-blue); color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; min-height: 0; border-radius: var(--radius-sm); cursor: pointer; line-height: 1.2; } .chat-intent:hover { background: var(--sen-navy); color: #fff; } .chat-intent.active { background: var(--sen-navy); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); } .chat-input { display: flex; gap: 10px; align-items: flex-end; padding-top: 12px; } .chat-input textarea { resize: none; } /* ---------- kanban ---------- */ .kb-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .kb-filters select { width: auto; min-width: 150px; } .kb-check { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; white-space: nowrap; } .kanban { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; } .kb-col { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius); min-width: 290px; width: 290px; flex-shrink: 0; max-height: calc(100vh - 250px); display: flex; flex-direction: column; } .kb-col-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 13px 14px 9px; display: flex; align-items: center; gap: 8px; } .kb-count { background: var(--gray-bg); color: var(--gray-fg); border-radius: 12px; font-size: 11.5px; padding: 1px 8px; } .kb-col-body { padding: 0 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .kb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 13px; box-shadow: var(--shadow); position: relative; } .kb-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; } .kb-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; } .kb-links { display: flex; gap: 12px; font-size: 12px; } /* ---------- nested task tree (ClickUp-style parent/subtask view) ---------- */ .tree-only { background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-secondary); font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 16px; cursor: pointer; white-space: nowrap; } .tree-only:hover { border-color: var(--sen-blue); color: var(--link); } .task-tree { display: flex; flex-direction: column; } .tt-node.leaf > .tt-children:empty { display: none; } .tt-node.collapsed > .tt-children { display: none; } .tt-node.collapsed > .tt-add-footer, .tt-node.collapsed > .tt-inline-add { display: none !important; } .tt-node.leaf:not(.tt-adding):not(:hover) > .tt-add-footer { display: none; } /* Hide completed: any done node (not only fully-done subtrees). */ .pm-groups.hide-completed .tt-node.is-done, .kanban.hide-completed .kb-card.is-done { display: none; } .pm-groups.hide-candidates .tt-node.is-candidate, .kanban.hide-candidates .kb-card.is-candidate, .kanban.hide-candidates .kb-col[data-status="task_candidate"] { display: none; } .pm-group.collapsed > .pm-group-body { display: none; } /* Untriaged AI candidates: present but visibly not-yet-real work. */ .tt-node.is-candidate > .tt-row { background: var(--bg-inset); } .tt-node.is-candidate > .tt-row .tt-title { color: var(--text-secondary); font-style: italic; } .tt-node.is-candidate > .tt-row:hover .tt-title { color: var(--link); font-style: normal; } .kb-card.is-candidate { border-style: dashed; } .tt-candidate-meta { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .tt-cand-src { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; } .tt-promote { background: none; border: 1px solid var(--sen-blue); color: var(--link); font-family: var(--font); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 14px; cursor: pointer; white-space: nowrap; } .tt-promote:hover { background: var(--sen-blue-tint); } .tt-dismiss { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; font-weight: 700; padding: 2px 6px; opacity: 0.5; } .tt-dismiss:hover { opacity: 1; color: var(--red-fg); } .tt-row { display: grid; grid-template-columns: var(--tt-cols, 22px 18px 20px 110px minmax(200px, 1fr) 72px 96px 134px 200px 88px); align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); min-height: 40px; } .tt-col-headers { display: grid; grid-template-columns: var(--tt-cols, 22px 18px 20px 110px minmax(200px, 1fr) 72px 96px 134px 200px 88px); gap: 6px; align-items: end; padding: 0 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); position: sticky; top: 0; z-index: 5; background: var(--bg); } .tt-col-h { position: relative; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; } .tt-col-h[data-col="assignee"], .tt-col-h[data-col="due"], .tt-col-h[data-col="priority"], .tt-col-h[data-col="comment"] { text-align: right; padding-right: 4px; } .tt-col-resize { position: absolute; top: 0; right: -5px; width: 10px; height: 100%; cursor: col-resize; z-index: 2; } .tt-col-resize::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: 4px; width: 2px; background: transparent; border-radius: 1px; } .tt-col-h:hover .tt-col-resize::after, .tt-col-headers:hover .tt-col-resize::after, body.tt-resizing .tt-col-resize::after { background: var(--border-strong); } body.tt-resizing { cursor: col-resize !important; user-select: none !important; } /* Depth indents Name only — meta columns stay vertically aligned (ClickUp-style). */ .tt-row > .tt-name-col { padding-left: calc(var(--tt-depth, 0) * 18px); min-width: 0; } .tt-row > .tt-assign, .tt-row > .tt-due-wrap, .tt-row > .pm-priority, .tt-row > .tt-latest-comment, .tt-row > .tt-actions { justify-self: end; width: 100%; max-width: 100%; box-sizing: border-box; } .tt-row > .tt-assign { display: inline-flex; justify-content: flex-end; } .tt-row > .tt-due-wrap { justify-content: flex-end; } .tt-row > .pm-priority { justify-content: flex-end; } .tt-row > .tt-latest-comment { text-align: right; } .tt-row > .tt-actions { display: inline-flex; justify-content: flex-end; } .tt-row > .pm-status-wrap.labeled { justify-self: stretch; width: 100%; min-width: 0; } .tt-select { cursor: pointer; accent-color: var(--sen-blue); } .tt-drag { position: relative; width: 18px; height: 22px; border: none; background: none; padding: 0; color: var(--text-tertiary); cursor: grab; font-size: 14px; line-height: 1; opacity: 0.35; font-family: var(--font); } /* Larger grab target without shifting layout. */ .tt-drag::before { content: ""; position: absolute; inset: -10px -8px; } .tt-row:hover .tt-drag { opacity: 0.85; } .tt-drag:active { cursor: grabbing; } .tt-node.tt-dragging { opacity: 0.45; } .tt-node.tt-drop-before > .tt-row, .tt-node.tt-drop-after > .tt-row, .tt-node.tt-drop-into > .tt-row { position: relative; } /* Drop line between rows (before = top of row). */ .tt-node.tt-drop-before > .tt-row::before { content: ""; position: absolute; left: 6px; right: 6px; top: -1px; height: 2px; background: var(--sen-blue); border-radius: 1px; z-index: 4; pointer-events: none; box-shadow: 0 0 0 1px var(--sen-blue-tint); } /* After line under the whole node — works below expanded subtrees. */ .tt-node.tt-drop-after { position: relative; } .tt-node.tt-drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px; background: var(--sen-blue); border-radius: 1px; z-index: 4; pointer-events: none; box-shadow: 0 0 0 1px var(--sen-blue-tint); } .tt-node.tt-drop-into > .tt-row { box-shadow: inset 0 0 0 2px var(--sen-blue); background: var(--sen-blue-tint); } .tt-node.tt-drop-into > .tt-row::after, .tt-node.tt-drop-before > .tt-row::after, .tt-node.tt-drop-after > .tt-row::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--sen-blue); background: var(--bg-card); border: 1px solid var(--sen-blue); border-radius: 999px; padding: 2px 8px; pointer-events: none; z-index: 5; } .tt-node.tt-drop-into > .tt-row::after { content: "Nest under"; } .tt-node.tt-drop-before > .tt-row::after { content: "Move here"; top: 4px; transform: none; } .tt-node.tt-drop-after > .tt-row::after { content: "Move here"; top: auto; bottom: 4px; transform: none; } /* When after-line is on an expanded parent, keep the pill on the parent row. */ .tt-node.tt-drop-after:not(.leaf) > .tt-row::after { bottom: auto; top: 50%; transform: translateY(-50%); } .tt-drag-hint { position: sticky; bottom: 10px; z-index: 20; margin: 12px auto 0; width: fit-content; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: var(--sen-navy, #0b2740); color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .tt-drag-hint[hidden] { display: none !important; } .tt-drag-hint b { color: var(--sen-cyan, #40d9f1); font-weight: 800; } .tt-rename { opacity: 0; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; border: 1px solid transparent; background: transparent; color: var(--text-tertiary); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; } .tt-row:hover .tt-rename, .tt-rename:focus { opacity: 1; } .tt-rename:hover { border-color: var(--border-strong); background: var(--bg-inset); color: var(--link); } .tt-latest-comment.empty { visibility: hidden; } .tt-row.tt-selected { background: var(--sen-blue-tint); } .tt-inline-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px 10px calc(28px + var(--tt-depth-add, 18px)); border-bottom: 1px solid var(--border); } .tt-inline-add[hidden] { display: none !important; } .tt-inline-add-input { font-size: 13.5px; padding: 7px 10px; flex: 1; min-width: 180px; max-width: 480px; border-style: dashed; border-color: var(--border-strong); background: var(--bg-inset); } .tt-add-footer { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text-tertiary); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 8px 8px 8px calc(28px + var(--tt-depth-add, 18px)); cursor: pointer; } .tt-add-footer:hover { color: var(--link); background: var(--bg-inset); } .tt-node.tt-adding > .tt-add-footer { display: none; } .tt-add-sub { opacity: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0; } .tt-row:hover .tt-add-sub, .tt-add-sub:focus { opacity: 1; } .tt-add-sub:hover { border-color: var(--sen-blue); color: var(--link); background: var(--sen-blue-tint); } .tt-latest-comment { justify-self: end; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); text-align: right; cursor: pointer; } .tt-latest-comment.empty { color: var(--text-tertiary); cursor: default; font-weight: 400; } .tt-latest-comment.tt-open:hover { color: var(--link); text-decoration: underline; } .pm-bulk-bar { position: sticky; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--sen-blue); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,0.18); } .pm-bulk-bar[hidden] { display: none !important; } .pm-bulk-count { font-weight: 700; font-size: 13.5px; color: var(--sen-blue); margin-right: 4px; } .pm-bulk-bar select { width: auto; min-width: 140px; font-size: 13px; padding: 6px 8px; } .tt-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--sen-blue-tint); color: var(--sen-blue); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; object-fit: cover; flex-shrink: 0; } .tt-avatar-img { padding: 0; border: 1px solid var(--border); background: var(--bg-inset); } .tt-row:hover { background: var(--bg-inset); } .tt-row.done .tt-title { color: var(--text-tertiary); text-decoration: line-through; } .tt-toggle { width: 20px; height: 20px; flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--text-tertiary); font-size: 11px; padding: 0; line-height: 20px; } .tt-toggle:disabled { cursor: default; } .tt-name-col { display: flex; align-items: center; gap: 6px; min-width: 0; } .tt-title { font-size: var(--fs-row); font-weight: 600; margin-right: 2px; } .tt-title.tt-open { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; font-family: var(--font); font-weight: 600; color: var(--text); text-align: left; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-title.tt-open:hover { color: var(--link); text-decoration: underline; } .tt-title-edit { flex: 1; min-width: 80px; max-width: 100%; font: inherit; font-size: var(--fs-row); font-weight: 600; padding: 4px 8px; margin: 0; border: 1px solid var(--sen-blue); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); outline: none; box-shadow: 0 0 0 3px var(--sen-blue-tint); } .tt-chip { font-weight: 700; } .tt-assignees { display: inline-flex; gap: 3px; align-items: center; list-style: none; } .tt-assignees.tt-empty { color: var(--text-tertiary); font-size: 12px; } .tt-assignees::-webkit-details-marker { display: none; } .tt-assign { position: relative; display: inline-flex; } .tt-assign > summary.tt-assignees { cursor: pointer; min-width: 28px; min-height: 28px; padding: 2px 4px; border-radius: 8px; border: 1px solid transparent; } .tt-assign > summary.tt-assignees:hover { border-color: var(--border-strong); background: var(--bg-inset); } .tt-assign[open] > summary.tt-assignees { border-color: var(--sen-blue); background: var(--sen-blue-tint); } .tt-assign-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 25; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 200px; max-width: 260px; padding: 8px; } .tt-assign-opts { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; margin-bottom: 8px; } .tt-assign-opt { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: 13px; padding: 6px 6px; border-radius: 6px; cursor: pointer; color: var(--text); } .tt-assign-opt:hover { background: var(--sen-blue-tint); } .tt-assign-opt input { width: auto; margin: 0; } .tt-assign-done { width: 100%; background: var(--sen-blue); color: #fff; border: none; font-family: var(--font); font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; } .tt-assign-done:hover { background: var(--sen-navy); } .tt-due-wrap { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 100%; min-width: 0; cursor: pointer; border-radius: 8px; padding: 2px 6px; border: 1px solid transparent; color: var(--text-secondary); font-size: var(--fs-small); white-space: nowrap; box-sizing: border-box; } .tt-due-wrap:hover { border-color: var(--border-strong); background: var(--bg-inset); color: var(--text); } .tt-due-wrap.overdue { color: var(--red-fg); font-weight: 700; } .tt-due-face { pointer-events: none; } .tt-due-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none; padding: 0; margin: 0; } .tt-due { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; min-width: 72px; } .tt-due.overdue { color: var(--red-fg); font-weight: 700; } .tt-actions { display: inline-flex; align-items: center; gap: 4px; } .tt-add-sub { background: none; border: 1px dashed var(--border-strong); color: var(--text-tertiary); font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 14px; cursor: pointer; white-space: nowrap; } .tt-add-sub:hover { border-color: var(--sen-blue); color: var(--link); border-style: solid; } .tt-delete { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; padding: 2px 4px; opacity: 0.5; } .tt-delete:hover { opacity: 1; color: var(--red-fg); } .kb-card .tt-delete { margin-left: auto; } /* Circular status control continued */ .pm-status-wrap { position: relative; display: inline-flex; } .pm-status-wrap.labeled { justify-self: stretch; width: 100%; } .pm-status-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; cursor: pointer; font-family: var(--font); color: var(--text); max-width: 100%; } .pm-status-btn:hover { border-color: var(--border-strong); background: var(--bg-inset); } .pm-status-label { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); } .pm-status-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-card); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: var(--font); color: var(--text-secondary); line-height: 1; flex-shrink: 0; } .pm-status-dot.status-task_candidate { border-style: dashed; border-color: var(--amber-fg); color: var(--amber-fg); } .pm-status-dot.status-todo { border-color: var(--border-strong); color: transparent; } .pm-status-dot.status-in_progress { border-color: #7c5cbf; background: #7c5cbf; color: #fff; } .pm-status-dot.status-review { border-color: var(--amber-fg); color: var(--amber-fg); } .pm-status-dot.status-stuck { border-color: var(--red-fg); background: var(--red-bg); color: var(--red-fg); } .pm-status-dot.status-revisions { border-color: var(--sen-blue); color: var(--sen-blue); } .pm-status-dot.status-done { border-color: #2f9e6b; background: #2f9e6b; color: #fff; } .pm-status-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 160px; padding: 4px; display: flex; flex-direction: column; gap: 2px; } .pm-status-menu[hidden] { display: none; } .pm-status-opt { display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: left; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text); } .pm-status-opt:hover, .pm-status-opt.current { background: var(--sen-blue-tint); } select.pm-status { width: auto; min-width: 120px; font-size: 12.5px; padding: 4px 8px; } /* ---------- ClickUp-style grouped task list ---------- */ .pm-groups { display: flex; flex-direction: column; gap: 16px; } .pm-group-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; } .pm-group-toggle { background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: 12px; padding: 2px 4px; font-family: var(--font); } .pm-group-badge { font-size: 12.5px; font-weight: 700; border-radius: 14px; padding: 3px 11px; background: var(--gray-bg); color: var(--gray-fg); } .pm-group-badge.tone-c0, .pm-group-badge.tone-p5 { background: #dbeafe; color: #1d4ed8; } .pm-group-badge.tone-c1, .pm-group-badge.tone-p4 { background: #d1fae5; color: #047857; } .pm-group-badge.tone-c2, .pm-group-badge.tone-p3 { background: #fef3c7; color: #b45309; } .pm-group-badge.tone-c3, .pm-group-badge.tone-p2 { background: #ede9fe; color: #6d28d9; } .pm-group-badge.tone-c4, .pm-group-badge.tone-p1 { background: #fce7f3; color: #be185d; } .pm-group-badge.tone-c5, .pm-group-badge.tone-p0 { background: #e2e8f0; color: #475569; } .pm-group-badge.tone-none { background: var(--gray-bg); color: var(--gray-fg); } .pm-group-count { font-weight: 700; } .pm-group-add { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-card); cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-secondary); font-family: var(--font); } .pm-group-add:hover { border-color: var(--sen-blue); color: var(--link); } .pm-inline-add { padding: 8px 8px 0; } .pm-inline-add[hidden] { display: none !important; } .pm-inline-add-input { font-size: 14px; padding: 9px 12px; max-width: 460px; border-style: dashed; border-color: var(--border-strong); background: var(--bg-inset); } /* Group footer "+ Add Task" — reveals the top-level composer above. */ .pm-add-footer { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-tertiary); font-family: var(--font); font-size: 13px; font-weight: 600; padding: 8px 8px 8px 28px; cursor: pointer; border-radius: var(--radius-sm); } .pm-add-footer:hover { color: var(--link); background: var(--bg-inset); } .pm-add-footer[hidden] { display: none !important; } #pmt-my-tasks.active { background: var(--sen-blue); border-color: var(--sen-blue); color: #fff; } #pmchat-toggle.active { background: var(--sen-navy); } /* Emoji glyphs are taller than latin text — pin the line box so this button matches "+ Task" (44px) exactly. */ #pmchat-toggle { display: inline-flex; align-items: center; gap: 7px; line-height: 1; height: 44px; padding-top: 0; padding-bottom: 0; } .pmchat-toggle-icon { font-size: 16px; line-height: 1; } /* Compact PM page header: title + sub share one line, tighter tab/filter gaps. */ .pm-page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .pm-page-head .page-title { margin-bottom: 0; } .pm-page-head .page-sub { margin-bottom: 0; } .tab-bar.pm-tight { margin-bottom: 10px; } .tab-bar.pm-tight ~ .kb-filters { margin-bottom: 12px; } #pmt-candidates { border-color: var(--amber-fg); color: var(--amber-fg); } #pmt-candidates.active { background: var(--amber-fg); border-color: var(--amber-fg); color: #fff; } .kb-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .kb-card-top .kb-title { flex: 1; background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; } .kb-card-top .kb-title:hover { color: var(--link); } .pmd-desc-head { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .pmd-desc-preview { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); } .pmd-inline-img { max-width: 100%; border-radius: 8px; margin: 8px 0; border: 1px solid var(--border); display: block; } .pmd-date-field { cursor: pointer; } .pmd-date-field input[type="date"] { cursor: pointer; } .pmd-comment-actions { display: flex; align-items: center; gap: 8px; } /* ---------- priority stars (0 = Parking Lot, 5 = urgent) ---------- */ .pm-priority { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; } .pm-star, .pm-pl { background: none; border: none; cursor: pointer; padding: 2px; line-height: 1; font-size: 15px; color: var(--border-strong); font-family: var(--font); } .pm-star.filled { color: var(--amber-fg); } .pm-star:hover { color: var(--amber-fg); } .pm-pl { font-size: 10.5px; font-weight: 700; border: 1px solid var(--border-strong); border-radius: 9px; padding: 1px 6px; margin-right: 4px; color: var(--text-tertiary); } .pm-pl.filled { background: var(--gray-bg); color: var(--gray-fg); border-color: transparent; } .pm-pl:hover { border-color: var(--sen-blue); color: var(--link); } /* ---------- PM task detail drawer ---------- */ .pm-drawer-overlay { position: fixed; inset: 0; background: rgba(5, 15, 26, 0.55); z-index: 110; display: flex; align-items: center; justify-content: center; padding: 4vh 3vw; backdrop-filter: blur(2px); } .pm-drawer { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius); width: 100%; max-width: 1040px; height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.4); overflow: hidden; } .pm-drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .pm-drawer-body { flex: 1; display: flex; overflow: hidden; } .pm-drawer-main { flex: 1; padding: 22px 26px; overflow-y: auto; } .pm-drawer-activity { width: 320px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 18px; overflow-y: auto; display: flex; flex-direction: column; } .pmd-parent { font-size: 13px; color: var(--text-tertiary); margin-bottom: 8px; } .pmd-parent button { background: none; border: none; color: var(--link); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; } .pmd-title { width: 100%; font-size: 20px; font-weight: 700; border: none; padding: 4px 0; resize: none; background: none; color: var(--text); font-family: var(--font); } .pmd-title:focus { outline: none; background: var(--bg-inset); border-radius: var(--radius-sm); } .pmd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-top: 14px; } .pmd-field label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .pmd-field .pm-priority { padding: 8px 0; } .pm-assignees { display: flex; flex-direction: column; gap: 6px; } .pm-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .pm-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--gray-bg); color: var(--gray-fg); font-size: 12.5px; font-weight: 600; border-radius: 14px; padding: 3px 6px 3px 10px; } .pm-chip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; } .pmd-description { margin-top: 6px; } .pmd-save-msg { font-size: 12.5px; min-height: 16px; margin-top: 6px; } .pmd-subtask { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px solid var(--border); } .pmd-subtask input[type="checkbox"] { width: auto; } .pmd-subtask-title { background: none; border: none; color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; text-align: left; } .pmd-subtask-title:hover { color: var(--link); } .pmd-subtask-add { margin-top: 8px; font-size: 13.5px; padding: 7px 10px; border-style: dashed; border-color: var(--border-strong); background: var(--bg-inset); } .pmd-comments { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .pmd-comment { font-size: 13.5px; } .pmd-comment-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; } .pmd-comment-head strong { font-size: 13px; } .pmd-comment-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; } .pmd-comment-body { line-height: 1.5; white-space: pre-wrap; } .pmd-comment-input { display: flex; flex-direction: column; gap: 8px; } .pmd-comment-input label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); } .pmd-comment-compose { position: relative; } .pmd-comment-input textarea { font-size: 13.5px; } .pmd-comment-error { font-size: 12.5px; color: var(--red-fg); min-height: 0; margin: 0; } .pmd-comment-error:empty { display: none; } .pmd-tag-row { display: flex; flex-wrap: wrap; gap: 6px; } .pmd-tag-chip { background: var(--bg-inset); border: 1px solid var(--border-strong); color: var(--text-secondary); font-family: var(--font); font-size: 12px; font-weight: 600; border-radius: 14px; padding: 3px 10px; cursor: pointer; } .pmd-tag-chip:hover { border-color: var(--sen-blue); color: var(--link); } .pmd-tag-chip.active { background: var(--sen-blue); border-color: var(--sen-blue); color: #fff; } .pmd-comment-tags { display: flex; gap: 5px; margin-top: 5px; } .pmd-tag-pill { font-size: 11px; font-weight: 700; color: var(--link); } .pmd-mention { color: var(--link); font-weight: 700; } .mention-suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 5; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.18); max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; padding: 4px; } .mention-suggest[hidden] { display: none; } .mention-suggest-item { background: none; border: none; text-align: left; padding: 7px 10px; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--text); border-radius: 6px; } .mention-suggest-item:hover, .mention-suggest-item.active { background: var(--sen-blue-tint); color: var(--link); } /* ---------- PM task-intake chatbot ---------- */ .pm-chat-card .pm-chat-log { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .pm-chat-card .chat-bubble { font-size: 14px; padding: 11px 14px; } .pm-chat-card .chat-input { border-top: none; padding-top: 0; } .pm-chat-card textarea { min-height: 44px; } #pmchat-mic { flex-shrink: 0; font-size: 18px; padding: 10px 14px; } #pmchat-mic.recording { background: var(--red-bg); color: var(--red-fg); border-color: transparent; } /* ---------- Doc Review list ---------- */ .kb-check input[type="checkbox"] { width: auto; } .rv-table-wrap { overflow-x: auto; } .rv-row td:first-child { max-width: 520px; } .rv-desc { font-size: var(--fs-row); color: var(--text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-sub { font-size: var(--fs-small); color: var(--text-tertiary); margin-top: 3px; } .rv-created { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .rv-actions { white-space: nowrap; font-size: 12.5px; font-weight: 600; } .rv-actions a { margin-right: 8px; } .rv-actions button { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); font-family: var(--font); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 14px; cursor: pointer; } .rv-actions button:hover { border-color: var(--sen-blue); color: var(--link); } .rv-row.is-archived td { opacity: 0.6; } .rv-chip { display: inline-block; background: var(--gray-bg); color: var(--gray-fg); font-size: 11.5px; font-weight: 600; border-radius: 12px; padding: 2px 9px; } .rv-chip-open { background: var(--bg-inset); color: var(--text-tertiary); } .rv-assign { position: relative; display: inline-block; } .rv-assign > summary { cursor: pointer; list-style: none; } .rv-assign > summary::-webkit-details-marker { display: none; } .rv-assign > summary:hover .rv-chip { color: var(--link); } .rv-assign-menu { position: absolute; z-index: 6; top: calc(100% + 5px); left: 0; min-width: 190px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 6px; } .rv-assign-row { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); padding: 5px 6px; border-radius: 6px; cursor: pointer; } .rv-assign-row:hover { background: var(--bg-inset); } .rv-assign-row input[type="checkbox"] { width: auto; } .rv-assign-note { font-size: 11.5px; color: var(--text-tertiary); padding: 6px 6px 2px; border-top: 1px solid var(--border); margin-top: 4px; } .rv-assign-done { display: block; width: 100%; margin-top: 6px; background: var(--sen-blue); color: #fff; border: none; font-family: var(--font); font-size: 12.5px; font-weight: 700; padding: 7px 10px; border-radius: 8px; cursor: pointer; } .rv-assign-done:hover { background: var(--sen-navy); } #rv-assignee { width: auto; min-width: 170px; } .rv-created-by { white-space: nowrap; color: var(--text-secondary); font-size: 13px; } .rv-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .rv-add-full { grid-column: 1 / -1; } .rv-add-checks { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); max-height: 120px; overflow-y: auto; } .rv-add-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; } .rv-add-check input { width: auto; } @media (max-width: 800px) { .rv-add-grid { grid-template-columns: 1fr; } } .ln-desc { font-size: var(--fs-small); color: var(--text-tertiary); margin-top: 3px; } .ln-name { font-weight: 600; } .ln-view-toggle { display: flex; gap: 4px; } .ln-view-toggle .ln-view.active { background: var(--sen-blue); border-color: var(--sen-blue); color: #fff; } /* ---------- people directory ---------- */ .people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1200px) { .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .people-grid { grid-template-columns: 1fr; } } .person-card { display: flex; align-items: flex-start; gap: 16px; padding: 18px; } .person-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-inset); border: 1px solid var(--border); } .person-initial { display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: var(--sen-blue); } .person-meta { min-width: 0; flex: 1; } .person-name { font-size: var(--fs-card-h); font-weight: 700; } .person-role { font-size: var(--fs-tile-sub); color: var(--sen-blue); font-weight: 600; margin-bottom: 2px; } .person-line { font-size: var(--fs-small); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person-hours { font-size: var(--fs-row); font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-top: 4px; white-space: normal; } .person-hours-empty { font-weight: 500; color: var(--text-tertiary); font-style: italic; } /* ---------- login ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--sen-ink) 0%, var(--sen-navy) 100%); padding: 24px; } .login-card { background: #fff; border-radius: var(--radius); padding: 36px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .login-card input { background: #fff; color: #16232e; } .login-card img { height: 44px; margin: 0 auto 20px; display: block; } .login-card h1 { font-size: 20px; text-align: center; color: var(--sen-ink); margin-bottom: 4px; } .login-card p.sub { text-align: center; color: #5b6b78; font-size: 13.5px; margin-bottom: 22px; } .login-card .field { margin-bottom: 14px; } .login-card .error { color: #d64545; font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; } .loading { color: var(--text-tertiary); font-size: 14px; padding: 24px; text-align: center; } .pmt-add-assignees { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); max-height: 120px; overflow-y: auto; } .pmt-add-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; } .pmt-add-check input { width: auto; margin: 0; } .pmt-recur-card { padding: 8px 14px; } .pmt-recur-collapse { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 4px 0; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--heading); text-align: left; } .pmt-recur-collapse:hover { color: var(--link); } .pmt-recur-chev { font-size: 11px; color: var(--text-tertiary); width: 12px; } .pmt-recur-card .pmt-recur-list { margin-top: 8px; padding-bottom: 4px; } .pmt-recur-list { display: flex; flex-direction: column; gap: 8px; } .pmt-recur-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); } .pmt-recur-main { min-width: 0; flex: 1; } .pmt-recur-main strong { margin-right: 8px; } .pmt-recur-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.35; } .pmt-recur-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } /* ---------- SOP detail card ---------- */ .sop-row:hover { background: var(--bg-inset); } .sop-open { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--link); cursor: pointer; text-align: left; } .sop-open:hover { text-decoration: underline; } .sop-vid-badge { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--sen-blue); vertical-align: middle; } .sop-drawer { max-width: 860px; } .sop-drawer-main { width: 100%; } .sop-drawer-title { font-size: 22px; font-weight: 750; margin: 0 0 10px; line-height: 1.25; color: var(--text); } .sop-drawer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .sop-blurb { font-size: 14.5px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.45; } .sop-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b1520; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; border: 1px solid var(--border); } .sop-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sop-embed-open { display: inline-block; margin: 0 0 16px; font-size: 12.5px; font-weight: 600; color: var(--link); } .sop-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .sop-links a { font-size: 13px; word-break: break-all; color: var(--link); } .sop-atts { margin: 8px 0 18px; } .sop-atts h3, .sop-notes h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin: 0 0 8px; } .sop-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .sop-att-img { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--bg-inset); } .sop-att-img img { display: block; width: 100%; height: 120px; object-fit: cover; } .sop-att-file { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-inset); font-size: 13px; font-weight: 600; color: var(--link); } .sop-notes { margin-top: 8px; } .sop-notes-body { font-size: 14.5px; line-height: 1.55; color: var(--text); white-space: normal; } .sop-drawer-foot { margin-top: 22px; font-size: 12px; color: var(--text-tertiary); } /* ---------- Mission, Vision & Values ---------- */ .mvv { max-width: 920px; margin: 0 auto; } .mvv-hero { position: relative; overflow: hidden; border-radius: calc(var(--radius) + 4px); padding: 36px 32px 40px; margin-bottom: 22px; color: #f2f7fb; background: linear-gradient( 135deg, var(--cover-gradient-start) 0%, var(--cover-gradient-mid) 48%, var(--cover-gradient-end) 100% ); box-shadow: var(--shadow); } .mvv-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 20%, var(--cover-glow-a) 0%, transparent 48%), radial-gradient(circle at 88% 80%, var(--cover-glow-b) 0%, transparent 44%); } .mvv-hero > * { position: relative; } .mvv-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sen-cyan); } .mvv-title { margin: 0 0 12px; font-size: clamp(28px, 4vw, 38px); font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; color: #fff; } .mvv-lede { margin: 0; max-width: 38em; font-size: 16px; line-height: 1.5; color: rgba(242, 247, 251, 0.82); font-weight: 400; } .mvv-mission { border-radius: var(--radius); padding: 28px 28px 30px; margin-bottom: 16px; background: var(--bg-card); border: 1px solid var(--border); border-top: 4px solid var(--sen-blue); box-shadow: var(--shadow); } .mvv-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sen-blue); } .mvv-mission-text { margin: 0; font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; line-height: 1.35; color: var(--heading); letter-spacing: -0.015em; } .mvv-pledge { border-radius: var(--radius); padding: 24px 28px; margin-bottom: 28px; background: color-mix(in srgb, var(--sen-blue) 7%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--sen-blue) 18%, var(--border)); } .mvv-pledge-text { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--text); } .mvv-serve { margin-bottom: 32px; } .mvv-avatar-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 900px) { .mvv-avatar-grid { grid-template-columns: repeat(3, 1fr); } } .mvv-avatar { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); } .mvv-avatar.primary { border-color: color-mix(in srgb, var(--sen-blue) 45%, var(--border)); box-shadow: 0 1px 3px rgba(11, 28, 44, 0.06), 0 8px 24px rgba(25, 146, 209, 0.12); } .mvv-avatar-top { padding: 18px 18px 16px; background: color-mix(in srgb, var(--sen-blue) 6%, var(--bg-card)); border-bottom: 1px solid var(--border); } .mvv-avatar.primary .mvv-avatar-top { background: linear-gradient( 135deg, color-mix(in srgb, var(--sen-navy) 88%, #000) 0%, var(--sen-blue) 100% ); border-bottom: none; color: #f2f7fb; } .mvv-avatar-badge { display: inline-block; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sen-blue) 14%, transparent); color: var(--sen-blue); } .mvv-avatar.primary .mvv-avatar-badge { background: rgba(64, 217, 241, 0.22); color: var(--sen-cyan); } .mvv-avatar-top h3 { margin: 0 0 8px; font-size: 17px; font-weight: 750; line-height: 1.25; color: var(--heading); } .mvv-avatar.primary .mvv-avatar-top h3 { color: #fff; } .mvv-avatar-hook { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); } .mvv-avatar.primary .mvv-avatar-hook { color: rgba(242, 247, 251, 0.85); } .mvv-avatar-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .mvv-avatar-block h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sen-blue); } .mvv-avatar-block p, .mvv-avatar-block ul { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); } .mvv-avatar-block ul { padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; } .mvv-avatar-block li { padding-left: 2px; } .mvv-avatar-benefit p { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.45; } .mvv-avatar-deeper { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); } .mvv-deeper-item { display: flex; flex-direction: column; gap: 2px; } .mvv-deeper-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sen-blue); } .mvv-deeper-item p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); } .mvv-avatar.primary .mvv-deeper-label { color: var(--sen-blue); } html[data-theme="dark"] .mvv-avatar.primary .mvv-deeper-label { color: var(--sen-cyan); } .mvv-section-head { margin-bottom: 16px; } .mvv-section-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 750; color: var(--heading); } .mvv-section-head p { margin: 0; font-size: 14px; color: var(--text-secondary); } .mvv-values-block { margin-bottom: 32px; } .mvv-values-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .mvv-value { position: relative; border-radius: var(--radius); padding: 20px 20px 22px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow); transition: border-color 0.15s ease, transform 0.15s ease; } .mvv-value:hover { border-color: color-mix(in srgb, var(--sen-blue) 35%, var(--border)); transform: translateY(-1px); } .mvv-value-num { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--sen-blue); margin-bottom: 8px; } .mvv-value h3 { margin: 0 0 8px; font-size: 16px; font-weight: 750; color: var(--heading); line-height: 1.3; } .mvv-value p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); } .mvv-culture { margin-bottom: 24px; } .mvv-beliefs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr; } @media (min-width: 720px) { .mvv-beliefs { grid-template-columns: 1fr 1fr; } } .mvv-belief { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); } .mvv-belief-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--sen-cyan) 0%, var(--sen-blue) 70%); } .mvv-belief-t { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.4; padding-top: 3px; } .mvv-close { border-radius: var(--radius); padding: 22px 26px; text-align: center; background: linear-gradient( 135deg, color-mix(in srgb, var(--sen-navy) 92%, #000) 0%, var(--sen-blue) 100% ); color: #fff; box-shadow: var(--shadow); } .mvv-close p { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.45; letter-spacing: 0.01em; } html[data-theme="dark"] .mvv-pledge { background: color-mix(in srgb, var(--sen-blue) 14%, var(--bg-card)); } html[data-theme="dark"] .mvv-value:hover { border-color: color-mix(in srgb, var(--sen-cyan) 40%, var(--border)); }