/* DROR brand for the console. Light is the default theme; html.dark switches to the dark one.
   Page templates keep using the same variable names (--bg, --surface, --blue ...). */
:root{
  --ink:#15172b; --brand:#4c63ab;
  --bg:#f4f5f9; --surface:#ffffff; --surface2:#eef0f6; --line:#e2e5ee;
  --text:#15172b; --muted:#555c7a; --blue:#4c63ab; --blue-d:#3d5192; --tint:rgba(76,99,171,.10);
  --green:#1f7a45; --red:#a3262f; --red-d:#7f1d24; --yellow:#8a5a00; --on-blue:#ffffff;
  --console-bg:#15172b; --console-text:#e5e8f4;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font:"Google Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
html.dark{
  --bg:#0f1122; --surface:#15172b; --surface2:#1f2240; --line:#2c3054;
  --text:#eef0f8; --muted:#a9aec6; --blue:#9aa9dc; --blue-d:#b7c2e8; --tint:rgba(154,169,220,.14);
  --green:#7fd6a0; --red:#f2a3a8; --red-d:#f7c3c6; --yellow:#f2c96b; --on-blue:#15172b;
  --console-bg:#0b0d1a;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* top bar */
.topbar{display:flex;align-items:center;gap:18px;padding:0 24px;height:60px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.topbar a{color:#d8dcef}
.topbar a:hover{color:#fff}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none!important}
.logo img{height:26px;display:block}
.logo span{font-size:11px;font-weight:700;letter-spacing:.14em;color:#9aa9dc;border:2px solid #9aa9dc;border-radius:999px;padding:0 8px;line-height:18px}
.topbar .spacer{flex:1}
.topbar .user{color:#a9aec6;font-size:13px}
.topbar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.topbar .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:var(--on-blue);border:2px solid var(--blue);border-radius:999px;padding:7px 18px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);text-decoration:none}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--blue)}
.btn.ghost:hover{background:var(--tint);border-color:var(--blue)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
html.dark .btn.danger{color:#15172b}
.btn.danger:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.small{padding:3px 12px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:default}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--ink);padding:20px;display:block;color:var(--text);transition:border-color .15s,transform .15s}
html.dark .tile{border-top-color:var(--blue)}
.tile:hover{border-color:var(--blue);text-decoration:none;transform:translateY(-1px)}
.tile h3{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.tile p{margin:0;color:var(--muted);font-size:12.5px}
.avatar{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;margin-bottom:12px;border-radius:50%}
.sq{width:9px;height:9px;display:inline-block;vertical-align:middle;border-radius:50%}
.sq.ok{background:var(--green)}
.sq.warn{background:var(--yellow)}
.sq.down{background:var(--red)}
.badge{display:inline-block;font-size:12px;font-weight:600;background:var(--surface2);border-radius:999px;padding:2px 10px;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);padding:20px 24px;margin-bottom:16px}
.panel h2{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--text);padding-top:10px;border-top:4px solid var(--ink)}
html.dark .panel h2{border-top-color:var(--blue)}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{color:var(--muted);font-weight:600;font-size:12px;text-align:right;padding:9px 10px;border-bottom:2px solid var(--text);white-space:nowrap}
table.data td{padding:10px;border-bottom:1px solid var(--line)}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:var(--tint)}
input,select,textarea{background:var(--surface);border:2px solid var(--line);border-radius:10px;color:var(--text);font-family:inherit;font-size:13.5px;padding:8px 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--tint)}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
textarea{width:100%;resize:vertical}
.msgs{max-width:1180px;margin:16px auto 0;padding:0 24px}
.msg{padding:11px 16px;margin-bottom:8px;font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--blue)}
.msg.success{border-inline-start-color:var(--green)}
.msg.error{border-inline-start-color:var(--red)}
pre.console{background:var(--console-bg);color:var(--console-text);border:1px solid var(--line);padding:14px;font-family:var(--mono);font-size:12px;line-height:1.55;overflow-x:auto;direction:ltr;text-align:left;white-space:pre-wrap;max-height:60vh;overflow-y:auto;margin:0}
.meter{height:6px;background:var(--surface2);overflow:hidden;border-radius:999px}
.meter i{display:block;height:100%;background:var(--blue);border-radius:999px}
.meter i.hot{background:var(--red)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{background:var(--surface2);padding:16px 18px}
.stat .k{color:var(--muted);font-size:12px;font-weight:600;margin-bottom:6px}
.stat .v{font-size:20px;font-weight:700;letter-spacing:-.02em}

/* project switcher + tool nav */
.switcher{position:relative}
.switcher summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:600;color:#fff}
.switcher summary:hover{background:rgba(255,255,255,.1)}
.switcher summary::-webkit-details-marker{display:none}
.switcher .menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line);min-width:220px;z-index:100;box-shadow:0 12px 30px -12px rgba(21,23,43,.4)}
.switcher .menu a{display:block;padding:10px 14px;font-size:13px;color:var(--text)}
.switcher .menu a:hover{background:var(--tint);text-decoration:none}
.toolnav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:24px;padding-bottom:12px;border-bottom:4px solid var(--ink)}
html.dark .toolnav{border-bottom-color:var(--blue)}
.toolnav a{padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);border-radius:999px}
.toolnav a:hover{color:var(--text);background:var(--surface2);text-decoration:none}
.toolnav a.active{color:var(--on-blue);background:var(--blue)}

/* headings */
.pagehead{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.pagehead .sub{color:var(--muted);font-size:13px}
.empty{color:var(--muted);text-align:center;padding:28px;font-size:13.5px}
.pageintro{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--blue);padding:16px 20px;margin-bottom:18px}
.pageintro h1{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.pageintro p{margin:0;color:var(--muted);font-size:13.5px;max-width:74ch;line-height:1.6}
.statusbar{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:15px;font-weight:600;margin-bottom:16px;border:1px solid var(--line);background:var(--surface)}
.statusbar.ok{border-inline-start:6px solid var(--green)}
.statusbar.warn{border-inline-start:6px solid var(--yellow)}
.statusbar.bad{border-inline-start:6px solid var(--red)}
code.inline{background:var(--surface2);padding:1px 7px;font-family:var(--mono);font-size:12px;direction:ltr;display:inline-block;border-radius:6px}
label{color:var(--muted);font-size:13px}

/* hero blocks used by some pages (features, secrets, deploy ...) */
.dror-hero{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--blue);position:relative;overflow:hidden}
.dror-hero::after{content:"";position:absolute;width:90px;aspect-ratio:1;background:var(--blue);opacity:.14;border-radius:0 0 100% 0;top:0;left:0;pointer-events:none}

/* standalone pages: login + 403 */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr minmax(0,480px);background:var(--surface)}
.auth .art{background:var(--ink);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:44px}
.auth .art::before{content:"";position:absolute;width:min(50vw,600px);aspect-ratio:1;background:var(--brand);border-radius:0 0 100% 0;top:0;left:0}
.auth .art::after{content:"";position:absolute;width:min(28vw,340px);aspect-ratio:1;border-radius:50%;border:clamp(28px,3.6vw,52px) solid #fff;right:-8%;top:18%}
.auth .art p{position:relative;z-index:1;color:#fff;font-size:clamp(34px,4.4vw,68px);font-weight:700;letter-spacing:-.04em;line-height:.95;margin:0}
.auth .art p span{color:#9aa9dc}
.auth .panel2{padding:clamp(28px,5vw,60px);display:flex;flex-direction:column;justify-content:center;background:var(--surface)}
.auth .panel2 img{height:38px;align-self:flex-start;margin-bottom:30px}
.auth h1{margin:0 0 6px;font-size:30px;letter-spacing:-.03em}
.auth .lead{color:var(--muted);margin:0 0 24px}
.auth form{display:grid;gap:12px}
.auth input{width:100%;min-height:46px}
.auth .btn{min-height:48px;font-size:15px;margin-top:4px}
.auth .err{background:#fde6e8;color:#a3262f;border-inline-start:6px solid #a3262f;padding:10px 14px;font-size:13.5px;font-weight:600}
html.dark .auth .panel2 .logo-light{display:block}
.auth .logo-dark{display:block}.auth .logo-light{display:none}
html.dark .auth .logo-dark{display:none}

@media(max-width:820px){
  .wrap{padding:16px}
  .topbar{padding:0 14px;gap:12px;height:auto;min-height:56px;flex-wrap:wrap;padding-block:8px}
  .auth{grid-template-columns:1fr}.auth .art{min-height:180px}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}
.auth label{display:grid;gap:6px;font-weight:600;color:var(--text);font-size:14px}
/* links inside running text are underlined (not color-only) */
p a:not(.btn),li a:not(.btn),.pageintro a:not(.btn),.empty a:not(.btn){text-decoration:underline;text-underline-offset:2px}

/* ---- simplified navigation (2026-10) ---- */
.topnav{display:flex;align-items:center;gap:16px;font-size:13.5px}
.topmenu summary{border-color:transparent;padding:5px 10px;font-weight:500;color:#d8dcef}
.topmenu .menu{left:0;right:auto}
.switcher .menu button{display:block;width:100%;text-align:start;background:none;border:0;padding:10px 14px;font:inherit;font-size:13px;color:var(--text);cursor:pointer}
.switcher .menu button:hover{background:var(--tint)}
.switcher .menu form{margin:0}
.usermenu summary{gap:8px;padding:3px 10px 3px 4px;border-color:rgba(255,255,255,.2)}
.uav{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.uname{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolnav{align-items:center}
.toolnav .more summary{border:0;color:var(--muted);padding:7px 14px;font-size:13px;font-weight:600}
.toolnav .more summary:hover{background:var(--surface2);color:var(--text)}
.toolnav .more summary.active{color:var(--on-blue);background:var(--blue)}
.toolnav .more .menu{right:auto;left:0;min-width:260px}
.toolnav .more .menu a{display:grid;gap:1px;border-radius:0;padding:10px 14px}
.toolnav .more .menu a b{color:var(--text);font-weight:600}
.toolnav .more .menu a small{color:var(--muted);font-size:12px;font-weight:400}
.toolnav .more .menu a[aria-current]{background:var(--tint)}
@media(max-width:820px){.topnav{display:none}.uname{display:none}}
.switcher .menu .mobile-only,.mobile-only{display:none}
@media(max-width:820px){.switcher .menu .mobile-only{display:block}}

/* ---- tiny help icons: {% help 'key' %} - a soft "?" that opens a small card right next to it ---- */
.hlp{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:6px;border-radius:50%;
  background:var(--tint);color:var(--blue);font:700 11px/1 var(--font);cursor:pointer;vertical-align:middle;transition:background .15s,color .15s}
.hlp:hover,.hlp[aria-expanded="true"]{background:var(--blue);color:var(--on-blue)}
.hlp:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1 .hlp{width:20px;height:20px;font-size:12px;position:relative;top:-2px}
.hlp-pop{position:fixed;inset:auto;margin:0;width:max-content;max-width:min(320px,calc(100vw - 24px));padding:14px 16px 14px 36px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);
  box-shadow:0 18px 40px -18px rgba(21,23,43,.45),0 2px 6px rgba(21,23,43,.06);
  font:400 13.5px/1.6 var(--font);text-align:start;direction:rtl;letter-spacing:0;white-space:normal}
.hlp-pop::backdrop{background:transparent}
.hlp-pop b{display:block;font-size:14px;font-weight:700;margin-bottom:3px;color:var(--text)}
.hlp-pop span{display:block;color:var(--muted)}
.hlp-x{all:unset;position:absolute;top:10px;left:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;line-height:1;color:var(--muted);cursor:pointer}
.hlp-x:hover{background:var(--surface2);color:var(--text)}
@media (prefers-reduced-motion:no-preference){.hlp-pop:popover-open{animation:hlpIn .14s ease-out}}
@keyframes hlpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* data tables scroll sideways on phones instead of widening the page */
@media(max-width:820px){table.data{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}