/* SLK Design System v2 — Premium Industrial (Claude Design handoff). Base = Industrial Navy (dark) / Modern Tech (light, the default look). Token-driven: change VALUES here, never hardcode per screen. */ :root{ --bg:#0A0E14; --panel:#10151D; --panel-2:#151C26; --panel-3:#1C2430; --line:#1B2432; --line-2:#253040; --line-soft:#1B2432; --ink:#E9EEF5; --ink-2:#C6D1DE; --muted:#93A0B4; --faint:#6C7789; --accent:#FFB000; --accent-dim:#c98a0a; --accent-2:#3FC9BD; --accent-ink:#1A1200; --accent-text:#FFB000; --ok:#4FCB7E; --warn:#F2B231; --danger:#F26D64; --info:#4EA1FF; --neutral:#93A0B4; --hover:#18202C; /* chrome: top bar follows the theme; sidebar stays DARK in every theme */ --topbar:#0D1219; --sidebar:#0A0F16; --sb-ink:#DEE6EF; --sb-muted:#7E8CA0; --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 6px 16px rgba(0,0,0,.35); --e3:0 20px 48px rgba(0,0,0,.5); --r-s:4px; --r-m:6px; --r-l:8px; /* engineering data + 10-colour chart palette — IDENTICAL across all themes */ --data-pressure:#4EA1FF; --data-temperature:#FF7A45; --data-flow:#43D0C4; --data-gas:#F5CE4F; --data-oil:#56C271; --data-water:#2FA8D8; --data-casing:#93A0B4; --data-tubing:#C2A15C; --data-wireline:#B9C6D6; --chart-1:#4EA1FF; --chart-2:#43D0C4; --chart-3:#F2B231; --chart-4:#F26D64; --chart-5:#9B8CFF; --chart-6:#56C271; --chart-7:#E784B3; --chart-8:#C2A15C; --chart-9:#7A8CA6; --chart-10:#ED8F4E; /* legacy chrome/ribbon aliases mapped to the new values (existing CSS still works) */ --tb-1:#0D1219; --tb-2:#0A0F16; --tb-line:#253040; --tb-ink:#E9EEF5; --tb-muted:#7E8CA0; --tb-sub:#C6D1DE; --tb-arrow:#6C7789; --rib:#5b9dff; --rib-bg:#142539; --rib-line:#2c466b; --rib-ink:#93a6c4; --suite:#2563eb; --suite-2:#6ea8ff; --tb-onbg:rgba(255,255,255,.055); --tb-onbd:rgba(255,255,255,.12); --tb-active:var(--suite-2); --grid:#151C26; --plot-bg:#0c1410; --plot-border:#3a4d40; --plot-grid:#1d2d23; --plot-axis:#8fa896; --r:7px; --r-sm:5px; /* System-font stacks (no webfont): every family here covers BOTH Latin and Cyrillic, so the typeface is identical in EN and RU — no glyph fallback swap. */ --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"Roboto Mono",Menlo,"Liberation Mono",monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* (Design signature: the sidebar stays DARK in every theme — see the .sidebar rule further down, which maps its chrome tokens to the dark --sidebar + constant --sb-ink/--sb-muted text.) */ [data-theme="light"]{ --bg:#F4F6FA; --panel:#FFFFFF; --panel-2:#F1F5F9; --panel-3:#E8EEF5; --line:#E4EAF1; --line-2:#D8DFE8; --line-soft:#E4EAF1; --ink:#101828; --ink-2:#39414c; --muted:#516079; --faint:#8b95a3; --accent:#2563EB; --accent-dim:#1e88dd; --accent-2:#0EA5A0; --accent-ink:#FFFFFF; --accent-text:#1D4FC4; --ok:#178A46; --warn:#96690A; --danger:#C23B32; --info:#1B63C6; --neutral:#5A6675; --hover:#EFF3F8; --topbar:#FFFFFF; --sidebar:#0F172A; --e1:0 1px 2px rgba(16,24,40,.08); --e2:0 6px 16px rgba(16,24,40,.10); --e3:0 20px 48px rgba(16,24,40,.18); --tb-1:#FFFFFF; --tb-2:#F1F5F9; --tb-line:#D8DFE8; --tb-ink:#101828; --tb-muted:#516079; --tb-sub:#39414c; --tb-arrow:#8b95a3; --rib:#2257b8; --rib-bg:#eaf0fb; --rib-line:#c6d6f0; --rib-ink:#5f6d88; --suite:#2563eb; --suite-2:#2563eb; --tb-onbg:rgba(23,28,35,.05); --tb-onbd:rgba(23,28,35,.14); --grid:#E4EAF1; --plot-bg:#fbf7e9; --plot-border:#c6ba97; --plot-grid:#e5dcbe; --plot-axis:#6f6444; } *{box-sizing:border-box} /* SECURITY-ADJACENT: role-gated UI (Owner/Team nav, plan buttons) is hidden via the HTML `hidden` attribute — but any author `display:` rule (e.g. .sb-nav .navbtn{display:flex}) silently overrides the UA's [hidden]{display:none}. This guard keeps `hidden` meaning hidden, everywhere, forever. */ [hidden]{display:none!important} /* Paint the theme background on too and let body grow with content — so a short page (or a very tall window) never exposes the browser's default canvas (which is black in a dark-mode OS) below the content. */ html{min-height:100%;background:var(--bg)} body{min-height:100vh} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased} button,input,select{font-family:inherit} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--bg)} /* Design v2: focus is an OUTLINE (survives overflow-clip, visible in sunlight). */ :focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:2px;border-radius:3px} .hidden{display:none!important} .muted{color:var(--muted)} .small{font-size:11px} .error{color:var(--danger);min-height:1.2em} /* Design v2 buttons: 8×14 padding, --r-m radius, 500 weight; ghost = 1px line border → hover --hover surface + --muted border. One primary per view. */ button{cursor:pointer;border-radius:var(--r-m);border:1px solid var(--line); background:var(--panel-2);color:var(--ink);padding:8px 14px;font-size:12.5px;font-weight:500; transition:border-color .12s ease,color .12s ease,background .12s ease,filter .12s ease,box-shadow .12s ease} button:hover{background:var(--hover);border-color:var(--muted)} button:active{filter:brightness(.97)} button:disabled{opacity:.6;cursor:not-allowed;pointer-events:none;background:var(--panel-2);color:var(--muted)} button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:var(--e1)} button.primary:hover{filter:brightness(1.08);background:var(--accent);border-color:var(--accent)} button.primary:active{filter:brightness(.95)} button.ghost{background:transparent;border-color:var(--line)} button.ghost:hover{background:var(--hover);border-color:var(--muted);color:var(--ink)} .topbar .iconbtn{width:32px;height:32px;display:grid;place-items:center;padding:0; background:var(--tb-onbg);border:1px solid var(--tb-onbd);color:var(--tb-ink);border-radius:8px;font-size:14px} .topbar .iconbtn:hover{color:var(--accent);border-color:var(--accent)} input,select{background:var(--panel-2);color:var(--ink);border:1px solid var(--line); border-radius:var(--r-m);padding:7px 10px;width:100%;font-size:12.5px; transition:border-color .12s ease,box-shadow .12s ease,background .12s ease} input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus){border-color:var(--line-2)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)} input:disabled,select:disabled{opacity:.55;cursor:not-allowed;background:var(--panel)} ::placeholder{color:color-mix(in srgb,var(--muted) 78%,var(--ink));opacity:1} /* error / success states — .invalid/.valid set from JS; :user-* kept in separate rules so unsupporting browsers don't drop the whole list */ input.invalid,select.invalid{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)} input:user-invalid{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)} input.valid,select.valid{border-color:color-mix(in srgb,var(--ok) 65%,var(--line))} input:user-valid:required{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))} /* Checkboxes / radios must NOT inherit the full-width + padding of text inputs, or they stretch across their row and shove the adjacent label off-screen. */ input[type=checkbox],input[type=radio]{width:auto;min-width:0;height:auto;padding:0;margin:0; flex:none;accent-color:var(--accent);cursor:pointer} h1{font-size:19px;margin:0;font-weight:600} h2{font-size:15px;margin:18px 0 12px;color:var(--ink);font-weight:700;letter-spacing:-.1px} h2 .muted{color:var(--faint);text-transform:none;letter-spacing:0} /* Auth */ .auth{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px; background:radial-gradient(1100px 520px at 50% -10%,var(--panel-3),var(--bg) 60%)} /* blueprint backdrop — same identity as the landing hero */ .auth::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(640px 340px at 50% -8%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%), radial-gradient(520px 300px at 82% 24%,color-mix(in srgb,var(--accent-2) 15%,transparent),transparent 70%)} .auth::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(80% 70% at 50% 20%,#000 25%,transparent 100%); mask-image:radial-gradient(80% 70% at 50% 20%,#000 25%,transparent 100%)} .auth-card{position:relative;z-index:1;width:min(430px,100%);overflow:hidden; background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(6px); border:1px solid color-mix(in srgb,var(--accent-2) 18%,var(--line)); border-radius:14px;padding:28px; box-shadow:0 24px 70px -18px rgba(0,0,0,.5),0 0 0 5px color-mix(in srgb,var(--accent-2) 6%,transparent)} .auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2))} .auth-controls{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:center} .brand{display:flex;gap:14px;align-items:center;margin-bottom:22px} .brand-mark{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink); font-weight:800;width:46px;height:46px;border-radius:11px;display:grid;place-items:center; letter-spacing:.04em;font-family:var(--mono)} .brand-mark.sm{width:30px;height:30px;border-radius:7px;font-size:12px} .tabs{display:flex;gap:6px;margin-bottom:18px} .tab{flex:1} .tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700} .form{display:flex;flex-direction:column;gap:13px} .form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)} /* Job calendar: Monday-first month grid with job chips */ .jobcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px} .jc-dow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:2px 6px} .jc-day{min-height:74px;border:1px solid var(--line);border-radius:8px;padding:4px 5px;position:relative; display:flex;flex-direction:column;gap:3px;overflow:hidden;background:color-mix(in srgb,var(--panel) 55%,transparent)} .jc-pad{border-color:transparent;background:transparent} .jc-n{font-size:10.5px;color:var(--muted);font-family:var(--mono)} .jc-today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .jc-today .jc-n{color:var(--accent);font-weight:700} .jc-job{display:block;width:100%;text-align:left;font-size:10.5px;line-height:1.3;padding:2px 6px;border-radius:5px; border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent); background:color-mix(in srgb,var(--accent-2) 14%,transparent);color:var(--ink);cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jc-job:hover{background:color-mix(in srgb,var(--accent-2) 28%,transparent)} .jc-more{font-size:9.5px;color:var(--muted)} @media(max-width:760px){.jc-day{min-height:52px}.jc-job{font-size:9px;padding:1px 4px}} /* Global rights footer — a semi-transparent strip pinned to the bottom of every page. pointer-events:none lets clicks pass through; only the link is live. */ .slk-foot{position:fixed;left:0;right:0;bottom:0;z-index:40;text-align:center;padding:2px 10px 3px; font-size:9px;letter-spacing:.04em;color:color-mix(in srgb,var(--muted,#8b95a7) 70%,transparent); background:transparent;pointer-events:none} .slk-foot a{pointer-events:auto;color:inherit;text-decoration:none;border-bottom:1px dotted currentColor} .slk-foot a:hover{color:var(--accent,#ffb000)} /* App shell — sidebar + main column */ #app{display:block;min-height:100vh} .main-col{flex:1;min-width:0;display:flex;flex-direction:column;position:relative} /* The LAS suite iframe must keep its layout size while "hidden" — display:none zeroes the iframe, and every return forces the plot engine inside to re-measure and repaint from 0×0, which reads as a flicker. Instead it stays laid out full-size, just invisible and unclickable. */ #view-suite.hidden{display:block!important;visibility:hidden;position:absolute;left:0;right:0;bottom:0;pointer-events:none} .sidebar{--tb-1:var(--sidebar);--tb-2:var(--sidebar);--tb-line:rgba(255,255,255,.06);--tb-ink:var(--sb-ink);--tb-muted:var(--sb-muted);--tb-sub:var(--sb-ink);--tb-onbg:rgba(255,255,255,.06);--tb-onbd:rgba(255,255,255,.13);--tb-active:var(--accent-text); flex:0 0 232px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column; background:var(--sidebar); border-right:1px solid var(--tb-line);z-index:6} .sb-brand{display:flex;align-items:center;gap:13px;padding:34px 24px 26px;background:transparent;border:0; cursor:pointer;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--tb-line) 70%,transparent)} .sb-brand-t{display:flex;flex-direction:column;line-height:1.15} .sb-brand-t b{color:var(--tb-ink);font-size:15px;letter-spacing:.04em} .sb-brand-t i{color:var(--tb-muted);font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em} /* flex:1 + min-height:0 make the nav the scroll region: without min-height:0 a flex child won't shrink below its content, so a tall nav overflowed the 100vh column and pushed the footer's Sign-out button off-screen. Now the nav scrolls and the user footer stays pinned + fully visible. */ .sb-nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px;flex:1 1 auto;min-height:0;overflow-y:auto} .sb-foot{flex:0 0 auto} .sb-nav .navbtn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 12px; border-radius:9px;border:1px solid transparent;background:transparent;color:var(--tb-muted); font-size:13px;font-weight:600;position:relative} .sb-nav a.navbtn{text-decoration:none} .sb-nav .navbtn{transition:background .12s ease,color .12s ease,transform .12s ease} .sb-nav .navbtn:hover{color:var(--tb-ink);background:var(--tb-onbg);transform:translateX(1px)} .sb-nav .navbtn.on{background:rgba(255,255,255,.06);border-color:transparent;color:var(--accent-text);font-weight:600} /* indented tool entries under a sidebar group (Logs → LAS / Merge / Pass / MFC) */ .sb-sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 3px;padding-left:38px} .sb-subbtn{display:block;width:100%;text-align:left;padding:6px 10px;border:1px solid transparent; background:transparent;color:var(--tb-muted);font-size:12px;border-radius:7px;position:relative; transition:background .12s ease,color .12s ease} .sb-subbtn::before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:1px;background:var(--tb-onbd)} .sb-subbtn:hover{color:var(--tb-ink);background:var(--tb-onbg);border-color:transparent} .sb-subbtn.on{color:var(--tb-active);background:color-mix(in srgb,var(--suite) 14%,transparent);font-weight:700} /* Soft job-lock: Plan/Logs steps + their tools are dimmed with a 🔒 until a job exists */ .sb-nav .navbtn.step.locked{opacity:.5} .sb-nav .navbtn.step.locked::after{content:"🔒";margin-left:auto;font-size:.82em;opacity:.9} .sb-subbtn.locked{opacity:.5} /* tool-group labels inside a sub-nav: the MPLT·PLT workflow vs a separate Gauges job (memory gauges need no schematic / LAS / 3D) */ .sb-grplab{display:block;padding:7px 10px 2px;font-size:9.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:color-mix(in srgb,var(--tb-muted) 75%,transparent)} .sb-grpdiv{display:block;height:1px;margin:5px 8px 2px;background:color-mix(in srgb,var(--tb-line) 80%,transparent)} @media(max-width:980px){.sb-sub{flex-direction:row;padding-left:8px}.sb-subbtn{width:auto;white-space:nowrap}} .sb-nav .navbtn.on::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:2px; border-radius:0 2px 2px 0;background:var(--accent)} .sb-ic{width:20px;display:inline-grid;place-items:center} .sb-ic .ic{width:18px;height:18px;stroke-width:2} .sb-foot{margin-top:auto;padding:16px 16px 18px;border-top:1px solid color-mix(in srgb,var(--tb-line) 70%,transparent); display:flex;flex-direction:column;gap:8px} .sb-user{display:flex;align-items:center;gap:10px;min-width:0} .sb-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; font-weight:800;font-family:var(--mono);color:var(--accent-ink); background:linear-gradient(135deg,var(--accent),var(--accent-2))} .sb-uinfo{color:var(--tb-muted);font-size:11.5px;line-height:1.35;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .sb-out{width:100%;color:var(--tb-sub);border-color:var(--tb-onbd);background:transparent} .sb-out:hover{color:var(--accent);border-color:var(--accent)} @media (max-width:940px){ #app{flex-direction:column} /* ── Word-style ribbon: a flat TAB row (brand · modules · user), and the ACTIVE module's tools in a contextual strip on a second row beneath — instead of one cramped scrolling pill strip. ── */ .sidebar{position:sticky;top:0;height:auto;flex:0 0 auto;flex-direction:row;flex-wrap:wrap; align-items:center;gap:0 2px;border-right:0;border-bottom:1px solid var(--tb-line);padding:0} .sb-brand{order:0;border-bottom:0;padding:6px 8px 6px 12px} .sb-brand-t{display:none} /* flatten the nav so tabs + tool strips lay out as ribbon rows (.sidebar prefix outranks the later `.nav{display:flex}` base rule) */ .sidebar .sb-nav{display:contents} .sb-nav .navbtn{order:1;width:auto;white-space:nowrap;padding:12px 8px;border-radius:0;border:0; border-bottom:2px solid transparent;background:transparent!important;transform:none!important;font-size:12.5px;gap:7px} .sb-nav .navbtn.on{border-bottom-color:var(--tb-active);color:var(--tb-active)} .sb-nav .navbtn.on::before{display:none} .sb-nav .navbtn .sb-ic{width:16px} /* contextual tool row: only the active module's tools, full-width strip */ .sb-sub{display:none;order:3;flex-basis:100%;flex-direction:row;align-items:center;gap:2px; margin:0;padding:5px 10px;overflow-x:auto;scrollbar-width:thin; background:var(--tb-onbg);border-top:1px solid color-mix(in srgb,var(--tb-line) 70%,transparent)} .navbtn.step.on + .sb-sub{display:flex} .sb-subbtn{width:auto;white-space:nowrap;padding:7px 12px;border-radius:7px} .sb-subbtn::before{display:none} /* profile + changelog stack vertically in a compact block on the tab row */ .sb-foot{order:2;margin:0 0 0 auto;border-top:0;padding:3px 10px;flex-direction:column;align-items:center;gap:2px} .sb-foot .sb-ava{width:26px;height:26px;font-size:11px} .sb-changelog{white-space:nowrap;font-size:10px} .sb-changelog .beta-tag{display:none} .sb-uinfo,.sb-out{display:none} /* group labels turn into inline dividers on the ribbon tool row */ .sb-grplab{padding:0 8px 0 4px;font-size:9px;white-space:nowrap} .sb-grpdiv{width:1px;height:20px;margin:0 8px;flex:0 0 auto;align-self:center} } /* Blue top ribbon — theme-aware: a DARKER blue in dark mode, a LIGHTER blue in light mode. Driven by --tb-* tokens (defined per theme) so the ribbon contents stay readable on whichever background is active. */ .topbar{display:flex;align-items:center;gap:14px;padding:9px 16px;min-height:49px; background:linear-gradient(180deg,var(--tb-1),var(--tb-2)); border-bottom:1px solid var(--tb-line);position:sticky;top:0;z-index:5} .topbar strong{font-weight:600;letter-spacing:.02em;color:var(--tb-ink)} .topbar .navbtn{color:var(--tb-muted)} .topbar .navbtn:hover{color:var(--tb-ink)} .topbar .navbtn.on{background:var(--tb-onbg);border-color:var(--tb-onbd);color:var(--tb-active)} .topbar .step-n{background:var(--tb-onbg);color:var(--tb-ink)} .topbar .wf-arrow{color:var(--tb-arrow)} .topbar .muted,.topbar #who{color:var(--tb-muted)} /* Keep "email · owner" on one line; truncate a long email instead of wrapping. */ .topbar #who{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden} .who-name{display:inline-block;max-width:210px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom} .topbar button.ghost,.topbar .iconbtn{color:var(--tb-sub);border-color:transparent;background:transparent} .topbar button.ghost:hover,.topbar .iconbtn:hover{color:var(--accent);border-color:var(--accent)} .topbar .lang button{color:var(--tb-muted);background:transparent;border-color:var(--tb-onbd)} /* Settings cogwheel popover — fixed under the top bar, normal panel colours. */ .settings-pop{position:fixed;top:54px;right:14px;z-index:60;width:286px;max-width:calc(100vw - 24px); background:var(--panel-3);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-l); box-shadow:var(--e2);padding:14px} .settings-pop.hidden{display:none} .sp-sec + .sp-sec{border-top:1px solid var(--line);margin-top:10px;padding-top:12px} .sp-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-2);font-weight:700;margin-bottom:9px} .units-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .units-grid .uin{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)} .units-grid .uin select{width:100%;padding:5px 6px;font-size:12px} .sp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0 2px;font-size:13px;color:var(--ink-2)} .sp-btn{font-size:12px;padding:5px 10px} .nav{display:flex;gap:3px;margin-left:8px} .navbtn{padding:6px 12px;background:transparent;border-color:transparent;color:var(--muted)} .navbtn.on{background:var(--panel-3);border-color:var(--line);color:var(--accent)} .nav.wf{align-items:center} .navbtn.step{display:inline-flex;align-items:center;gap:6px} .step-n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%; background:var(--line);color:var(--ink);font-size:11px;font-weight:700;font-family:var(--mono)} .navbtn.step.on .step-n{background:var(--accent);color:var(--accent-ink)} .wf-arrow{color:var(--faint);font-size:15px;margin:0 1px;user-select:none} .subnav{display:flex;gap:4px;padding:7px 16px;background:var(--panel);border-bottom:1px solid var(--line); position:sticky;top:49px;z-index:4;overflow-x:auto;animation:fadein .18s ease} .subtab{background:transparent;border:1px solid transparent;color:var(--muted);padding:5px 13px; border-radius:var(--r-sm);font-size:12px;cursor:pointer;white-space:nowrap;flex:0 0 auto} .subtab:hover{color:var(--accent)} .subtab.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 10%,var(--panel-3)),var(--panel-3)); border-color:color-mix(in srgb,var(--accent-2) 35%,var(--line));color:var(--accent-2);font-weight:600} .spacer{flex:1} .iconbtn{padding:6px 9px;font-family:var(--mono)} .lang{display:flex;gap:0} .lang button{border-radius:0;padding:6px 9px} .lang button:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)} .lang button:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:none} .lang button.on{background:var(--accent-2);border-color:var(--accent-2);color:#06201d;font-weight:700} .view{padding:24px 32px 40px;width:100%} /* page title + subtitle strip above each work view */ .page-head{padding:24px 32px 0;display:flex;flex-direction:column;gap:2px} .page-head h1{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0} .page-head p{margin:0;color:var(--muted);font-size:12.5px;max-width:72ch} .page-head:not(.hidden)~.view{padding-top:16px} .view.view-full{padding:0;max-width:none} /* The iframe is sized tall (it slightly overflows the fold, which is fine — the page scrolls a touch); the plot inside redraws to fill it via its ResizeObserver. */ .suite-frame{width:100%;min-width:100%;height:calc(100vh - 96px);border:0;display:block;background:var(--bg)} .grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start} /* ── Dashboard / home ── */ #homeBtn{border:none;padding:0;cursor:pointer} #homeBtn:hover{color:var(--accent-ink);filter:brightness(1.1)} .dash{display:flex;flex-direction:column;gap:20px} /* welcome band — carries the landing's blueprint identity into the app */ .dash-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:6px 2px 2px} .dash-title{font-size:30px;margin:0 0 4px;letter-spacing:-.6px;font-weight:800} /* All dashboard rows share ONE grid system: quarter-width tracks with the same 16px gutter, so every card edge lines up vertically across rows. */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:13px 18px; transition:transform .14s ease,border-color .14s ease} .stat::after{display:none} .stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line))} .stat:hover::after{opacity:1} .stat-num{font-size:32px;letter-spacing:-.5px;background:linear-gradient(135deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--accent-2))); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat-ico{font-size:23px;width:46px;height:46px;display:grid;place-items:center;border-radius:12px; border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--panel-3)),color-mix(in srgb,var(--accent-2) 12%,var(--panel-3))); flex:0 0 auto} .stat-num{font-size:28px;font-weight:800;font-family:var(--mono);line-height:1.05;color:var(--ink)} .stat-lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em} .stat-sub{margin-top:2px} /* KPI icon chips: neutral — colour is reserved for status (premium pass 2) */ .stat .stat-ico{background:var(--panel-2);border:0;color:var(--muted)} .trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;font-family:var(--mono); padding:2px 9px;border-radius:999px;margin-left:6px;vertical-align:1px} .trend.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)} .trend.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)} .trend.flat{color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent)} /* dashboard charts */ /* same 4 tracks as .stat-grid; the wide chart SPANS two of them (a 2fr column would be one gap short of two tracks and sit 8px off the stat seams) */ .dash-charts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .dash-charts>:first-child{grid-column:span 2} @media (max-width:1060px){.dash-charts{grid-template-columns:1fr 1fr}} @media (max-width:700px){.dash-charts{grid-template-columns:1fr}.dash-charts>:first-child{grid-column:auto}} .chart-card h2{margin:0 0 10px;font-size:13px;color:var(--ink-2)} .chart-card canvas{width:100%;display:block} .donut-wrap{display:flex;align-items:center;gap:14px} .donut-wrap canvas{width:130px;height:130px;flex:0 0 auto} .donut-legend{display:flex;flex-direction:column;gap:6px;font-size:11.5px;min-width:0} .donut-legend span{display:flex;align-items:center;gap:7px;color:var(--muted)} .donut-legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto} .donut-legend b{color:var(--ink);font-family:var(--mono);margin-left:auto;padding-left:10px} .dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} /* seam at 50% — same track as the rows above */ .ql-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px} .ql{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; padding:16px 8px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px; color:var(--ink);font-size:12px;font-weight:600;text-align:center;transition:.14s} .ql:hover{border-color:color-mix(in srgb,var(--accent-2) 55%,var(--line));color:var(--accent-2); transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(0,0,0,.4); background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 6%,var(--panel-2)),var(--panel-2))} .ql-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--panel-2);color:var(--muted)} .recent{display:flex;flex-direction:column;gap:6px;margin-top:6px} .recent-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; padding:11px 13px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm); color:var(--ink);text-align:left;transition:.12s} .recent-row:hover{border-color:var(--accent);color:var(--accent)} .recent-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,1fr)} .dash-cols{grid-template-columns:1fr} .ql-grid{grid-template-columns:repeat(2,1fr)} } /* ── Tool-string builder ── */ .tb-bar{margin:10px 0;align-items:center;gap:10px} .tb-tol{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)} .tb-tol input[type=range]{width:130px} .mono{font-family:var(--mono)} .tb-list{display:flex;flex-direction:column;gap:10px;margin-top:6px} .tb-tool{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px; background:var(--panel-2);transition:border-color .12s ease,box-shadow .12s ease} .tb-tool:hover{border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line)); box-shadow:0 8px 22px -12px rgba(0,0,0,.35)} .tb-thumb{flex:0 0 72px;width:72px;height:72px;border-radius:var(--r-sm);border:1px dashed var(--line-2); display:grid;place-items:center;cursor:pointer;overflow:hidden;padding:0; background-image:linear-gradient(45deg,var(--panel-3) 25%,transparent 25%,transparent 75%,var(--panel-3) 75%),linear-gradient(45deg,var(--panel-3) 25%,transparent 25%,transparent 75%,var(--panel-3) 75%); background-size:12px 12px;background-position:0 0,6px 6px;background-color:var(--panel)} .tb-thumb.has{border-style:solid} .tb-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block} .tb-thumb:hover{border-color:var(--accent)} .tb-drop{font-size:10px;color:var(--faint);text-align:center;line-height:1.3} .tb-busy{font-size:18px;color:var(--muted)} .tb-fields{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px} .tb-fields .tb-name{font-weight:600} .tb-row2{display:flex;gap:6px} .tb-row2 input{width:100%} .tb-actions{display:flex;flex-direction:column;gap:3px} .tb-actions button{padding:3px 8px;font-size:11px;line-height:1} .tb-assembly{margin-top:8px} /* drag & drop assembly */ .tb-dropzone{min-height:220px;border:1.5px dashed var(--line-2);border-radius:12px;padding:10px; transition:border-color .12s ease,background .12s ease} .tb-dropzone.over{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 6%,transparent)} .tb-empty{display:grid;place-items:center;min-height:200px;text-align:center;padding:20px;font-size:12.5px} .tb-pal-item{cursor:grab;user-select:none} .tb-pal-item:active{cursor:grabbing} .tb-asm-item{position:relative;cursor:grab;border:1px solid transparent;border-radius:8px;padding:4px 26px 4px 4px} .tb-asm-item:hover{border-color:var(--line)} .tb-asm-del{position:absolute;top:2px;right:2px;opacity:0;transition:opacity .12s ease} .tb-asm-item:hover .tb-asm-del{opacity:1} .inv-thumb{width:26px;height:26px;object-fit:contain;border-radius:5px;background:var(--panel-3); vertical-align:middle;margin-right:7px;border:1px solid var(--line)} /* role legend (Team) */ .role-adv{display:inline-block;margin-left:6px;vertical-align:middle} .role-adv>summary{cursor:pointer;font-size:10.5px;color:var(--faint);list-style:none;user-select:none} .role-adv>summary::-webkit-details-marker{display:none} .role-adv>summary::before{content:"⋯";font-size:14px} .role-adv-body{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} .role-legend{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);overflow:hidden} .role-legend>summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:13px;list-style:none;user-select:none} .role-legend>summary::-webkit-details-marker{display:none} .role-legend>summary::before{content:"▸ ";color:var(--muted)} .role-legend[open]>summary::before{content:"▾ "} .role-legend .rl-body{padding:4px 16px 14px;border-top:1px solid var(--line)} .role-legend .rl-sec{margin-top:10px} .role-legend .rl-sec>b{font-size:12px;color:var(--accent)} .role-legend ul{margin:6px 0 0;padding-left:6px;list-style:none;display:flex;flex-direction:column;gap:5px} .role-legend li{font-size:12.5px;line-height:1.5} .role-legend code{background:var(--panel-3);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:11.5px;font-family:var(--mono);color:var(--ink)} /* colourway picker (Team → Appearance): two-tone preset swatches */ .cw-grid{display:flex;flex-direction:column;gap:12px;margin-top:10px} .cw-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .cw-lab{min-width:56px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .cw-sw{width:36px;height:36px;border-radius:50%;padding:0;cursor:pointer; border:2px solid var(--line);background:linear-gradient(135deg,var(--c1) 0 55%,var(--c2) 55% 100%); transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease} .cw-sw:hover{transform:translateY(-2px);border-color:var(--ink)} .cw-sw.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 18%,transparent)} /* app-switch splash: painted while the browser unloads into another platform app; mirrors the target app's boot splash so the handoff is one screen */ .app-switch{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:14px; align-items:center;justify-content:center;background:var(--bg);color:var(--ink)} .app-switch b{font-size:15px;font-weight:600} .app-switch .spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line); border-top-color:var(--accent-2);animation:aswspin .8s linear infinite} @keyframes aswspin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.app-switch .spin{animation:none}} /* app dock (platform launcher) + grant chips */ .dock-pop{min-width:280px} .dock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .dock-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px; padding:12px 6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2); text-decoration:none;color:var(--ink);font-size:11px;text-align:center; transition:border-color .12s ease,transform .12s ease} a.dock-tile:hover{border-color:var(--mc,var(--accent));transform:translateY(-2px)} .dock-tile.locked,.dock-tile.soon{opacity:.45;cursor:not-allowed} .dock-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center; font-weight:800;font-size:15px;color:#fff;background:var(--mc,var(--panel-3))} .dock-name{line-height:1.25} .dock-badge{position:absolute;top:4px;right:5px;font-size:8.5px;color:var(--faint)} .dock-link{display:block;margin-top:10px;padding:8px 10px;border:1px solid var(--line); border-radius:9px;background:var(--panel-2);color:var(--ink);text-decoration:none; font-size:12px;font-weight:600;text-align:center;transition:border-color .12s ease} .dock-link:hover{border-color:var(--accent)} .appchip{padding:2px 7px;font-size:10px;letter-spacing:.04em;color:var(--faint)} .appchip.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line)); background:color-mix(in srgb,var(--ok) 8%,transparent)} /* inventory database: collapsible groups + favourites */ .inv-ghead td{background:var(--panel-2);border-top:1px solid var(--line);cursor:pointer; padding-top:9px;padding-bottom:9px;user-select:none} .inv-ghead:hover td{background:var(--panel-3)} .inv-gcaret{display:inline-block;width:14px;color:var(--muted);font-size:11px;margin-right:2px} .inv-star{background:none;border:none;padding:0 6px 0 0;font-size:14px;line-height:1; color:var(--faint);cursor:pointer;vertical-align:middle} .inv-star:hover{color:var(--accent);background:none;border:none} .inv-star.on{color:var(--accent)} /* inventory: catalog-illustration auto-match + picker */ .inv-imgmatch{display:block;margin-top:5px;color:var(--accent-2)} .inv-catpicker{margin-top:8px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--panel-3)} .inv-catpicker>input{width:100%;margin-bottom:8px} .inv-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;max-height:240px;overflow-y:auto} .inv-catcell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border:1px solid var(--line); border-radius:8px;background:var(--panel);cursor:pointer;transition:border-color .12s,background .12s} .inv-catcell:hover{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 8%,var(--panel))} .inv-catcell img{width:56px;height:56px;object-fit:contain} .inv-catcell span{font-size:9.5px;line-height:1.15;text-align:center;color:var(--muted);max-height:23px;overflow:hidden} .tb-string{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;background:var(--panel-2); border:1px solid var(--line);border-radius:var(--r)} .tb-seg{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%} .tb-seg img{max-width:160px;max-height:120px;object-fit:contain;display:block} .tb-seg.empty{padding:8px;border:1px dashed var(--line-2);border-radius:var(--r-sm);width:auto;min-width:120px;text-align:center;margin:2px 0} .tb-seg-lbl{font-size:11px;color:var(--muted);font-weight:600;text-align:center} @media(max-width:980px){.grid{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:20px; box-shadow:var(--e1)} .card+.card{margin-top:16px} .fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .fields.three{grid-template-columns:repeat(3,1fr)} .fields label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--muted)} /* required fields carry an accent asterisk on the label */ .fields label:has([required])>span:first-child::after, label.block:has([required])>span:first-child::after{content:" *";color:var(--accent);font-weight:700} /* Lift Force — ribbon tabs (Word-style) + aligned field grid */ .lf-tabs{display:flex;gap:2px;border-bottom:1px solid var(--rib-line);margin:-10px -10px 16px;flex-wrap:wrap; background:var(--rib-bg);border-radius:var(--r) var(--r) 0 0;padding:4px 10px 0} .lf-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--rib-ink); font:inherit;font-size:13px;font-weight:600;padding:9px 15px;cursor:pointer;margin-bottom:-1px; transition:color .12s ease,border-color .12s ease} .lf-tab:hover{color:var(--ink)} .lf-tab.on{color:var(--rib);border-bottom-color:transparent; border-image:linear-gradient(90deg,var(--accent),var(--accent-2)) 1;border-bottom:2px solid} .lf-panel{animation:fadein .15s ease} .lf-panel > h3{margin:0 0 12px;font-size:14px;color:var(--ink)} .lf-panel > h3.lf-sub{margin-top:20px} .lf-modes{display:block;margin:0 0 14px;font-size:11px;color:var(--muted)} .lf-modes > span{display:block;margin-bottom:5px} .lf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:11px 16px;align-items:end} .lf-grid > label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);min-width:0} .lf-foot{display:flex;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .lf-foot .primary{min-width:172px} @media(max-width:600px){.lf-tab{padding:9px 10px;font-size:12px}} /* Owner billing console (Stripe setup) */ .ob-pill{font-size:11px;font-weight:700;padding:3px 11px;border-radius:20px;border:1px solid currentColor;letter-spacing:.3px} .ob-pill.ok{color:var(--ok)} .ob-pill.warn{color:var(--warn)} .ob-pill.off{color:var(--muted)} .ob-status{display:grid;gap:7px;margin-top:8px} .ob-row{display:flex;align-items:center;gap:9px;font-size:13px} .ob-tick{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700; color:var(--muted);background:var(--panel-2);border:1px solid var(--line);flex:none} .ob-tick.on{color:#10140c;background:var(--ok);border-color:var(--ok)} /* on --ok green, not the accent */ .ob-lbl{flex:1;color:var(--ink-2)} .ob-val{font-family:var(--mono);font-size:11px;color:var(--muted)} .ob-guide{margin-top:12px;line-height:1.65} .ob-guide code{background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:11px;font-family:var(--mono)} .ob-guide ol{margin:6px 0 0;padding-left:18px}.ob-guide li{margin:3px 0} /* Keys & Integrations (owner-managed encrypted secrets) */ .ok-list{display:grid;gap:10px;margin-top:4px} .ok-row{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--panel-2)} .ok-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .ok-lbl{font-weight:600;font-size:13px} .ok-inp{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:7px 9px;color:var(--ink)} .ok-name{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.3px;font-family:var(--mono)} .row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap} .row.end{justify-content:flex-end} .row.between{justify-content:space-between;margin:0} .select{width:auto;min-width:120px} .sticky-results{position:sticky;top:64px} /* Tables */ table{width:100%;border-collapse:collapse;font-size:12px} /* Design v2 dense tables: 32-33px rows, header in --panel-2 (10.5px uppercase muted), --line-soft dividers, row hover --hover. Numeric cells → .num (mono, right-aligned). Out-of-range values inherit status colours via .over/.under. */ .ts th,.ts td,.list th,.list td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line-soft)} .ts th,.list th{color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em; background:var(--panel-2);position:sticky;top:0;z-index:1} .list td.num,.list th.num,.ts td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums} .list tbody tr{transition:background .1s ease} .list tbody tr:hover td{background:var(--hover)} .list tbody tr.sel td{background:color-mix(in srgb,var(--accent) 8%,transparent)} .ts input{padding:4px 6px} .trash,.xrow{color:var(--danger);background:transparent;border:none;padding:2px 6px;cursor:pointer} .trash:hover,.xrow:hover{color:var(--danger);filter:brightness(1.2)} /* Lift results */ .results{min-height:220px} .placeholder{display:grid;place-items:center;height:100%;min-height:200px;text-align:center; padding:40px;color:var(--muted)} .verdict{padding:14px 14px 14px 17px;border-radius:10px;border:1px solid var(--line); margin-bottom:14px;background:var(--panel-2);position:relative;overflow:hidden} .verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)} .verdict.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 8%,var(--panel-2)),var(--panel-2))} .verdict.ok::before{background:var(--ok)} .verdict.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 8%,var(--panel-2)),var(--panel-2))} .verdict.warn::before{background:var(--warn)} .verdict.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 8%,var(--panel-2)),var(--panel-2))} .verdict.bad::before{background:var(--danger)} .verdict .v-t{font-size:15px;font-weight:700;margin-bottom:4px} .verdict.ok .v-t{color:var(--ok)} .verdict.warn .v-t{color:var(--warn)} .verdict.bad .v-t{color:var(--danger)} .sec-h{color:var(--accent-2);font-size:10px;text-transform:uppercase;letter-spacing:.08em; margin:16px 0 6px;font-weight:600} .metric{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)} .metric .k{color:var(--muted)} .metric .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;text-align:right} .metric .v small{color:var(--faint);font-weight:400} /* Design v2 status chips: pill, 11px/500, dot + label; fill = 13% status mix. Five families only: ok · info · warn · danger(.bad) · neutral. One per row. */ .chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 7px;border-radius:999px; font-size:11px;font-weight:500;line-height:1.5;font-family:var(--sans)} .chip.ok,.chip.warn,.chip.bad,.chip.info,.chip.neutral{position:relative} .chip.ok::before,.chip.warn::before,.chip.bad::before,.chip.info::before,.chip.neutral::before{ content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} /* Phone-style battery gauge (tool inventory). Fill + colour from --pct/--bc. */ .batt{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .batt-shell{position:relative;width:34px;height:15px;border:1.5px solid var(--line-2);border-radius:4px; background:var(--bg)} .batt-shell::after{content:"";position:absolute;right:-4.5px;top:3.5px;width:3px;height:6px; background:var(--line-2);border-radius:0 2px 2px 0} .batt-fill{position:absolute;inset:1.5px;width:calc((100% - 3px) * var(--pct, 0) / 100); border-radius:2px;background:var(--bc, var(--ok));transition:width .2s ease} .batt-txt{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--bc, var(--ok))} /* row flagged for battery change (<60%) */ tr.batt-low td{background:color-mix(in srgb,var(--warn) 6%,transparent)} tr.batt-low td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .chip.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)} .chip.warn{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn)} .chip.bad{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)} .chip.info{background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info)} .chip.neutral{background:color-mix(in srgb,var(--neutral) 14%,transparent);color:var(--neutral)} .bar{height:6px;border-radius:3px;background:var(--bg);overflow:hidden;margin:3px 0 9px} .bar>i{display:block;height:100%} /* Planner KPIs + congruence */ /* flex (not grid): a lone tile on the last row stretches to fill it instead of sitting at half width next to a hole */ .kpis{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px} .kpis>*{flex:1 1 150px;min-width:150px} .pl-kpi{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px 10px 14px; position:relative;overflow:hidden} .pl-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2));opacity:.7} .pl-kpi .l{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .pl-kpi .v{font-family:var(--mono);font-size:17px;font-weight:700;margin-top:2px} .pl-kpi .s{font-size:11px;color:var(--faint);margin-top:1px} .cong td{vertical-align:top;padding:8px 8px;border-bottom:1px solid var(--line)} .cong .fx{color:var(--accent-2);font-size:11px;margin-top:3px} .st{display:inline-block;padding:2px 7px;border-radius:var(--r-sm);font-size:10px;font-weight:700;font-family:var(--mono);white-space:nowrap} .st.P{background:rgba(90,209,122,.15);color:var(--ok)} .st.W{background:rgba(255,176,0,.15);color:var(--warn)} .st.F{background:rgba(255,90,82,.15);color:var(--danger)} .jarout{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:10px 12px;margin:10px 0;font-size:12px;color:var(--ink-2)} /* Canvases */ .chart{width:100%;border:1px solid var(--plot-border);border-radius:var(--r-sm);background:var(--plot-bg);display:block} .chart-info{font-size:11px;color:var(--faint);margin:5px 0 2px;font-family:var(--mono)} /* Design v2 toast: --panel-3, --e2, 2px status left border. */ .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%); background:var(--panel-3);border:1px solid var(--line);border-left:2px solid var(--ok);padding:8px 12px;border-radius:var(--r-m); z-index:50;box-shadow:var(--e2);animation:slideup .2s ease} .toast.bad{border-left-color:var(--danger);color:var(--danger)} .toast.ok{border-color:var(--ok)} /* "New version available" refresh prompt (survives on top of everything) */ .update-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9998; display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px; background:color-mix(in srgb,var(--panel-3) 97%,transparent);backdrop-filter:blur(8px); border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); box-shadow:0 14px 40px rgba(0,0,0,.5);animation:slideup .22s ease;max-width:calc(100vw - 24px)} .update-bar .update-txt{font-size:13.5px;font-weight:600} .update-bar .update-refresh{background:var(--accent);color:#161009;border:none;border-radius:8px; padding:7px 15px;font-weight:700;font-size:13px;cursor:pointer} .update-bar .update-refresh:hover{filter:brightness(1.06)} .update-bar .update-dismiss{background:none;border:none;color:var(--muted);font-size:20px;line-height:1; cursor:pointer;padding:0 4px} .update-bar .update-dismiss:hover{color:var(--ink)} @media print{.topbar,.nav,.row,#computeBtn,#plSolveBtn{display:none!important}} /* Segmented controls */ .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .seg.wide{display:flex} .seg button{background:transparent;border:0;border-right:1px solid var(--line);color:var(--muted); padding:6px 12px;border-radius:0;font-size:12px} .seg.wide button{flex:1} .seg button:last-child{border-right:0} .seg button:hover{color:var(--accent)} .seg button.on{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 78%,var(--accent-2))); color:var(--accent-ink);font-weight:700} label.inline{flex-direction:row;align-items:center;gap:6px;width:auto} label.inline input{width:auto} label.block{display:block;margin-top:10px;font-size:12px;font-weight:500;color:var(--muted)} label.block textarea{width:100%;margin-top:4px;background:var(--bg);color:var(--ink);border:1px solid var(--line); border-radius:var(--r-sm);padding:7px 9px;font:inherit;font-size:12px;resize:vertical} /* Button spinner + loading */ .primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px} .spinner{width:14px;height:14px;border:2px solid rgba(16,20,12,.35);border-top-color:var(--accent-ink); border-radius:50%;display:none;animation:spin .6s linear infinite} button.loading .spinner{display:inline-block} button.loading .btn-label{opacity:.7} button.loading{pointer-events:none} @keyframes spin{to{transform:rotate(360deg)}} @keyframes slideup{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .results .verdict,.results .sec-h,.results .metric,.kpis,.cong{animation:fadein .25s ease both} .results.busy{position:relative;opacity:.55;pointer-events:none} .results.busy::after{content:'';position:absolute;inset:0;display:grid;place-items:center} .results.busy::before{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px; margin:-13px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%; animation:spin .7s linear infinite;z-index:2} /* Active-job chip (carries through the workflow) */ .projchip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-3);border:1px solid var(--accent-2); color:var(--ink);border-radius:999px;padding:4px 10px;font-size:12px;max-width:220px;cursor:pointer} .projchip .pic{opacity:.85} .projchip .x{color:var(--faint);font-weight:700;margin-left:2px} .projchip:hover .x{color:var(--danger)} .projchip .save-state{color:var(--faint);font-size:11px;font-style:italic} .projchip .save-state.err{color:var(--danger)} .grid.two{grid-template-columns:1fr 1fr} @media(max-width:980px){.grid.two{grid-template-columns:1fr}} .tb-grp{width:100%;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:10px 2px 2px} /* collapsible catalog category header */ .tb-grp-btn{display:flex;align-items:center;gap:7px;width:100%;background:var(--panel-3);border:1px solid var(--line); border-radius:8px;padding:7px 10px;margin:10px 0 4px;cursor:pointer;text-align:left;transition:border-color .12s,background .12s} .tb-grp-btn:hover{border-color:color-mix(in srgb,var(--accent-2) 45%,var(--line));background:color-mix(in srgb,var(--accent-2) 6%,var(--panel-3))} .tb-grp-caret{font-size:10px;color:var(--accent-2);width:10px;display:inline-block} .tb-grp-count{margin-left:auto;font-size:10px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1px 7px;letter-spacing:0} .tb-grp-items{display:flex;flex-direction:column;gap:10px} /* to-scale string: a continuous stack whose tool images butt together (each image's height = its row height ∝ length), the whole thing shrinking to fit and then scrolling internally so a long string is always fully visible. Labels/fields sit to the side, vertically centred against each tool. */ .tb-string.scaled{gap:0;padding:14px 6px;max-height:70vh;overflow-y:auto} .tb-seg.scaled{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:0;margin:0} .tb-seg.scaled .tb-seg-imgwrap{grid-column:2;position:relative;display:flex;justify-content:center;align-items:flex-start;overflow:visible} .tb-seg.scaled .tb-seg-imgwrap img{width:auto;max-width:120px;max-height:none;margin:0;object-fit:contain;display:block} .tb-seg.scaled img{grid-column:2;width:auto;max-width:120px;max-height:none;margin:0 auto;object-fit:contain;display:block} /* to-scale sensor markers on the string (NS-style): a tick at the tool centreline, its label reaching left into the margin so it never covers the edit fields. */ .tb-sensor{position:absolute;right:50%;transform:translateY(-50%);display:flex;flex-direction:row-reverse; align-items:center;gap:3px;white-space:nowrap;pointer-events:none;z-index:3} .tb-sensor i{width:15px;height:2px;background:var(--accent-2);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)} .tb-sensor b{font-size:9px;font-weight:700;color:#06222a;background:var(--accent-2);border-radius:3px;padding:1px 5px;letter-spacing:.02em} .tb-seg.scaled.empty{border:none;padding:0;min-width:0;margin:0} .tb-seg.scaled .tb-seg-ph{grid-column:2;justify-self:center;padding:0 8px;font-size:11px;color:var(--muted);text-align:center} .tb-seg.scaled .tb-seg-lbl{grid-column:3;justify-self:start;padding-left:10px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px} .tb-seg.scaled .tb-seg-side{grid-column:3;justify-self:start;padding-left:10px} .tb-seg.scaled .tb-asm-del{grid-column:1;justify-self:end;margin-right:10px;opacity:0;transition:opacity .12s} .tb-seg.scaled:hover .tb-asm-del{opacity:1} .tb-seg.scaled:hover{background:color-mix(in srgb,var(--accent-2) 5%,transparent)} .tb-seg-side{display:flex;flex-direction:column;gap:3px} .tb-seg-fields{display:flex;gap:4px} .tb-seg-fields .tb-f{width:58px;font-size:11px;padding:2px 4px;border:1px solid var(--line-2);border-radius:4px;background:var(--panel);color:var(--ink)} .tb-seg-fields .tb-f:focus{border-color:var(--accent);outline:none} .tb-plt{margin-top:12px} .tb-plt .tb-warn{margin:6px 0;padding:6px 9px;border-radius:6px;background:rgba(230,160,60,.14);border:1px solid var(--warn,#e6a03c);color:var(--warn,#e6a03c);font-size:12px} .tb-sens{width:100%;font-size:12px} .tb-sens td,.tb-sens th{padding:3px 6px} .calc-out{margin-top:12px;padding:12px;border-radius:8px;background:var(--panel-3);border:1px solid var(--line)} .calc-out .calc-big{font-size:22px;font-weight:700;color:var(--accent)} .calc-sub{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px;border-top:1px solid var(--line);padding-top:8px} /* Tractor advisor */ .tr-verdict{margin:4px 0 12px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel-3);font-weight:600} .tr-verdict.ok{border-color:#2faa6a;background:rgba(47,170,106,.10)} .tr-verdict.warn{border-color:#d59a2b;background:rgba(213,154,43,.12)} .tr-verdict.bad{border-color:#d55;background:rgba(221,85,85,.12)} .tr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .tr-kpi{padding:8px 10px;border-radius:8px;background:var(--panel-3);border:1px solid var(--line);display:flex;flex-direction:column;gap:1px} .tr-kpi .k{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)} .tr-kpi b{font-size:17px;color:var(--accent);line-height:1.1} .tr-kpi .s{font-size:10px;color:var(--muted)} .tr-rectab{width:100%;font-size:12px;border-collapse:collapse;margin-top:4px} .tr-rectab th,.tr-rectab td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left} .tr-rectab tr.on td{background:rgba(67,208,196,.08)} .tr-pick{font-size:10px;color:#2faa6a;font-weight:700;margin-left:4px} .tr-nofit{font-size:10px;color:#d59a2b;margin-left:4px} .tr-rectab .ok{color:#2faa6a}.tr-rectab .bad{color:#d55} .tr-chartwrap{margin-top:12px;overflow-x:auto} .tr-chartwrap canvas{max-width:100%;height:auto;background:var(--panel-3);border:1px solid var(--line);border-radius:8px} .tr-notes{margin-top:10px;line-height:1.6} @media(max-width:720px){.tr-kpis{grid-template-columns:repeat(2,1fr)}} /* Native date inputs: in dark mode tell the browser to render the control (incl. the calendar-picker glyph) dark, so the icon is light and legible instead of a dark glyph on a dark field. Light mode keeps the default dark glyph on the light field. */ [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="month"]{ color-scheme: dark; } .list tr.active-row td{background:rgba(67,208,196,.08)} .list tr.active-row td:first-child{box-shadow:inset 3px 0 0 var(--accent-2);font-weight:600} /* Subscription banner */ .subbanner{padding:8px 16px;font-size:12px;text-align:center;border-bottom:1px solid var(--line); background:var(--panel-2);color:var(--muted);animation:fadein .2s ease} .subbanner.trial{background:rgba(255,176,0,.1);color:var(--warn);border-color:var(--warn)} .subbanner.expired{background:rgba(255,90,82,.12);color:var(--danger);border-color:var(--danger);font-weight:600} .subbtn{margin-left:12px;padding:3px 12px;font-size:12px;font-weight:600;cursor:pointer; border-radius:6px;border:1px solid currentColor;background:transparent;color:inherit; transition:background .15s ease,opacity .15s ease} .subbtn:hover{background:rgba(255,255,255,.12)} .subbtn:disabled{opacity:.6;cursor:default} /* Top-right "Subscribe now" CTA — a prominent gold pill in the dark-blue ribbon. */ .subnow{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);font-weight:700; padding:5px 13px;border-radius:999px;font-size:12px;white-space:nowrap; box-shadow:0 1px 6px rgba(255,176,0,.25)} .subnow:hover{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--accent-ink)} .subnow.hidden{display:none} /* Pricing modal */ .modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; background:rgba(4,7,11,.66);backdrop-filter:blur(3px);padding:20px;animation:fadein .15s ease} .modal-card{position:relative;background:var(--panel);border:1px solid color-mix(in srgb,var(--accent-2) 16%,var(--line)); border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 5px color-mix(in srgb,var(--accent-2) 5%,transparent); max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:26px 26px 20px} .modal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2))} .modal-card.pricing h2{margin:0 0 4px;font-size:20px} .price-sub{margin:0 0 18px} .modal-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border:none;border-radius:6px; background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer} .modal-close:hover{background:var(--panel-3);color:var(--ink)} /* Styled dialogs (uiConfirm/uiPrompt/uiForm) — replaces native alert/prompt/confirm */ .ui-dialog-card{max-width:440px;width:100%;padding:22px 24px} .ui-dialog-card .uid-title{font-size:18px;font-weight:700;margin:0 0 6px;padding-right:28px;letter-spacing:-.01em} .ui-dialog-card .uid-msg{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 16px;white-space:pre-line} .ui-dialog-card .uid-fields:not(:empty){margin-bottom:18px} .ui-dialog-card .uid-f{display:block;margin-bottom:13px} .ui-dialog-card .uid-f:last-child{margin-bottom:0} .ui-dialog-card .uid-f>span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:500} .ui-dialog-card .uid-in{width:100%;padding:9px 11px;font-size:14px;background:var(--panel-2);color:var(--ink); border:1px solid var(--line);border-radius:8px;outline:none;transition:border-color .12s} .ui-dialog-card .uid-in:focus{border-color:var(--accent)} .ui-dialog-card .uid-hint{display:block;font-size:11px;color:var(--faint);margin-top:4px;font-style:normal} .ui-dialog-card .uid-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px} .ui-dialog-card .uid-actions button{min-width:100px} .ui-dialog-card .primary.danger{background:var(--danger);border-color:var(--danger);color:#fff} .ui-dialog-card .primary.danger:hover{filter:brightness(1.08)} .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .plan-card{position:relative;border:1px solid var(--line);border-radius:11px;padding:18px 16px 16px; background:linear-gradient(180deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 55%,transparent)); display:flex;flex-direction:column;gap:6px;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease} .plan-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,0,0,.4)} .plan-card.hot{border-color:color-mix(in srgb,var(--accent-2) 55%,var(--line)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 8%,transparent)} .plan-badge{position:absolute;top:-10px;right:12px;background:var(--accent);color:#1a1205;font-weight:700; font-size:11px;padding:2px 9px;border-radius:20px;letter-spacing:.3px} .plan-name{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600} .plan-price{font-size:28px;font-weight:700;color:var(--ink);font-family:var(--mono)} .plan-per{font-size:13px;font-weight:400;color:var(--muted);font-family:var(--sans)} .plan-pick{margin-top:8px;width:100%;justify-content:center} /* Team dashboard: seat usage + invite. */ .seat-chip{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line); border-radius:20px;padding:2px 10px} .seat-chip.full{color:var(--warn);border-color:var(--warn)} .badge-invited{font-size:11px;font-weight:600;color:var(--accent-2);border:1px solid var(--accent-2); border-radius:20px;padding:2px 9px} .invite-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px; padding:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r)} .invite-form input[type=email]{flex:1 1 220px;min-width:0} /* Enterprise tier cards sit on their own row under a full-width group label. */ .plan-group-label{grid-column:1/-1;margin:6px 0 -2px;font-size:11px;text-transform:uppercase; letter-spacing:.6px;color:var(--accent-2);font-weight:700} .plan-badge.team{background:var(--accent-2);color:#06201d} .plan-note-sm{font-size:12px;color:var(--ink-2);font-weight:600} .feature-list{margin-top:20px;border-top:1px solid var(--line);padding-top:16px} .feature-head{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;margin-bottom:10px} .feature-list ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .feature-list li{position:relative;padding-left:24px;color:var(--ink-2);font-size:13px} .feature-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent-2);font-weight:700} .price-foot{margin:16px 0 0;text-align:center} .price-note{margin:12px 0 0;text-align:center;font-size:12px;color:var(--warn); background:rgba(255,176,0,.1);border:1px solid var(--warn);border-radius:var(--r-sm);padding:8px 12px} .price-note.hidden{display:none} @media(max-width:520px){.plan-grid{grid-template-columns:1fr}} /* ───────── Landing page ───────── */ .landing{min-height:100vh;display:flex;flex-direction:column} /* landing-scoped accent: the app's muddy light-mode gold reads flat on white — brighten it (marketing surface only; the app keeps its own accent) */ [data-theme="light"] .landing{--accent:#d97706;--accent-dim:#b45309} .landing .primary.lg{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--accent-2))); border:none;box-shadow:0 8px 26px -8px color-mix(in srgb,var(--accent) 65%,transparent)} .landing .primary.lg:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,var(--accent-2)))} .hero{position:relative;overflow:hidden;padding:88px 24px 70px;text-align:center} .hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(720px 380px at 50% -8%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%), radial-gradient(560px 340px at 80% 30%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 70%), radial-gradient(480px 300px at 12% 60%,color-mix(in srgb,var(--rib) 14%,transparent),transparent 70%)} /* blueprint grid — faint engineering-paper lines behind the hero, fading out */ .hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(75% 80% at 50% 30%,#000 30%,transparent 100%); mask-image:radial-gradient(75% 80% at 50% 30%,#000 30%,transparent 100%)} .eyebrow{display:inline-block;font-size:12px;letter-spacing:.6px;text-transform:uppercase;font-weight:700; color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 12%,transparent);padding:5px 13px;border-radius:20px;margin-bottom:18px} .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .primary.lg,.ghost.lg{padding:12px 24px;font-size:15px} /* ── Platform module grid: one card per suite, coloured by --mc ─────────── */ .plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:24px} .plat-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 16px 16px; background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--mc,var(--line-2)); border-radius:12px;text-decoration:none;color:var(--ink); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} a.plat-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--mc) 55%,var(--line));border-top-color:var(--mc); box-shadow:0 16px 34px -20px var(--mc)} .plat-card h3{margin:0;font-size:14.5px;padding-right:74px} .plat-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;flex:1} .plat-status{position:absolute;top:12px;right:12px;font-size:9px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:2.5px 8px;border-radius:99px;border:1px solid} .plat-status.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent)} .plat-status.internal{color:color-mix(in srgb,var(--mc) 65%,var(--ink)); border-color:color-mix(in srgb,var(--mc) 45%,transparent);background:color-mix(in srgb,var(--mc) 10%,transparent)} .plat-status.plan{color:var(--faint);border-color:var(--line-2)} .plat-go{font-size:12px;font-weight:700;color:color-mix(in srgb,var(--mc) 65%,var(--ink))} .plat-ai{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:16px 18px;border-radius:12px; border:1px dashed color-mix(in srgb,var(--mc) 55%,var(--line));background:color-mix(in srgb,var(--mc) 6%,transparent)} .plat-ai-badge{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center; font-weight:800;font-size:13px;color:#fff;background:var(--mc)} .plat-ai h3{margin:0 0 4px;font-size:14px;color:color-mix(in srgb,var(--mc) 55%,var(--ink))} .plat-ai p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:760px} .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px} .feat-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:22px; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease} .feat-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;opacity:0; background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:opacity .16s ease} .feat-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent-2) 45%,var(--line)); box-shadow:0 14px 34px rgba(0,0,0,.28)} .feat-card:hover::after{opacity:1} .feat-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px; color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent-2) 14%,transparent))} .feat-ic svg{width:22px;height:22px} .feat-card h3{margin:0 0 7px;font-size:15px} .feat-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5} /* workflow — wellbore trajectory runs behind the three stations */ .wf-wrap{position:relative} .wf-bore{position:absolute;inset:-14px 0;width:100%;height:calc(100% + 28px);pointer-events:none;opacity:.55} .wf-bore .casing{stroke:var(--line-2);stroke-width:12;fill:none;stroke-linecap:round} .wf-bore .bore{stroke:var(--bg);stroke-width:8;fill:none;stroke-linecap:round} .wf-bore .wire{stroke:var(--accent-2);stroke-width:1.6;fill:none;stroke-dasharray:7 6} .wf-steps{position:relative;display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px} .wf-step{flex:1;min-width:200px;max-width:300px;background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(3px);border:1px solid var(--line); border-radius:12px;padding:20px;text-align:center} .wf-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-bottom:10px; font-family:var(--mono);font-weight:700;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-2))} .wf-step h3{margin:0 0 6px;font-size:15px} .wf-step p{margin:0;color:var(--muted);font-size:13px} .wf-sep{display:flex;align-items:center;color:var(--accent);font-size:22px;font-weight:700} .auth-back{position:absolute;top:14px;left:14px;background:transparent;border:none;color:var(--muted); cursor:pointer;font-size:13px;padding:4px} .auth-back:hover{color:var(--ink)} @media(max-width:860px){.feat-grid,.secure-points{grid-template-columns:1fr 1fr}} @media(max-width:620px){ .feat-grid,.secure-points{grid-template-columns:1fr} .wf-sep{transform:rotate(90deg)} .lnav{padding:12px 16px;flex-wrap:wrap} .lsec{padding:40px 18px} .hero{padding:60px 18px 50px} } /* Inline error banner */ .errbar{background:rgba(255,90,82,.12);border:1px solid var(--danger);color:var(--danger); padding:9px 12px;border-radius:var(--r-sm);margin-bottom:12px;font-size:12px;animation:fadein .2s ease} /* Units selector bar */ .unitsbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 10px;margin-bottom:10px; background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)} .unitsbar .ulbl{font-size:11px;color:var(--accent-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em} .unitsbar .uin{display:flex;flex-direction:row;align-items:center;gap:5px;font-size:11px;color:var(--muted);width:auto} .unitsbar .uin select{width:auto;min-width:64px;padding:4px 6px;font-size:11px} .us{color:var(--faint);font-weight:400;font-size:.92em} .fields label .us,.ts th .us{margin-left:1px} /* Risk graph */ .riskchart{width:100%;height:280px;border:1px solid var(--plot-border);border-radius:10px; background:var(--plot-bg);display:block;margin-top:6px} .risklegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--muted)} .risklegend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle} .riskpoint{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line);font-size:12px} .riskpoint .lvl{font-family:var(--mono);font-weight:700} .lvl.warn{color:var(--warn)} .lvl.bad{color:var(--danger)} .lvl.peak{color:var(--accent)} /* ===== Mobile / phone ===== */ @media(max-width:760px){ body{font-size:13px} .topbar{flex-wrap:wrap;gap:8px;padding:8px 10px;position:sticky} .topbar strong{display:none} .nav{order:3;width:100%;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch; flex-wrap:nowrap;padding-bottom:2px} .navbtn{flex:0 0 auto;white-space:nowrap} #who{display:none} .spacer{display:none} .view{padding:12px} .grid{grid-template-columns:1fr;gap:12px} .fields,.fields.three{grid-template-columns:1fr 1fr} .sticky-results{position:static} .card{padding:14px} .auth{padding:14px} .auth-card{padding:22px} table{font-size:11px} .ts th,.ts td,.list th,.list td{padding:5px 5px} .kpis{grid-template-columns:1fr 1fr} .row.between{flex-wrap:wrap;gap:8px} .riskchart{height:230px} } @media(max-width:420px){ .fields,.fields.three{grid-template-columns:1fr} .kpis{grid-template-columns:1fr} .seg.wide button{padding:6px 6px;font-size:11px} } /* ── customizable report builder ── */ .rb-grid{display:grid;grid-template-columns:282px 1fr;gap:16px;margin-top:12px} .rb-cfg{display:flex;flex-direction:column;gap:8px} .rb-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-2);font-weight:700;margin-top:6px} .rb-fields{display:flex;flex-direction:column;gap:7px} .rb-fld{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)} .rb-fld input{width:100%} .rb-logo-row{display:flex;align-items:center;gap:6px} .rb-logo-row input[type=file]{font-size:11px;color:var(--ink);min-width:0} .rb-sections{display:flex;flex-direction:column;gap:8px} .rb-grp{border:1px solid var(--line);border-radius:8px;padding:7px 9px;background:var(--panel-2)} .rb-grp-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:5px} .rb-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);padding:3px 0;cursor:pointer} .rb-chk input{flex:0 0 auto;width:15px;height:15px} .rb-chk span{flex:1 1 auto;min-width:0;line-height:1.3} .rb-actions{gap:8px;margin-top:10px;flex-wrap:wrap} .rb-tpl{gap:8px;margin-top:2px} .ghost.mini{padding:3px 8px;font-size:11px} .rb-preview{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);max-height:72vh;overflow:auto} .rb-preview #reportOut{padding:0} .rb-preview #reportOut.muted{padding:16px} .rb-toolbar{position:sticky;top:0;z-index:2;display:flex;gap:8px;justify-content:flex-end;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--line)} .rb-preview .report-doc{border-radius:0 0 10px 10px} @media(max-width:820px){ .rb-grid{grid-template-columns:1fr} .rb-preview{max-height:none} } /* ── guided tour / onboarding ── */ #tourSpot{position:fixed;z-index:10000;border-radius:10px;border:2px solid var(--accent); box-shadow:0 0 0 9999px rgba(6,10,18,.66);pointer-events:none;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;display:none} #tourPop{position:fixed;z-index:10001;width:330px;max-width:92vw;background:var(--panel);border:1px solid var(--line); border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.55);padding:16px 18px;color:var(--ink);display:none;animation:tourpop .2s ease} @keyframes tourpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes slkConfetti{to{top:104vh;transform:rotate(720deg)}} .tour-prog{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.04em;margin-bottom:6px} #tourPop h3{margin:0 0 6px;font-size:16px} #tourPop p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)} #tourPop p b{color:var(--ink)} .tour-acts{display:flex;align-items:center;gap:8px;margin-top:16px} .tour-acts .spacer{flex:1} .tour-acts button{font-size:12px;padding:7px 14px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)} .tour-acts .tour-skip{border:0;background:transparent;color:var(--muted);padding:7px 6px} .tour-acts .tour-skip:hover{color:var(--ink)} .tour-acts .tour-back[disabled]{opacity:.4;cursor:default} .tour-acts .tour-next{background:var(--accent);border-color:var(--accent);color:#10151b;font-weight:700} .tour-dots{display:flex;gap:5px;justify-content:center;margin-top:12px} .tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s} .tour-dots i.on{background:var(--accent);transform:scale(1.25)} /* ── Show/hide password toggle (eye) ─────────────────────────────────────── */ .pw-wrap{position:relative;display:block} .pw-wrap input{width:100%;padding-right:34px;box-sizing:border-box} .pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--muted);font-size:14px;padding:2px 6px;line-height:1} .pw-toggle:hover{color:var(--ink)} /* ── Fullscreen comfort ────────────────────────────────────────────────────── The form-centric views (job details, tool builder, planner inputs, program) read badly stretched across a wide monitor — cap and center them. The suite and dashboard stay full-bleed. */ #view-projects, #view-program, #view-builder, #view-planner { max-width: 1240px; margin-left: auto; margin-right: auto; } /* Lift Force is dense (inputs + report + live results) - give it more room. */ #view-calc { max-width: 1800px; margin-left: auto; margin-right: auto; } /* ── Lift Force layout: results own the right column; the report builder sits under the inputs, so computing grows the results without pushing the report tools around (and the short input column no longer leaves dead space). ── */ #view-calc .grid{grid-template-areas:"inputs results" "report results"} #view-calc .lf-card{grid-area:inputs} #view-calc #results{grid-area:results;min-height:260px} #view-calc #reportCard{grid-area:report;min-width:0} @media(max-width:980px){#view-calc .grid{grid-template-areas:"inputs" "results" "report"}} /* In the Lift Force left column the report preview must get the card's full width (the side-rail layout squeezed the document to a skinny strip): stack the builder config ABOVE the preview and let the config lay out in compact columns instead. */ #view-calc .rb-grid{grid-template-columns:1fr} #view-calc .rb-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px} #view-calc .rb-sections{columns:2;column-gap:18px} #view-calc .rb-preview{max-height:78vh} /* Utilisation gauge + overpull alarm (Lift Force safety panel) */ .bar.gauge{height:7px} .bar.gauge i{transition:width .25s} .alarm{margin:8px 0 2px;padding:7px 10px;border-radius:7px;font-weight:600;font-size:12px; background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 45%,transparent)} /* Perforated-tubing toggle in the Fluids tab */ .lf-check{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:13px;cursor:pointer} .lf-check input{width:auto;margin:0} /* loading skeletons (premium pass) */ .skel{position:relative;overflow:hidden;background:var(--panel-2);border-radius:8px;color:transparent!important;min-height:12px} .skel::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 5%,transparent),transparent); animation:skel 1.2s infinite} @keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){.skel::after{animation:none}} /* SVG icon sizing */ .ic{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block} .sb-ic .ic{width:17px;height:17px} .stat-ico .ic{width:22px;height:22px} .ql-ico .ic{width:20px;height:20px} /* light theme: cards read as paper — no visible borders, layered soft shadow */ [data-theme="light"] .card{border-color:transparent;box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px -14px rgba(16,24,40,.10)} [data-theme="light"] .stat{border-color:transparent;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 20px -12px rgba(16,24,40,.08)} [data-theme="light"] .topbar{background:var(--panel)} /* SLK logo chips: navy monogram needs a light plate on dark surfaces */ .logo-chip{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center; background:#f4f6f9;border-radius:11px;padding:5px;box-shadow:0 1px 3px rgba(0,0,0,.25)} .logo-chip img{width:100%;height:100%;object-fit:contain;display:block} .logo-chip.lg-chip{width:36px;height:36px;border-radius:9px;padding:4px} .logo-chip.auth-chip{width:56px;height:56px;border-radius:13px;padding:6px} .nav-logo{width:36px;height:36px;object-fit:contain;display:block} /* chart empty state (UX review #8) */ .chart-empty{display:grid;place-items:center;height:120px;color:var(--faint);font-size:12px;text-align:center;padding:0 12px} /* recent-jobs guided empty state (UX review #9) */ .dash-empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 2px} /* DHMG per-gauge cards: stitch summary + clock correction */ .dg-gauge{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;font-size:12.5px} .dg-gauge-head{color:var(--ink);} .dg-gauge .mono{font-family:"IBM Plex Mono",monospace} .dg-shift-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted);flex-wrap:wrap} .dg-shift-row input{max-width:230px;font-family:"IBM Plex Mono",monospace;font-size:12px} .dg-shift-badge{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-size:11px;margin-left:6px;vertical-align:1px} .dg-gap{color:var(--accent-dim);font-size:12px;margin-top:4px} .dg-spike{color:var(--accent-2);font-size:12px;margin-top:4px} /* inventory: docs button with an expired/expiring certificate inside */ button.doc-warn{border-color:var(--warn);color:var(--warn)} /* MFC interpretation zones + track tooltip + help */ .mfc-zone{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border:1px solid var(--line); border-radius:8px;margin-top:6px;cursor:pointer;transition:border-color .12s ease} .mfc-zone:hover{border-color:var(--accent)} .mfc-zone .chip{flex:none} .mfc-tip{position:absolute;pointer-events:none;display:none;z-index:5;white-space:nowrap; background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:4px 9px; font:11px "IBM Plex Mono",ui-monospace,monospace;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.25)} .mfc-help{margin-top:14px;font-size:12.5px} .mfc-help summary{cursor:pointer;color:var(--muted);font-weight:600} .mfc-help summary:hover{color:var(--accent)} /* Log QC & Prep operation groups */ .lq-sec{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px} .lq-sec summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted)} .lq-sec summary:hover{color:var(--accent)} .lq-sec[open] summary{margin-bottom:8px;color:var(--ink)} .lq-row{gap:8px;align-items:center;flex-wrap:wrap} .lq-row .muted.small{flex:none} /* Beta release tag shown next to the product name while the suite is in beta */ .beta-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);line-height:1.5;vertical-align:middle;white-space:nowrap} .sb-beta{align-self:flex-start;margin-top:4px;font-size:8.5px;padding:1px 6px} @media (max-width:900px){.lnav-brand .beta-tag{display:none}} /* auth card: beta tag on its own row + a visible forgot-password control */ .beta-row{margin:2px 0 4px} .forgot-btn{margin-top:10px;width:100%;background:none;border:1px dashed var(--line);color:var(--muted);padding:9px 12px;border-radius:8px;font-size:13px;cursor:pointer} .forgot-btn:hover{color:var(--accent);border-color:var(--accent);background:none} /* Well data reuse — "load saved well" banner on the job-details form */ .wr-banner{grid-column:1/-1;flex-basis:100%;width:100%;display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;background:color-mix(in srgb,var(--accent) 10%,var(--panel));border:1px solid var(--accent); border-radius:10px;padding:10px 14px;font-size:13.5px;color:var(--ink);margin-top:2px} .wr-banner .wr-msg b{color:var(--accent)} .wr-banner .wr-act{display:flex;gap:8px;flex:0 0 auto} .wr-banner button{padding:6px 12px;font-size:13px;margin:0} /* "Remember me" checkbox row on the sign-in form. Written as `.form label.…` deliberately: the generic `.form label` rule above is class+element (0,1,1) and its flex-direction:column beat the plain `.remember-row` class (0,1,0), stacking the checkbox on top of its own label text. */ .form label.remember-row,.remember-row{display:flex;align-items:center;gap:8px;flex-direction:row;cursor:pointer; color:var(--muted);font-size:13px;margin:2px 0 2px;user-select:none} .remember-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;margin:0;flex:0 0 auto} .remember-row:hover{color:var(--ink-2)} /* "← Back to sign in" — a clean themed text link, not the default browser blue */ .auth-back-wrap{margin-top:14px;text-align:center} .auth-back{color:var(--muted);text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.01em;transition:color .15s ease} .auth-back:hover,.auth-back:focus-visible{color:var(--accent)} /* Register: Solo / Team account-type chooser + team info callout */ .acctseg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px} .acctseg-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);cursor:pointer} .acctseg-btn b{font-size:13px;color:var(--ink)} .acctseg-btn:hover{border-color:var(--accent)} .acctseg-btn.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel-2));box-shadow:inset 0 0 0 1px var(--accent)} .acctseg-btn.on b{color:var(--accent)} .acct-info{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--accent);border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:12.5px;line-height:1.5;margin-bottom:2px} .acct-info b{color:var(--accent)} /* Settings entry + changelog chip in the sidebar footer */ .sb-user-btn{background:none;border:none;padding:6px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;text-align:left} .sb-user-btn:hover{background:rgba(255,255,255,.06)} .sb-ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .sb-changelog{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tb-muted,var(--muted));text-decoration:none;padding:4px 6px;border-radius:8px} .sb-changelog:hover{color:var(--accent)} /* ── Tool-string catalog picker ─────────────────────────────────────────── */ .ts-cat{position:relative;display:inline-block} .ts-cat-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:340px;max-width:82vw; background:var(--panel,#fff);border:1px solid var(--line);border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.22);padding:8px;display:flex;flex-direction:column;gap:6px} .ts-cat-pop.hidden{display:none} .ts-cat-pop input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line); border-radius:8px;background:var(--panel-2,var(--panel));color:var(--ink);font:inherit;font-size:13px} .ts-cat-pop input:focus{outline:none;border-color:var(--accent)} .ts-cat-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:1px} .ts-cat-head{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); padding:8px 8px 3px;position:sticky;top:0;background:var(--panel,#fff)} .ts-cat-item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%; text-align:left;padding:7px 9px;border:0;border-radius:7px;background:transparent;color:var(--ink); font:inherit;cursor:pointer} .ts-cat-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)} .tci-name{font-size:13px;font-weight:500} .tci-dim{font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto} .ts-cat-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px} /* Offline status pill (PWA) — appears when the browser reports no connection */ #offlinePill{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:9999; background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease;max-width:92vw} #offlinePill.show{transform:translate(-50%,0);opacity:1} /* ── Landing v2 (design screen 06) ────────────────────────────────────────── */ @media(max-width:1000px){.mods2-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){.val-grid{grid-template-columns:1fr}} @media(max-width:768px){ .lnav{padding:10px 14px} .lnav-links,.lnav .lnav-signin,.lnav .lang{display:none} .lnav-burger{display:flex} .mods2-grid{grid-template-columns:1fr} .hero-cta{flex-direction:column} .hero-cta .primary,.hero-cta .ghost{width:100%} .cta-band{padding:20px 16px} .cta-right{margin-left:0} } /* ============================================================ Engineering Suite — top navigation (mega-menu + ⌘K palette). Replaces the old dark left sidebar; the suite now matches the rest of the platform (white top bar). Every colour is a token so the 10-theme × dark/light × per-org system keeps working. ============================================================ */ .main-col{min-height:100vh} /* ── top app bar (white) ── */ .topbar.tnav-bar{gap:14px;padding:0 20px;min-height:56px;height:56px; background:var(--topbar,var(--panel));border-bottom:1px solid var(--line);color:var(--ink)} .tn-brand{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;cursor:pointer;flex:none} .tn-logo{width:34px;height:34px;border-radius:9px;overflow:hidden;border:1px solid var(--line);flex:none;background:var(--panel)} .tn-logo img{width:100%;height:100%;object-fit:cover;display:block} .tn-id{display:flex;flex-direction:column;line-height:1.15;text-align:left} .tn-id-top{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap} .tn-id-top i{font-style:normal;font-weight:600;color:var(--muted)} .tn-beta{font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--faint)} /* primary tabs — reuse .navbtn.step hooks, restyled as top tabs */ .tnav{display:flex;align-items:center;gap:18px;height:56px;margin:0} .tnav-bar .navbtn.tn-tab{display:inline-flex;align-items:center;gap:6px;height:56px;padding:0; background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0; font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:color .12s} .tnav-bar .navbtn.tn-tab:hover{color:var(--accent-text);background:transparent} .tnav-bar .navbtn.tn-tab.on{color:var(--accent-text);font-weight:600;border-bottom-color:var(--accent)} .tn-chev{transition:transform .18s ease} .navbtn.tn-mega.mega-open .tn-chev{transform:rotate(180deg)} .navbtn.tn-mega.mega-open{color:var(--accent-text)} /* soft-lock: 🔒 on Engineering / Logs until a job is active */ .tnav-bar .navbtn.tn-tab.locked{opacity:.55} .tnav-bar .navbtn.tn-tab.locked::after{content:"🔒";font-size:.8em;margin-left:1px} /* search field → opens the palette */ .tn-search{display:flex;align-items:center;gap:9px;flex:none;min-width:240px;max-width:320px; background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:8px 12px; color:var(--faint);font:inherit;font-size:13px;cursor:pointer;transition:border-color .12s,background .12s} .tn-search:hover{border-color:var(--line-2);background:var(--panel)} .tn-search-ph{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tn-kbd{font-size:11px;font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted)} /* language pill */ .tnav-bar .tn-lang{display:inline-flex;align-items:center;gap:6px;flex:none; border:1px solid var(--line);background:var(--panel);color:var(--ink-2); font-size:12px;font-weight:700;padding:7px 10px;border-radius:8px;cursor:pointer} .tnav-bar .tn-lang:hover{border-color:var(--accent);color:var(--accent-text)} /* Sliding EN/RU language toggle (sits next to the account avatar). The knob (::before) slides to the active side; the active label takes the accent ink. State is driven by the [data-l="en|ru"] attribute set from getLang(). */ .lang-toggle{position:relative;display:inline-flex;align-items:center;flex:none;height:28px;padding:2px; border:1px solid var(--line);border-radius:999px;background:var(--panel-2);cursor:pointer; font:700 10.5px var(--sans);letter-spacing:.02em;user-select:none;overflow:hidden} .lang-toggle .lt-o{position:relative;z-index:1;width:26px;text-align:center;line-height:24px;color:var(--muted);transition:color .18s} .lang-toggle::before{content:"";position:absolute;top:2px;left:2px;width:26px;height:24px;border-radius:999px; background:var(--accent);transition:transform .2s cubic-bezier(.4,0,.2,1)} .lang-toggle[data-l="ru"]::before{transform:translateX(26px)} .lang-toggle[data-l="en"] .lt-o:first-child{color:var(--accent-ink,#fff)} .lang-toggle[data-l="ru"] .lt-o:last-child{color:var(--accent-ink,#fff)} .lang-toggle:hover{border-color:var(--accent)} /* icon buttons on the white bar */ .tnav-bar .iconbtn{width:32px;height:32px;border-radius:8px;color:var(--muted);border-color:transparent;background:transparent} .tnav-bar .iconbtn:hover{background:var(--panel-2);color:var(--ink);border-color:transparent} /* avatar */ .tn-ava{flex:none;width:30px;height:30px;border-radius:50%;border:0;padding:0;cursor:pointer; background:var(--accent-text);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;overflow:hidden} .tn-ava img{width:100%;height:100%;object-fit:cover} .tn-ava.lg{width:38px;height:38px;font-size:15px} /* keep the active-job chip legible on the white bar */ .tnav-bar #projChip{color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line)} /* ── Engineering / Logs mega-menu ── */ .mega-bd{position:fixed;inset:56px 0 0 0;z-index:55} .mega-bd.hidden,.mega.hidden{display:none} .mega{position:fixed;top:56px;left:0;right:0;z-index:58;background:var(--panel); border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(16,24,40,.13); padding:18px 24px 20px;animation:fadein .14s ease} .mega-inner{max-width:1200px;margin:0 auto} .mega-kicker{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px} .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 20px} .mega-item{display:flex;gap:12px;padding:11px;border-radius:10px;cursor:pointer;align-items:flex-start; background:transparent;border:0;text-align:left;font:inherit;width:100%} .mega-item:hover{background:var(--panel-2)} .mega-ic{width:34px;height:34px;border-radius:9px;background:var(--panel-2);color:var(--muted);display:grid;place-items:center;flex:none} .mega-ic .ic{width:17px;height:17px} .mega-tt{font-size:13.5px;font-weight:600;color:var(--ink)} .mega-ds{font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.35} .mega-tag{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--accent-2)} .mega-item.on{background:color-mix(in srgb,var(--accent) 8%,transparent)} .mega-item.on .mega-ic{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-text)} .mega-item.on .mega-tt{color:var(--accent-text)} .mega-item.locked{opacity:.5} /* ── ⌘K command palette ── */ .cmdk-ov{position:fixed;inset:0;z-index:80;background:rgba(16,24,40,.24)} .cmdk-ov.hidden{display:none} .cmdk{position:absolute;top:74px;left:50%;transform:translateX(-50%);width:560px;max-width:calc(100% - 40px); background:var(--panel);border:1px solid var(--line);border-radius:14px; box-shadow:0 26px 64px rgba(16,24,40,.32);overflow:hidden} .cmdk-top{display:flex;align-items:center;gap:11px;padding:14px 17px;border-bottom:1px solid var(--line)} .cmdk-ico{color:var(--faint);flex:none} .cmdk-input{flex:1;font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;outline:none} .cmdk-input::placeholder{color:var(--faint)} .cmdk-count{font-size:11px;color:var(--faint);white-space:nowrap} .cmdk-results{max-height:380px;overflow-y:auto;padding:8px} .cmdk-grp{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 11px 5px} .cmdk-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px;cursor:pointer; background:transparent;border:0;width:100%;text-align:left;font:inherit} .cmdk-row:hover,.cmdk-row.sel{background:var(--panel-2)} .cmdk-ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--panel-2);color:var(--muted)} .cmdk-ic .ic{width:15px;height:15px} .cmdk-ic.eng{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-text)} .cmdk-ic.logs{background:color-mix(in srgb,var(--accent-2) 12%,transparent);color:var(--accent-2)} .cmdk-nm{font-size:13.5px;color:var(--ink)} .cmdk-gl{margin-left:auto;font-size:11px;color:var(--faint)} .cmdk-ret{opacity:0;font-size:12px;color:var(--accent-text);font-weight:600;margin-left:8px} .cmdk-row:hover .cmdk-ret,.cmdk-row.sel .cmdk-ret{opacity:1} .cmdk-empty{padding:26px;text-align:center;color:var(--faint);font-size:13px} .cmdk-foot{display:flex;align-items:center;gap:16px;padding:10px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)} /* ── account popover ── */ .av-pop{width:230px;padding:8px} .av-id{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin-bottom:6px} .av-who{font-size:12px;color:var(--muted);line-height:1.35;min-width:0;overflow:hidden} .av-link{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:8px; background:transparent;border:0;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;text-decoration:none} .av-link:hover{background:var(--panel-2);color:var(--ink)} .av-link.danger:hover{color:var(--danger,#c23b32)} .av-ic{width:16px;text-align:center;color:var(--muted)} /* responsive: tablet collapses the search + hides the wordmark */ @media(max-width:1080px){ .tn-id{display:none} .tn-search{min-width:0;width:40px;padding:8px} .tn-search-ph,.tn-kbd{display:none} .mega-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:820px){ .tnav{gap:10px} .tnav-bar .navbtn.tn-tab{font-size:12.5px} .mega-grid{grid-template-columns:repeat(2,1fr)} } /* ============================================================ Engineering Suite — home dashboard: KPI strip · active-job hero · well-progress tracker · 3-D well schematic · tool-string library · inventory readiness · recent jobs. Read-only, glanceable, tokens. ============================================================ */ .tnum{font-variant-numeric:tabular-nums} .dash{display:flex;flex-direction:column;gap:16px} .card-h{font-size:14px;font-weight:700;margin:0;color:var(--ink)} .card-hd{margin-bottom:12px} .dash-kick{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)} .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700} .pill.teal{background:color-mix(in srgb,var(--accent-2) 14%,transparent);color:var(--accent-2)} .pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2)} .tag{font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px} .tag.ok{color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 13%,transparent)} .tag.warn{color:var(--warn,#9a6a00);background:color-mix(in srgb,var(--warn,#d68a00) 16%,transparent)} .linkbtn{background:none;border:0;color:var(--accent-text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0} .linkbtn:hover{text-decoration:underline} .pad{padding:14px 4px} .primary.sm,.ghost.sm{padding:8px 14px;font-size:13px;border-radius:9px} /* KPI strip */ .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .kpi{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e1);padding:14px 16px} .kpi.skel{height:66px} .kpi-ico{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--panel-2);color:var(--muted)} .kpi-ico.accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text)} .kpi-ico .ic{width:19px;height:19px} .kpi-body{flex:1;min-width:0} .kpi-top{display:flex;align-items:baseline;gap:8px} .kpi-num{font-size:26px;font-weight:700;font-family:var(--mono);color:var(--ink)} .kpi-lbl{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-top:2px} .kpi-spark{flex:none} .kpi .trend{font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px} .kpi .trend.up{color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 14%,transparent)} .kpi .trend.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)} .kpi .trend.flat{color:var(--muted);background:var(--panel-2)} /* rows */ .dash-rowA{display:grid;grid-template-columns:1.9fr 1fr;gap:16px;align-items:stretch} .dash-rowB{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:stretch} .dash-colB{display:flex;flex-direction:column;gap:16px} /* Cards laid out by a gap-based grid/flex must NOT also carry the legacy stacked-card top margin (.card+.card{margin-top:16px}) — side-by-side it dropped the 2nd card's top 16px below the 1st (misaligned tops across the suite); stacked it doubled the gap. Zero it wherever a gap container owns spacing. */ .dash-rowA>.card+.card,.dash-rowB>.card+.card,.dash-colB>.card+.card,.dash-cols>.card+.card,.grid>.card+.card{margin-top:0} /* active-job hero */ .aj-card{overflow:hidden;padding:0} .aj-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)} .aj-body{padding:18px 20px;display:flex;gap:20px} .aj-main{flex:1;min-width:0} .aj-title{font-size:21px;font-weight:700;margin:0 0 3px;letter-spacing:-.01em} .aj-meta{font-size:13px} .aj-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} .ro-lbl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)} .ro-val{font-size:15px;font-weight:600;margin-top:3px} .ro-sub{font-size:11.5px;color:var(--faint);margin-top:1px} .ro-sub.link{color:var(--accent-text);font-weight:600;cursor:pointer} .aj-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .aj-traj{width:120px;flex:none;border-left:1px solid var(--line);padding-left:18px;display:flex;flex-direction:column;align-items:center;gap:6px} .aj-traj .ro-lbl{align-self:flex-start} .aj-empty{padding:44px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} /* well-progress tracker */ .wp-card{padding:0;overflow:hidden} .wp-head{padding:16px 18px 14px;border-bottom:1px solid var(--line)} .wp-bar{height:7px;background:var(--panel-2);border-radius:999px;margin-top:11px;overflow:hidden} .wp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))} .wp-list{padding:4px 8px 8px} .wp-row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px} .wp-row:hover{background:var(--panel-2)} .wp-tick{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center} .wp-tick.on{background:var(--accent-2);border-color:var(--accent-2)} .wp-main{flex:1;min-width:0} .wp-lbl{font-size:13px;font-weight:600} .wp-sub{font-size:11px;color:var(--faint)} .wp-cta{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);border-radius:7px;padding:5px 10px;font:inherit;font-size:12px;font-weight:600;cursor:pointer} .wp-cta:hover{border-color:var(--accent);color:var(--accent-text)} /* well schematic (3-D + SVG fallback) */ .sch-card{padding:0;overflow:hidden} .sch-card .card-hd{padding:15px 20px;border-bottom:1px solid var(--line);margin:0} .sch-body{display:flex;gap:16px;padding:16px 20px} .sch-3d{flex:none;width:52%;max-width:280px;min-height:200px} .sch-3d svg,.sch-3d canvas{display:block;width:100%;height:auto} /* embedded /well3d twin (same viewer as the landing) — non-interactive glance */ .sch-frame{display:block;width:100%;height:340px;border:0;border-radius:10px;background:var(--panel-2);pointer-events:none} .sch-side{flex:1;display:flex;flex-direction:column;gap:8px} .fig{font-size:12px;padding:3px 0} .fig-v{font-weight:600;font-family:var(--mono)} .sch-side .ghost.block{margin-top:auto;text-align:center} /* tool-string library / recent rows */ .lib-row,.recent-row2{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;width:100%;text-align:left;font:inherit;margin-bottom:8px} .lib-row:hover,.recent-row2:hover{background:var(--panel-2)} .recent-row2:last-child{margin-bottom:0} .lib-ico{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--panel-2);color:var(--muted)} .lib-ico.sm{width:30px;height:30px} .lib-ico .ic{width:16px;height:16px} .lib-main{flex:1;min-width:0;display:flex;flex-direction:column} .lib-name{font-size:13px;font-weight:600} .lib-sub{font-size:11px;color:var(--faint)} /* inventory readiness */ .inv-row{margin-bottom:14px} .inv-row:last-child{margin-bottom:0} .inv-top{font-size:12.5px;margin-bottom:6px} .inv-bar{height:7px;background:var(--panel-2);border-radius:999px;overflow:hidden} .inv-fill{height:100%;border-radius:999px} .recent-strip{padding:16px 20px} @media(max-width:900px){ .kpi-strip{grid-template-columns:repeat(2,1fr)} .dash-rowA,.dash-rowB{grid-template-columns:1fr} .aj-body{flex-direction:column} .aj-traj{width:auto;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px;flex-direction:row;justify-content:center;gap:16px} .sch-3d{width:100%;max-width:none} }