/* Myrrality overrides on top of the Boron template */
@font-face { font-family: "Geist Variable"; src: url(../fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root, [data-bs-theme=light] { --bs-font-sans-serif: "Geist Variable", system-ui, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --myr-cyan: #00c2e0; --myr-cyan-ink: #00708c; }
body, h1, h2, h3, h4, h5, h6, .btn, .form-control { font-family: var(--bs-font-sans-serif) !important; }
h3.fw-bold, h4.fw-bold { letter-spacing: -.02em; }
.myr-logo { display: inline-flex; align-items: center; gap: 10px; }
.myr-word { color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .22em; white-space: nowrap; }
.myr-word b { color: var(--myr-cyan); font-weight: 600; }
.myr-env { margin: 18px 16px; padding: 10px 12px; border: 1px dashed rgba(255,255,255,.25); border-radius: 8px; color: rgba(255,255,255,.65); font-size: 12px; display: flex; gap: 8px; align-items: center; }
.myr-env .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--myr-cyan); box-shadow: 0 0 0 3px rgba(0,194,224,.25); }
.side-nav .side-nav-link.active { box-shadow: inset 3px 0 0 var(--myr-cyan); }
.myr-mock { background: #fff4d6; color: #8a5a00; border: 1px solid #f1d58a; letter-spacing: .1em; }
.myr-av { width: 26px; height: 26px; border-radius: 50%; background: var(--myr-cyan); color: #0f1c2e; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.myr-steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.myr-steps .myr-step { height: 8px; border-radius: 2px; background: var(--bs-light); border: 1px solid var(--bs-border-color); }
.myr-steps .myr-step.done { background: #313a46; border-color: #313a46; }
.myr-steps .myr-step.cur { background: var(--myr-cyan); border-color: #0097c4; }
.myr-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.myr-stepper-item { display: grid; gap: 8px; padding: 12px; border: 2px solid var(--bs-border-color); border-radius: 8px; background: var(--bs-body-bg); }
.myr-stepper-item .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; border: 2px solid currentColor; }
.myr-stepper-item .lb { display: grid; gap: 2px; line-height: 1.25; } .myr-stepper-item b { font-size: 13px; font-weight: 600; } .myr-stepper-item small { color: var(--bs-secondary-color); font-size: 12px; }
.myr-stepper-item.done { border-color: #313a46; } .myr-stepper-item.done .ic { background: #313a46; color: #fff; border-color: #313a46; }
.myr-stepper-item.cur { border-color: #0097c4; box-shadow: 4px 4px 0 var(--myr-cyan); } .myr-stepper-item.cur .ic { color: var(--myr-cyan-ink); background: #e3f7fb; }
.myr-stepper-item.todo { opacity: .7; } .myr-stepper-item.todo .ic { color: var(--bs-secondary-color); }
.myr-bar { background: var(--myr-cyan) !important; }
.myr-vp { border-radius: 8px; overflow: hidden; background: #0b1424; aspect-ratio: 1280 / 712; border: 2px solid #313a46; }
.myr-vp video { width: 100%; height: 100%; object-fit: cover; display: block; }
.myr-asset { height: 120px; border-radius: 8px; background: linear-gradient(135deg, #0f1c2e, #1b2f4a); display: grid; place-items: center; color: var(--myr-cyan); font-size: 52px; border: 2px solid #313a46; }
.myr-spin { display: inline-block; animation: myrspin 1.2s linear infinite; } @keyframes myrspin { to { transform: rotate(360deg); } }
/* staged builds */
.myr-tabs { border-bottom: 0; gap: 4px; } .myr-tabs .nav-link { border: 2px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--bs-secondary-color); font-weight: 500; }
.myr-tabs .nav-link.active { border-color: #313a46; color: var(--bs-body-color); background: var(--bs-body-bg); box-shadow: 0 2px 0 var(--bs-body-bg); }
.myr-env-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 2px solid; white-space: nowrap; }
.myr-env-pill.prod { background: #e8f6e8; border-color: #2f8a2f; color: #135c13; } .myr-env-pill.stag { background: #fff3d6; border-color: #c48a0a; color: #6b4a00; }
.myr-env-pill.dev { background: #eef0f3; border-color: #536173; color: #313a46; }
.myr-ver { font-family: var(--bs-font-monospace); font-size: 12.5px; background: #e3f7fb; color: #0f1c2e; border: 1px solid #9fdbe8; border-radius: 4px; padding: 1px 6px; }
.myr-ver.big { font-size: 16px; font-weight: 700; padding: 3px 10px; border: 2px solid #313a46; box-shadow: 3px 3px 0 var(--myr-cyan); }
.myr-chg { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 8px; border: 1px dashed #313a46; border-radius: 6px; }
.myr-rel { border-left-width: 6px !important; } .myr-rel.prod { border-left-color: #2f8a2f !important; } .myr-rel.stag { border-left-color: #c48a0a !important; } .myr-rel.dev { border-left-color: #536173 !important; }
.myr-envc { border-top-width: 6px !important; } .myr-envc.prod { border-top-color: #2f8a2f !important; } .myr-envc.stag { border-top-color: #c48a0a !important; } .myr-envc.dev { border-top-color: #536173 !important; }
.myr-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; } .myr-dl dt { font-weight: 500; color: var(--bs-secondary-color); } .myr-dl dd { margin: 0; }
.myr-envtbl td.myr-changed { background: #e3f7fb; font-weight: 600; }
.myr-dag-wrap { overflow-x: auto; } .myr-dag { width: 100%; min-width: 760px; height: auto; display: block; font-family: var(--bs-font-sans-serif); }
.myr-dag .e { fill: none; stroke: #9aa5b1; stroke-width: 2; } .myr-dag .e.hot { stroke: #c48a0a; stroke-dasharray: 6 4; }
.myr-dag .n rect { fill: #fff; stroke: #313a46; stroke-width: 2; } .myr-dag .n .t { font-size: 13px; font-weight: 600; fill: #0f1c2e; } .myr-dag .n .v { font-size: 12px; fill: #536173; font-family: var(--bs-font-monospace); }
.myr-dag .n .s { font-size: 18px; font-weight: 700; }
.myr-dag .n.ok .s { fill: #2f8a2f; } .myr-dag .n.running rect { fill: #e3f7fb; stroke: #0097c4; } .myr-dag .n.running .s { fill: #0097c4; }
.myr-dag .n.failed rect { fill: #fdecea; stroke: #b42318; } .myr-dag .n.failed .s { fill: #b42318; }
.myr-dag .n.stale rect { fill: #fff8e6; stroke: #c48a0a; stroke-dasharray: 6 4; } .myr-dag .n.stale .s { fill: #c48a0a; }
.myr-dag a:hover rect { filter: drop-shadow(3px 3px 0 #00c2e0); }
.myr-legend2 { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 13px; color: var(--bs-secondary-color); flex-wrap: wrap; }
.myr-legend2 li { display: flex; gap: 6px; align-items: center; } .myr-legend2 .k { width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid; border-radius: 5px; font-weight: 700; font-size: 12px; }
.myr-legend2 .ok { color: #2f8a2f; } .myr-legend2 .running { color: #0097c4; background: #e3f7fb; } .myr-legend2 .stale { color: #c48a0a; background: #fff8e6; border-style: dashed; } .myr-legend2 .failed { color: #b42318; background: #fdecea; }
.myr-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.myr-stage { display: flex; gap: 10px; padding: 12px; border: 2px solid var(--bs-border-color); border-radius: 8px; }
.myr-stage .ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; }
.myr-stage b { display: block; font-size: 13px; } .myr-stage small { display: block; font-size: 12px; color: var(--bs-secondary-color); }
.myr-stage.done { border-color: #313a46; } .myr-stage.done .ic { background: #313a46; color: #fff; border-color: #313a46; }
.myr-stage.failed { border-color: #b42318; background: #fdecea; box-shadow: 4px 4px 0 #b42318; } .myr-stage.failed .ic { color: #b42318; background: #fff; }
.myr-stage.skip { opacity: .6; border-style: dashed; }
.myr-log { background: #0f1c2e; color: #cfe9f1; padding: 14px 16px; border-radius: 8px; font-size: 12.5px; line-height: 1.6; margin: 0; white-space: pre-wrap; border: 2px solid #313a46; }
.myr-log .c { color: #7f93a8; } .myr-log .e { color: #ff9b8f; }
@media (max-width: 900px) { .myr-stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1200px) { .myr-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .myr-stepper { grid-template-columns: 1fr 1fr; } }