/* Square One Management Dashboard — design tokens + components. Recreated from design_handoff_management_dashboard (Square One Dashboard.dc.html). Theme switch = token swap on . */ :root, :root[data-theme="light"] { --pageBg: radial-gradient(800px 400px at 12% -6%, rgba(255,150,110,.16), transparent 60%), radial-gradient(900px 420px at 88% -8%, rgba(150,140,255,.15), transparent 60%), radial-gradient(760px 480px at 50% 112%, rgba(70,200,165,.12), transparent 60%), linear-gradient(180deg,#f2eee6 0%,#eae5dc 100%); --brandGrad: linear-gradient(135deg,#e2604d,#a06ad6 115%); --aiGrad: linear-gradient(135deg,#26a17b,#3f7fd9 115%); --aiBg: linear-gradient(180deg, rgba(150,140,255,.10), rgba(150,140,255,.02)), #faf7f0; --aiBd: rgba(126,111,214,.24); --aiLabel: #7a63c8; --headerBg: rgba(242,238,230,.88); --headerBd: rgba(45,42,50,.09); --text: #2d2a32; --muted: #6f6a75; --faint: #9d97a4; --link: #6a6fd6; --panelBg: #faf7f0; --panelBd: rgba(45,42,50,.09); --panelSh: 0 2px 6px rgba(120,90,140,.06); --cardBg: #faf7f0; --cardBd: rgba(45,42,50,.09); --cardSh: 0 2px 5px rgba(120,90,140,.07); --cardHoverSh: 0 6px 18px rgba(120,90,140,.13); --cardHoverBd: rgba(106,111,214,.35); --divider: rgba(45,42,50,.07); --chipBg: rgba(106,111,214,.055); --chipBd: rgba(106,111,214,.13); --ghostBd: rgba(45,42,50,.16); --ur: #e2604d; --urBg: rgba(226,96,77,.11); --wn: #d98e21; --wnBg: rgba(217,142,33,.12); --ok: #2fa285; --okBg: rgba(47,162,133,.11); --okBd: rgba(47,162,133,.3); --inf: #6a6fd6; --infBg: rgba(106,111,214,.11); --noteBg: rgba(106,111,214,.07); --noteBd: rgba(106,111,214,.17); --noteFg: #54589f; --screamBd: rgba(226,96,77,.32); --screamBg: linear-gradient(105deg, rgba(226,96,77,.07), rgba(250,247,240,0) 45%) #faf7f0; --screamSh: 0 6px 18px rgba(226,96,77,.11); --emptyBg: radial-gradient(620px 280px at 50% 0%, rgba(47,162,133,.09), transparent 70%) #faf7f0; --menuBg: #fbf8f2; --menuSh: 0 10px 26px rgba(80,60,110,.15); --toastBg: #2d2a32; --toastFg: #fdfaf5; --toastLink: #b3b6f5; --activeSw: 0 1px 3px rgba(0,0,0,.16); } :root[data-theme="dark"] { --pageBg: radial-gradient(900px 440px at 14% -8%, rgba(255,140,110,.13), transparent 60%), radial-gradient(1000px 460px at 85% -10%, rgba(145,135,255,.18), transparent 60%), radial-gradient(820px 500px at 50% 115%, rgba(60,205,170,.11), transparent 60%), linear-gradient(180deg,#1d1c26 0%,#16151d 100%); --brandGrad: linear-gradient(135deg,#f0876f,#9a8df0 115%); --aiGrad: linear-gradient(135deg,#37b58e,#5a93e8 115%); --aiBg: linear-gradient(180deg, rgba(154,157,240,.13), rgba(154,157,240,.03)), #211f2b; --aiBd: rgba(154,157,240,.28); --aiLabel: #b9bbf5; --headerBg: rgba(24,23,31,.88); --headerBd: rgba(255,255,255,.07); --text: #e8e6ee; --muted: #a09cac; --faint: #6b6778; --link: #9a9df0; --panelBg: #211f2b; --panelBd: rgba(255,255,255,.09); --panelSh: 0 2px 6px rgba(0,0,0,.3); --cardBg: #242230; --cardBd: rgba(255,255,255,.09); --cardSh: 0 2px 6px rgba(0,0,0,.32); --cardHoverSh: 0 8px 20px rgba(0,0,0,.42); --cardHoverBd: rgba(154,157,240,.4); --divider: rgba(255,255,255,.08); --chipBg: rgba(154,157,240,.08); --chipBd: rgba(154,157,240,.16); --ghostBd: rgba(255,255,255,.16); --ur: #ff8d76; --urBg: rgba(255,141,118,.13); --wn: #f0b45c; --wnBg: rgba(240,180,92,.12); --ok: #5cd2ac; --okBg: rgba(92,210,172,.12); --okBd: rgba(92,210,172,.3); --inf: #9a9df0; --infBg: rgba(154,157,240,.13); --noteBg: rgba(154,157,240,.09); --noteBd: rgba(154,157,240,.2); --noteFg: #c3c5f7; --screamBd: rgba(255,141,118,.34); --screamBg: linear-gradient(105deg, rgba(255,141,118,.09), rgba(36,34,48,0) 45%) #242230; --screamSh: 0 8px 22px rgba(0,0,0,.35); --emptyBg: radial-gradient(620px 280px at 50% 0%, rgba(92,210,172,.08), transparent 70%) #211f2b; --menuBg: #2b2938; --menuSh: 0 10px 26px rgba(0,0,0,.45); --toastBg: #efedf6; --toastFg: #221f2b; --toastLink: #5c60c9; --activeSw: 0 1px 3px rgba(0,0,0,.3); } html, body { margin: 0; padding: 0; font-family: 'Be Vietnam Pro', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } a { color: inherit; } button { font-family: inherit; } .mono { font-family: 'JetBrains Mono', monospace; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes cardIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } } @keyframes sweep { from { background-position: -160% 0; } to { background-position: 260% 0; } } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } .page { min-height: 100vh; background: var(--pageBg); color: var(--text); padding: 0 0 64px; transition: background .35s ease, color .35s ease; } /* Header */ .hdr { position: sticky; top: 0; z-index: 40; background: var(--headerBg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--headerBd); } .hdr-in { max-width: 1560px; margin: 0 auto; padding: 13px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 11px; } .brand-diamond { width: 11px; height: 11px; background: var(--brandGrad); transform: rotate(45deg); border-radius: 2.5px; } .brand-name { font-size: 14px; font-weight: 700; letter-spacing: .01em; } .brand-sub { font-size: 12.5px; color: var(--faint); padding-left: 1px; } .pill { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--chipBd); border-radius: 999px; background: var(--chipBg); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulseDot 2.4s ease-in-out infinite; } .pill-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); } .link-btn { border: 0; background: transparent; color: var(--link); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; } .hdr-spacer { flex: 1; } .tswitch { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--chipBd); background: var(--chipBg); } .tswitch-btn { border: 0; border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-weight: 600; cursor: pointer; background: transparent; color: var(--faint); box-shadow: none; transition: all .2s ease; } .tswitch-btn.active { background: var(--cardBg); color: var(--text); box-shadow: var(--activeSw); } .btn-ai { border: 0; background: var(--aiGrad); color: #f4faf8; border-radius: 999px; padding: 9px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: opacity .2s ease; box-shadow: 0 2px 8px rgba(60,140,180,.25); } .btn-ai:hover { opacity: .88; } .btn-ghost { border: 1px solid var(--ghostBd); background: transparent; color: var(--text); border-radius: 999px; padding: 8px 15px; font-size: 12px; font-weight: 600; cursor: pointer; } .btn-ghost:hover { border-color: var(--text); } .content { max-width: 1560px; margin: 0 auto; padding: 24px 28px 0; } /* Summary row — the AI overview panel alone, full width */ .summary-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-bottom: 22px; } .ai-panel { flex: 1 1 100%; min-width: 340px; border-radius: 16px; border: 1px solid var(--aiBd); background: var(--aiBg); box-shadow: var(--panelSh); overflow: hidden; } .ai-head { display: flex; align-items: center; gap: 9px; padding: 12px 19px; border-bottom: 1px solid var(--divider); } .ai-diamond { width: 7px; height: 7px; border-radius: 2px; background: var(--aiGrad); transform: rotate(45deg); } .ai-label { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; color: var(--aiLabel); } .ai-ago { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--faint); margin-left: auto; } .ai-idle { padding: 20px 19px; display: flex; align-items: center; gap: 16px; } .ai-idle-text { font-size: 12.5px; color: var(--muted); line-height: 1.6; flex: 1; text-wrap: pretty; } .ai-run { padding: 20px 19px; } .skel { height: 8px; border-radius: 5px; margin-bottom: 9px; background: linear-gradient(90deg, var(--chipBg) 20%, var(--divider) 50%, var(--chipBg) 80%); background-size: 220% 100%; animation: sweep 1.15s linear infinite; } .skel.s2 { width: 76%; animation-delay: .15s; } .skel.s3 { width: 58%; margin-bottom: 0; animation-delay: .3s; } .ai-run-cap { margin-top: 13px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--faint); } .ai-done { padding: 14px 19px 16px; display: flex; flex-direction: column; gap: 10px; } .ai-bullet { display: flex; gap: 11px; animation: fadeUp .35s ease both; } .bullet-bar { flex: none; width: 4px; border-radius: 3px; margin-top: 3px; } .ai-bullet .b-text { font-size: 13px; line-height: 1.55; } /* Team notes on cards + done-history drawer (XK 2026-08-07) */ .note-input-row { display: flex; gap: 8px; margin-top: 9px; } .note-input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--chipBd); background: var(--chipBg); color: var(--text); font: inherit; font-size: 12.5px; } .note-input::placeholder { color: var(--faint); } .note-input:focus { outline: none; border-color: var(--link); } .hist-day { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 9px 4px 1px; } /* Empty state */ .empty-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 76px 30px 68px; border-radius: 18px; border: 1px solid var(--okBd); background: var(--emptyBg); animation: fadeUp .5s ease both; } .empty-diamond { width: 14px; height: 14px; background: var(--ok); transform: rotate(45deg); border-radius: 3px; } .empty-title { font-size: 25px; font-weight: 800; color: var(--text); margin-top: 22px; letter-spacing: -.02em; text-wrap: balance; } .empty-sub { font-size: 13.5px; color: var(--muted); margin-top: 9px; max-width: 440px; line-height: 1.65; text-wrap: pretty; } .empty-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 22px; } .epill { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 5px 12px; border-radius: 999px; color: var(--muted); background: var(--chipBg); border: 1px solid var(--chipBd); } .epill.ok { color: var(--ok); background: var(--okBg); border-color: var(--okBd); } /* Board */ .board-wrap { overflow-x: auto; padding-bottom: 14px; } .board { min-width: 1120px; display: grid; gap: 12px 16px; align-items: stretch; } .col-head { grid-row: 1; display: flex; align-items: center; gap: 9px; padding: 2px 0; } .col-pill { display: flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; } .col-dot { width: 6px; height: 6px; border-radius: 2px; } .col-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; } .col-count { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; opacity: .75; } .col-rule { flex: 1; height: 1px; background: var(--divider); } .col-clear { grid-row: 2; align-self: start; padding: 15px; border-radius: 12px; border: 1px dashed var(--ghostBd); text-align: center; font-size: 12px; color: var(--faint); } /* Card */ .card { position: relative; display: flex; flex-direction: column; align-items: stretch; border-radius: 13px; border: 1px solid var(--cardBd); background: var(--cardBg); box-shadow: var(--cardSh); transition: opacity .3s ease, transform .3s ease, box-shadow .18s ease, border-color .18s ease; animation: cardIn .35s ease both; cursor: grab; padding: 13px 15px 11px; overflow: visible; } .card:hover { box-shadow: var(--cardHoverSh); border-color: var(--cardHoverBd); } .card.scream { border-color: var(--screamBd); background: var(--screamBg); box-shadow: var(--screamSh); } .card.scream:hover { border-color: var(--screamBd); } .card.dim { opacity: .55; background: var(--panelBg); box-shadow: none; } .card.exiting { opacity: 0; transform: translateY(-8px) scale(.98); } .meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; } .kbadge { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; color: var(--muted); background: var(--chipBg); border: 1px solid var(--chipBd); } .kdot { width: 5px; height: 5px; border-radius: 50%; } .ai-pill { font-size: 10px; font-weight: 700; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; } .ai-pill.imm { color: var(--ur); background: var(--urBg); } .ai-pill.soon { color: var(--wn); background: var(--wnBg); } .meta-spacer { flex: 1; } .clock { display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; background: var(--chipBg); } .clock-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); } .clock-val { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: var(--muted); } .clock.soon { background: var(--wnBg); } .clock.soon .clock-dot { background: var(--wn); } .clock.soon .clock-val { color: var(--wn); } .clock.over { background: var(--urBg); } .clock.over .clock-dot { background: var(--ur); animation: pulseDot 1s ease-in-out infinite; } .clock.over .clock-val { color: var(--ur); font-size: 13px; } .card .title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.45; text-wrap: pretty; } .card.dim .title { color: var(--faint); } .card .reason { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 4px; text-wrap: pretty; } .card .status { font-size: 10.5px; color: var(--faint); margin-top: 6px; letter-spacing: .02em; } .card .note { margin-top: 9px; padding: 9px 11px; border-radius: 9px; background: var(--noteBg); border: 1px solid var(--noteBd); font-size: 12px; color: var(--noteFg); line-height: 1.55; } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .chip { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 8px; border-radius: 6px; color: var(--muted); background: var(--chipBg); border: 1px solid var(--chipBd); } .ctx-btn { border: 0; background: transparent; padding: 0; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--faint); display: flex; align-items: center; gap: 5px; margin-top: 9px; } .ctx-btn:hover { color: var(--text); } .ctx-btn .caret { font-family: 'JetBrains Mono', monospace; } .ctx-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; padding-left: 11px; border-left: 2px solid var(--divider); animation: fadeUp .2s ease both; } .ctx-meta { font-size: 10.5px; color: var(--faint); font-family: 'JetBrains Mono', monospace; } .ctx-text { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; } .card .spacer { flex: 1; min-height: 11px; } .actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--divider); } .act { border: 1px solid var(--ghostBd); background: transparent; color: var(--muted); border-radius: 7px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; cursor: pointer; } .act:hover { border-color: var(--text); color: var(--text); } .act:disabled { opacity: .5; cursor: default; } .act-done { border: 1px solid var(--okBd); background: var(--okBg); color: var(--ok); border-radius: 7px; padding: 4px 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; cursor: pointer; } .act-done:hover { filter: brightness(1.06); } .act-spacer { flex: 1; } .alink { font-size: 11px; font-weight: 600; color: var(--faint); text-decoration: none; padding: 3px 1px; } .alink:hover { color: var(--link); } .statenote { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ok); } /* Toast */ .toast { position: fixed; z-index: 60; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; padding: 10px 17px; border-radius: 11px; background: var(--toastBg); box-shadow: 0 14px 34px rgba(0,0,0,.3); animation: fadeUp .2s ease both; } .toast-text { font-size: 12.5px; color: var(--toastFg); } .toast-undo { border: 0; background: transparent; color: var(--toastLink); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; } /* Password gate (shared credential with the main app) */ .gate-overlay { position: fixed; inset: 0; z-index: 10000; background: var(--pageBg); display: flex; align-items: center; justify-content: center; padding: 24px; } .gate-card { max-width: 320px; width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: center; } .gate-title { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -.02em; } .gate-sub { color: var(--muted); font-size: 13px; } .gate-input { font-family: 'JetBrains Mono', monospace; font-size: 16px; padding: 12px 14px; border: 1px solid var(--ghostBd); border-radius: 9px; background: var(--cardBg); color: var(--text); width: 100%; outline: none; } .gate-input:focus { border-color: var(--link); } .gate-btn { font-size: 13px; font-weight: 700; padding: 12px 18px; background: var(--aiGrad); color: #f4faf8; border: none; border-radius: 999px; cursor: pointer; } .gate-btn:disabled { opacity: .5; cursor: default; } .gate-err { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ur); letter-spacing: .04em; } /* Quiet / snoozed drawer — everything intentionally off the board */ .quiet { margin-top: 18px; } .quiet-sum { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; border: 1px dashed var(--ghostBd); border-radius: 999px; padding: 7px 15px; font-size: 11.5px; font-weight: 600; color: var(--muted); user-select: none; } .quiet-sum::-webkit-details-marker { display: none; } .quiet-sum:hover { color: var(--text); border-color: var(--text); } .qcount { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; opacity: .75; } .quiet-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; animation: fadeUp .2s ease both; } .quiet-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--cardBd); background: var(--panelBg); } .q-name { font-size: 12px; font-weight: 600; color: var(--muted); flex: 1; min-width: 180px; } .q-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--faint); } /* AI-corrected status line */ .status.sit { color: var(--noteFg); font-weight: 600; } /* Re-renders must not replay entrance animations (XK: UI flashing) */ .card.no-anim { animation: none; } .ai-bullet.no-anim { animation: none; } .quiet-list.no-anim { animation: none; }