/* ==========================================================================
   Apps — the front door to emsdashboard.live. Company black and red, the same
   palette the rest of the tools use, so this reads as part of the product.

   No JavaScript on this page at all, and no inline styles, which is what lets
   netlify.toml serve it under script-src 'none'.
   ========================================================================== */
:root{
  --red:#e11d2a;  --red-dark:#a5121c;  --red-soft:rgba(225,29,42,.12);
  --ink:#12141a;  --ink-soft:#6b7280;  --ink-faint:#9aa1ac;
  --line:#e3e6ea; --card:#ffffff;      --bg:#f4f6f8;
  --radius:12px;
  --shadow:0 1px 2px rgba(18,20,26,.06), 0 4px 14px rgba(18,20,26,.05);
  --shadow-lift:0 2px 6px rgba(18,20,26,.09), 0 12px 28px rgba(18,20,26,.10);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8eaed; --ink-soft:#9aa1ac; --ink-faint:#6b7280;
    --line:#282c34; --card:#171a20; --bg:#0e1014; --red-soft:rgba(225,29,42,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.45);
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15px; line-height:1.45; min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}

/* ------------------------------------------------------------------ chrome */
.topbar{ background:var(--card); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top); }
.topbar-inner{
  max-width:1080px; margin:0 auto; display:flex; align-items:center;
  gap:11px; padding:14px 20px;
}
.mark{
  width:36px; height:36px; border-radius:9px; background:var(--red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:19px; flex:none;
}
.brand b{ display:block; font-size:16px; font-weight:750; letter-spacing:-.3px; }
.brand small{ display:block; color:var(--ink-soft); font-size:12.5px; font-weight:500; }
.redline{ height:3px; background:linear-gradient(90deg,var(--red),var(--red-dark)); }

/* -------------------------------------------------------------------- body */
.view{ max-width:1080px; margin:0 auto; padding:26px 20px 40px; }
.group + .group{ margin-top:30px; }
.grouphead{
  margin:0 0 12px; font-size:10.5px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--ink-soft);
}
.grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .grid{ grid-template-columns:1fr 1fr 1fr; } }

/* --------------------------------------------------------------- app cards */
.app{
  display:flex; gap:13px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 17px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--ink-faint); }
.app:active{ transform:translateY(0); }
.app:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.app .ico{
  font-size:21px; line-height:1; flex:none; width:38px; height:38px; border-radius:9px;
  display:grid; place-items:center; background:var(--red-soft);
}
.app .body{ min-width:0; }
.app b{ display:block; font-size:15px; letter-spacing:-.2px; margin-bottom:3px; }
.app .what{ display:block; font-size:13px; color:var(--ink-soft); }

.tags{ display:flex; align-items:center; gap:7px; margin-top:9px; flex-wrap:wrap; }
.tag{
  font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; background:var(--red-soft); color:var(--red);
}
.tag.quiet{ background:transparent; color:var(--ink-faint); border:1px solid var(--line); }
.path{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:11.5px; color:var(--ink-faint);
}

.foot{
  margin:30px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-soft); max-width:70ch;
}

/* ------------------------------------------ the link back, used by every app */
/* Kept here as the reference. Each app carries its own copy sized to its own
   header, because they do not share a stylesheet. */
.applink{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font:700 12px var(--font); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:7px; padding:5px 10px; white-space:nowrap;
}
.applink:hover{ color:var(--red); border-color:var(--red); }

/* the Reset password button on the right of the home page's top bar */
.topbar-right{ margin-left:auto; }

/* --------------------------------------------- who is signed in / sign out */
.wholine{ display:flex; align-items:center; gap:10px; }
.who{ font-size:12.5px; color:var(--ink-soft); max-width:200px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
button.applink.signout{ font:inherit; cursor:pointer; }
@media (max-width:560px){ .who{ display:none; } }


/* ==========================================================================
   Quick links — the office's shared shortcuts at the top of the menu.
   Deliberately small and flat: these sit ABOVE the app cards, and anything
   with the visual weight of a card would bury the apps underneath them.
   ========================================================================== */
.group.links .grouphead{ display:flex; align-items:center; gap:10px; }
.linkbtn{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--ink-soft); background:var(--card);
  border:1px solid var(--line); border-radius:7px; padding:4px 10px; cursor:pointer;
}
.linkbtn:hover{ color:var(--ink); border-color:var(--ink-faint); }
.linkbtn.go{ background:var(--red); border-color:var(--red); color:#fff; }
.linkbtn.go:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.linkrow{ display:flex; flex-wrap:wrap; gap:8px; }
.linkchip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:7px 7px 7px 13px; max-width:100%;
}
.linkchip a{
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.linkchip a:hover{ color:var(--red); }
.linkchip .drop{
  border:0; background:transparent; color:var(--ink-faint); cursor:pointer;
  font-size:15px; line-height:1; padding:2px 5px; border-radius:50%;
}
.linkchip .drop:hover{ color:var(--red); background:var(--red-soft); }
.linkchip.empty{ border-style:dashed; color:var(--ink-soft); font-size:13px; padding:7px 13px; }
.linkform{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.linkform input{
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:8px 11px; flex:1 1 220px; min-width:0;
}
.linkform input:focus{ outline:2px solid var(--red); outline-offset:-1px; border-color:var(--red); }
.linkerr{ margin:0 0 10px; font-size:13px; color:var(--red); }