/* Heijmans skin over the Petsplace shell: cream paper, navy ink, Heijmans yellow.
   --brand stays the signal red (urgent, guardrail); yellow is --hy. */
:root {
  --hy: #ffb81c; --hy-hi: #f2a900; --hy-ink: #0f2e5c; --hy-soft: color-mix(in srgb, #ffb81c 16%, transparent);
  --navy: #7fa8e0; --sky: #4cb8ec;
  --bg-img: radial-gradient(70% 80% at 100% 100%, #e9a50a40, transparent 62%), linear-gradient(180deg, #0f1b30, #0a1424);
  --bg: #08111f; --bg-2: #0c1728; --panel: #142139; --panel-2: #1a2946;
  --t0: #fff; --t1: #eef2f8; --t2: #a9b6ca; --t3: #7686a0; --t-nav: #c3cede;
  --on-photo-1: #fff; --on-photo-2: #c3cede;
  --brand: #e2434d; --brand-hi: #f0646d; --brand-t: #ffb1b6;
  --ai: #ffc94f; --ai-t: #ffd479;
  --inv-bg: #ffb81c; --inv-fg: #0f2e5c; --inv-hi: #ffc94f;
  --surf-a: #18263ff0; --surf-b: #111d32f2; --draft-a: #1c2b47f5; --draft-b: #15233bf7; --bub-a: #213253e6; --bub-b: #1b2a47e6;
  --pop: #18263ff9; --side-m: #0c1728f7; --chrome: #0a142480; --chrome-hi: #1b2a47cc; --scrim: #050b15a6; --scrim-2: #050b1566;
  --glass: linear-gradient(180deg, #18263ff4, #111d32f7) padding-box, linear-gradient(180deg, #ffffff30 0%, #ffffff10 22%, #ffffff07 60%, #ffffff12 100%) border-box;
  --glass-2: linear-gradient(180deg, #1f2f4df2, #172640f5) padding-box, linear-gradient(180deg, #ffffff2b 0%, #ffffff0d 40%, #ffffff10 100%) border-box;
}
:root[data-theme="light"] {
  --bg-img: radial-gradient(58% 62% at 100% 100%, #ffc53dd9 0%, #ffd77a70 34%, transparent 70%), linear-gradient(180deg, #f6f1e6, #f4eee0);
  --bg: #efe9da; --bg-2: #f6f1e6; --panel: #fffdf8; --panel-2: #faf6ec;
  --t0: #0b2447; --t1: #12294c; --t2: #47587a; --t3: #6c7a93; --t-nav: #2b4066;
  --on-photo-1: #0b2447; --on-photo-2: #47587a;
  --up: #1b7f4b; --down: #c22f2a; --warn: #a06400; --info: #1d67b4;
  --up-t: #146a3d; --down-t: #ab2520; --warn-t: #855000; --info-t: #17569a;
  --brand: #c8202b; --brand-hi: #c8202b; --brand-t: #a81a24;
  --ai: #c98800; --ai-t: #8a5d00;
  --inv-bg: #0f2e5c; --inv-fg: #fff; --inv-hi: #1a4380;
  --navy: #0f2e5c; --sky: #16a5e0;
  --surf-a: #fffefb; --surf-b: #fffdf8; --draft-a: #fffefb; --draft-b: #fffcf5; --bub-a: #f4efe3; --bub-b: #f1ebdd;
  --pop: #fffefb; --side-m: #f8f4ea; --chrome: #fffdf8d9; --chrome-hi: #fff;
  --glass: linear-gradient(180deg, #fffefb, #fffcf6) padding-box, linear-gradient(180deg, rgb(16 38 72 / 0.11), rgb(16 38 72 / 0.07)) border-box;
  --glass-2: linear-gradient(180deg, #fbf7ed, #f8f3e6) padding-box, linear-gradient(180deg, rgb(16 38 72 / 0.1), rgb(16 38 72 / 0.07)) border-box;
}
::selection { background: #ffb81c66; }
:root[data-theme="light"] .main::before { opacity: 1; filter: none; }
:root[data-theme="light"] .main::after { background: none; }
:root[data-theme="light"] .login::before { opacity: 1; filter: none; }
:root[data-theme="light"] .login::after { background: none; }
.main::after { background: none; }
.login::after { background: none; }
.nav-ind::before { background: var(--hy); box-shadow: 0 0 14px #ffb81c99; }
.btn.brand { background: var(--hy); color: var(--hy-ink); box-shadow: 0 1px 0 #ffffff66 inset, 0 8px 20px -10px #e09b00; }
.btn.brand:hover { background: var(--hy-hi); }
a.brand img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 6px 18px -6px #ffb81c99; }
.shell.rail a.brand img { width: 34px; height: 34px; }
.login-card .mark { width: 62px; height: 62px; border-radius: 16px; box-shadow: 0 18px 40px -12px #e09b00aa; }
.role-pick.five { grid-template-columns: repeat(5, 1fr); }
.role-pick.five button { padding: 9px 3px; font-size: 10.5px; }
.role-pick.five button b { font-size: 11.5px; }
.login-card.wide { width: 500px; }

/* rail: hover label */
.shell.rail .nav a:hover .lbl { display: block; position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); height: 26px; line-height: 26px; padding: 0 10px; border-radius: 8px; background: var(--inv-bg); color: var(--inv-fg); font-size: 12px; z-index: 30; pointer-events: none; }
.shell.rail .side { overflow: visible; z-index: 5; }
.nav a { height: 33px; }

/* division tabs in the top bar: same language as the page tabs */
.div-tabs { display: flex; align-items: stretch; gap: 2px; height: 64px; }
.div-tab { position: relative; padding: 0 12px; border: 0; background: none; color: var(--t2); font: inherit; font-size: 13.5px; cursor: pointer; transition: color .2s; }
.div-tab:hover { color: var(--t0); }
.div-tab.on { color: var(--t0); font-weight: 500; }
.div-tab.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 16px; height: 2px; border-radius: 2px; background: var(--hy-hi); }
.top.no-div .div-tabs { visibility: hidden; }
.crumb { color: var(--t3); }
.crumb-sep { opacity: .6; margin: 0 -4px; }
@media (max-width: 1200px) { .div-tabs { display: none; } .crumb { display: none; } }

/* kit: underline tabs */
.utabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.utabs a, .utabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px 12px; border: 0; background: none; color: var(--t2); font-size: 14px; font-weight: 450; text-decoration: none; white-space: nowrap; transition: color .2s; }
.utabs a:hover, .utabs button:hover { color: var(--t0); }
.utabs a.on, .utabs button.on { color: var(--t0); font-weight: 500; }
.utabs a.on::after, .utabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--hy-hi); }
.utabs .n { font-size: 12px; color: var(--t3); }

/* kit: division tag, avatar, source chip, staged run, stream caret */
.dv { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 550; background: var(--w0f); color: var(--t2); white-space: nowrap; }
.dv i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.src { display: inline-flex; align-items: center; gap: 5px; height: 22px; max-width: 280px; padding: 0 9px; border: 0; border-radius: 7px; font-size: 11.5px; color: var(--info-t); background: color-mix(in srgb, var(--info) 9%, transparent); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src:hover { background: color-mix(in srgb, var(--info) 16%, transparent); }
.src svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 600; color: var(--hy-ink); background: linear-gradient(160deg, #ffe0a0, #ffc445); }
.run { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; border-radius: 14px; background: var(--w06); box-shadow: inset 0 0 0 1px var(--w0f); }
.run-s { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t3); transition: color .25s; }
.run-s.on { color: var(--t0); } .run-s.done { color: var(--t2); }
.run-d { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--w33); display: grid; place-items: center; }
.run-s.on .run-d { box-shadow: none; border: 2px solid var(--w26); border-top-color: var(--hy-hi); animation: spin .7s linear infinite; }
.run-s.done .run-d { background: var(--up); box-shadow: none; }
.run-s.done .run-d::after { content: ''; width: 7px; height: 4px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.run-bar { height: 3px; border-radius: 3px; background: var(--w10); overflow: hidden; } .run-bar i { display: block; height: 100%; width: 0; background: var(--hy-hi); transition: width .4s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }
.caret::after { content: ''; display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--hy-hi); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; color: var(--t1); background: var(--hy-soft); }
.ai-note b { font-weight: 500; display: block; margin-bottom: 3px; }
.ai-note .xs { color: var(--t2); }
.row-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mini-doc { background: #fff; color: #1b2a44; border-radius: 6px; box-shadow: 0 1px 2px #0f2e5c22, 0 14px 30px -18px #0f2e5c55; padding: 22px 22px 26px; font-size: 9.5px; line-height: 1.5; }