/* ---------------------------------------------------------------
   RHG platform shell - Revo brand, enterprise layer.
   Palette and type match the control towers so the platform reads
   as one product: #0c475e deep blue, #a0d8ea sky, #ecebeb grey.
   --------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root{
  /* Native controls follow the theme too. */
  color-scheme: light dark;
  --revo-blue:#0c475e; --revo-blue-deep:#08303f; --revo-sky:#a0d8ea;
  --revo-sky-soft:#e4f3f9; --revo-grey:#ecebeb;

  --bg:var(--revo-grey); --card:#fff; --ink:#0e2733; --sub:#5c7482;
  --line:#d9dcdd; --accent:var(--revo-blue); --side:var(--revo-blue-deep);
  --side-ink:#b9d4de;
  --negative:#c0392b; --positive:#0e8a57; --warning:#b26a00;
  --radius:12px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(12,71,94,.06), 0 4px 14px rgba(12,71,94,.06);
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mark:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 70"><path d="M0 0V22.6109L22.6078 34.6779V0H0Z"/><path d="M22.6078 34.6905V34.678L0 46.7481V69.3559H22.6078V34.6905Z"/><path d="M22.6079 34.6904L46.3518 0H62.1177V34.6779L22.6079 34.6904Z"/></svg>');
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08222d; --card:#0e2f3d; --ink:#e8f2f6; --sub:#93b2bf; --line:#194354;
    --accent:var(--revo-sky); --side:#061a23;
    --revo-sky-soft:rgba(160,216,234,.14);
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.24);
  }
}
:root[data-theme="dark"]{
  --bg:#08222d; --card:#0e2f3d; --ink:#e8f2f6; --sub:#93b2bf; --line:#194354;
  --accent:var(--revo-sky); --side:#061a23; --revo-sky-soft:rgba(160,216,234,.14);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.24);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;letter-spacing:-.005em;
  -webkit-text-size-adjust:100%}
body{min-height:100dvh}
h1,h2,h3{margin:0;letter-spacing:-.02em}
a{color:var(--accent)}

/* --- the Revo mark, as a mask so it takes the tile colour --- */
.logo{width:40px;height:40px;flex:none;border-radius:11px;background:var(--revo-sky);
  color:var(--revo-blue);display:grid;place-items:center}
.logo::after{content:"";width:56%;height:56%;background-color:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
.logo.sm{width:32px;height:32px;border-radius:9px}

/* --- controls --- */
.btn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-weight:600;padding:10px 14px;border-radius:var(--radius-sm);
  cursor:pointer;min-height:42px;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
/* In dark mode the accent becomes the sky blue, so the label must go dark. */
:root[data-theme="dark"] .btn.primary{color:var(--revo-blue-deep)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.primary{color:var(--revo-blue-deep)}
}
.btn.danger{color:var(--negative);border-color:var(--negative)}
.btn:disabled{opacity:.55;cursor:default}
.btn.sm{padding:6px 10px;min-height:34px;font-size:13px}

label{display:block;font-size:12px;font-weight:700;color:var(--sub);margin:14px 0 5px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:var(--bg);color:var(--ink);
  min-height:44px}            /* 44px: comfortable tap target on phones */
input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.msg{font-size:13px;font-weight:600;min-height:18px;margin-top:12px}
.msg.err{color:var(--negative)}
.msg.ok{color:var(--positive)}
.muted{color:var(--sub)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;
  font-weight:700;background:var(--revo-sky-soft);color:var(--accent)}
.pill.off{background:transparent;border:1px solid var(--line);color:var(--sub)}

/* --- accessibility --- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}