/* Nelanor Mail console.
   Two palettes on one set of tokens. The light palette is the default; the dark one
   applies when the system prefers dark and nobody chose light, or when dark was chosen.
   The choice lives in the webmail's own colorMode cookie, so switching in either app
   switches both. Every text and border pair was checked against WCAG AA (4.5:1 text,
   3:1 borders) and the pages are audited in a browser in both themes. */
@font-face{font-family:"Sora";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/manage/static/fonts/sora-var.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/manage/static/fonts/inter-var.woff2") format("woff2")}

:root{
  color-scheme:light;
  --page:#f5f6fa; --surface:#ffffff; --surface-2:#eef0f6; --rail:#eceff6; --rail-hover:#e2e6f1;
  --strong:#0e1122; --text:#1d2346; --muted:#4f556b; --hint:#5f6478;
  --border:#dde0ea; --border-strong:#858ba0;
  --field:#ffffff; --field-border:#858ba0;
  --accent:#4b56d9; --accent-hover:#3f49c7; --on-accent:#ffffff; --link:#3d48c7;
  --ok:#1e7f45; --ok-bg:#ecfdf3; --ok-border:#86d7a8; --ok-text:#14532d;
  --bad:#b8322f; --bad-bg:#fdf0ef; --bad-border:#ecaaa7; --bad-text:#8a1f1c;
  --warn-bg:#fffbeb; --warn-border:#f0cf68; --warn-text:#7a5a00;
  --focus:0 0 0 3px rgba(75,86,217,.35);
  --shadow:0 1px 2px rgba(29,35,70,.05);
  --login-art:url("/manage/static/img/login-desktop-light.webp");
  --gradient:linear-gradient(120deg,#6e8cff 0%,#a85ff0 42%,#ff8cc8 74%,#4fe3b0 100%);
  --font-display:"Sora","Inter",system-ui,sans-serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0c0e18; --surface:#11142a; --surface-2:#1c2038; --rail:#0f1222; --rail-hover:#1c2038;
    --strong:#ffffff; --text:#dde2ee; --muted:#b3bbd0; --hint:#a3abc2;
    --border:#262b45; --border-strong:#6c74a0;
    --field:#10131f; --field-border:#5f6788;
    --accent:#5260ea; --accent-hover:#4453dc; --on-accent:#ffffff; --link:#9aa5ff;
    --ok:#34d399; --ok-bg:#0d1f18; --ok-border:#1f6b4b; --ok-text:#a7f3d0;
    --bad:#ff7a77; --bad-bg:#2a1214; --bad-border:#7d2523; --bad-text:#fecaca;
    --warn-bg:#1f1a0b; --warn-border:#6b5719; --warn-text:#fde68a;
    --focus:0 0 0 3px rgba(124,139,255,.45);
    --shadow:none;
    --login-art:url("/manage/static/img/login-desktop.webp");
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0c0e18; --surface:#11142a; --surface-2:#1c2038; --rail:#0f1222; --rail-hover:#1c2038;
  --strong:#ffffff; --text:#dde2ee; --muted:#b3bbd0; --hint:#a3abc2;
  --border:#262b45; --border-strong:#6c74a0;
  --field:#10131f; --field-border:#5f6788;
  --accent:#5260ea; --accent-hover:#4453dc; --on-accent:#ffffff; --link:#9aa5ff;
  --ok:#34d399; --ok-bg:#0d1f18; --ok-border:#1f6b4b; --ok-text:#a7f3d0;
  --bad:#ff7a77; --bad-bg:#2a1214; --bad-border:#7d2523; --bad-text:#fecaca;
  --warn-bg:#1f1a0b; --warn-border:#6b5719; --warn-text:#fde68a;
  --focus:0 0 0 3px rgba(124,139,255,.45);
  --shadow:none;
  --login-art:url("/manage/static/img/login-desktop.webp");
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--text);
  font-family:var(--font-ui);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--surface);color:var(--strong);
  padding:8px 12px;border-radius:8px;border:1px solid var(--border-strong)}
.skip:focus{top:12px}

/* ---- marks: one per theme, the other hidden ---- */
.mark-dark{display:none}
:root[data-theme="dark"] .mark-light{display:none}
:root[data-theme="dark"] .mark-dark{display:inline}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mark-light{display:none}
  :root:not([data-theme="light"]) .mark-dark{display:inline}
}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;min-height:100dvh}
.rail{background:var(--rail);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;padding:0 18px 20px}
.brand img{width:28px;height:28px}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--strong);line-height:1}
.wordmark span{font-family:var(--font-ui);font-weight:500;font-size:12.5px;
  color:var(--muted);margin-left:.3rem}
.nav a{display:block;padding:9px 18px;color:var(--muted);text-decoration:none;font-weight:500;
  border-left:3px solid transparent}
.nav a:hover{color:var(--strong);background:var(--rail-hover)}
.nav a.on{color:var(--strong);background:var(--surface);border-left-color:var(--accent)}
.rail .foot{margin-top:auto;padding:14px 18px 0;border-top:1px solid var(--border);
  color:var(--hint);font-size:12.5px;display:grid;gap:10px}
.main{padding:28px 32px 72px;max-width:1080px;width:100%}
h1{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:-.02em;
  color:var(--strong);margin:0 0 4px;text-wrap:balance}
.sub{color:var(--muted);margin:0 0 22px;max-width:70ch}
h2{font-size:16px;font-weight:600;color:var(--strong);margin:26px 0 10px}

/* ---- theme switch ---- */
.theme{display:grid;gap:6px}
.theme-label{color:var(--hint);font-size:12px}
.segmented{justify-self:start;display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;
  background:var(--surface)}
.segmented button{background:transparent;color:var(--muted);border:0;border-radius:0;
  padding:5px 10px;font-size:12.5px;font-weight:500}
.segmented button + button{border-left:1px solid var(--border)}
.segmented button:hover{color:var(--strong);background:var(--surface-2)}
.segmented button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

/* ---- cards, tiles, tables ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)}
.card .card-title{margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--strong)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 20px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  box-shadow:var(--shadow)}
.tile .n{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--strong);line-height:1.1;
  font-variant-numeric:tabular-nums}
.tile .k{color:var(--muted);font-size:12.5px;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--muted);font-weight:500;white-space:nowrap}
tr:last-child td{border-bottom:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--strong);
  word-break:break-all}
.scroll{overflow-x:auto}

/* ---- diff ---- */
.op{font-weight:700;font-family:ui-monospace,monospace}
.op.add{color:var(--ok)} .op.mod{color:var(--link)}
.op.del{color:var(--bad)} .op.same{color:var(--hint)}
tr.same td{color:var(--hint)}
.was{color:var(--hint);text-decoration:line-through}

/* ---- forms ---- */
label{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin:0 0 4px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:9px 11px;background:var(--field);color:var(--strong);
  border:1px solid var(--field-border);border-radius:8px;font:inherit;font-size:14px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--focus)}
input::placeholder{color:var(--hint);opacity:1}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row > *{flex:1 1 160px;min-width:0}
.row .narrow{flex:0 0 120px}
/* sized to the longest option, so a domain name is never cut off */
.row .fit{flex:0 1 auto}
.row .fit select{width:auto;max-width:100%}
.row .go{flex:0 0 auto}
button{font:inherit;font-size:14px;font-weight:600;border:1px solid transparent;border-radius:8px;
  padding:9px 16px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible{outline:0;box-shadow:var(--focus)}
button.primary{background:var(--accent);color:var(--on-accent)}
button.primary:hover{background:var(--accent-hover)}
button.ghost{background:var(--surface);color:var(--strong);border-color:var(--border-strong)}
button.ghost:hover{background:var(--surface-2)}
button.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
button.danger:hover{background:var(--bad-bg)}
button:disabled{cursor:progress;opacity:.7}
button[aria-busy="true"]::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.5em;
  vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button[aria-busy="true"]::after{animation:none}}

/* ---- strips and inline errors ---- */
.strip{border-radius:10px;padding:11px 14px;margin:0 0 16px;border:1px solid}
.strip.ok{background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok-text)}
.strip.bad{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad-text)}
.strip.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.strip ul{margin:6px 0 0;padding-left:20px}
.strip.secret{background:var(--surface);border-color:var(--accent);color:var(--text)}
.strip.secret .mono{font-size:15px}
.form-error{margin:10px 0 0;border-radius:8px;padding:9px 12px;border:1px solid var(--bad-border);
  background:var(--bad-bg);color:var(--bad-text);font-size:13.5px}
.form-error a{color:inherit;font-weight:600}

.muted{color:var(--muted)}
.hint{color:var(--hint);font-size:12.5px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:500;
  border:1px solid var(--border-strong);color:var(--muted)}
.pill.on{color:var(--ok);border-color:var(--ok)}
.pill.off{color:var(--hint)}
.pill.relay{color:var(--link);border-color:var(--link)}
details summary{cursor:pointer;color:var(--link);font-size:13.5px;font-weight:500;padding:6px 0}
details[open] > summary{color:var(--strong)}
.mb{border-bottom:1px solid var(--border);padding:14px 0}
.mb:first-child{padding-top:2px}
.mb:last-child{border-bottom:0}
.mb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mb-head .addr{font-weight:600;color:var(--strong);font-size:15px}

/* ---- login ---- */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;background:var(--surface)}
.login-art{background:var(--page) var(--login-art) center/cover no-repeat;border-right:1px solid var(--border)}
.login-panel{display:flex;flex-direction:column;justify-content:center;padding:6vh 6vw;max-width:520px}
.login-panel form{max-width:360px}
.login-panel .brand{padding:0 0 18px}
.login-panel .field{margin-bottom:12px}
button.front-door{width:100%;background:var(--gradient);color:#0c0e18;border:0}
button.front-door:hover{filter:brightness(1.05)}
.login-panel .theme{margin-top:28px}

@media (max-width:860px){
  /* minmax(0,1fr): without it the column grows to fit every tab in one line and the whole
     page scrolls sideways; with it the tab strip below scrolls on its own */
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:10px 12px;
    border-right:0;border-bottom:1px solid var(--border)}
  .brand{padding:0 12px 0 0}
  .nav{display:flex;gap:2px;overflow-x:auto;min-width:0;max-width:100%}
  .nav a{padding:7px 11px;border-left:0;border-bottom:3px solid transparent;white-space:nowrap}
  .nav a.on{border-left:0;border-bottom-color:var(--accent)}
  .rail .foot{margin:6px 0 0;width:100%;padding:8px 0 0;display:flex;flex-wrap:wrap;
    align-items:center;justify-content:space-between;gap:8px}
  .rail .foot .who{display:none}
  .theme{grid-auto-flow:column;align-items:center}
  .main{padding:20px 16px 60px}
  .login{grid-template-columns:1fr;grid-template-rows:30vh auto}
  .login-art{border-right:0;border-bottom:1px solid var(--border)}
  .login-panel{padding:22px 16px 40px;max-width:none}
}

/* ---- groups page ---- */
.kinds{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0}
.kinds dt{font-weight:600;color:var(--strong)}
.kinds dd{margin:0;color:var(--muted);max-width:72ch}
.checks{border:0;margin:12px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 16px}
.checks legend{color:var(--muted);font-size:12.5px;font-weight:500;margin:0 0 6px;padding:0}
label.check{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px;font-weight:400;margin:0;cursor:pointer}
label.check input{width:16px;height:16px;margin:0;accent-color:var(--accent);flex:0 0 auto}
textarea{min-height:76px;resize:vertical}
form.spaced{margin-bottom:14px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px){.kinds{grid-template-columns:1fr;gap:2px}.kinds dd{margin-bottom:10px}}