/* Uptime dashboard */
.up-banner{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--bd);background:var(--card);margin-bottom:10px}
.up-banner>.mdi{font-size:34px}
.up-banner.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--card))}.up-banner.good>.mdi{color:var(--ok)}
.up-banner.bad{border-color:var(--err);background:color-mix(in srgb,var(--err) 10%,var(--card))}.up-banner.bad>.mdi{color:var(--err)}
.up-banner.unk>.mdi{color:var(--mut)}
.up-banner-txt{flex:1;min-width:0}.up-banner-txt b{display:block;font-size:19px}.up-banner-txt span{color:var(--mut);font-size:13px}
.up-banner-r{text-align:right}.up-banner-r b{display:block;font-size:26px;font-variant-numeric:tabular-nums}.up-banner-r small{color:var(--mut)}
.up-monitor{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--mut);margin-bottom:14px}
.up-monitor.on .mdi{color:var(--ok)}.up-monitor.off .mdi{color:var(--warn)}
.up-monitor code{font-size:11px;background:var(--card);padding:1px 5px;border-radius:4px;border:1px solid var(--bd)}
.up-down{border-color:var(--err);margin-bottom:14px}
.up-down-row,.up-inc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--bd);font-size:13px}
.up-down-row:last-child,.up-inc:last-child{border:0}
.up-inc .mut{margin-left:auto}
.up-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.up-card{background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.up-card.down{border-color:color-mix(in srgb,var(--err) 60%,var(--bd))}
.up-card[hidden]{display:none}
.up-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--bd);flex-wrap:wrap}
.up-name{font-weight:700;font-size:15px;color:var(--fg);text-decoration:none}a.up-name:hover{text-decoration:underline}
.up-count{margin-left:auto;font-size:12px;color:var(--mut)}
.st{width:11px;height:11px;border-radius:50%;flex:none;background:var(--mut);box-shadow:0 0 0 3px color-mix(in srgb,var(--mut) 20%,transparent)}
.st.up{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.st.down{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 25%,transparent);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--err) 8%,transparent)}}
@media(prefers-reduced-motion:reduce){.st.down{animation:none}}
.up-row{display:grid;grid-template-columns:14px minmax(170px,1.3fr) minmax(200px,3fr) repeat(3,62px) 150px;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--bd)}
.up-row:last-child{border-bottom:0}
.up-row .nm{min-width:0}
.up-row .nm b{display:flex;align-items:center;gap:6px;font-size:14px;overflow-wrap:anywhere}.up-row .nm b a{color:var(--fg)}
.up-row .nm .sub{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin-top:2px}
.up-row .sub .bad,.bad{color:var(--err)}.up-row .sub .warn,.warn{color:var(--warn)}
.up-row .ssl{display:inline-flex;align-items:center;gap:3px}.up-row .ssl.ok{color:var(--mut)}.up-row .ssl.warn{color:var(--warn)}.up-row .ssl.err{color:var(--err)}
.bars{display:flex;gap:2px;height:28px;align-items:stretch;min-width:0}
.bars .b{flex:1;min-width:2px;border-radius:2px;background:var(--bd);opacity:.6}
.bars .b.up{background:var(--ok);opacity:1}.bars .b.down{background:var(--err);opacity:1}
.bars .b:hover{outline:2px solid var(--fg);outline-offset:1px}
.up-pct{text-align:right}.up-pct b{display:block;font-size:13px;font-variant-numeric:tabular-nums}.up-pct small{color:var(--mut);font-size:10px}
.up-pct b.good{color:var(--ok)}.up-pct b.warn{color:var(--warn)}.up-pct b.bad{color:var(--err)}.up-pct b.mut{color:var(--mut)}
.up-ms{display:flex;align-items:center;gap:8px;justify-content:flex-end;color:var(--acc);font-size:12px;font-variant-numeric:tabular-nums}
.up-ms span{color:var(--fg);text-align:right;white-space:nowrap}.up-ms small{color:var(--mut)}
@media(max-width:1100px){.up-row{grid-template-columns:14px 1fr repeat(3,56px)}.up-row .bars{grid-column:2/-1;order:5}.up-row .up-ms{display:none}}
@media(max-width:560px){.up-row{grid-template-columns:14px 1fr}.up-row .up-pct{display:none}.up-row .bars{grid-column:1/-1}}

/* switches + modal body used by the per-card settings and the notifications page */
.switch{position:relative;display:inline-block;width:38px;height:21px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--bd);border-radius:999px;cursor:pointer;transition:.15s}
.switch span::before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+span{background:var(--ok)}.switch input:checked+span::before{transform:translateX(17px)}
.switch input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.up-row.paused{opacity:.55}.up-row.paused .nm b a{text-decoration:line-through}
.up-head .pen-i{font-size:16px}
.mc-row{display:grid;grid-template-columns:minmax(140px,1.2fr) minmax(200px,3fr) auto auto;gap:10px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.mc-row:last-child{border:0}
.mc-row .mc-name b{display:block;overflow-wrap:anywhere;font-size:14px}.mc-row .mc-name small{color:var(--mut)}
.mc-row input[type=text]{width:100%;font:12px ui-monospace,Menlo,monospace}
.mc-row label.mc-sw{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);white-space:nowrap}
.mc-row.changed{box-shadow:inset 3px 0 var(--acc);padding-left:10px}
@media(max-width:700px){.mc-row{grid-template-columns:1fr auto}.mc-row .mc-url{grid-column:1/-1;order:5}}
.nt-card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.nt-card h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:600}
.nt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--bd)}.nt-row:last-child{border:0}
.nt-row .nm{flex:1;min-width:200px}.nt-row .nm b{display:block}.nt-row .nm small{color:var(--mut);font-size:12px;overflow-wrap:anywhere}
.nt-row .err{color:var(--err);font-size:12px;overflow-wrap:anywhere}
.nt-row .ok{color:var(--ok);font-size:12px}
.nt-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.nt-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut)}
.nt-form input,.nt-form select{font-size:13px}
.nt-rules{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.nt-rules label{display:flex;align-items:center;gap:8px;font-size:14px}

.nt-form label[hidden],#nt-form-card p[hidden],#nt-form-card [data-for][hidden]{display:none}

/* Django commands: a tab in the side dock */
.dock-pane.custom{padding:0;overflow:auto}
.djp{display:flex;flex-direction:column;gap:10px;min-height:100%;padding:12px 14px;color:var(--fg);background:var(--bg)}
.djp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dj-folder{flex:1;min-width:0;font:12px ui-monospace,Menlo,monospace;color:var(--mut);overflow-wrap:anywhere}
.djp .linkbtn{padding:2px 10px;font-size:12px}
.dj-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dj-chip{display:inline-flex;align-items:stretch;border:1px solid var(--bd);border-radius:999px;overflow:hidden;background:var(--card)}
.dj-chip>button{border:0;background:none;padding:4px 12px;font:13px ui-monospace,Menlo,monospace;color:var(--fg);border-radius:0}
.dj-chip>button:hover{background:var(--bg)}
.dj-chip .x{display:none;padding:4px 7px;color:var(--err);border-left:1px solid var(--bd)}
.dj-chips.editing .x{display:inline-flex}
.dj-add{display:none;gap:6px}.dj-chips.editing .dj-add{display:inline-flex}
.dj-add input{width:170px;font:12px ui-monospace,Menlo,monospace;padding:3px 8px}.dj-add button{padding:3px 10px;font-size:12px}
.dj-avail{border:1px solid var(--bd);border-radius:8px;padding:10px;background:var(--card)}
.dj-avail[hidden]{display:none}
.dj-avail input{width:100%;margin-bottom:8px}
.dj-avail-list{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto}
.dj-cmd-chip{padding:2px 9px;font:12px ui-monospace,Menlo,monospace;border-radius:999px}
.dj-cmd-chip[hidden]{display:none}
.dj-input{display:flex;align-items:stretch;gap:0}
.dj-prefix{display:flex;align-items:center;padding:0 8px;border:1px solid var(--bd);border-right:0;border-radius:6px 0 0 6px;background:var(--card);color:var(--mut);font:11px ui-monospace,Menlo,monospace;white-space:nowrap}
.dj-input input{flex:1;min-width:60px;height:28px;padding:2px 8px;font:12px ui-monospace,Menlo,monospace;border-radius:0;margin:0}
.dj-btns{display:inline-flex}
.dj-btns button{width:30px;height:28px;padding:0;border-radius:0;margin-left:-1px;font-size:14px}
.dj-btns button:last-child{border-radius:0 6px 6px 0}
.djp button:disabled{opacity:.45;cursor:not-allowed}
.dj-btns button.btn-primary:disabled{opacity:.8}
.dj-status{font-size:12px}.dj-status.ok{color:var(--ok)}.dj-status.bad{color:var(--err)}.dj-status.warn{color:var(--warn)}
.dj-out{flex:1;min-height:160px;margin:0;overflow:auto;background:#0b0d10;color:#d7dbe0;border:1px solid var(--bd);border-radius:8px;padding:12px;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.dj-out[hidden]{display:none}
.dj-hist{margin-top:auto}
.dj-run{display:flex;gap:10px;align-items:center;padding:4px 0;font-size:12px;border-bottom:1px solid var(--bd)}
.dj-run:last-child{border:0}.dj-run code{cursor:pointer;flex:1;overflow-wrap:anywhere}.dj-run code:hover{color:var(--acc)}

/* Resource graphs on the Linode page */
.rc-live{float:right;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--fg)}
.rc-note{font-size:12px;margin-bottom:8px}
.rc-grid-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.rc-box{position:relative;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 12px 8px}
.rc-box[hidden]{display:none}
.rc-title{font-size:12px;font-weight:600;margin-bottom:4px}
.rc-svg{display:block;width:100%;height:auto;overflow:visible}
.rc-grid{stroke:var(--bd);stroke-width:1}
.rc-lab{font-size:9px;fill:var(--mut)}
.rc-cur{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}
.rc-tip{position:absolute;top:28px;z-index:3;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:6px 9px;font-size:11px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.rc-tip b{display:block;margin-bottom:2px}
.rc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.rc-legend{display:flex;gap:12px;font-size:11px;color:var(--mut);margin-top:2px}
.rc-bell{float:right;margin-right:10px;padding:1px 10px;font-size:12px;text-transform:none;letter-spacing:0}
.rc-bell.on{border-color:var(--acc);color:var(--acc)}.rc-bell.firing{border-color:var(--err);color:var(--err)}
.rc-alert{border:1px solid var(--bd);border-radius:10px;background:var(--bg);padding:10px 12px;margin-bottom:10px}
.rc-alert[hidden]{display:none}
.rc-alert-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.rc-num{width:64px;text-align:right}.rc-chk{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.rc-alert-row button{padding:3px 12px;font-size:12px}.rc-hint{font-size:12px;margin-top:6px}
.rc-limit{stroke:var(--err);stroke-width:1;stroke-dasharray:4 3;opacity:.8}

/* Main dashboard */
a.hm-kpi{color:inherit;text-decoration:none;display:block}a.hm-kpi:hover{border-color:var(--acc)}
.kpi.hm-bad::before{background:var(--err)}.kpi.hm-warn::before{background:#f0883e}
.kpi small{display:flex;align-items:center;gap:6px}.kpi em{display:block;font-style:normal;font-size:12px;color:var(--mut);margin-top:2px}
.up-banner.warn{border-color:#f0883e;background:color-mix(in srgb,#f0883e 9%,var(--card))}.up-banner.warn>.mdi{color:#f0883e}
.hm-fin{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 16px;margin-bottom:14px;color:var(--fg);text-decoration:none;font-size:13px}
.hm-fin:hover{border-color:var(--acc)}.hm-fin b{margin-left:6px}
.hm-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;align-items:start}
.hm-item{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-bottom:1px solid var(--bd);color:var(--fg);text-decoration:none;border-radius:6px}
.hm-item:last-child{border:0}.hm-item:hover{background:var(--bg)}
.hm-item>.mdi{font-size:20px;margin-top:1px}.hm-item.err>.mdi{color:var(--err)}.hm-item.warn>.mdi{color:#f0883e}.hm-item.info>.mdi{color:var(--acc)}
.hm-item b{display:block;font-size:14px}.hm-item small{display:block;color:var(--mut);font-size:12px}
.hm-sub{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:600;margin:10px 0 4px}.hm-sub:first-of-type{margin-top:0}
.hm-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:4px 0;font-size:13px;border-bottom:1px solid var(--bd)}.hm-row:last-child{border:0}
.hm-row code{font-size:12px;background:var(--bg);padding:1px 6px;border-radius:4px;border:1px solid var(--bd)}