/* Ocean V2 presentation port. * Source: approved ocean.css + ocean-polish.css, isolated prototype 2026-09-14. * Original layout, panels, row, typography and responsive rules below are reused. * main/#shell selectors are mapped to .work-area/#main; mock processing/toast excluded. * No prototype JavaScript is loaded. Real hooks and print CSS remain in styles.css. */ :root{color-scheme:dark;--ink:#dceaff;--muted:#9ab8d3;--line:#24485e;--blue:#1471e5;--cyan:#6ee4e6} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:24px} body{margin:0;font-family:Inter,"Segoe UI",sans-serif;font-size:14px;color:var(--ink);background:#031321;background-image:radial-gradient(ellipse 70% 60% at 45% -12%,#19639a90,transparent 90%),linear-gradient(112deg,transparent 32%,#2182b90d 35%,transparent 41%,#66b7ee0a 43%,transparent 48%);background-attachment:fixed} button,a,input,select,textarea{font:inherit} button,a{ -webkit-tap-highlight-color:transparent} button{cursor:pointer} button,a,input,select,textarea,summary{outline-offset:4px} button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #8bebff} button{color:inherit} a{color:inherit;text-decoration:none} button{border:1px solid var(--line);border-radius:7px;background:#0c2840;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px} button:hover,.outline:hover{background:#143955;border-color:#4680a6;color:#dceaff} button:active{transform:translateY(1px)} svg{width:19px;height:19px;vertical-align:middle;flex-shrink:0} button > svg,button > svg *{color:inherit} i[data-icon]{display:inline-flex;font-style:normal} button.primary{background:linear-gradient(120deg,#1467d8,#0955bc);border-color:#327dde;box-shadow:inset 0 1px #ffffff13,0 4px 15px #00112940;color:#fff} button.primary:hover{background:#247ce7;color:#fff} .outline{background:#0d2841a8} .eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:600;color:#a7c7de;margin:0 0 11px} h1,h2,h3,p{margin:0} h1{font-weight:620;font-size:34px;letter-spacing:-1px;line-height:1.2} h2{font-size:18px;letter-spacing:-.25px;font-weight:600} h3{font-size:15px;font-weight:600} small{font-size:11px} .work-area{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh} .rail{position:sticky;top:0;height:100vh;min-height:730px;border-right:1px solid #2143599c;background:linear-gradient(165deg,#0a29433d,#031422e6);padding:26px 18px;display:flex;flex-direction:column} .brand{font-size:31px;letter-spacing:5px;font-weight:550;margin:0 9px 31px} .brand span{display:block;font-size:8px;letter-spacing:.1px;margin-top:8px;font-weight:400;white-space:nowrap} .ocean-rail-brand.brand { margin:0 8px 28px; letter-spacing:normal; } .mavar-logo { display:block; width:100%; max-width:206px; height:auto; padding:8px 10px; border:1px solid #c9ddea; border-radius:8px; background:#f8fbfe; } .rail nav{display:grid;gap:4px} .rail nav a{display:flex;align-items:center;gap:13px;padding:13px 12px;color:#bcd6ee;font-size:13px;border:1px solid transparent;border-radius:7px} .rail nav a:hover{background:#12334e} .rail nav a.active{background:linear-gradient(105deg,#0c467f,#155994b8);border-color:#326d973d;box-shadow:inset 0 1px #ffffff0f;color:#eef6ff} .rail-controls{border-top:1px solid var(--line);padding-top:21px;margin:23px 8px 0} .rail-controls .eyebrow{font-size:9px;letter-spacing:1.1px} .rail-controls select{margin-bottom:10px} .rail-controls button{width:100%;padding-inline:8px} select,input,textarea{border:1px solid #2a4d65;background:#061d30;color:#dceaff;border-radius:6px;width:100%;padding:11px 12px;min-height:42px} textarea{resize:vertical;line-height:1.6} input::placeholder,textarea::placeholder{color:#7895af} .credits{margin:18px 8px 0;padding:15px;background:linear-gradient(140deg,#102d47a8,#0b233980);border-radius:8px;font-size:12px} .credits strong{font-size:25px;display:block;margin:7px 0} .credits strong small{font-size:11px;font-weight:400} .credits p{font-size:10px;color:var(--muted);margin-top:10px} .dots{display:flex;gap:5px} .dots b{height:4px;border-radius:4px;background:#3b91fa;flex:1} .dots .used{background:#24425b} .signature{margin-top:auto;padding:30px 10px 6px;font-size:14px;font-weight:600;color:#a2c9e7} .signature em{font-family:Georgia,serif;font-size:23px;font-weight:400;margin-right:4px} .signature span{display:block;font-size:7px;letter-spacing:1.6px;margin-top:13px;color:#719bbb} .work-area{padding:0 30px 16px;min-width:0;max-width:1700px;width:100%;margin:auto} .topbar{height:81px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #47739222} .prototype-label{font-size:9px;letter-spacing:1.5px;color:#84a6c0;display:flex;align-items:center;gap:9px} .prototype-label>span{height:5px;width:5px;background:#54ced0;border-radius:50%} .prototype-label b{font-weight:400} .profile{display:flex;align-items:center;gap:10px;font-size:12px} .profile small{display:block;color:var(--muted);margin-top:4px} .avatar{border:1px solid #6097d4;background:linear-gradient(150deg,#378aec,#1254a6);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:white} .heading{display:flex;justify-content:space-between;align-items:center;padding:25px 0 24px;gap:15px} .heading .eyebrow{font-size:10px;margin-bottom:8px} .region{color:#a3c6e4;margin-top:7px;font-size:15px} .region span{font-size:9px;letter-spacing:1.2px;margin-left:13px;border-left:1px solid #406381;padding-left:14px} .quiet{font-size:10px;letter-spacing:1px;color:#83adc9} .panel{background:linear-gradient(120deg,#0d304dde,#071f32d9);border:1px solid #22455d;border-radius:10px;box-shadow:inset 0 1px #6ec4fb05,0 8px 25px #000a1517;padding:18px 19px;scroll-margin-top:22px} .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} .section-title p{color:var(--muted);font-size:12px;margin-top:5px} .chip{border:1px solid #31536c;background:#081e31aa;border-radius:5px;padding:6px 10px;color:#afc8df;font-size:10px;white-space:nowrap} .snapshot{margin-bottom:16px} .snapshot .section-title{margin-bottom:15px} .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .metric{background:#03192a63;border:1px solid #1d4057;border-radius:7px;display:flex;align-items:center;gap:14px;padding:12px 14px;min-width:0} .metric-icon,.row-icon{display:grid;place-items:center;flex-shrink:0;background:linear-gradient(140deg,#134a7d,#0d2e54);border-radius:11px;color:#d6eaff;width:33px;height:33px} .metric-icon{width:39px;height:39px;border-radius:50%} .cyan{background:linear-gradient(140deg,#185d73,#07374c);color:#70e8eb} .rose{background:linear-gradient(140deg,#6b3853,#342b43);color:#ffbbc7} .metric strong{display:block;font-weight:600;font-size:25px;line-height:1.15} .metric strong small{font-size:16px;margin-left:1px} .metric div>span{display:block;font-size:11px;margin:4px 0;color:#c8dbed} .metric div>small{display:block;color:#90aec8;font-size:9px} .workspace-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:start} .actions{min-width:0} .count{font-size:10px;background:#153a53;border:1px solid #29526d;border-radius:5px;padding:2px 6px;vertical-align:middle;margin-left:5px;color:#a6c6df} .action-list{display:grid;gap:5px} .action-row{background:#041b2c65;border:1px solid #1a3c526b;border-radius:6px} .action-row summary{display:flex;align-items:center;gap:10px;padding:10px 9px;cursor:pointer;list-style:none;min-height:62px} .action-row summary:after{content:'›';color:#9bbcd5} .row-main{flex:1;min-width:0} .row-main strong{font-weight:450;font-size:12px;display:block;line-height:1.4} .row-main small{display:block;color:#8aafca;font-size:10px;margin-top:5px} .row-main b{font-weight:400;color:#b0c5d8;margin-left:7px} .status{font-size:9px;padding:4px 6px;border-radius:4px;white-space:nowrap;border:1px solid transparent} .progress{color:#a8d1ff;background:#16477480;border-color:#36618355} .completed{color:#90dfe0;background:#0a495360} .postponed{color:#e7c483;background:#5143254d} .complete{background:#0f3f4d;color:#83d7d8} .postpone{background:#3b382d;color:#d5bd8e} .row-detail{border-top:1px solid #244358;margin:0 12px;padding:12px 0;color:var(--muted);font-size:12px;line-height:1.6} .row-detail p{margin-bottom:8px} .row-detail textarea{font-size:12px} .row-detail button{margin-top:8px} .panel-foot{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#8cabc2;padding-top:14px} .capture-buttons{display:flex;gap:9px} .capture-buttons button{flex:1;min-height:39px} .voice-usage{margin:14px 0 16px} .voice-usage>span{display:flex;justify-content:space-between;font-size:10px;color:#a8c5db} .voice-usage strong{font-weight:450;color:#c7dff0} .meter{height:4px;border-radius:4px;background:#061a2c;margin:8px 0 5px;overflow:hidden} .meter i{display:block;width:66.7%;height:100%;background:linear-gradient(90deg,#1b79db,#41b7d5)} .voice-usage small{font-size:9px;color:#8faec6} .pending{border:1px solid #30506a;background:#0a243a9c;border-radius:7px;padding:12px} .entry-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px} .pending-status{background:#4941264f;color:#efce8e;border-color:#8c78463d} .entry-meta time{font-size:9px;color:#87a6be} .pending>strong{font-size:12px;font-weight:500} .pending>p{font-size:11px;color:#9bb8ce;line-height:1.55;margin-top:5px} .pending summary{cursor:pointer;color:#6abbff;font-size:11px;padding-top:9px;list-style:none;display:flex;justify-content:space-between} .review-content{font-size:12px;line-height:1.5;padding-top:10px} .review-content small{display:block;color:var(--muted);margin-top:8px} .reviewed{border-top:1px solid #2b48604f;margin-top:13px;padding-top:13px} .reviewed>summary{font-size:11px;cursor:pointer;color:#adc9dd} .reviewed summary span{float:right;font-size:10px} .reviewed p{font-size:12px;padding:12px 0;border-bottom:1px solid #224057} .reviewed p svg{width:14px;color:#73dadd;margin-right:8px} .reviewed p small{display:block;margin:6px 0 0 23px;color:#89a8c1;font-size:10px} .concerns .section-title,.reflection .section-title{margin-bottom:12px} .concern-row{border-top:1px solid #234057} .concern-row summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 0;cursor:pointer;font-size:12px} .concern-row summary:after{content:'›';margin-left:auto;color:#8cb3cf} .severity{height:8px;width:8px;transform:rotate(45deg);border:1px solid #f1879c;background:#9d425760;flex-shrink:0;margin:0 5px} .medium{border-color:#e9be70;background:#79562c60} .concern-row small{display:block;color:#9eb9cf;font-size:10px;margin-top:5px} .concern-row p{font-size:12px;color:var(--muted);padding-bottom:12px;line-height:1.6} .reflection-copy{color:#a9c2d7;font-size:12px;line-height:1.7;margin:4px 0 15px;max-width:360px} .reflection button{width:100%} .credit-caption{font-size:9px;color:#90afc6;text-align:center;margin-top:10px} footer{display:flex;justify-content:space-between;color:#7296b1;font-size:8px;letter-spacing:1.6px;margin-top:19px;padding-bottom:35px} .mobile-nav,.mobile-save{display:none!important} .review-tools{position:fixed;bottom:9px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:4px;background:#061521f5;border:1px solid #355a73;border-radius:7px;padding:4px 7px;box-shadow:0 4px 24px #0007;white-space:nowrap} .review-tools>span{font-size:8px;letter-spacing:1px;color:#8dadc5;margin:0 8px} .review-tools button,.review-tools a{font-size:10px;min-height:27px;padding:4px 8px;background:transparent;border:0;color:#aed7f3} .review-tools button:hover,.review-tools a:hover{background:#183b52} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} [hidden]{display:none!important} dialog{border:1px solid #365d78;border-radius:13px;background:linear-gradient(135deg,#10334d,#071c2e);color:var(--ink);padding:26px;width:min(570px,calc(100% - 28px));max-height:calc(100dvh - 32px);box-shadow:0 30px 100px #0009} dialog::backdrop{background:#010b15b8;backdrop-filter:blur(7px)} .dialog-head{display:flex;justify-content:space-between;align-items:center} .dialog-head h2{font-size:24px} .dialog-head .eyebrow{font-size:9px;margin-bottom:7px} .icon-button{font-size:24px;width:38px;min-height:38px;padding:0;background:transparent} .dialog-intro{color:var(--muted);font-size:12px;margin:10px 0 20px} fieldset{border:0;padding:0;margin:0 0 19px} legend{display:flex;gap:8px;align-items:center;font-size:9px;color:#75adcf;width:100%;padding:0 0 10px} legend span{font-size:12px;color:#d7e8f7;font-weight:600} legend small{margin-left:auto;font-size:9px;color:#95b1c7} label{display:block;font-size:11px;color:#aac5da} label input,label select,label textarea{margin-top:7px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} dialog input,dialog select{font-size:13px;padding:10px} .optional-field{border-top:1px solid #2d4d65;padding-top:15px} .optional-field summary{font-size:11px;color:#afc7dc;cursor:pointer} .optional-field summary span{float:right;color:#819fb8;font-size:10px} .optional-field select{margin-top:12px} .dialog-actions{display:flex;gap:10px;margin-top:22px} .dialog-actions .primary{flex:1} .preview-note{font-size:10px;color:#8fadc4;text-align:center;margin-top:13px} #capture{padding:13px;background:#051b2d;border:1px solid #335d7a;border-radius:7px;margin-bottom:15px} .capture-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .capture-head h3{font-size:14px} .voice-line{display:flex;gap:13px;align-items:center;margin:6px 0 14px} .voice-line span{font-size:12px} .voice-line small{display:block;font-size:9px;color:#8dadc5;margin-top:5px} .record{border-radius:50%;width:42px;padding:0;color:#a4e9ff;border-color:#3a88ad} .record.active{background:#622e43;border-color:#ad5a76} .capture-head .icon-button{width:28px;min-height:28px;font-size:20px} #capture textarea{font-size:12px;min-height:90px} #process-entry{font-size:12px;width:100%;margin-top:12px} .report{max-width:880px;margin:auto;padding:32px} .report h2{font-size:28px} .report-lead{margin:9px 0 25px;color:var(--muted)} .report-strip{display:flex;gap:50px;background:#051d30;padding:20px;border:1px solid #264d65;border-radius:7px;margin-bottom:26px} .report-strip strong{display:block;font-size:27px;margin-bottom:5px} .report-strip span{font-size:11px;color:#b4d1e6} .report h3{margin:25px 0 10px} .report>p:not(.eyebrow){line-height:1.8;color:#aac5da} .report-note{margin-top:25px;font-size:11px} #reflection-dialog textarea{margin-bottom:18px} #processing{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:#0312245c;overflow:hidden;box-shadow:none} #processing[open]{display:grid;place-items:center} #processing::backdrop{background:#010d1bd4;backdrop-filter:blur(7px)} .processing-composition{width:min(53vw,700px);text-align:center} .bubble-group{width:100%;height:auto;aspect-ratio:1.8;position:relative} .processing-copy{margin-top:8px} .processing-copy h2{font-size:23px;font-weight:550;letter-spacing:-.35px} .processing-copy p{font-size:13px;color:#abc9df;margin-top:12px} .leave-preview{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:11px;background:#0b2437;border-color:#37556a;color:#bed8e8;white-space:nowrap} .leave-preview span{color:#809eb4;border:1px solid #2e495c;border-radius:4px;padding:2px 4px;font-size:9px} @keyframes float{0%,100%{transform:translateY(6px) scale(1)} 50%{transform:translateY(-10px) scale(1.025)}} @media(min-width:1500px){.work-area{padding-inline:40px} .panel{padding:21px} .action-row summary{min-height:66px}} @media(max-width:1200px){.work-area{grid-template-columns:220px 1fr} .rail{padding-inline:12px} .work-area{padding-inline:20px} .metric{padding:12px 9px;gap:8px} .metric-icon{width:30px;height:30px} .metric div>small{font-size:8px} .quiet{display:none} .workspace-grid{grid-template-columns:1fr 1fr} .action-row summary{flex-wrap:wrap} .action-row .status{margin-left:43px} .action-row summary:after{margin-left:auto} .row-main{min-width:160px} .panel-foot{flex-direction:column} .rail nav a{font-size:12px} .brand{font-size:28px} .brand span{font-size:7px}} @media(max-width:900px){.work-area{grid-template-columns:190px 1fr} .rail{padding-inline:8px} .rail nav a{gap:8px;padding-inline:9px} .brand{font-size:24px} .brand span{font-size:6px} .metrics{grid-template-columns:1fr 1fr} .workspace-grid{grid-template-columns:1fr} .metric div>small{font-size:10px} .metric-icon{width:37px;height:37px} .action-row summary{flex-wrap:nowrap} .row-main{min-width:0} .action-row .status{margin-left:0} .panel-foot{flex-direction:row} .signature{font-size:12px} .signature em{font-size:19px} .profile{font-size:10px} .prototype-label{font-size:8px;letter-spacing:.8px} .region span{display:none} .processing-composition{width:75vw;max-width:660px}} @media (max-width: 600px){body{font-size:14px;background-image:radial-gradient(ellipse 150% 45% at 50% 0%,#12548180,transparent 80%)} .work-area{display:block} .rail{height:auto;min-height:0;position:static;padding:17px 18px 12px;background:transparent;border:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between} .brand{margin:0;font-size:24px;letter-spacing:4px} .brand span{display:none} .rail nav,.rail .credits,.rail .signature,.rail-controls .eyebrow,.rail-controls button{display:none} .rail-controls{margin:0;padding:0;border:0;width:156px} .rail-controls select{margin:0;font-size:12px;min-height:38px;padding:8px;background:#051d31} .topbar{height:36px;border-bottom:1px solid #31516a60} .profile{display:none} .prototype-label{font-size:8px;letter-spacing:1px} .work-area{padding:0 16px 115px} .heading{padding:23px 0 20px;display:block} .heading .eyebrow{font-size:9px} h1{font-size:30px} .region{font-size:13px;margin-top:7px} .heading-right{margin-top:17px} .mobile-save{display:inline-flex!important;width:100%} .panel{padding:16px 14px;border-radius:9px} .section-title{gap:9px;margin-bottom:14px} h2{font-size:17px} .section-title p{font-size:11px} .chip{display:none} .metrics{gap:8px} .metric{padding:12px 9px;gap:8px;align-items:flex-start} .metric-icon{width:29px;height:29px;margin-top:2px} .metric-icon svg{width:16px;height:16px} .metric strong{font-size:25px} .metric div>span{font-size:10px} .metric div>small{font-size:9px;line-height:1.5} .workspace-grid{gap:13px} .snapshot{margin-bottom:13px} .section-title button{font-size:11px;padding:9px;min-height:44px} .section-title button svg{width:15px} .row-main strong{font-size:12px} .row-main small{font-size:9px} .row-main b{display:none} .action-row summary{padding:11px 7px;gap:8px;flex-wrap:wrap} .row-main{flex-basis:calc(100% - 48px)} .action-row .status{margin-left:41px} .action-row summary:after{margin-left:auto} .row-icon{width:30px;height:30px} .panel-foot{font-size:8px;gap:7px} .capture-buttons button{min-height:44px} .voice-usage>span{font-size:11px} .voice-usage small{font-size:10px} .pending>p{font-size:12px} .pending summary,.reviewed summary{min-height:44px;align-content:center} .pending summary{align-items:center} .reviewed{padding-top:4px} .capture-head .icon-button,.icon-button{min-width:44px;min-height:44px} .mobile-nav{display:flex!important;position:fixed;bottom:0;left:0;right:0;background:#061c2df5;backdrop-filter:blur(12px);border-top:1px solid #315069;padding:7px 8px 9px;z-index:4;justify-content:space-around} .mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;min-width:68px;min-height:43px;color:#b8d4e8} .mobile-nav a:first-child{color:#61b7ff} .mobile-nav svg{width:19px;height:19px} .review-tools{bottom:65px;max-width:calc(100% - 16px);width:max-content;padding:3px} .review-tools>span{font-size:7px;margin:0 4px;letter-spacing:.3px} .review-tools button,.review-tools a{min-height:38px;font-size:9px;padding:7px} .review-tools a{display:flex;align-items:center} footer{font-size:7px;letter-spacing:.7px;padding:0;margin-top:22px} footer span{font-size:6px} .form-grid{grid-template-columns:1fr} dialog{padding:20px;max-height:calc(100dvh - 24px)} dialog input,dialog select,textarea{font-size:16px!important} .optional-field summary{min-height:40px} .processing-composition{width:90vw} .bubble-group{aspect-ratio:1.45} .processing-copy{margin-top:17px} .processing-copy h2{font-size:20px} .processing-copy p{font-size:12px} .leave-preview{bottom:30px;min-height:44px} .report{padding:20px} .report-strip{gap:22px;padding:15px} .report h2{font-size:24px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}} :root{font-synthesis:none} @media(min-width:901px){.work-area{margin:0 auto} .topbar{height:62px} .heading{padding:19px 0 18px} .heading .eyebrow{margin-bottom:6px} h1{font-size:32px} .region{margin-top:5px} .panel{padding:15px 18px} .snapshot .section-title p{display:none} .snapshot .section-title{margin-bottom:12px} .metric{padding:10px 12px} .metric div>small{font-size:10px} .section-title{margin-bottom:12px} .action-row summary{min-height:49px;padding:7px 9px} .action-list{gap:4px} .status{font-size:10px} .panel-foot{padding-top:10px} .pending{padding:10px} .voice-usage{margin:12px 0} .reviewed{margin-top:10px;padding-top:10px} .concern-row summary{padding:10px 0} .reflection-copy{margin-bottom:11px} .workspace-grid{gap:14px} .snapshot{margin-bottom:14px} .rail nav a{padding-block:11px}} /* Approved prototype density refinement. */ body{background-image:radial-gradient(ellipse 70% 60% at 45% -12%,#19639ab0,transparent 90%),conic-gradient(from 161deg at 48% -20%,transparent 0deg,#4cafff0c 5deg,transparent 9deg,#4cafff08 14deg,transparent 21deg,#4cafff08 27deg,transparent 32deg)} #processing{background:#03122426} #processing::backdrop{background:#010d1b9c} @media(min-width:901px){main{margin:0 auto} .topbar{height:62px} .heading{padding:19px 0 18px} .heading .eyebrow{margin-bottom:6px} h1{font-size:32px} .region{margin-top:5px} .panel{padding:15px 18px} .snapshot .section-title p{display:none} .snapshot .section-title{margin-bottom:12px} .metric{padding:10px 12px} .metric div>small{font-size:10px} .section-title{margin-bottom:12px} .action-row summary{min-height:49px;padding:7px 9px} .action-list{gap:4px} .status{font-size:10px} .panel-foot{padding-top:10px} .pending{padding:10px} .voice-usage{margin:12px 0} .reviewed{margin-top:10px;padding-top:10px} .concern-row summary{padding:10px 0} .reflection-copy{margin-bottom:11px} .workspace-grid{gap:14px} .snapshot{margin-bottom:14px} .rail nav a{padding-block:11px}} /* One bubble language for local work and section processing. No change to guards. */ .processing-indicator { font-weight: 600; font-size: .85rem; gap: 10px; } .processing-orbit { flex: 0 0 auto; width: 46px; height: 40px; overflow: visible; } .processing-indicator.is-compact .processing-orbit { width: 28px; height: 24px; } .processing-bubbles circle { fill: currentColor; fill-opacity: .13; stroke: currentColor; stroke-opacity: .55; stroke-width: 1; animation: ocean-bubble-rise 2.8s ease-in-out infinite; } .processing-bubbles circle:nth-child(2) { animation-delay: -.8s; } .processing-bubbles circle:nth-child(3) { animation-delay: -1.6s; } .processing-bubbles circle:nth-child(4) { animation-delay: -.4s; } .processing-bubbles circle:nth-child(5) { animation-delay: -2s; } @keyframes ocean-bubble-rise { 0%,100% { transform: translateY(5px); opacity: .3; } 55% { transform: translateY(-7px); opacity: .95; } } /* Global work has a signature loading state: fixed, blocking and independent of scroll. */ .processing-global-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; background: rgba(7,25,40,.72); backdrop-filter: blur(7px) saturate(.85); cursor: progress; } .processing-global-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(43,111,146,.14), rgba(4,18,31,.34) 72%); } .processing-global-composition { position: relative; display: grid; justify-items: center; width: min(55vw, 640px); color: #fff; text-align: center; } .processing-global-bubble-field { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; } .processing-global-bubbles .bubble { stroke: rgba(231,249,255,.48); stroke-width: 1.6; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: premium-bubble-float 7s ease-in-out infinite; } .processing-global-bubbles .bubble-largest { animation-duration: 8.4s; } .processing-global-bubbles .bubble-large { animation-delay: -2.2s; animation-duration: 7.2s; } .processing-global-bubbles .bubble-medium { animation-delay: -4.3s; animation-duration: 8s; } .processing-global-bubbles .bubble-small { animation-delay: -1.1s; animation-duration: 6.6s; } .processing-global-bubbles .bubble-smallest { animation-delay: -5.4s; animation-duration: 7.6s; } @keyframes premium-bubble-float { 0%,100% { transform: translateY(10px) scale(.985); } 50% { transform: translateY(-15px) scale(1.018); } } .processing-global-copy { display: grid; gap: 7px; margin-top: -4%; text-shadow: 0 2px 14px rgba(0,0,0,.38); } .processing-global-message { margin: 0; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 650; letter-spacing: -.015em; } .processing-global-detail { margin: 0; color: rgba(231,247,255,.78); font-size: .9rem; } /* Human-review refinements: retain the approved visual language and existing workflows. */ .brand-signature { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; line-height: 1.25; } .brand-signature span { font-size: .6rem; font-weight: 400; } .brand-signature strong { font-size: .7rem; font-weight: 650; letter-spacing: .16em; color: var(--accent); } .is-monthly-workspace .mode-tabs > [data-tab="plan"] { display: none; } .is-monthly-workspace .mode-tabs:not(:has([data-tab]:not([data-tab="plan"]):not([hidden]))) { display: none; } .workspace-hero .eyebrow { margin-bottom: 8px; font-size: .78rem; } #actionForm { scroll-margin-top: 80px; } #actionForm .form-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 18px 16px; } #actionForm .form-grid > label, #actionForm .store-field { grid-column: span 2; } #actionForm #kpiField, #actionForm #categoryField { grid-column: span 3; } #actionForm #activationInitiativeField { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); } #actionForm #kpiField label span, #actionForm #categoryField label span { color: var(--ink); font-size: .9rem; font-weight: 650; } #actionForm label small { font-size: .7rem; font-weight: 400; color: var(--muted); margin-left: 6px; } #actionForm #kpiButton, #actionForm #categoryButton { border-color: var(--line-strong); } #actionForm .multi-select-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #actionForm .multi-select-toggle::after { content: "⌄"; flex: 0 0 auto; color: var(--muted); } #actionForm #kpiButton.has-selection, #actionForm #categoryButton.has-selection { background: var(--primary-soft); } #actionForm #plannedActionButton { background: transparent; color: var(--muted); border-color: var(--line); font-size: .8rem; font-weight: 500; } #actionForm #activationInitiativeField label span { font-size: .76rem; font-weight: 500; } #actionForm .form-actions { padding-top: 8px; gap: 12px; } #actionForm .save-action-button { min-height: 46px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius); background: var(--primary); color: #fff; font-weight: 700; box-shadow: var(--shadow-sm); } #actionForm .save-action-button:hover:not(:disabled) { background: var(--primary-strong); } #actionForm .save-action-button:active:not(:disabled) { background: var(--navy); box-shadow: inset 0 2px 4px #0002; } #actionForm .save-action-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } #actionForm .save-action-button:disabled { opacity: 1; background: #546d7b; cursor: not-allowed; } .action-note-dictation-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; min-width: 44px; padding: 10px; border: 1px solid transparent; } .action-note-dictation-button:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--line-strong); } .action-note-dictation-button.is-recording { color: #fff; background: var(--danger); } .action-note-dictation-button.is-recording:hover:not(:disabled) { background: #84273c; } .action-note-microphone, .action-note-stop { display: block; width: 20px; height: 20px; } .action-note-microphone { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .action-note-stop { fill: currentColor; } .action-note-dictation-button [data-processing-message] { display: none; } .action-note-dictation-button .processing-indicator { gap: 0; } .ai-interview-card > .ai-credit-status { justify-self: start; padding: 7px 10px; border-radius: 7px; font-size: .82rem; } .ai-credit-status.is-empty { color: var(--danger); background: #f9edf0; } @media (max-width: 600px) { #actionForm { scroll-margin-top: 16px; } #actionForm .form-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } #actionForm .form-grid > label, #actionForm .store-field, #actionForm #kpiField, #actionForm #categoryField { grid-column: 1 / -1; } #actionForm .multi-select-option { min-height: 44px; } #actionForm .multi-select-menu { position: static; margin-top: 6px; max-height: 260px; overflow-y: auto; } #actionForm .form-actions { flex-wrap: nowrap; } #actionForm .save-action-button { flex: 1 1 auto; } } /* Real application adapters: functional controls inside the prototype containers. */ :root { --bg:#031321; --surface:#09253b; --surface-soft:#0c2c45; --surface-warm:#1b3040; --primary:#1467d8; --primary-strong:#247ce7; --primary-soft:#123b5d; --line-strong:#416983; --accent:#9bc7e7; --navy:#dceaff; --save-action:#1467d8; --save-action-strong:#247ce7; --danger:#f4a0ad; --success:#80d8d2; --shadow:0 8px 25px #000a1517; --radius:7px; } body { line-height:1.5; font-synthesis:none; } #main.app-shell { width:100%; max-width:none; margin:0; padding:0; gap:0; grid-template-columns:250px minmax(0,1fr); align-items:start; } #main.app-shell.is-td12-mode { grid-template-columns:250px minmax(0,1fr); } #oceanRail { min-height:100dvh; height:100dvh; overflow-y:auto; z-index:20; gap:0; } #oceanRail .brand { flex:none; } #workspacePanel { display:block; background:none; border:0; padding:0; position:static; width:auto; height:auto; max-height:none; overflow:visible; } #workspacePanel[hidden] { display:none; } #main > .work-area { grid-column:2; grid-row:auto; min-width:0; display:block; padding:0 30px 24px; } .app-header.topbar { position:static; background:transparent; box-shadow:none; padding:0; margin:0; border:0; border-bottom:1px solid #47739222; height:62px; min-height:62px; } .brand-block { gap:0; } .brand-mark { display:none; } .brand-title { color:#84a6c0; font-size:10px; letter-spacing:1px; font-weight:400; } .brand-signature { display:none; } .ocean-session { position:relative; margin-left:auto; font-size:12px; } .ocean-session > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:#bed6e8; } .ocean-session > .session-panel { position:absolute; right:0; top:100%; z-index:50; width:250px; padding:18px; border:1px solid var(--line); border-radius:8px; background:#071f32; box-shadow:0 15px 40px #0007; display:grid; gap:10px; } .session-user-info { color:var(--ink); } .session-panel h2 { display:none; } .ocean-workspace-nav svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } #oceanRail nav button { justify-content:flex-start; text-align:left; background:transparent; border:1px solid transparent; font-size:13px; color:#bcd6ee; font-weight:400; gap:13px; padding:11px 12px; min-height:42px; } #oceanRail nav :is(a,button):hover { background:#12334e; } #oceanRail .tabs { padding:0; margin:0; gap:4px; border:0; background:transparent; flex-wrap:wrap; } #oceanRail .tabs button { width:100%; white-space:normal; border-radius:7px; } #oceanRail nav .is-active, .is-monthly-workspace .ocean-workspace-nav a:first-child { background:linear-gradient(105deg,#0c467f,#155994b8); border-color:#326d973d; color:#eef6ff; } body:not(.is-monthly-workspace) .ocean-workspace-nav { display:none; } .workspace-hub { display:flex; flex-direction:column; gap:0; } .workspace-hub > .panel-title-row { display:contents; } .workspace-hub h2 { order:-2; font-size:9px; letter-spacing:1.1px; margin-bottom:11px; } .workspace-hub .panel-title-row button { order:3; font-size:10px; background:transparent; border:0; min-height:36px; margin-top:6px; color:#9bbdd6; } .workspace-select-field { display:block; } .workspace-select-field > span,#profileWorkspaceInfo { display:none!important; } .workspace-rail-period { display:block; font-size:11px; color:#dceaff; margin-bottom:6px; } #workspaceSelect { font-size:11px; min-height:44px; text-overflow:ellipsis; } .ocean-workspace-save { display:flex; } .ocean-workspace-save button { width:100%; font-size:12px; } .workspace-panel .panel-section { border-bottom:0; } .offline-section { margin:12px 8px 0; font-size:9px; color:#8fadc4; } .offline-section h2 { font-size:10px; } #oceanRailCredits:empty { display:none; } #oceanRailCredits { font-size:10px; } #oceanRailCredits .ai-credit-status { margin:5px 0; } #workspaceDialog { position:fixed; z-index:80; left:50%; top:50%; transform:translate(-50%,-50%); width:min(480px,calc(100vw - 28px)); max-height:85dvh; overflow:auto; background:#0a2941; box-shadow:0 0 0 100vmax #010d1bcc; } .tab-panel { border:0; background:transparent; padding:20px 0; box-shadow:none; } #plan.is-active { display:block; padding:0; } .workspace-hero.heading { border:0; margin:0; display:flex; flex-direction:row; background:none; padding:19px 0 18px; } .workspace-hero h2 { font-size:32px; font-weight:620; letter-spacing:-1px; } .workspace-hero .eyebrow { font-size:10px; letter-spacing:2.1px; margin-bottom:6px; } .workspace-hero-meta { font-size:15px; margin-top:5px; color:#a3c6e4; } .workspace-hero-actions { max-width:none; align-self:center; } .workspace-progress-pill { display:none; } .workspace-hero-actions button { font-size:11px; background:transparent; border-color:#31536c; color:#afc8df; } .plan-snapshot-panel { display:block; } .plan-snapshot-panel .panel-title-row { margin-bottom:12px; } .plan-snapshot-panel h3 { font-size:18px; font-weight:600; } .month-snapshot { display:block; } .snapshot-summary-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .snapshot-summary-row .metric { gap:14px; padding:10px 12px; border:1px solid #1d4057; border-radius:7px; background:#03192a63; } .snapshot-summary-row .metric strong { font-size:25px; color:var(--ink); } .snapshot-summary-row .metric div { padding:0; border:0; background:none; } .snapshot-summary-row .metric span { text-transform:none; font-size:11px; font-weight:400; } .snapshot-summary-row .metric small { font-size:10px; font-weight:400; color:#90aec8; } .snapshot-detail { font-size:10px; color:#90aec8; margin-top:9px; } .snapshot-detail > summary { cursor:pointer; min-height:24px; } .snapshot-card-grid { margin-top:10px; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; } .snapshot-status-toggle { background:#0b2b42; color:var(--ink); min-height:60px; padding:8px; font-size:11px; } .snapshot-status-toggle strong { color:var(--ink); font-size:11px; } .snapshot-status-card { background:#071d2f; border:1px solid var(--line); } .snapshot-count { background:#163e58; color:var(--ink); } .workspace-grid { grid-template-columns:1.12fr 1fr; gap:14px; } #oceanActions { grid-column:1; grid-row:1; display:block; } #bitacoraPanel { grid-column:2; grid-row:1; } #oceanConcerns { grid-column:1; grid-row:2; } #oceanReflection { grid-column:2; grid-row:2; } #tdLiveRmPerformance { grid-column:2; grid-row:2; } .td-live-rm-performance .section-title { margin-bottom:8px; } .td-live-rm-performance .section-title p { margin:3px 0 0; color:#a9c2d7; font-size:11px; } .td-live-performance-controls { display:flex; align-items:center; gap:6px; } .td-live-performance-list { display:grid; gap:2px; } .td-live-performance-row { display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(70px,.55fr) minmax(120px,1fr); align-items:center; gap:8px; padding:6px 0; border-top:1px solid #244358; } .td-live-performance-row:first-child { border-top:0; padding-top:0; } .td-live-performance-row strong,.td-live-performance-row span,.td-live-performance-row small { display:block; } .td-live-performance-row strong { color:var(--ink); font-size:12px; } .td-live-performance-row span,.td-live-performance-row small { color:#9ebbd0; font-size:10px; } .td-live-performance-row small { text-align:right; white-space:nowrap; } .td-live-performance-meter { height:6px; overflow:hidden; border-radius:999px; background:#14344d; grid-column:2 / -1; } .td-live-performance-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#25b8d2,#2d79da); } #oceanActions .section-heading { border:0; margin:0 0 12px; padding:0; } .section-title h3 { font-size:18px; font-weight:600; } .section-title h2 { font-size:18px; } .add-actions-panel { background:none; border:0; margin:-54px 0 15px; text-align:right; } #actionToggle { display:inline-flex; gap:8px; width:auto; border:1px solid var(--line); padding:8px 12px; min-height:40px; background:#0d2841a8; color:var(--ink); font-size:12px; font-weight:400; } #planLists { display:grid; gap:4px; } #planLists .action-item { padding:0; margin:0; display:block; border:0; box-shadow:none; background:transparent; } .action-row > summary { padding:7px 9px; min-height:49px; } .action-row .status { font-size:10px; } .action-row .row-detail .action-meta { margin-block:8px; } .action-row .row-detail .activity-tracking-row { grid-template-columns:1fr; gap:9px; } .action-row .row-detail .action-title { font-size:12px; } .action-row .row-detail .action-location-title { font-size:11px; } .action-row .row-detail .row-actions { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; } .archived-actions-panel,.trash-actions-panel { border:0; border-top:1px solid #244358; border-radius:0; padding:10px 0 0; margin-top:12px; background:none; } .archived-toggle,.trash-toggle { padding:0; min-height:30px; font-size:10px; color:#90aec8; } .archive-icon,.trash-icon { width:14px; height:14px; } .archive-count-pill { background:#173a51; color:#adc9dd; } .collapse-indicator { background:none; border:0; color:inherit; } .bitacora-panel { display:block; } .bitacora-heading { display:flex; margin-bottom:12px; } .bitacora-heading > div:first-child { flex:1; } .bitacora-heading h3 { margin:0; } .bitacora-heading p { font-size:12px; margin-top:5px; } .capture-buttons button { font-size:12px; font-weight:400; } .bitacora-voice-usage { display:block; margin:12px 0; font-size:10px; color:#a8c5db; } .bitacora-voice-usage strong { color:#c7dff0; font-size:10px; } .bitacora-voice-usage span { font-size:10px; } .bitacora-suggestion-badge { font-size:10px; margin-bottom:8px; background:#143b56; color:#b8d9f0; } .bitacora-entry { border:1px solid #30506a; background:#0a243a9c; border-radius:7px; padding:10px; gap:8px; } .bitacora-entry-heading h4 { font-size:12px; font-weight:500; } .bitacora-entry-meta { font-size:9px; } .bitacora-entry-source { font-size:11px; line-height:1.55; } .bitacora-status { font-size:9px; border:1px solid #8c78463d; background:#4941264f; color:#efce8e; } .ocean-entry-review > summary { color:#6abbff; font-size:11px; display:flex; justify-content:space-between; min-height:28px; align-items:center; cursor:pointer; } .ocean-entry-review > summary::after { content:'→'; } .ocean-entry-review > summary span { margin-left:auto; margin-right:10px; } .bitacora-reviewed-disclosure { border-top:1px solid #2b48604f; margin-top:10px; padding-top:10px; } .bitacora-reviewed-disclosure > summary { font-size:11px; color:#adc9dd; cursor:pointer; } .bitacora-capture { background:#051b2d; border:1px solid #335d7a; padding:13px; margin-block:12px; } .bitacora-capture textarea { font-size:13px; } .bitacora-suggestion { background:#0a2941; border-color:var(--line); } .bitacora-suggestion textarea { font-size:12px; } .ocean-note-card { min-width:0; } .ocean-note-card summary { font-size:12px; cursor:pointer; min-height:36px; color:#b8d9f0; } .ocean-note-card [data-ocean-note] { font-size:12px; white-space:pre-line; line-height:1.7; padding:10px 0; color:#a9c2d7; } .ocean-note-card > button { margin-top:10px; width:100%; font-size:12px; } .ocean-note-card .ai-credit-status { margin-top:8px; font-size:10px; } .ai-credit-status { background:#0b2c42; color:#9ed5ef; border:1px solid var(--line); border-radius:5px; } .ai-credit-status.is-empty { background:#392c3c; color:#f4b0b9; } button.primary-button { background:linear-gradient(120deg,#1467d8,#0955bc); border:1px solid #327dde; color:#fff; box-shadow:inset 0 1px #ffffff13,0 4px 15px #00112940; } button.primary-button:hover,button.primary-button:focus-visible,button.primary-button:active:not(:disabled) { color:#fff; } button.secondary-button,.small-button { background:#0d2841a8; color:#c7def0; border-color:#31536c; } button.secondary-button:hover:not(:disabled),button.secondary-button:focus-visible,button.secondary-button:active:not(:disabled),.small-button:hover:not(:disabled),.small-button:focus-visible,.small-button:active:not(:disabled),.ghost-button:hover:not(:disabled),.ghost-button:focus-visible,.ghost-button:active:not(:disabled),.outline:hover:not(:disabled) { background:#143955; border-color:#4680a6; color:#dceaff; } .ghost-button { background:transparent; color:#a7c7de; } .tab-button:hover:not(:disabled),.icon-button:hover:not(:disabled) { background:#143955; border-color:#4680a6; color:#dceaff; } button.primary-button:disabled,button.primary:disabled,button.save-and-next-button:disabled,button.critical-add-button:disabled { background:#24598d; border-color:#3b73a5; color:#e7f3ff; opacity:1; } button.secondary-button:disabled,button.small-button:disabled,button.ghost-button:disabled,button.outline:disabled,button.tab-button:disabled,button.icon-button:disabled { background:#183247; border-color:#31536d; color:#8faabd; opacity:1; } button[aria-busy="true"] > span,button[aria-busy="true"] > svg,button[aria-busy="true"] .processing-indicator { color:inherit; } .danger-text-button { color:#f4a0ad; } input,select,textarea,.multi-select-toggle { background:#061d30; color:#dceaff; border-color:#2a4d65; } label span,.field-label { color:#aac5da; font-size:11px; } #oceanActionDialog { text-align:left; padding:26px; } #oceanActionDialog .add-actions-body { padding:0; } #actionForm { background:none; border:0; padding:0; margin:15px 0 0; } #actionForm > h3 { font-size:12px; color:#d7e8f7; margin-bottom:10px; } #actionForm .form-grid { grid-template-columns:1fr 1fr; gap:12px; } #actionForm .form-grid > label,#actionForm .store-field { grid-column:auto; } #actionForm .store-field { grid-column:1 / -1; grid-row:1; } #actionForm #kpiField,#actionForm #categoryField { grid-column:1 / -1; margin-top:4px; } #actionForm .multi-select-menu { position:static; margin-top:6px; max-height:220px; overflow-y:auto; background:#0a2941; border-color:var(--line); } #actionForm #kpiField label span,#actionForm #categoryField label span { font-size:12px; } .multi-select-option { color:var(--ink); } .action-upload-details { background:transparent; border:0; margin-top:16px; } .action-upload-details summary { font-size:11px; color:#91b6d2; min-height:32px; cursor:pointer; } .input-band { background:#0a2941; color:#b4d1e6; } .entry-gateway { background:#010d1bcc; backdrop-filter:blur(7px); } .entry-gateway-card,.auth-card,.confirm-card { background:linear-gradient(135deg,#10334d,#071c2e); border:1px solid #365d78; color:var(--ink); } .entry-path-card { background:#08253c; color:var(--ink); border-color:#31536c; } .entry-path-card.is-primary-path { background:#0e3b5e; border-color:#4584ae; } .entry-current-workspace-context { background:#062339; border-color:#31536c; color:var(--ink); } .entry-current-workspace-context strong { color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); } .entry-gateway p,.entry-current-workspace-context span { color:#adc9df; } .entry-path-number { background:#164366; color:#cde8ff; } .entry-period-panel { background:#082338; } .reporting-period-banner { background:#0e3350; border-color:#376b90; color:#dceaff; margin:16px 0; } :is(.generated-panel,.question-card,.ai-interview-card,.territory-card,.territory-performance-card,.territory-kpi-card,.regional-intelligence-output-card,.report-preview,.report-table-card,.report-action-card,.report-reflection-category,.notice,.dashboard-card,.reflection-item) { background:linear-gradient(120deg,#0d304dde,#071f32d9); color:var(--ink); border-color:var(--line); box-shadow:none; } :is(.mrr-cover-page,.report-section-title,.report-narrative,.report-category-header,.territory-metric-row span,.territory-mini-category-list span,th) { background:#092940; color:var(--ink); border-color:var(--line); } :is(.territory-kpi-card strong,.territory-kpi-card span,.report-narrative-subheading,.mrr-cover-page h1,.mrr-cover-page h2) { color:var(--ink); } .report-preview { max-width:1080px; margin:auto; } .table-wrap,.territory-table-wrap { max-width:100%; overflow-x:auto; } .final-mrr-visual-grid > * { min-width:0; } .ocean-mobile-nav { display:none!important; } .ocean-mobile-nav svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .processing-global-bubble-field { max-width:640px; } .processing-global-bubbles .bubble { position:static; background:none; box-shadow:none; } @media(min-width:901px) { #territoryIntelligence.is-active { grid-template-columns:1fr 1fr; align-items:start; } #territoryIntelligence > .section-heading,#territoryIntelligence > .territory-intelligence-block:first-of-type { grid-column:1 / -1; } } @media(max-width:1200px) { #main.app-shell,#main.app-shell.is-td12-mode { grid-template-columns:220px minmax(0,1fr); } #main > .work-area { padding-inline:20px; } .workspace-grid { grid-template-columns:1fr 1fr; } .workspace-hero.heading { align-items:start; } .workspace-hero-actions { max-width:165px; } .workspace-hero h2 { font-size:30px; } .snapshot-summary-row .metric { padding:10px 8px; gap:8px; } } @media(max-width:900px) { #main.app-shell,#main.app-shell.is-td12-mode { grid-template-columns:190px minmax(0,1fr); } .workspace-grid { grid-template-columns:1fr; } #oceanActions,#bitacoraPanel,#oceanConcerns,#oceanReflection,#tdLiveRmPerformance { grid-column:1; grid-row:auto; } #oceanActions { order:0; } #bitacoraPanel { order:1; } #oceanConcerns { order:2; } #oceanReflection { order:3; } #tdLiveRmPerformance { order:3; } .td-live-performance-row { grid-template-columns:1fr; gap:4px; padding:7px 0; } .td-live-performance-meter { grid-column:auto; } .td-live-performance-row small { text-align:left; white-space:normal; } .snapshot-summary-row { grid-template-columns:1fr 1fr; } .workspace-hero.heading { display:block; } .workspace-hero-actions { max-width:none; margin-top:12px; } .snapshot-card-grid { grid-template-columns:1fr 1fr; } } @media(max-width:960px) { button,.small-button,.tab-button,.mic-button,.critical-add-button { min-height:44px; min-width:44px; } .action-row > summary,.snapshot-detail > summary,.ocean-entry-review > summary,.ocean-note-card summary,.bitacora-reviewed-disclosure > summary { min-height:44px; } .processing-global-composition { width:min(70vw,540px); } } @media (max-width: 600px) { #main.app-shell,#main.app-shell.is-td12-mode { display:block; } #oceanRail { height:auto; min-height:0; overflow:visible; position:sticky; top:0; z-index:30; padding:12px 16px; background:#061c2df5; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:8px; } #oceanRail .brand { font-size:24px; margin:0; } #oceanRail .brand span { display:none; } #oceanRail .mavar-logo { width:154px; padding:6px 8px; } #workspacePanel { display:block; margin:0; padding:0; border:0; } #oceanRail .rail-controls { width:auto; display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:8px; margin:0; padding:0; border:0; } .workspace-hub h2,.workspace-hub .panel-title-row button,.workspace-rail-period,#oceanRail .offline-section,#oceanRail .credits,#oceanRail .signature,#oceanRail .ocean-workspace-nav,#oceanRail .mode-tabs:empty { display:none; } #oceanRail .rail-controls button { display:flex; width:100%; min-height:44px; font-size:11px; } .workspace-select-field { min-width:0; } #workspaceSelect { font-size:12px; padding:8px; margin:0; min-height:44px; } .workspace-hub .panel-title-row { display:none; } #oceanRail .tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; max-width:100%; } #oceanRail .tabs button { width:auto; flex-shrink:0; font-size:11px; } #main > .work-area { padding:0 16px 95px; } .app-header.topbar { height:36px; min-height:36px; } .brand-title { font-size:8px; } .ocean-session > summary { font-size:10px; } .workspace-hero.heading { padding:23px 0 20px; } .workspace-hero h2 { font-size:30px; } .workspace-hero-meta { font-size:13px; } .workspace-hero-actions button { width:100%; } .panel { padding:16px 14px; } .snapshot-summary-row .metric { padding:12px 9px; gap:8px; } .snapshot-summary-row .metric strong { font-size:25px; } .snapshot-summary-row .metric div>span { font-size:10px; } .snapshot-summary-row .metric div>small { font-size:9px; } .workspace-grid { gap:13px; } .section-title h3,.section-title h2,.plan-snapshot-panel h3 { font-size:17px; } .action-row > summary { padding:11px 7px; min-height:70px; } .add-actions-panel { margin-top:-56px; } #actionToggle { min-height:44px; font-size:11px; } .bitacora-entry-source { font-size:12px; } .bitacora-voice-usage { font-size:11px; } .bitacora-reviewed-disclosure { padding-top:4px; } .ocean-mobile-nav { display:flex!important; z-index:40; } .ocean-mobile-nav a,.ocean-mobile-nav button { display:flex; flex-direction:column; font-size:18px; min-width:60px; min-height:44px; padding:4px; gap:2px; border:0; background:none; color:#b8d4e8; } .ocean-mobile-nav span { font-size:9px; } body:not(.is-monthly-workspace) .ocean-mobile-nav { display:none!important; } #oceanActionDialog { padding:20px; } #actionForm .form-grid { grid-template-columns:1fr; } #actionForm .form-grid > * { grid-column:1 / -1; } input,select,textarea { font-size:16px; } .entry-gateway { padding:12px; } .entry-gateway-card { padding:22px 18px; } .entry-paths { grid-template-columns:1fr; } .entry-path-card { padding:18px; } .entry-gateway-heading h1 { font-size:26px; } .activity-tracking-row,.reflection-item,.final-mrr-visual-grid,.final-mrr-visual-grid .territory-action-donut-layout { grid-template-columns:1fr; } .section-heading,.ai-interview-header { flex-wrap:wrap; } .tab-panel { padding:18px 0; } .report-preview { padding:12px; } .reporting-period-banner { flex-wrap:wrap; } .processing-global-composition { width: min(90vw, 440px); } .processing-global-copy { margin-top:-2%; } .processing-global-message { font-size:1.1rem; } .processing-global-detail { font-size:.82rem; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } .processing-bubbles circle { animation:none; } .processing-global-bubbles .bubble { animation: none; } } /* Reset legacy container geometry at the port boundary. */ #oceanRail > nav,#oceanRail > #workspacePanel,#oceanRail > .credits { flex-shrink:0; } #oceanRail > nav { overflow:visible; } .work-area :is(h2,h3,h4) { color:#dceaff; } .territory-intelligence-block :is(p,li),.territory-report-narrative,.regional-intelligence-output-list { color:#aac5da; } .territory-table :is(td,tr),.report-table :is(td,tr),.report-table-card td { background:#082238; color:#c6dced; } .final-mrr-report .mrr-cover-page { text-align:left; justify-items:start; padding:22px 0; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; } .final-mrr-report .mrr-cover-page h1 { font-size:28px; line-height:1.3; font-weight:600; letter-spacing:-.5px; } .final-mrr-report .mrr-cover-page h2 { font-size:16px; font-weight:400; margin-top:9px; } .final-mrr-report .mrr-cover-page p { font-size:11px; } .final-mrr-report .report-section { padding:18px 0; } .final-mrr-report .report-section-title { font-size:18px; font-weight:600; padding:0 0 10px; border:0; border-bottom:1px solid var(--line); background:transparent; } .final-mrr-report .report-narrative { font-size:13px; line-height:1.8; padding:12px 0; background:transparent; border:0; } /* Phase 1 reporting controls and contrast: screen-only Ocean V2 refinements. */ .save-and-next-wrap { display:flex; justify-content:center; margin:22px auto 4px; } .save-and-next-button { min-width:min(100%, 320px); min-height:48px; font-weight:650; letter-spacing:.01em; } .save-and-next-button:hover:not(:disabled) { filter:brightness(1.12); transform:translateY(-1px); } .save-and-next-button:focus-visible { outline:3px solid #9fdbff; outline-offset:3px; } .save-and-next-button:disabled { cursor:wait; opacity:.72; } .ai-fallback-instruction { background:#0a2941; border:1px solid #315d7d; color:#d7e9f7; } .ai-fallback-instruction p,.ai-fallback-instruction span { color:#c7ddef; } .ai-fallback-instruction strong { color:#fff; } #criticalActions .table-wrap { border:1px solid #315d7d; border-radius:10px; background:#08243a; } #criticalActions table th { background:#0e3653; color:#f2f8ff; border-color:#376887; } #criticalActions table td { background:#08243a; color:#dceafa; border-color:#244d69; } #criticalActions .action-location-title { color:#fff; font-weight:650; } #criticalActions .action-title { color:#d5e9fb; } #criticalActions .action-meta .pill { color:#d7ecff; border-color:#3e7191; background:#103a57; } #criticalActions .action-meta .pill::after { content:""; display:block; height:2px; margin-top:3px; background:#4bb8ec; opacity:.65; } #reflection select { background:#08243a; color:#f0f7ff; border-color:#4a7c9d; color-scheme:dark; } #reflection select:focus { border-color:#7bd5fb; box-shadow:0 0 0 3px #3db7eb35; } #reflection select:disabled { background:#0a1e2e; color:#8ca9be; } #reflection select option { background:#08243a; color:#f0f7ff; } .report-preview .report-completion-summary,.report-preview .report-pie-card,.report-preview .final-mrr-action-focus { background:#092941; border-color:#396581; color:#e8f4ff; } .report-preview .report-pie-card h3,.report-preview .final-mrr-action-focus h3 { color:#fff; } .report-preview .performance-rate { background:#0d3551; border-color:#3a6681; } .report-preview .performance-rate strong { color:#8bddff; } .report-preview .performance-rate span,.report-preview .performance-definition { color:#c6dced; } .report-preview .performance-count { background:#0c304a; border-color:#3a6681; color:#e8f4ff; } .report-preview .territory-kpi-card { background:#0d3551; border-color:#3a6681; } .report-preview .territory-kpi-card strong { color:#9ee1ff; } .report-preview .territory-kpi-card span,.report-preview .territory-action-donut-legend span,.report-preview .territory-action-donut-legend small { color:#d3e7f7; } /* Phase 1 final correction: a quiet light Action form over the Ocean shell. */ #oceanActionDialog { width:min(760px,calc(100vw - 32px)); max-height:min(88vh,900px); overflow:auto; padding:26px 28px 28px; border:1px solid #cfd8df; border-radius:14px; background:#fbfcfd; color:#17212b; box-shadow:0 28px 80px #000a; } #oceanActionDialog::backdrop { background:#01111fba; backdrop-filter:blur(4px); } #oceanActionDialog .dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #e2e8ed; } #oceanActionDialog .dialog-head .eyebrow { color:#557083; } #oceanActionDialog .dialog-head h2,#oceanActionDialog h3,#oceanActionDialog label span,#oceanActionDialog .optional-field summary { color:#17212b; } #oceanActionDialog .icon-button { width:36px; min-width:36px; min-height:36px; border-color:#d6e0e6; background:#fff; color:#405160; } #oceanActionDialog .add-actions-body { padding:0; } #oceanActionDialog .action-upload-details { border-bottom:1px solid #e2e8ed; padding:12px 0; margin:0; color:#4d6170; } #oceanActionDialog .action-upload-details summary { color:#36566e; } #oceanActionDialog .input-band { background:#f4f7f9; border-color:#dce5ea; color:#334654; } #oceanActionDialog #actionForm { margin-top:20px; } #oceanActionDialog #actionForm > h3 { color:#122a3c; font-size:13px; font-weight:750; } #oceanActionDialog #actionForm .form-grid { gap:16px; } #oceanActionDialog input,#oceanActionDialog select,#oceanActionDialog textarea,#oceanActionDialog .multi-select-toggle { background:#fff; color:#17212b; border-color:#cbd7de; } #oceanActionDialog select { color-scheme:light; } #oceanActionDialog select option { background:#fff; color:#17212b; } #oceanActionDialog select option:checked { background:#dceefe; color:#102c43; } #oceanActionDialog select option:disabled { background:#f1f4f6; color:#71808b; } #oceanActionDialog input::placeholder { color:#718391; } #oceanActionDialog .multi-select-toggle { min-height:44px; text-align:left; } #oceanActionDialog .multi-select-toggle:hover,#oceanActionDialog .multi-select-toggle.has-selection { background:#eff7ff; border-color:#4d94d2; color:#123f66; } #oceanActionDialog input:focus,#oceanActionDialog select:focus,#oceanActionDialog textarea:focus,#oceanActionDialog .multi-select-toggle:focus { border-color:#2479bd; box-shadow:0 0 0 3px #2d8bd52b; outline:0; } #oceanActionDialog #activationInitiativeField { border-color:#e2e8ed; } #oceanActionDialog .optional-field { background:#f7f9fa; border:1px solid #e0e7eb; border-radius:8px; padding:10px 12px; } #oceanActionDialog .optional-field summary { color:#4d6170; } #oceanActionDialog .multi-select-menu,#oceanActionDialog .store-dropdown { background:#fff; border-color:#cbd7de; color:#17212b; box-shadow:0 12px 28px #1530461f; } #oceanActionDialog .multi-select-option { color:#17212b; } #oceanActionDialog .form-actions { margin-top:8px; padding-top:18px; border-top:1px solid #e2e8ed; } #oceanActionDialog .save-action-button { background:#1268c5; color:#fff; border-color:#1268c5; box-shadow:0 7px 16px #1268c540; font-weight:750; } #oceanActionDialog .save-action-button:hover:not(:disabled) { background:#095aa9; } #oceanActionDialog .ghost-button { color:#4d6170; border-color:transparent; background:transparent; } #oceanActionDialog .ghost-button:hover { background:#edf2f5; } /* Keep both final-report visuals in the same Ocean surface on screen. */ .report-preview .final-mrr-visual-grid .report-pie-card { background:#092941; border-color:#396581; } .report-preview .final-mrr-visual-grid .report-pie-card h3 { color:#fff; } .report-preview { padding:28px 32px; } button { font-weight:400; } #bitacoraPanel { margin:0; } .bitacora-inbox { gap:4px; } #workspacePanel .panel-section { border:0; } .ai-credit-status.is-available,.ai-credit-status.is-unlimited { background:#0b2c42; color:#9ed5ef; border:1px solid #24485e; font-size:11px; font-weight:500; } .bitacora-status { font-weight:500; text-transform:none; } .bitacora-reviewed-disclosure > summary { font-weight:400; } #oceanActions .current-plan-heading { text-align:left; align-items:start; justify-content:start; } #oceanActions #actionToggle span { font-weight:400; } #oceanActionDialog .save-action-button { flex:1; } #oceanActionDialog .action-upload-details { margin-block:10px; } #oceanActionDialog .action-form { gap:12px; } #oceanActionDialog #activationInitiativeField { padding-top:0; border:0; } #oceanActionDialog .optional-field { padding-top:10px; } #main:has(#bitacoraPanel[hidden]) a[href="#bitacoraPanel"] { display:none; } #main:has(#workspacePanel[hidden]) :is(#oceanRailCredits, [data-action="open-workspace-dialog"]) { display:none; } .plan-snapshot-panel .snapshot-summary-row { grid-template-columns:repeat(4,minmax(0,1fr)); } .plan-snapshot-panel .snapshot-summary-row > .metric { display:flex; flex-direction:row; align-items:center; gap:14px; padding:10px 12px; } .plan-snapshot-panel .snapshot-summary-row .metric > div { display:block; padding:0; border:0; background:none; } .plan-snapshot-panel .snapshot-summary-row .metric strong { font-size:25px; line-height:1.15; } .plan-snapshot-panel .snapshot-summary-row .metric-icon { width:39px; height:39px; font-size:19px; display:grid; place-items:center; } .plan-snapshot-panel h3 { color:#dceaff; } #workspacePanel .panel-section { background:none; box-shadow:none; border-radius:0; padding:0; } #workspacePanel .rail-controls { padding-top:21px; border-top:1px solid var(--line); } #workspacePanel .offline-section { font-size:9px; color:#8fadc4; } #workspacePanel .offline-section p { color:inherit; font-size:9px; } #oceanActions .add-actions-panel { display:block; padding:0; margin:-55px 0 15px; } #oceanActions #actionToggle { width:auto; font-weight:400; } .add-actions-toggle span:last-child { flex:0 0 auto; } #oceanActions .add-actions-panel + #planLists { margin-top:0; } #bitacoraVoiceUsage { padding:0; background:none; border:0; box-shadow:none; } #bitacoraVoiceUsage strong { font-weight:400; font-size:10px; } .bitacora-entry-source { color:#9bb8ce; } #oceanActions .action-row .row-main { flex:1; min-width:0; } .row-icon svg { width:19px; height:19px; } .action-row .status { color:#a8d1ff; background:#16477480; border:1px solid #36618355; } .action-row .status.completed { color:#90dfe0; background:#0a495360; } .action-row .status.success { color:#90dfe0; background:#0a495360; border-color:#29616a; } .action-row .status.warning { color:#e7c483; background:#5143254d; border-color:#675638; } .action-row .status.danger { color:#ffbbc7; background:#51283b; border-color:#714458; } #actionForm .save-action-button:active:not(:disabled) { background:#0a458e; color:#fff; } .ocean-actions-panel .panel-foot { color:#8cabc2; } .tab-panel { min-width:0; grid-template-columns:minmax(0,1fr); } .territory-intelligence-block,.territory-intelligence-block > div,.territory-kpi-card { min-width:0; } .territory-intelligence-block { grid-template-columns:minmax(0,1fr); background:linear-gradient(120deg,#0d304dde,#071f32d9); border-color:var(--line); } .territory-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .territory-table-wrap { width:100%; min-width:0; overflow-x:auto; } @media(max-width:960px) { #oceanRail nav button,.capture-buttons button,.archived-toggle,.trash-toggle { min-height:44px; min-width:44px; } } @media(max-width:900px) { .plan-snapshot-panel .snapshot-summary-row { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 600px) { #workspacePanel .rail-controls { padding-top:0; border:0; } .plan-snapshot-panel .snapshot-summary-row > .metric { gap:8px; padding:12px 9px; } .plan-snapshot-panel .snapshot-summary-row .metric-icon { width:29px; height:29px; font-size:16px; } } /* Final Cascade: preserve the light modal hierarchy after Ocean adapters. */ #oceanActionDialog #activationInitiativeField { padding:0; border:0; } #oceanActionDialog .optional-field { padding:10px 12px; border:1px solid #e0e7eb; background:#f7f9fa; } #oceanActionDialog #actionForm .save-action-button:active:not(:disabled) { background:#095aa9; color:#fff; } /* Add Action light-surface guard: Ocean shell foreground rules must never leak into the native/custom select menus. Keep this scoped to the dialog. */ #oceanActionDialog, #oceanActionDialog h1, #oceanActionDialog h2, #oceanActionDialog h3, #oceanActionDialog p, #oceanActionDialog label, #oceanActionDialog label span, #oceanActionDialog .eyebrow, #oceanActionDialog .optional-field summary, #oceanActionDialog .action-upload-details, #oceanActionDialog .action-upload-details summary { color:#17212b !important; } #oceanActionDialog input, #oceanActionDialog select, #oceanActionDialog textarea, #oceanActionDialog .multi-select-toggle, #oceanActionDialog .multi-select-toggle:hover, #oceanActionDialog .multi-select-toggle.has-selection { color:#17212b !important; background:#fff !important; } #oceanActionDialog input::placeholder, #oceanActionDialog textarea::placeholder { color:#718391 !important; opacity:1; } #oceanActionDialog input:disabled, #oceanActionDialog select:disabled, #oceanActionDialog textarea:disabled { color:#718391 !important; background:#f1f4f6 !important; } #oceanActionDialog .dialog-head .eyebrow, #oceanActionDialog .action-upload-details, #oceanActionDialog .action-upload-details p, #oceanActionDialog .action-upload-details summary, #oceanActionDialog .optional-field summary, #oceanActionDialog .optional-field summary span { color:#557083 !important; } #oceanActionDialog .multi-select-menu, #oceanActionDialog .store-dropdown { background:#fff !important; color:#17212b !important; } #oceanActionDialog .multi-select-option, #oceanActionDialog .multi-select-option span, #oceanActionDialog .multi-select-option label, #oceanActionDialog .multi-select-option strong, #oceanActionDialog .multi-select-option small, #oceanActionDialog .store-option, #oceanActionDialog .store-option span, #oceanActionDialog .store-option strong { color:#17212b !important; } #oceanActionDialog .multi-select-option:hover, #oceanActionDialog .multi-select-option:focus-within, #oceanActionDialog .store-option:hover, #oceanActionDialog .store-option:focus-visible { background:#eaf4ff !important; color:#17212b !important; } #oceanActionDialog .save-action-button, #oceanActionDialog .save-action-button:hover, #oceanActionDialog .save-action-button:focus-visible, #oceanActionDialog .save-action-button:active:not(:disabled) { background:#1268c5 !important; color:#fff !important; } #oceanActionDialog .ghost-button { color:#4d6170 !important; } #oceanActionDialog .icon-button:hover:not(:disabled),#oceanActionDialog .icon-button:focus-visible,#oceanActionDialog .icon-button:active:not(:disabled),#oceanActionDialog .ghost-button:hover:not(:disabled),#oceanActionDialog .ghost-button:focus-visible,#oceanActionDialog .ghost-button:active:not(:disabled) { background:#edf2f5 !important; border-color:#c7d6df; color:#405160 !important; } #oceanActionDialog button:disabled { background:#f1f4f6 !important; border-color:#d6e0e6; color:#718391 !important; opacity:1; } #oceanActionDialog .save-action-button:disabled { background:#4c86bd !important; border-color:#4c86bd; color:#fff !important; } /* One light Add Action language for Workspace, TD, and Critical Actions. */ #criticalActionForm { padding:22px; border:1px solid #cfd8df; border-radius:14px; background:#fbfcfd; color:#17212b; box-shadow:0 14px 34px #04192a24; } #criticalActionForm, #criticalActionForm label, #criticalActionForm label span, #criticalActionForm small { color:#17212b !important; } #criticalActionForm input, #criticalActionForm select, #criticalActionForm textarea, #criticalActionForm .multi-select-toggle { border-color:#cbd7de; background:#fff !important; color:#17212b !important; -webkit-text-fill-color:#17212b; } #criticalActionForm input::placeholder, #criticalActionForm textarea::placeholder { color:#718391 !important; opacity:1; } #criticalActionForm .multi-select-menu, #criticalActionForm .store-dropdown { border-color:#cbd7de; background:#fff !important; color:#17212b !important; box-shadow:0 12px 28px #1530461f; } #oceanActionDialog .multi-select-option, #oceanActionDialog .multi-select-option > span, #oceanActionDialog .multi-select-option input + span, #criticalActionForm .multi-select-option, #criticalActionForm .multi-select-option > span, #criticalActionForm .multi-select-option input + span, #criticalActionForm .store-option, #criticalActionForm .store-option span, #criticalActionForm .store-option strong { background-color:#fff; color:#17212b !important; -webkit-text-fill-color:#17212b; } #oceanActionDialog .multi-select-option:hover, #oceanActionDialog .multi-select-option:focus-within, #oceanActionDialog .multi-select-option:has(input:checked), #criticalActionForm .multi-select-option:hover, #criticalActionForm .multi-select-option:focus-within, #criticalActionForm .multi-select-option:has(input:checked), #criticalActionForm .store-option:hover, #criticalActionForm .store-option:focus-visible { background:#eaf4ff !important; color:#17212b !important; } #criticalActionForm .save-action-button, #criticalActionForm .save-action-button:hover, #criticalActionForm .save-action-button:focus-visible, #criticalActionForm .save-action-button:active:not(:disabled) { border-color:#1268c5; background:#1268c5 !important; color:#fff !important; -webkit-text-fill-color:#fff; } #criticalActionForm .ghost-button { color:#4d6170 !important; } #criticalActionForm .ghost-button:hover:not(:disabled),#criticalActionForm .ghost-button:focus-visible,#criticalActionForm .ghost-button:active:not(:disabled) { background:#edf2f5 !important; border-color:#c7d6df; color:#405160 !important; } #criticalActionForm .multi-select-toggle:hover:not(:disabled) { background:#eff7ff !important; border-color:#4d94d2; color:#123f66 !important; } #criticalActionForm button:disabled { background:#f1f4f6 !important; border-color:#d6e0e6; color:#718391 !important; opacity:1; } #criticalActionForm .save-action-button:disabled { background:#4c86bd !important; border-color:#4c86bd; color:#fff !important; } #criticalActionForm #criticalActivationInitiativeField { grid-column:1 / -1; padding-top:14px; border-top:1px solid #e2e8ed; } #criticalActionForm .optional-field { padding:10px 12px; border:1px solid #e0e7eb; border-radius:8px; background:#f7f9fa; } #criticalActionForm .optional-field > summary { min-height:40px; color:#557083 !important; cursor:pointer; font-size:11px; } #criticalActionForm .optional-field > summary span { float:right; color:#557083 !important; font-size:10px; } #criticalActionForm .optional-field[open] > summary { margin-bottom:12px; } @media(max-width:600px) { #criticalActionForm { padding:16px; } } /* RM stabilization: target the actual table cells, not their generic parent. */ #criticalActions td.action-location-cell, #criticalActions td.action-location-cell .action-location-title, #criticalActions td.action-location-cell .action-location-subtitle { color:#f4f9ff; } #criticalActions td.action-location-cell .action-location-subtitle { color:#b9d4e9; } #criticalActions td .action-meta { gap:7px; } #criticalActions td .action-meta .pill { min-height:26px; color:#e8f5ff; border:1px solid #467a9c; background:#0d3552; box-shadow:inset 0 -2px #4bb8ec80; } #criticalActions td .action-meta .pill.status-in-progress { color:#ffe2a1; border-color:#a77731; background:#493718; box-shadow:inset 0 -2px #e5ad458c; } #criticalActions td .action-meta .pill.status-postponed { color:#ffd29a; border-color:#c46b2c; background:#5a321d; box-shadow:inset 0 -2px #f1874c8c; } #criticalActions td .action-meta .pill.status-completed { color:#b8f2d5; border-color:#3b9877; background:#123f38; box-shadow:inset 0 -2px #55c99e8c; } #criticalActions td .action-meta .pill.status-not-completed { color:#ffbea9; border-color:#c95d43; background:#542b29; box-shadow:inset 0 -2px #ee7b5a8c; } #criticalActions td .action-meta .pill.status-cancelled { color:#ffc1c8; border-color:#a94b5d; background:#482b38; box-shadow:inset 0 -2px #df687d8c; } /* Fallback copy and Reflection context retain readable, restrained contrast. */ .ai-fallback-instruction p span { color:#bed1df; } #reflection .category-section > h3,#reflection .category-section > p,#reflection .reflection-item .field-label,#reflection .reflection-item .action-location-title { color:#edf7ff; } #reflection .reflection-item .action-location-subtitle,#reflection .reflection-item .impact-box,#reflection .reflection-item .action-meta .pill { color:#c4dcec; } /* Clear lifecycle hierarchy; labels remain present alongside every color. */ .pill.status-completed,.status.status-completed { color:#bdf4d5; background:#123f38; border-color:#3eaa82; } .pill.status-in-progress,.status.status-in-progress { color:#ffe3a3; background:#4d391b; border-color:#b7812f; } .pill.status-postponed,.status.status-postponed { color:#ffd09a; background:#5b311b; border-color:#d7732e; } .pill.status-not-completed,.status.status-not-completed { color:#ffc0aa; background:#592a27; border-color:#d65b43; } .pill.status-cancelled,.status.status-cancelled { color:#ffc1c9; background:#482a38; border-color:#b24d61; opacity:.92; } .manual-concern-form { display:grid; gap:10px; margin-top:12px; padding:12px; border:1px solid #315d7d; border-radius:8px; background:#082940; } .manual-concern-form label span,.manual-concern-item { color:#d8ebf8; } .manual-concern-list { display:grid; gap:6px; margin:10px 0; } .manual-concern-item { display:flex; gap:8px; margin:0; font-size:12px; line-height:1.5; } .manual-concern-item span { color:#f0a5b8; } .monthly-concern-selection { display:grid; gap:10px; margin:18px 0; padding:16px; border:1px solid #315d7d; border-radius:10px; background:#082940; } .monthly-concern-selection:empty { display:none; } .monthly-concern-heading h3 { color:#f1f8ff; font-size:14px; } .monthly-concern-heading p { margin:4px 0 0; color:#b8d1e2; font-size:12px; } .monthly-concern-options { display:grid; gap:8px; } .monthly-concern-options label { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:9px; padding:9px 10px; border:1px solid #244d69; border-radius:7px; background:#071f32; color:#e4f1fb; } .monthly-concern-options input { width:16px; min-height:16px; margin:2px 0 0; accent-color:#54bce8; } .monthly-concern-options small { color:#9fc2da; font-size:10px; } @media(max-width:600px) { .monthly-concern-options label { grid-template-columns:auto minmax(0,1fr); } .monthly-concern-options small { grid-column:2; } } /* TD Monthly Workspace: a focused live-performance, logbook, then action-work flow. */ body.is-td12-user .workspace-grid { grid-template-columns:minmax(0,1.28fr) minmax(320px,.88fr); } body.is-td12-user #tdLiveRmPerformance { grid-column:1 / -1; grid-row:1; } body.is-td12-user #bitacoraPanel { grid-column:1 / -1; grid-row:2; padding:14px 18px; } body.is-td12-user #bitacoraPanel .bitacora-heading { margin-bottom:8px; } body.is-td12-user #bitacoraPanel .capture-buttons { gap:8px; } body.is-td12-user #bitacoraPanel .bitacora-voice-usage { margin:8px 0; } body.is-td12-user #bitacoraPanel .bitacora-reviewed-disclosure { margin-top:8px; padding-top:8px; } body.is-td12-user #managementAssignmentPanel { grid-column:1; grid-row:3; } body.is-td12-user #oceanActions { grid-column:1; grid-row:4; } body.is-td12-user #oceanConcerns { grid-column:2; grid-row:3 / span 2; } body.is-td12-user #oceanReflection { grid-column:1 / -1; grid-row:5; } .management-assignment-panel { min-width:0; background:linear-gradient(140deg,#0e3553e8,#071f32e8); border-color:#356583; } .management-assignment-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; } .management-assignment-heading h3 { margin:3px 0 0; } .management-assignment-heading p:last-child { margin:6px 0 0; color:#aac7dc; font-size:12px; line-height:1.55; } .management-assignment-open { width:100%; min-height:46px; justify-content:center; } .management-assignment-inbox { margin-bottom:16px; border-color:#4384aa; background:linear-gradient(120deg,#113d5ce8,#08263be8); } .management-inbox-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; } .management-inbox-heading h3 { margin:3px 0 0; } .management-inbox-heading p:last-child { margin:6px 0 0; max-width:760px; color:#b8d3e5; font-size:12px; line-height:1.55; } .management-pending-count { display:grid; place-items:center; flex:0 0 38px; height:38px; border:1px solid #5ab9e7; border-radius:50%; background:#0b5d91; color:#fff; font-weight:750; } .management-assignment-list { display:grid; gap:8px; } .management-assignment-notice { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:12px; border:1px solid #315b76; border-radius:8px; background:#061e31b8; } .management-assignment-notice > div { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:9px; min-width:0; } .management-assignment-notice strong { color:#edf8ff; font-size:13px; line-height:1.45; } .management-assignment-notice p,.management-assignment-notice small { grid-column:2; margin:3px 0 0; color:#a9c8dc; font-size:11px; } .management-assignment-notice small { color:#c4dcec; } .category-dot { width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--action-category-default); box-shadow:0 0 9px currentColor; } .category-dot.category-sales-and-certs { background:var(--action-category-sales-and-certs); } .category-dot.category-padi-club { background:var(--action-category-padi-club); } .category-dot.category-padi-adventure { background:var(--action-category-padi-adventure); } .category-dot.category-competitor-acquisition { background:var(--action-category-competitor-acquisition); } .category-dot.category-pro-development { background:var(--action-category-pro-development); } .management-action-provenance { display:flex; align-items:center; gap:7px; margin:7px 0 10px; color:#91cce9; font-size:10px; letter-spacing:.01em; } .management-action-provenance span { display:grid; place-items:center; width:18px; height:18px; border:1px solid #34789d; border-radius:50%; background:#0c3b59; color:#8ee0ff; } .management-assignment-dialog { width:min(620px,calc(100vw - 32px)); max-height:min(88vh,820px); overflow:auto; padding:26px 28px 28px; border:1px solid #cfd8df; border-radius:14px; background:#fbfcfd; color:#17212b; box-shadow:0 28px 80px #000a; } .management-assignment-dialog::backdrop { background:#01111fba; backdrop-filter:blur(4px); } .management-assignment-dialog .dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid #e2e8ed; } .management-assignment-dialog .dialog-head h2 { margin:3px 0 0; color:#17212b; } .management-assignment-dialog .dialog-head .eyebrow { color:#557083; } .management-assignment-dialog .icon-button { width:36px; min-width:36px; min-height:36px; border-color:#d6e0e6; background:#fff; color:#405160; } .management-assignment-period { margin:16px 0; padding:10px 12px; border:1px solid #cfe1ed; border-radius:7px; background:#edf6fc; color:#214b68; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .management-assignment-form { display:grid; gap:15px; } .management-assignment-form label { display:grid; gap:7px; } .management-assignment-form label > span { color:#17212b; font-size:12px; font-weight:700; } .management-assignment-form label small { color:#647684; font-size:10px; font-weight:500; } .management-assignment-dialog select,.management-assignment-dialog textarea { width:100%; background:#fff; color:#17212b; border-color:#cbd7de; color-scheme:light; } .management-assignment-dialog select option { background:#fff; color:#17212b; } .management-assignment-dialog textarea::placeholder { color:#718391; opacity:1; } .management-assignment-dialog select:focus,.management-assignment-dialog textarea:focus { border-color:#2479bd; box-shadow:0 0 0 3px #2d8bd52b; outline:0; } .management-assignment-dialog select:disabled,.management-assignment-dialog textarea:disabled { background:#f1f4f6; color:#718391; } .management-assignment-dialog .form-actions { margin-top:3px; padding-top:18px; border-top:1px solid #e2e8ed; } .management-assignment-dialog .ghost-button { background:transparent; color:#405160; border-color:#cbd7de; } .management-assignment-dialog .ghost-button:hover:not(:disabled) { background:#edf2f5; color:#263a49; } .management-assignment-error { margin:0; padding:10px 12px; border:1px solid #e1a4ad; border-radius:7px; background:#fff1f3; color:#8a2433; font-size:12px; } @media(max-width:900px) { body.is-td12-user .workspace-grid { grid-template-columns:1fr; } body.is-td12-user #tdLiveRmPerformance, body.is-td12-user #oceanActions, body.is-td12-user #managementAssignmentPanel, body.is-td12-user #bitacoraPanel, body.is-td12-user #oceanConcerns, body.is-td12-user #oceanReflection { grid-column:1; grid-row:auto; } body.is-td12-user #tdLiveRmPerformance { order:0; } body.is-td12-user #bitacoraPanel { order:1; } body.is-td12-user #managementAssignmentPanel { order:2; } body.is-td12-user #oceanActions { order:3; } body.is-td12-user #oceanConcerns { order:4; } body.is-td12-user #oceanReflection { order:5; } } @media(max-width:600px) { .management-assignment-dialog { width:calc(100vw - 20px); max-height:calc(100vh - 20px); padding:20px 16px; border-radius:11px; } .management-assignment-dialog .form-actions { display:grid; grid-template-columns:1fr; } .management-assignment-dialog .form-actions button { width:100%; } .management-assignment-notice { grid-template-columns:1fr; } .management-assignment-notice button { width:100%; } .management-inbox-heading { gap:10px; } } /* Functional Director · Pro Development */ .functional-director-dashboard { display:grid; gap:16px; } .functional-director-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px; background:linear-gradient(135deg,rgba(18,72,107,.84),rgba(5,28,46,.94)); } .functional-director-hero h2 { margin:3px 0 5px; font-size:clamp(28px,4vw,44px); text-transform:uppercase; letter-spacing:.035em; } .functional-director-hero p:last-child { margin:0; color:#9fc3dc; } .functional-period-context { min-width:210px; padding:13px 16px; border:1px solid #2e6b91; border-radius:8px; background:#061f33aa; text-align:right; } .functional-period-context span,.functional-fixed-scope span { display:block; color:#86abc5; font-size:10px; letter-spacing:.16em; text-transform:uppercase; } .functional-period-context strong { display:block; margin-top:4px; color:#fff; font-size:18px; letter-spacing:.08em; } .functional-director-controls { display:grid; gap:14px; padding:16px 20px; } .functional-period-controls { display:flex; align-items:end; gap:8px; } .functional-period-controls label { flex:0 1 260px; } .functional-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .functional-director-controls label span,.functional-fixed-scope span { display:block; margin-bottom:6px; } .functional-director-controls select,.functional-director-controls input,.active-role-selector select { width:100%; color:#dcecf7; border-color:#2b607f; background:#08273d; } .functional-fixed-scope { display:flex; flex-direction:column; justify-content:center; min-height:64px; padding:10px 13px; border:1px solid #2b607f; border-radius:7px; background:#0b304a; } .functional-fixed-scope strong { color:#74d7ff; } .functional-director-status { min-height:20px; color:#9fc3dc; font-size:12px; } .functional-director-status p { margin:0; } .functional-kpi-grid,.functional-mrr-performance { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .functional-kpi-grid article,.functional-mrr-performance article { min-height:82px; padding:15px; border:1px solid #245675; border-radius:8px; background:linear-gradient(145deg,#0d3854,#08283f); } .functional-kpi-grid strong,.functional-mrr-performance strong { display:block; color:#70d5ff; font-size:25px; line-height:1; } .functional-kpi-grid span,.functional-mrr-performance span { display:block; margin-top:7px; color:#bdd5e5; font-size:11px; text-transform:uppercase; letter-spacing:.05em; } .functional-rm-performance,.functional-action-panel,.functional-mrr-panel { padding:18px 20px; } .functional-rm-list { display:grid; gap:7px; } .functional-rm-row { display:grid; grid-template-columns:minmax(170px,1.1fr) minmax(150px,.7fr) minmax(280px,2fr) auto; align-items:center; gap:14px; min-height:64px; padding:8px 10px; border:1px solid #1c4b68; border-radius:7px; background:#07263b; } .functional-rm-identity strong,.functional-rm-identity span,.functional-rm-rates strong,.functional-rm-rates span { display:block; } .functional-rm-identity span,.functional-rm-rates span { margin-top:3px; color:#8fb5ce; font-size:11px; } .functional-rm-rates strong { color:#ddecf6; font-size:12px; } .functional-rm-row .td-live-performance-counts { grid-column:3; } .functional-rm-row .td-live-performance-meter { display:flex; min-height:10px; overflow:hidden; border:1px solid #31566f; border-radius:999px; background:#14344d; } .functional-rm-row .td-live-performance-meter > i { display:block; height:10px; border-radius:0; background:var(--td-live-status); } .functional-rm-row :is(.is-completed) { --td-live-status:#35c48d; } .functional-rm-row :is(.is-in-progress) { --td-live-status:#f3b34c; } .functional-rm-row :is(.is-postponed) { --td-live-status:#f28a3d; } .functional-rm-row :is(.is-not-completed) { --td-live-status:#ef5b4c; } .functional-rm-row :is(.is-cancelled) { --td-live-status:#b05f6f; } .functional-rm-row .td-live-performance-counts { display:flex; flex-wrap:wrap; gap:6px 12px; } .functional-rm-row .td-live-performance-counts span { display:inline-flex; align-items:center; gap:5px; color:#bed4e4; font-size:.68rem; } .functional-rm-row .td-live-performance-counts i { width:7px; height:7px; border-radius:50%; background:var(--td-live-status); } .functional-mrr-unavailable { color:#789cb4; font-size:11px; text-align:right; } .functional-action-panel > summary { cursor:pointer; list-style:none; } .functional-action-panel > summary::-webkit-details-marker { display:none; } .functional-action-panel-summary { margin:0; } .functional-action-summary-meta { display:flex; align-items:center; gap:10px; } .functional-action-toggle { min-width:62px; color:#8fb8d1; font-size:11px; text-align:right; } .functional-action-toggle::before { content:"Expand"; } .functional-action-panel[open] .functional-action-toggle::before { content:"Collapse"; } .functional-action-panel[open] .functional-action-panel-summary { padding-bottom:14px; border-bottom:1px solid #1d4b68; } .functional-action-list { display:grid; gap:7px; } .functional-action-panel[open] .functional-action-list { margin-top:14px; } .functional-action-rm-group { display:grid; gap:8px; padding:12px; border:1px solid #245675; border-radius:8px; background:#061f32; } .functional-action-rm-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; } .functional-action-rm-heading h4 { margin:0; color:#edf7fd; font-size:15px; } .functional-action-rm-heading div > span { display:block; margin-top:3px; color:#88aec7; font-size:11px; } .functional-action-rm-heading > span { color:#75d4fa; font-size:11px; white-space:nowrap; } .functional-action-rm-list { display:grid; gap:7px; } .functional-action-detail { overflow:hidden; border:1px solid #1d4b68; border-radius:7px; background:#07263b; } .functional-action-detail > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:10px 13px; cursor:pointer; list-style:none; } .functional-action-detail > summary::-webkit-details-marker { display:none; } .functional-action-detail > summary > span:first-child { min-width:0; } .functional-action-detail > summary strong,.functional-action-detail > summary small { display:block; } .functional-action-detail > summary strong { overflow:hidden; color:#edf7fd; text-overflow:ellipsis; white-space:nowrap; } .functional-action-detail > summary small { margin-top:4px; overflow:hidden; color:#8eb4cd; text-overflow:ellipsis; white-space:nowrap; } .functional-action-detail[open] > summary { background:#0d3651; } .functional-action-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:14px; border-top:1px solid #1d4b68; } .functional-action-detail-grid div,.functional-action-note,.functional-history-grid > div { padding:10px; border-radius:6px; background:#061e31; } .functional-action-detail-grid span,.functional-action-note span { display:block; margin-bottom:4px; color:#7fa9c4; font-size:10px; text-transform:uppercase; letter-spacing:.07em; } .functional-action-detail-grid strong { color:#dbeaf4; font-size:12px; overflow-wrap:anywhere; } .functional-action-note { margin:0 14px 14px; } .functional-action-note p { margin:0; color:#c8dce9; } .functional-history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 14px 14px; } .functional-history-grid ul { margin:8px 0 0; padding-left:18px; color:#bdd4e3; } .functional-history-grid small { display:block; color:#6f98b3; } .functional-mrr-explainer { color:#95b7cd; } .functional-mrr-view { display:grid; gap:14px; } .functional-mrr-manager-picker { display:flex; flex-wrap:wrap; gap:8px; } .functional-mrr-manager-picker button { display:grid; gap:2px; min-width:160px; text-align:left; } .functional-mrr-manager-picker button small { color:currentColor; opacity:.72; } .functional-mrr-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid #245675; border-radius:8px; background:#0a3049; } .functional-mrr-heading h4 { margin:2px 0; font-size:20px; } .functional-mrr-heading span:not(.status-badge) { color:#9bbdd2; } .functional-mrr-narrative { padding:16px; border:1px solid #245675; border-radius:8px; background:#082a42; } .functional-mrr-narrative h4 { margin:0 0 10px; color:#f0f8fd; } .functional-mrr-narrative .report-narrative { color:#c8dce9; } .functional-mrr-narrative .report-narrative p:first-child { margin-top:0; } .functional-mrr-narrative .report-narrative p:last-child { margin-bottom:0; } .functional-mrr-source-file { margin:10px 0 0; color:#86abc5; font-size:11px; } .functional-mrr-action-group { display:grid; gap:7px; } .functional-mrr-action-group h4 { margin:10px 0 3px; } .functional-scope-note { padding:14px; border:1px solid #29536c; border-radius:8px; background:#061f32; } .functional-scope-note p { margin:5px 0 0; color:#9dbcd0; } .functional-director-navigation span[aria-hidden="true"] { display:inline-grid; width:22px; place-items:center; color:#68cefa; } .active-role-selector { display:grid; gap:4px; margin:5px 0; } .active-role-selector span { color:#8eb4cd; font-size:10px; text-transform:uppercase; letter-spacing:.06em; } .active-role-selector select { min-height:38px; } @media(max-width:1100px) { .functional-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .functional-rm-row { grid-template-columns:minmax(150px,1fr) minmax(130px,.7fr) minmax(250px,1.5fr); } .functional-rm-row > button { grid-column:1 / -1; justify-self:end; } .functional-kpi-grid,.functional-mrr-performance { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:900px) { .functional-rm-row { grid-template-columns:1fr auto; gap:8px; } .functional-rm-row .td-live-performance-meter,.functional-rm-row .td-live-performance-counts,.functional-rm-row > button { grid-column:1 / -1; } .functional-rm-row > button { width:100%; justify-content:center; } } @media(max-width:700px) { .functional-director-dashboard { gap:12px; } .functional-director-hero { align-items:stretch; flex-direction:column; padding:17px; } .functional-period-context { min-width:0; text-align:left; } .functional-period-controls { display:grid; grid-template-columns:auto minmax(0,1fr) auto; } .functional-period-controls .secondary-button { grid-column:1 / -1; } .functional-filter-grid { grid-template-columns:1fr; } .functional-kpi-grid,.functional-mrr-performance { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .functional-kpi-grid article,.functional-mrr-performance article { min-height:72px; padding:12px; } .functional-kpi-grid strong,.functional-mrr-performance strong { font-size:21px; } .functional-rm-row { grid-template-columns:1fr auto; gap:8px; } .functional-rm-row .td-live-performance-meter,.functional-rm-row .td-live-performance-counts,.functional-rm-row > button { grid-column:1 / -1; } .functional-rm-row > button { width:100%; justify-content:center; } .functional-action-panel-summary { align-items:flex-start; gap:12px; } .functional-action-summary-meta { align-items:flex-end; flex-direction:column; gap:5px; } .functional-action-rm-heading { align-items:flex-start; flex-direction:column; gap:6px; } .functional-mrr-manager-picker { display:grid; grid-template-columns:1fr; } .functional-mrr-manager-picker button { width:100%; } .functional-action-detail > summary { align-items:flex-start; } .functional-action-detail > summary strong,.functional-action-detail > summary small { white-space:normal; } .functional-action-detail-grid,.functional-history-grid { grid-template-columns:1fr; } .functional-mrr-heading { align-items:flex-start; flex-direction:column; } } /* VP V1 · territory-first executive workspace */ .vp-dashboard { display:grid; gap:16px; } .vp-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px; background:linear-gradient(130deg,rgba(11,82,124,.9),rgba(4,25,42,.96)); } .vp-hero h2 { margin:4px 0 5px; color:#f3f9fd; font-size:clamp(27px,4vw,44px); letter-spacing:.025em; text-transform:uppercase; } .vp-hero p:last-child { margin:0; color:#9fc7df; } .vp-controls { display:grid; grid-template-columns:auto minmax(210px,280px) auto auto auto; align-items:end; gap:8px; padding:14px 18px; } .vp-controls label span { display:block; margin-bottom:6px; color:#91b8d0; font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .vp-controls input { width:100%; color:#e4f3fc; border-color:#2b607f; background:#08273d; } .vp-status { min-height:20px; color:#91b6ce; font-size:12px; } .vp-status p { margin:0; } .vp-section > .section-title { margin-bottom:12px; } .vp-section > .section-title p:last-child { margin:4px 0 0; color:#8fb4cc; } .vp-territory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .vp-territory-card { min-width:0; padding:18px; border:1px solid #2a6384; border-radius:10px; background:linear-gradient(145deg,#0d3b59,#06243a 75%); box-shadow:0 14px 32px #00101e45; } .vp-territory-card.is-empty { background:linear-gradient(145deg,#0a314a,#071f33); } .vp-territory-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .vp-territory-card h3 { margin:2px 0 4px; color:#f1f9fe; font-size:24px; } .vp-territory-card header span { color:#90b7cf; font-size:11px; } .vp-card-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:16px 0 12px; } .vp-card-kpis div { min-width:0; padding:9px 7px; border:1px solid #245979; border-radius:7px; background:#08283f; } .vp-card-kpis strong,.vp-card-kpis span { display:block; } .vp-card-kpis strong { color:#6bd4ff; font-size:20px; line-height:1; } .vp-card-kpis span { margin-top:5px; color:#aac9dc; font-size:9px; text-transform:uppercase; } .vp-segmented-bar { display:flex; min-height:9px; overflow:hidden; border:1px solid #2b5670; border-radius:999px; background:#122f45; } .vp-segmented-bar i { display:block; min-width:2px; } .vp-segmented-bar .is-completed { background:#35c48d; } .vp-segmented-bar .is-in-progress { background:#f3b34c; } .vp-segmented-bar .is-postponed { background:#f28a3d; } .vp-segmented-bar .is-not-completed { background:#ef5b4c; } .vp-segmented-bar .is-cancelled { background:#b05f6f; } .vp-card-signals { display:flex; justify-content:space-between; gap:10px; margin:9px 0 14px; color:#9dc0d5; font-size:10px; } .vp-card-focus h4 { margin:0 0 8px; color:#d8e9f4; font-size:11px; text-transform:uppercase; letter-spacing:.08em; } .vp-category-focus { display:grid; gap:7px; } .vp-category-focus > div { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding-bottom:5px; } .vp-category-focus span { display:flex; align-items:center; min-width:0; gap:7px; color:#c6dcea; font-size:11px; } .vp-category-focus strong { color:#72d0fa; font-size:11px; } .vp-category-focus em { position:absolute; inset:auto 0 0; height:2px; max-width:100%; background:#278ad0; } .vp-empty-copy { margin:0; color:#7198b1; font-size:11px; } .vp-executive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .vp-executive-panel,.vp-next-month-panel,.vp-detail-panel { padding:18px 20px; } .vp-signal-list { display:grid; gap:7px; } .vp-signal-list button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; width:100%; padding:11px 12px; border:1px solid #24536f; border-radius:7px; background:#06243a; color:#d9eaf4; text-align:left; } .vp-signal-list button:hover,.vp-signal-list button:focus-visible { border-color:#4ba1d6; background:#0d3854; color:#fff; } .vp-signal-list button span { color:#a8c6d9; font-size:11px; } .vp-signal-list button em { color:#62c8f2; font-size:10px; font-style:normal; } .vp-next-month-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .vp-next-month-grid article { padding:14px; border:1px solid #24536f; border-radius:8px; background:#06243a; } .vp-next-month-grid header { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; } .vp-next-month-grid header strong { color:#eaf6fc; font-size:16px; } .vp-next-month-grid header span { color:#91b5cc; font-size:10px; } .vp-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:15px; border-bottom:1px solid #24536f; } .vp-detail-heading h3 { margin:3px 0; color:#f1f8fc; font-size:24px; } .vp-detail-heading p:last-child { margin:0; color:#92b6ce; } .vp-muted { color:#799eb6; font-size:11px; } .vp-detail-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:15px 0 11px; } .vp-detail-kpis article { padding:13px; border:1px solid #285a77; border-radius:7px; background:#0a2e47; } .vp-detail-kpis strong,.vp-detail-kpis span { display:block; } .vp-detail-kpis strong { color:#69d1fa; font-size:23px; } .vp-detail-kpis span { margin-top:5px; color:#acc9da; font-size:10px; text-transform:uppercase; } .vp-detail-columns { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-top:17px; } .vp-detail-columns > section { min-width:0; } .vp-detail-columns h4,.vp-mrr-view h4 { margin:0 0 9px; color:#e5f2f9; } .vp-detail-columns h4:not(:first-child) { margin-top:18px; } .vp-rm-list,.vp-action-list { display:grid; gap:7px; } .vp-rm-list button,.vp-action-row { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:11px 12px; border:1px solid #24536f; border-radius:7px; background:#06243a; color:#e4f1f8; text-align:left; } .vp-rm-list button:hover,.vp-rm-list button:focus-visible,.vp-action-row:hover,.vp-action-row:focus-visible { border-color:#4ba1d6; background:#0d3854; color:#fff; } .vp-rm-list button span,.vp-action-row span { min-width:0; } .vp-rm-list strong,.vp-rm-list small,.vp-action-row strong,.vp-action-row small { display:block; } .vp-rm-list small,.vp-action-row small { margin-top:3px; color:#8eb2c9; font-size:10px; } .vp-mrr-view { display:grid; gap:13px; margin-top:14px; } .vp-mrr-view > header,.vp-mrr-view > section { padding:14px; border:1px solid #285a77; border-radius:8px; background:#082a42; } .vp-mrr-view h3 { margin:3px 0; } .vp-mrr-view header span { color:#91b5cc; font-size:11px; } .vp-action-detail dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .vp-action-detail dl div { padding:10px; border:1px solid #dae3e9; border-radius:7px; background:#f4f7f9; } .vp-action-detail dl .is-wide { grid-column:1 / -1; } .vp-action-detail dt { color:#5a6b77; font-size:10px; font-weight:700; text-transform:uppercase; } .vp-action-detail dd { margin:5px 0 0; color:#17212b; overflow-wrap:anywhere; } .vp-readonly-note { padding:10px; border-radius:7px; background:#edf5fa; color:#36586e; font-size:11px; } .vp-navigation svg { color:#68cefa; } .vp-navigation .primary-button { margin-top:8px; justify-content:flex-start; } .office-report-panel { padding:24px; min-width:0; } .office-editor-header { display:flex; align-items:start; justify-content:space-between; gap:16px; } .office-editor-header h3 { margin:4px 0; font-size:26px; } .office-editor-header p { color:#9fc7df; } .office-save-status { color:#8bd8ff; padding:10px 0; } .office-editor-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .office-editor-fields label:first-child, .office-editor-fields label:last-child { grid-column:1/-1; } .office-editor-fields label { display:grid; gap:7px; color:#e0effa; } .office-editor-fields label>span { font-weight:600; } .office-editor-fields small,.office-help { color:#a0c1d7; } .office-editor-fields textarea { width:100%; min-height:120px; background:#06273c; border:1px solid #356883; color:#edf7ff; padding:12px; border-radius:8px; resize:vertical; } .office-editor-fields textarea:focus-visible { outline:2px solid #68cefa; outline-offset:2px; } .office-editor-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; } .office-report-document { background:#f9fbfc; color:#172d40; padding:36px; border:1px solid #c5d4df; border-radius:10px; margin-top:24px; overflow-wrap:anywhere; } .office-report-document :is(h2,h3,h4,p,span,strong,th,td,li) { color:inherit; } .office-report-cover { text-align:center; border-bottom:3px solid #155994; padding-bottom:24px; } .office-report-cover h2 { font-size:38px; margin:12px 0; } .office-overline { letter-spacing:.18em; text-transform:uppercase; font-size:11px; } .office-report-status { display:inline-block; padding:6px 12px; border:1px solid #bacbd7; border-radius:20px; font-size:12px; font-weight:700; } .office-report-document section { margin:26px 0; } .office-report-document h3 { border-bottom:1px solid #bdccd7; padding-bottom:8px; font-size:19px; } .office-report-document .office-prose { white-space:pre-wrap; line-height:1.65; font-size:14px; } .office-report-document .office-source-note { color:#466074; font-size:12px; line-height:1.5; } .office-report-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; } .office-report-metrics>div { padding:12px; border:1px solid #c7d7e1; border-radius:6px; } .office-report-metrics strong { display:block; font-size:28px; color:#145786; } .office-report-metrics span { display:block; font-size:12px; } .office-table-wrap { overflow-x:auto; } .office-report-document table { width:100%; border-collapse:collapse; font-size:12px; } .office-report-document th,.office-report-document td { padding:10px; text-align:left; border-bottom:1px solid #c7d7e1; background:transparent; } .office-focus-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; } .office-report-document footer { border-top:1px solid #bdccd7; padding-top:16px; color:#466074; font-size:12px; line-height:1.6; } @media(max-width:820px) { .office-editor-fields { grid-template-columns:1fr; } } @media(max-width:600px) { .office-report-panel { padding:14px; } #vpDashboard > #vpOfficeReport { scroll-margin-top:120px; } .office-editor-header { flex-direction:column; } .office-report-document { padding:16px; } .office-report-cover h2 { font-size:28px; } .office-editor-actions { display:grid; } .office-report-metrics { grid-template-columns:1fr 1fr; } .office-focus-columns { grid-template-columns:1fr; } } body.is-vp-dashboard #oceanRail #vpNavigation:not([hidden]) { display:grid; gap:5px; } body.is-vp-office-workspace #oceanRail #vpNavigation:not([hidden]) { display:grid; gap:5px; } #vpDashboard, #vpDashboard > section, #vpConcerns { scroll-margin-top:20px; } #vpNavigation a:focus-visible, #vpMobileNavigation a:focus-visible { outline:2px solid #68cefa; outline-offset:2px; } @media(max-width:600px) { body:is(.is-vp-dashboard,.is-vp-office-workspace) #oceanRail #vpNavigation:not([hidden]) { display:none; } body:is(.is-vp-dashboard,.is-vp-office-workspace) #vpMobileNavigation:not([hidden]) { display:flex!important; overflow-x:auto; justify-content:flex-start; gap:4px; } #vpMobileNavigation > a, #vpMobileNavigation > button { flex:0 0 auto; min-width:66px; min-height:44px; justify-content:center; } #vpMobileNavigation .is-active { color:#eef6ff; background:#155994; border-radius:6px; } #vpMobileNavigation span { font-size:11px; } body:is(.is-vp-dashboard,.is-vp-office-workspace) .work-area { padding-bottom:90px; } } .vp-office-workspace { display:grid; gap:18px; min-width:0; } .vp-dashboard:not(.is-active),.vp-office-workspace:not(.is-active) { display:none; } .vp-office-workspace.is-active { display:grid; } .office-workspace-hero { align-items:center; } .office-workspace-controls { display:grid; grid-template-columns:auto auto minmax(210px,320px) auto auto; align-items:end; gap:10px; padding:14px 18px; } .office-workspace-controls label { display:grid; gap:5px; color:#9fc7df; font-size:11px; font-weight:700; } .office-workspace-controls input { min-height:42px; } .office-workspace-modes { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .office-workspace-modes button { display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:11px; text-align:left; padding:14px 16px; border:1px solid #285a78; border-radius:10px; background:#08283d; color:#b9d2e4; cursor:pointer; } .office-workspace-modes button>span { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#0d3e5e; color:#75d8ff; font-weight:800; } .office-workspace-modes strong { color:#edf7ff; font-size:15px; } .office-workspace-modes small { color:#8eb5cd; margin-top:3px; } .office-workspace-modes button:is(:hover,:focus-visible) { border-color:#56c8f5; background:#0b3550; } .office-workspace-modes button:focus-visible { outline:2px solid #68cefa; outline-offset:2px; } .office-workspace-modes button.is-active { background:linear-gradient(120deg,#104e78,#0b3550); border-color:#68cefa; box-shadow:inset 3px 0 #68cefa; } .office-intelligence-view { display:grid; gap:18px; } .office-intelligence-columns { align-items:start; } .office-intelligence-next { display:flex; justify-content:flex-end; } .office-focus-by-territory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .office-focus-by-territory article { padding:13px; border:1px solid #285a78; border-radius:8px; background:#08283d; } .office-focus-by-territory header { display:flex; justify-content:space-between; gap:8px; margin-bottom:12px; color:#dceefa; } .office-focus-by-territory header span { color:#8eb5cd; font-size:11px; } .regional-intelligence-output-list li small { display:block; margin-top:4px; color:#78b7d9; font-size:10px; text-transform:uppercase; letter-spacing:.08em; } @media(max-width:900px) { .office-workspace-controls { grid-template-columns:auto auto minmax(0,1fr) auto; } .office-workspace-controls>[data-action="reload-office-report"] { grid-column:1/-1; } .office-focus-by-territory { grid-template-columns:1fr; } } @media(max-width:600px) { .vp-office-workspace { gap:12px; } .office-workspace-controls { grid-template-columns:auto minmax(0,1fr) auto; padding:12px; } .office-workspace-controls>[data-action="close-vp-office-workspace"],.office-workspace-controls>[data-action="reload-office-report"] { grid-column:1/-1; width:100%; } .office-workspace-modes { grid-template-columns:1fr; } .office-intelligence-next .primary-button { width:100%; } } @media(max-width:1150px) { .vp-territory-grid,.vp-next-month-grid { grid-template-columns:1fr; } .vp-territory-card { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(300px,1.3fr); gap:13px 18px; } .vp-territory-card > header,.vp-card-kpis { grid-column:1 / -1; } } @media(max-width:820px) { .vp-controls { grid-template-columns:auto minmax(0,1fr) auto; } .vp-controls .secondary-button,.vp-controls .primary-button { grid-column:span 1; } .vp-executive-grid,.vp-detail-columns { grid-template-columns:1fr; } .vp-territory-card { display:block; } } @media(max-width:600px) { .vp-dashboard { gap:12px; } .vp-hero { align-items:stretch; flex-direction:column; padding:17px; } .vp-hero .functional-period-context { min-width:0; text-align:left; } .vp-controls { grid-template-columns:auto minmax(0,1fr) auto; padding:12px; } .vp-controls .secondary-button,.vp-controls .primary-button { grid-column:1 / -1; width:100%; } .vp-territory-grid { grid-template-columns:1fr; } .vp-territory-card { padding:14px; } .vp-territory-card > header { flex-direction:column; } .vp-territory-card > header button { width:100%; } .vp-card-kpis,.vp-detail-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .vp-card-signals,.vp-detail-heading { align-items:stretch; flex-direction:column; } .vp-detail-heading .section-actions { display:grid; width:100%; } .vp-action-detail dl { grid-template-columns:1fr; } .vp-action-detail dl .is-wide { grid-column:auto; } .vp-rm-list button,.vp-action-row { align-items:flex-start; } }